<?php session_start();?>
<?php include'includes/header.php'; ?>
<?php include'includes/sidebar.php';?>
<?php include'includes/functions.php';?>
<?php include'includes/navbar.php'; ?>

<!-- This page unique styles -->
<style>
/*Core setup styles*/
.sideNav{
    height: 100%;
    /*width: 220px;*/
    position: fixed;
    z-index: 9;
}
.navbar{
    top: 0;
    position: fixed;
    z-index: 9999;
}
.the-links{
    padding-top: 10px;
}
/*.nav-links{
    height: 100%;
    overflow-y: auto;
}*/
.insider{
    margin-top: 10px;
    position: relative;
}
.card{
    height: auto;
}
.cat-pag{
    position: relative;
}
.cat-page-header{
    position: sticky;
    width: 100%;
    height: 50px;
    background:#F7F9FB; 
    top: 60px;
    right: 60px;
    z-index: 1;
}
@media(max-width: 992px){
.insider{
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    }        
}
.card-header h5{
    font-size: 14px;
}

@media(max-width: 992px){
    .negative h5{
        font-size: 15px;
    }
    .negative a{
        font-size: 14px;
    }
    .negative a i{
        font-size: 14px;
    }
}
.success_stutus{
    background: #E8FCEF; color: #4ECA74;
}
.error_status{
    background: #F8D7DA; color: #90151C;
}
.negative{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.negative i{
    font-size: 70px;
    color: #FE9C13;

}
.negative h5{
    font-size: 20px;
    color: #FE9C13;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif; 
}
.negative a{
    padding: 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    border-radius: 5px;
    /*font-weight: bold;*/
}
.negative a i{
    font-size: 17px;
    color: #fff;
}
.profile-card{
    width: 100%;
    height: 150px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-radius: 10px;
}
.profile-head{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile-head img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}
.profile-head h4{
    font-size: 16px;
    font-weight: bold;
    font-family: sans-serif;
}
.dark-list{
    width: 100%;
    padding: 10px;
    background: #1B263B;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    color: #fff;
}
table thead {
  background: #1B263B;
  color: #fff;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.nav-tabs .nav-link {
  border: none;
  color: #555;
  font-weight: 600;
}
.nav-tabs .nav-link.active {
  color: #0d6efd;
  border-bottom: 3px solid #0d6efd;
  background: none;
}
.tab-content {
  background: #fff;
  border-radius: 6px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}
.activity{
    display: flex;
    align-items: center;
    gap:10px;
}
.activity h6{
    font-size: 12px;
    font-weight: bold;
}
.activity div{
    margin-top: -6px;
    width: 10px;
    height: 10px;
    background: green;
    border-radius: 50%;
}
.checkBoxes:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media(max-width: 992px){
    .negative h5{
        font-size: 15px;
    }
    .negative a{
        font-size: 14px;
    }
    .negative i{
        font-size: 20px;
    }
    .negative a i{
        font-size: 14px;
    }

    .negative button{
        font-size: 14px;
    }
    .negative button i{
        font-size: 14px;
    }
    .profile-head img{
        width: 40px;
        height: 40px;
    }
    .profile-head h4{
        font-size: 14px;
    }
    .profile-head h6{
        font-size: 12px;
    }
    .card-header h6{
        font-size: 12px;
    }
    .card-header span{
        font-size: 12px;
    }

}
</style>
<?php

$varAdmin = $adminNo;
$sql = "SELECT * FROM student 
        WHERE adminNo = ? ";

$stmt = $pdo->prepare($sql);
$stmt->execute([$varAdmin]);

if ($stmt->rowCount() > 0) {
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $surname = $row['surname'];
    $otherName = $row['otherNames'];
    $class = $row['class'];
    $adminNo = $row['adminNo'];
    $class = $current_class;

    // Get the student image
    $stdImg = "SELECT * FROM student_image WHERE adminNo = ?";
    $imgStmt = $pdo->prepare($stdImg);
    $imgStmt->execute([$adminNo]);
    $imgRow = $imgStmt->fetch(PDO::FETCH_ASSOC);
    $profileImg = $imgRow['photo_path'];

} 
else{
    $surname = "No Surname";
    $otherName = "No Othernames";
    $class = 'Unidentified Class';
    $adminNo = 'Unidentified Adminssion No.';
    $profileImg = 'avatar_male.png';
    $_SESSION['message'] = 'Student Not Found';
    $_SESSION['type'] = 'error';?>
    <script type="text/javascript">
      setTimeout("location.href='javascript:history.back()';", 2000);
    </script><?php
}   


// Settings for Package
if ($class == "PRIMARY1A" || $class == "PRIMARY1B" || $class == "PRIMARY1C" || $class == "PRIMARY1"
    || $class == "PRIMARY2A" || $class == "PRIMARY2B" || $class == "PRIMARY2C" || $class == "PRIMARY2D"
    || $class == "PRIMARY3A" || $class == "PRIMARY3B" || $class == "PRIMARY3C" || $class == "PRIMARY3D"
    || $class == "PRIMARY4A" || $class == "PRIMARY4B" || $class == "PRIMARY4C" || $class == "PRIMARY4D"
    || $class == "PRIMARY5A" || $class == "PRIMARY5B" || $class == "PRIMARY5C" || $class == "PRIMARY5D"
) {
    $packageClass = 'Basic';
}else{
    $packageClass = 'Junior';
}

?>

<div id="notification-containers" class="notification-containers"></div>
<div class="insider">
    <div class="container">
        <div class="cat-pag">
            <div class="profile-card">
                <div class="profile-head">
                    <div class="" style="display: flex; justify-content: space-between;">
                        <img src="images/avatar/<?=$profileImg?>">
                        <div>
                            <h4><?php echo strtoupper($surname) ?>, <?=$otherName?></h4>
                            <h6><?=$adminNo?> | <?=$class?></h6> 
                        </div>
                    </div>
                    <div style="" class="activity">
                        <h6>Status: </h6>
                        <div></div>
                    </div>
                </div>
                <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                  <h6 class="mb-0"><i class="fa fa-money-bill-wave"></i> Payment Portal</h6>
                  <span>Session: <?=$current_session?> | Term: <?=$current_term?></span>
                </div>
            </div>
            
            <div class="card mt-3">
                <!-- ===== Nav Tabs ===== -->
                <ul class="nav nav-tabs justify-content-center mb-3" id="studentTabs" role="tablist">
                  <li class="nav-item">
                    <button class="nav-link active" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments"
                      type="button" role="tab"><i class="fa fa-id-card"></i> Payments</button>
                  </li>
                  <li class="nav-item">
                    <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history"
                      type="button" role="tab"><i class="fa fa-history"></i> History</button>
                  </li>
                  <li class="nav-item">
                    <button class="nav-link" id="results-tab" data-bs-toggle="tab" data-bs-target="#results"
                      type="button" role="tab"><i class="fa fa-chart-line"></i> School Acct</button>
                  </li>
                </ul>
                <!-- ===== Student Payment Page ===== -->
                <div class="container mt-2">
                  <div class="shadow-sm border-0 rounded">
                    <!-- ===== Tab Contents ===== -->
                    <div class="tab-content" id="studentTabsContent">
                        <!-- Profile Tab -->
                        <div class="tab-pane fade show active" id="payments" role="tabpanel">
                          <!-- Fee Packages -->
                          <div class="" style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
                            <h6 class="mt-3 mb-2"><i class="fa fa-box"></i> Fee Packages</h6>
                            <h6 class="mt-3 mb-2 d-flex align-items-center">
                              <i class="fa fa-credit-card me-2 text-primary"></i> 
                              <strong>Amount to Pay:</strong> 
                              <span id="DisplayAmount" class="ms-2 fw-bold text-success">₦0.00</span>
                            </h6>
                          </div>
                          <form action="" method="POST">
                            
                            <!-- Payment Confirmation Modal -->
                            <div id="modal-payment" class="modal">
                                <div class="modal-content2" style="margin-top:110px;">
                                    <div class="head">
                                        <div style="display: flex; align-items: center; gap:10px;">
                                            <i class="fa fa-exclamation-triangle"></i>
                                            <strong>Payment Pending!</strong>
                                        </div>
                                        <div>
                                            <button class="btn text-white"
                                            type="button" 
                                            onclick="closeModal('modal-payment')"
                                            >&times;
                                            </button>
                                        </div>
                                    </div>
                                    <div class="modal-body">
                                        <h6 class="fw-semibold">
                                            Action required for the payment amount of 
                                            <span id="showAmount" class="text-success">₦0.00</span>
                                            <input type="hidden" name="amount_paid" id="hideAmount">
                                        </h6>

                                        <div class="muted-info">
                                            <p class="text-muted mb-3">
                                                Please choose your preferred <strong>payment method</strong> below to complete your transaction.
                                            </p>
                                        </div>
                                        
                                        <div class="my-input mt-3">
                                            <label class="form-label fw-semibold">
                                                <i class="fa fa-credit-card me-1 text-primary"></i> Select Payment Method
                                            </label>
                                            <select name="method" required="">
                                                <option value="" hidden="">Select Method</option>
                                                <option value="Cash">Cash</option>
                                                <option value="Bank Deposit">Bank Deposit</option>
                                                <option value="Transfer">Transfer</option>
                                            </select>
                                        </div>
                                        <div class="button-pay mt-3">
                                            <button class="btn" name="pay-btn">
                                                <i class="fa fa-check-circle me-2"></i> 
                                                Pay & Continue
                                            </button>
                                        </div>
                                        <small class="d-block mt-3 text-muted">
                                            <i class="fa fa-info-circle me-1"></i>
                                            The total amount to be paid is shown above. If you're not ready to proceed, simply close this notification.
                                        </small>
                                    </div>
                                    <!-- <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" onclick="closeModal('modal-payment')">No, Cancel</button>
                                        <button type="submit" name="pay-btn" class="btn btn-success">Continue</button>
                                    </div> -->
                                </div>
                            </div>

                            <table class="table table-bordered table-striped">
                                <thead class="">
                                  <tr>
                                    <th>#</th>
                                    <th><input type="checkbox" id="SelectAllBoxes"></th>
                                    <th>Fee Description</th>
                                    <th>Amount (₦)</th>
                                    <th>Status</th>
                                  </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $srn = 0;
                                    $sqlpac = "SELECT * FROM packages WHERE package_name = ? 
                                        AND session = ? AND term = ?";
                                    $packStmt = $pdo->prepare($sqlpac);
                                    $packStmt->execute([$packageClass, $current_session, $current_term]);
                                    while ($packRow = $packStmt->fetch(PDO::FETCH_ASSOC)) {
                                        $items = $packRow['items'];
                                        $price = $packRow['price'];
                                        $srn ++;

                                    // valiate the table payment list
                                    $vaPay = "SELECT * FROM payment_history WHERE adminNo = ?
                                    AND items = ? AND class = ? AND term = ? AND session = ?";
                                    $vaStmt = $pdo->prepare($vaPay);
                                    $vaStmt->execute([$varAdmin, $items, $class,
                                        $current_term, $current_session]);
                                    if ($vaStmt->rowCount() > 0) {
                                        // There is history
                                        $vaRow = $vaStmt->fetch(PDO::FETCH_ASSOC);
                                        $paymentItems = $vaRow['items'];
                                        $paymentAmt = $vaRow['amount'];

                                        if ($items == $paymentItems) {
                                            $checkboxStatus = "disabled";
                                            $payStatus = 
                                                '<span class="badge bg-success">Paid</span>';
                                        }
                                    }else{
                                    // There is no payment history for student
                                        $checkboxStatus = "";
                                        $payStatus = 
                                                '<span class="badge bg-danger">Not Paid</span>';
                                    }
                                    ?>
                                  <tr>
                                    <td><?=$srn?></td>
                                    <td>
                                        <input type="checkbox" 
                                        name="checkBoxArray[]" 
                                        <?=$checkboxStatus?>
                                        value="<?= htmlspecialchars($items) ?>"
                                        id="price-<?=$srn?>"
                                        data-price="<?= $price ?>" 
                                        class='checkBoxes'
                                        >
                                    </td>
                                    <td><?=$items?></td>
                                    <td><?php echo number_format($price, 2);?></td>
                                    <td><?=$payStatus?></span></td>
                                  </tr>
                                  <?php } ?>
                                  
                                </tbody>
                            </table>
                          </form>

                          <!-- Payment Summary -->
                          <?php
                          $totalSql = "SELECT SUM(price) AS totalPayment FROM packages 
                                WHERE package_name = ? 
                                AND term = ? AND session = ? ";
                            $totStmt = $pdo->prepare($totalSql);
                            $totStmt->execute([$packageClass, $current_term, $current_session]);
                            $totRow = $totStmt->fetch(PDO::FETCH_ASSOC);
                            $totalPayment = $totRow['totalPayment'];

                            // Total Paid Amount
                          $paidSql = "SELECT SUM(amount) AS paidAmt FROM payment_history
                                WHERE adminNo = ? AND class = ? AND term = ? AND session = ?";
                            $paidStmt = $pdo->prepare($paidSql);
                            $paidStmt->execute([$varAdmin, $class, 
                                $current_term, $current_session]);
                            $paidRow = $paidStmt->fetch(PDO::FETCH_ASSOC);
                            $totalPaid = $paidRow['paidAmt'];

                            // Amount to balance
                            $balance = $totalPayment - $totalPaid;

                          ?>
                          <div class="mt-3 text-end">
                            <h6>Total: ₦<?php echo number_format($totalPayment, 2); ?></h6>
                            <h6>Paid: ₦<?php echo number_format($totalPaid, 2); ?></h6>
                            <h5 class="text-danger">Balance: ₦<?php echo number_format($balance, 2); ?>
                            </h5>
                            <!-- <button class="btn btn-primary mt-2" onclick="handlePayment()">
                              <i class="fa fa-credit-card"></i> Pay Now
                            </button> -->
                            <form action="" method="POST">
                                <button type="submit" class="btn btn-primary mt-2" name="try-btn">
                                    <i class="fa fa-credit-card"></i> Pay Now
                                </button>
                            </form>
                          </div>
                        </div>

                        <!-- Payments Tab -->
                        <div class="tab-pane fade" id="history" role="tabpanel">
                            
                      <!-- Payment History -->
                      <h6><i class="fa fa-history"></i> Payment History</h6>
                      <table class="table table-sm table-bordered">
                        <thead>
                          <tr>
                            <th>Date</th>
                            <th>Items</th>
                            <!-- <th>Reference</th> -->
                            <th>Class</th>
                            <th>Term</th>
                            <th>Amount</th>
                            <!-- <th>Method</th> -->
                            <th>Status</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                            <?php
                            // Get the payment history
                            $historySql = "SELECT * FROM payment_history WHERE adminNo = ? order by paymentId DESC";
                            $historyStmt = $pdo->prepare($historySql);
                            $historyStmt->execute([$varAdmin]);
                            if ($historyStmt->rowCount()> 0) {
                                
                                while ($historyRow = $historyStmt->fetch(PDO::FETCH_ASSOC)) {
                                    $paidItems = $historyRow['items'];
                                    $amtPaid = $historyRow['amount'];
                                    $paidClass = $historyRow['class'];
                                    $paidTerm   = $historyRow['term'];
                                    $paidSession = $historyRow['session'];
                                    $paidMethod    = $historyRow['method'];
                                    $paystatus  = trim($historyRow['status']);
                                    $paidDate   = $historyRow['created'];
                                    $refId      = $historyRow['reference']; 

                                    if ($paystatus =='Success'){
                                        $paidBadge = '<span class="badge bg-success">Success</span>';
                                    }else{
                                        $paidBadge = '<span class="badge bg-danger">Failed</span>';
                                    }
                                ?>
                              <tr>
                                <td>
                                    <?php echo $formatDate = date('F j, Y', strtotime($paidDate));?></td>
                                <td><?=$paidItems?></td>
                                <!-- <td>#INV1345</td> -->
                                <td><?=$paidClass?></td>
                                <td><?=$paidTerm?></td>
                                <td>₦<?php echo number_format($amtPaid, 2); ?></td>
                                <!-- <td><?=$paidMethod?></td> -->
                                <td><?=$paidBadge?></td>
                                <td>
                                    <form action="" method="POST">
                                        <input type="hidden" name="ref" value="<?=$refId?>">
                                        <button class="btn btn-sm info text-white"
                                        name="view-invoice-btn">View Receipt
                                        </button>
                                    </form>
                                </td>                                    
                              </tr>
                            <?php }

                            }else{
                                echo '<span class="text-center text-danger">No Payment History Found</span>';
                            } ?>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
<?php
if (isset($_POST['try-btn'])) {
    $msgTitle = 'Payment Not Allowed';
    $msgBody = "Sorry, you are not allowed to pay any payment from here. 
                Please contact your ICT Admin";
    $msgCloseBtn = "Okay, Close";
    require 'includes/error_alert.php';
}

if (isset($_POST['pay-btn'])) {
   $selectedItems = $_POST['checkBoxArray'];
   $paymentMethods = $_POST['method'];
   $amount_paid     = $_POST['amount_paid'];
   $invoiceNo = 'INV-' . str_pad(mt_rand(1, 999999), 6, '0', STR_PAD_LEFT);
    if (!empty($paymentMethods)) {
       
       foreach ($selectedItems as $dataItems) {
           // Getting the actal prices for the selected items
        $sqlAmt = "SELECT price FROM packages WHERE items = ?
                AND package_name = ? AND session = ? AND term = ?";
        $amtStmt = $pdo->prepare($sqlAmt);
        $amtStmt->execute([$dataItems, $packageClass, 
            $current_session, $current_term]);
        $amtRow = $amtStmt->fetch(PDO::FETCH_ASSOC);
        $itemsPrice = $amtRow['price'];

        // Save details to the history
        $created = date('Y-m-d');
        $savePay = "INSERT INTO payment_history(adminNo, items, 
                amount, class, term, session, method, status, reference, created)
            VALUES(?,?,?,?,?,?,?,?,?,?)";
        $savepayStmt = $pdo->prepare($savePay);
        $payStatus = 'Success';
        $savepayStmt->execute([$varAdmin, $dataItems, 
                                $itemsPrice, $class, 
                                $current_term, $current_session, 
                                $paymentMethods, $payStatus, $invoiceNo, $created]);
        
       }

       $msgTitle = 'Payment Successful';
       $msgBody = "Your have succssfully completed your payment. Please explore the buttons below";
       $msgCloseBtn = "Close";
       $msgActionBtn = "Print Receipt";
       $msgActionBtn2 = "Download Receipt";
       require 'includes/payment-alert.php';

    }else{
    $_SESSION['message'] = 'Payment method is empty';
    $_SESSION['type'] = 'error';
   }

}

