<style>
   .label-id {

    border: 1px solid #ddd;

    background: 0 0;
    min-width: 30px;
    display: inline-block;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: 1px;
    border-radius: .25em;
}

</style>
<style>
body{
 font-family:'Inter', sans-serif;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            
}
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    
}
.table th, .table td {
    border: 1px solid #444;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}
.table th {
    
    font-weight: bold;
}


.col-md-5 .settings-header__table .m-b{
  background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.col-md-5 .settings-header__table .m-b:hover {
    background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
/* Button */
.form .modal-footer .btn-primary{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.form .modal-footer .btn-primary:hover {
    background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
/* Button */
.form .modal-footer .btn-danger{
 background: linear-gradient(145deg, #c71f1f, #e04d4d); /* Gradient background for a professional look */
  color: #ffffff; /* Text color */
  padding: 14px 28px; /* Padding for consistency with primary button */
  font-size: 14px; /* Font size */
  font-weight: 500; /* Font weight */
  border: none; /* Remove default border */
  border-radius: 5px; /* Slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}
.form .modal-footer .btn-danger:hover {
  background: linear-gradient(145deg, #e04d4d, #f76c6c); /* Darker gradient on hover */
  transform: translateY(-2px); /* Slight lift effect */
}
/* Input */
.form .modal-body input[type=password]{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
/* Modal footer */
.form .modal-body .modal-footer{
 padding-left:0px;
 padding-bottom:0px;
}

/* Select */
.form .modal-body select{
 border-style:none;
}

/* Centred block */
.form h2 center{
 font-size:18px;
 line-height:1.42em;
}

/* Th */
#service-table tr th{
 border-style:solid;
 border-bottom-style:solid;
 border-bottom-color:#020202;
 background-image:linear-gradient(145deg, rgb(0, 123, 255) 0%, rgb(0, 86, 179) 100%);
 color:#ffffff;
}

/* Th */
.container .row div .settings-header__table .col-md-5 #service-table thead tr th{
 border-width:1px !important;
}

/* Link */
.nav-stacked .active a{
 background-image:linear-gradient(145deg, rgb(0, 123, 255) 0%, rgb(0, 86, 179) 100%);
}

#service-table tr th{
 border-top-color:#020202;
}
/* Input */
#modalDiv .modal-lg .modal-content #modalContent .form .modal-body .form-group input[type=text]{
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
.form .modal-body select{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
/* Column 8/12 */
#modalContent .col-md-8{
 background-color:#ffffff;
 width:100%;
}

#modalDiv .modal-lg .modal-header{
 background-color:#ffffff;
}

/* Button */
.form .form-group .dropdown-toggle{
 left:5px;
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
}

/* Select */
.form .form-group select{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Input */
.form .form-group input[type=text]{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Button */
.form .form-group .btn-success{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.form .form-group .btn-success:hover {
    background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
.btn-primary{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
   
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
    background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
.btn-default{
 background: linear-gradient(145deg, #c71f1f, #e04d4d); /* Gradient background for a professional look */
  color: #ffffff; /* Text color */
  position:relative;
 
  font-size: 14px; /* Font size */
  font-weight: 500; /* Font weight */
  border: none; /* Remove default border */
  border-radius: 5px; /* Slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}
.btn-default:hover {
  background: linear-gradient(145deg, #e04d4d, #f76c6c); /* Darker gradient on hover */
  transform: translateY(-2px); /* Slight lift effect */
}
/* Th */
#service-table tr th{
 text-transform:uppercase;
 text-align:center;
 background-image:none !important;
 background-color:#f8f8f8;
 color:#333 !important;
}


</style>
<div class="">
            <?php if($panel["panel_type"] != "Child" ): ?>

<div class="settings-header__table">

            <div class="col-md-5">
	<div class="settings-header__table">
		<button type="button" class="btn btn-default m-b" data-toggle="modal" data-target="#modalDiv" data-action="new_provider">Add Provider</button>
	</div>

<?php endif; ?>

<table class="table providers_list" id="service-table">
    <thead>
    <tr>
<th>ID</th>
<th>Provider</th>
<th>Balance</th>
<th>Actions</th>

</tr>
</thead>
<tbody>

<?php foreach ($providersList as $provider) : ?>


<tr      data-provider-id="<?php echo $provider["id"]; ?>" id="<?php echo $provider["api_name"]; ?>"   class="list_item ">
<td><?php echo $provider["id"]; ?> </td>
	<td class="<?php if( $provider["status"] == 2 ): echo "grey "; endif; ?>" data-label="Service" class="table-service" data-filter-table-service-name="true" class="name"><div style="word-break: break-all;"><?php echo $provider["api_name"]; ?></div></td>

	<td>
<div style="width:70px;">
<?php



		$api_id = $provider["id"];
		$api_url = $provider["api_url"];

		$api_key = $provider["api_key"];

 if( $provider["status"] == "1" ): 
$smmapi   = new SMMApi();
$veri = $smmapi->action(array('key' =>$api_key,'action' =>'balance'),$api_url);

if($veri->currency == $settings["site_base_currency"]){
echo format_amount_string($settings["site_base_currency"],from_to(get_currencies_array("all"),$veri->currency,$settings["site_base_currency"],$veri->balance))."<br>";
}
if($veri->currency !== $settings["site_base_currency"]){

echo "≈ ".format_amount_string($settings["site_base_currency"],from_to(get_currencies_array("all"),$veri->currency,$settings["site_base_currency"],$veri->balance))."<br>";

}

echo "<div class='service-block__provider-value'>".str_replace("≈ ","",format_amount_string($veri->currency,$veri->balance))."</div>";



 if(!empty($veri->error)) : 
$update = $conn->prepare("UPDATE service_api SET status=:status WHERE id=:id ");
$update->execute(array("id"=>$api_id,"status"=> 2 ));

endif; 


else:

echo '<div class="tooltip5">  <span class="fas fa-info-circle"></span><span class="tooltiptext5">Balance info not available for that provider</span></div>'  ;
 
 endif; 
?>
</div>
</td>
<td>
<div style="width:60px;font-size:17px;">
<span style="color:#3A86FF;" data-toggle="modal" data-target="#modalDiv" data-action="edit_provider" data-id="<?= $provider["id"]?>"><i class="fas fa-edit"></i></span>

<?php if($panel["panel_type"] != "Child" ): ?>
<a style="color:#D90429;display:inline-block;" href="#" data-toggle="modal" data-target="#confirmChange" data-href="<?=site_url("admin/settings/providers/delete/".$provider["id"])?>">
<i class="fas fa-trash"></i>
</a>
<?php endif; ?>

<span data-toggle="modal" data-target="#modalDiv" data-action="capture_description" data-id="<?= $provider["id"]?>" style="display:inline-block;color:#FCA311;">
    <i class="fa fa-download" aria-hidden="true"></i>
</span>
</div>
</td>


	<input type="hidden" name="privder_changes" value="privder_changes">
<?php endforeach; ?>
</tbody>
		</table>
	</div>
</div>
</div>






<?php

function kontrol($api_url, $api_key, $api_limit)
{
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $api_url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);

	$_post = array(
		'key' => $api_key,
		'action' => 'balance',
		'api_limit' => $api_limit,
	);

	if (is_array($_post)) {
		foreach ($_post as $name => $value) {
			$_post[] = $name . '=' . urlencode($value);
		}
	}

	if (is_array($_post)) {
		curl_setopt($ch, CURLOPT_POSTFIELDS, join('&', $_post));
	}

	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

?>

<div class="modal modal-center fade" id="confirmChange" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
   <div class="modal-dialog modal-dialog-center" role="document">
      <div class="modal-content">
         <div class="modal-body text-center">
            <h4>Are you sure you want to delete ?</h4>
            <div align="center">
               <a class="btn btn-primary" href="" id="confirmYes">Yes</a>
               <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
         </div>
      </div>
   </div>
</div>