

<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;
}

/* 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{
    width :100%;
 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);
}
/* Button Styles */
.btn-primary {
    background: linear-gradient(145deg, #007bff, #0056b3); /* Gradient background for a sleek look */
    color: #ffffff; /* Text color */
    padding: 14px 28px; /* Padding for a more prominent 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.1); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}

.btn-primary:hover {
    background: linear-gradient(145deg, #0056b3, #004085); /* 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;
}
/* Th */
#service-table tr th{
 border-bottom-style:none !important;
}

/* Service table */
#service-table{
 width:100% !important;
}
.btn-secondary{
    background-color: #f0f0f0;
    color: #333333;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
  }
.form-control{

    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 .form-group .dropdown-toggle{
    width: 100% !important;
    background-color: #e9ecef !important; /* Light input background */
    border-radius: 8px !important;
    padding: 12px !important;
    color: #333 !important; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    min-height: 50px !important; 
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100% !important;
}
.btn-danger {
    background: linear-gradient(145deg, #dc3545, #c82333); /* 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.1); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}

.btn-danger:hover {
    background: linear-gradient(145deg, #c82333, #bd2130); /* Darker gradient on hover */
    transform: translateY(-2px); /* Slight lift effect */
}
</style>
<style>
    /* Add responsive design for the table */
    @media (max-width: 768px) {
        .table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .table {
            width: 100%;
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }
        .table th, .table td {
            white-space: nowrap;
        }
    }

    /* Adjust table header style for small screens */
    @media (max-width: 768px) {
        #service-table tr th {
            padding: 10px;
            text-align: center;
        }
    }

    /* Loading spinner */
    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #007bff;
        border-radius: 50%;
        animation: spin 2s linear infinite;
        display: inline-block;
        margin-left: 5px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Hide loading spinner when balance is loaded */
    .balance-loaded .loading-spinner {
        display: none;
    }
</style>
<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"
                <?php if ($panel["panel_type"] == "Child") : ?>
                    disabled title="You cannot add a provider in Child Panel."
                <?php endif; ?>
            >
                Add Provider
            </button>
        </div>
    

    <table class="table table-bordered table-striped providers_list" id="service-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Provider</th>
                <th>Balance</th>
                <th></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 echo ($provider["status"] == 2) ? 'grey' : ''; ?>">
                        <div style="word-break: break-all;">
                            <?php echo $provider["api_name"]; ?>
                        </div>
                    </td>
                    <td>
                        <div style="width: 100px;">
                            <?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>";
                                } else {
                                    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));
                                }
                            } else {
                                echo '<div class="tooltip5">  
                                    <span class="fas fa-info-circle"></span>
                                    <span class="tooltiptext5">Balance info not available for that provider</span>
                                </div>';
                            }
                            ?>
                        </div>
                    </td>
                    <td>
                        <div class="dropdown">
                        <button type="button" class="btn btn-secondary btn-xs dropdown-toggle btn-xs-caret" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></button>
                <ul class="dropdown-menu">
                     <li>
                      <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalDiv" data-action="edit_provider" data-id="<?= $provider["id"] ?>">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                    </li>
                            <li>
                        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalDiv" data-action="capture_description" data-id="<?= $provider["id"] ?>">
                                        <i class="fa fa-download" aria-hidden="true"></i> Capture Description
                                    </a>
                    </li> 
                       
                        <?php if ($panel["panel_type"] != "Child"): ?>
                         <li>
                                        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#confirmChange" data-href="<?= site_url("$rentaladmin/settings/providers/delete/".$provider["id"]) ?>">
                                            <i class="fas fa-trash"></i> Delete
                                        </a>
                                        </li>
                                    <?php endif; ?>
                     
                               
                                
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
</div>

<!-- ✅ Confirm Delete Modal -->
<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-danger" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>
</div>

<?php
function kontrol($api_url, $api_key) {
    $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',
    );

    if (is_array($_post)) {
        foreach ($_post as $name => $value) {
            $_post[] = $name . '=' . urlencode($value);
        }
        curl_setopt($ch, CURLOPT_POSTFIELDS, join('&', $_post));
    }

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

    return $result;
}
?>