if (isset($_POST['view-invoice-btn'])) {
    $refId = $_POST['ref'];

    // Track and display receipt through refid
    $refSql = "SELECT * FROM payment_history WHERE reference = ?";
    $refQuery = $pdo->prepare($refSql);
    $refQuery->execute([$refId]);

    $refRow = $refQuery->fetch(PDO::FETCH_ASSOC);
        $refClass = $refRow['class'];
        $refTerm = $refRow['term'];
        $refSession = $refRow['session'];
        $refMethod = $refRow['method'];
        $refStatus = $refRow['status'];
        $refDate    = $refRow['created'];

    $msgTitle = 'Payment Successful';
    $msgBody = "Your have succssfully completed your payment. Please explore the buttons below";
    $msgCloseBtn = "Close";
    $msgActionBtn = "Print Receipt";
    $msgActionBtn2 = "Download Receipt";
    require'includes/print_history.php';
    
}


?>
<style type="text/css">
.class-box{
    margin-top: 20px;
    width: 100%;
    height: 100px;
    display: flex;
    gap:25px;
    padding-bottom: 20px;
    overflow-x: auto;
}
.sing-box{
    padding: 5px;
    border:1px solid #ccc;
    border-radius: 5px;
}
</style>


<?php include 'includes/footer.php'; ?>


<!-- DataTables & jQuery -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const displayAmount = document.getElementById('DisplayAmount');
  const showAmount = document.getElementById('showAmount');
  const hideAmount = document.getElementById('hideAmount');
  const checkboxes = document.querySelectorAll('.checkBoxes');
  const selectAll = document.getElementById('SelectAllBoxes');
  let totalAmount = 0;

  // ✅ Update displayed total
  function updateDisplay() {
    const formatted = '₦' + totalAmount.toLocaleString('en-NG', { minimumFractionDigits: 2 });
    displayAmount.textContent = formatted;
    showAmount.textContent = formatted;
    hideAmount.value = formatted;
  }

  // ✅ Handle individual checkbox change
  checkboxes.forEach(box => {
    box.addEventListener('change', function() {
      if (this.disabled) return; // ignore disabled (paid) boxes
      const price = parseFloat(this.dataset.price);

      if (this.checked) {
        totalAmount += price;
      } else {
        totalAmount -= price;
        selectAll.checked = false;
      }
      updateDisplay();
    });
  });

  // ✅ Handle “Select All”
  selectAll.addEventListener('change', function() {
    totalAmount = 0;
    let skipped = false; // <-- Track if any disabled box is skipped

    checkboxes.forEach(box => {
      if (!box.disabled) {
        box.checked = selectAll.checked;
        if (selectAll.checked) totalAmount += parseFloat(box.dataset.price);
      } else {
        skipped = true; // <-- mark that we skipped a disabled item
      }
    });

    updateDisplay();

    // ✅ Notify if some boxes were skipped
    if (selectAll.checked && skipped) {
      showCustomAlert("Some items were already paid and won’t be selected.");
    }
  });
});


// ✅ When clicking the Pay button
function handlePayment() {
  const selected = document.querySelector("input[name='checkBoxArray[]']:checked");
  if (!selected) {
    showCustomAlert("Please select one of the available items to continue.");
    return;
  }
  openModal('modal-payment');
}


// ✅ Reusable toast alert
function showCustomAlert(message) {
  const alertBox = document.createElement('div');
  alertBox.style.position = 'fixed';
  alertBox.style.top = '20px';
  alertBox.style.left = '50%';
  alertBox.style.transform = 'translateX(-50%)';
  alertBox.style.background = '#FE9C13';
  alertBox.style.color = '#fff';
  alertBox.style.padding = '12px 25px';
  alertBox.style.borderRadius = '6px';
  alertBox.style.fontSize = '14px';
  alertBox.style.fontWeight = '500';
  alertBox.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)';
  alertBox.style.zIndex = '10000';
  alertBox.style.transition = 'opacity 0.4s ease';
  alertBox.textContent = message;

  document.body.appendChild(alertBox);
  setTimeout(() => {
    alertBox.style.opacity = '0';
  }, 2500);
  setTimeout(() => {
    alertBox.remove();
  }, 3000);
}
</script>


<script>

    function openModal(id) {
        document.getElementById(id).style.display = "block";
    }

    function closeModal(id) {
        document.getElementById(id).style.display = "none";
    }

   
</script>


<!-- Modal Styling -->
<style>
.modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}
.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    animation: fadeIn 0.3s;
}
@media(max-width: 992px){
    .modal-content{
        width: 90%;
    }
}
.modal-content2{
    background: #fff;
    margin: auto;
    width: 80%;
    max-width: 500px;
    animation:  fadeIn 0.3s;
}
.modal-content2 .head{
    /*width: 100%;*/
    background: #C01818;
    padding: 6px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.modal-content2 .head i{
    font-size: 25px;
}
.modal-content2 .head span{
    font-size: 18px;
    font-weight: bold;
}
.modal-content2 .head button{
    font-size: 20px;
}
.modal-content2 .button-pay{
    width: 100%;
    display: flex;
    justify-content: center;
}
.modal-content2 .button-pay button{
    width: 80%;
    background: #C01818;
    color: #fff;
    font-size: 15px;
    padding: 7px;
    transition: background-color 0.3s ease;
}
.modal-content2 .button-pay button:hover{
    background: #A31414;
}
.modal-content2 .muted-info{
    width: 100%;
    padding: 5px;
    border-left:1px solid green;
    background: #f2f2f2;
}
.modal-content2 .muted-info p{
    font-size: 13px;
}

.modal-header, .modal-footer {
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.single-input{
    margin-top: 10px;
}
.single-input label{
    font-size: 15px;
    margin-left: 20px;
    font-family: sans-serif;
}
.my-input input{
    width: 100%;
    border:2px solid #ccc;
    outline: none;
    font-size: 16px;
    color: 888;
    height: 50px;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
   /* height: 20px;*/
}
.my-input select{
    width: 100%;
    border:2px solid #ccc;
    outline: none;
    font-size: 16px;
    color: 888;
    height: 50px;
    border-radius: 10px;
    padding: 10px;
   /* height: 20px;*/
}
</style>

<!-- Notifications alert -->
<?php include'includes/notification-alert-js.php';?>

