<?php $act =2; ?>
<!DOCTYPE html>
<!-- =========================================================
* ekseba Admin Template - Pro | v1.0.0
==============================================================

* Product Page: https://ekseba.com
* Created by: ekseba
* License: ekseba.com
* Copyright ThemeSelection (https://ekseba.com)

=========================================================
 -->
<!-- beautify ignore:start -->
<html lang="en"  class="light-style layout-menu-fixed"  dir="ltr"  data-theme="theme-default"  data-assets-path="assets/"  data-template="vertical-menu-template-free">
  <head>
    
    <?php include './html/head.php'; ?>
      <style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%; font-size: 12px;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 5px 2px 5px 2px; font-size: 12px;
  text-align: center;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white; font-size: 12px;
}
      </style>
      
      <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            text-align: center;
            padding: 10px;
        }
        .fully-paid {
            background-color: green;
            color: white;
        }
        .half-paid {
            background-color: red;
            color: white;
        }
    </style>
  </head>

  <body>
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
      <div class="layout-container">
        <!-- Menu -->
        <?php 
        include './menue.php';
        ?>
        <!-- / Menu -->

        <!-- Layout container -->
        <div class="layout-page">
          <!-- Navbar -->

          <?php include './navbar.php'; ?>

          <!-- / Navbar -->

          <!-- Content wrapper -->
          <div class="content-wrapper">
            <!-- Content -->

            <!-- Content wrapper -->
          <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Forms/</span> Plots Information</h4>

              <!-- Basic Layout & Basic with Icons -->
              <div class="row">
                <!-- Basic Layout -->
                <div class="col-xl">
                  <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <h5 class="mb-0">Payment Information</h5>
                      <small class="text-muted float-end">Payment Information</small>
                    </div>
                    <div class="card-body">
                     

                <div class="col-xxl">
                    
                    
                    <ul class="nav nav-pills flex-column flex-md-row mb-3">
                    <li class="nav-item">
                      <a class="nav-link active" href="javascript:void(0);"><i class="bx bx-user me-1"></i> Salary (General) </a>
                    </li>
                  </ul>
                    
                  <div class="card mb-4">
                      
                   <form id="salaryForm">
    <label for="employee_id">Select Employee:</label>
    <select id="employee_id" name="employee_id" required>
        <option value="">Select Employee</option>
        <?php
        // Database connection
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "school_monir_final";

        $conn = new mysqli($servername, $username, $password, $dbname);
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        // Fetch employees from the database
        $sql = "SELECT EmployeeId, EmployeeName FROM employee_details where designation='teacher'";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo "<option value='{$row['EmployeeId']}'>{$row['EmployeeName']}</option>";
            }
        }
        ?>
    </select>
    
    <label for="month">Month:</label>
    <select id="month" name="month" required>
        <option value="">Select Month</option>
        <?php
        // Display all months in the dropdown
        $months = [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'
        ];
        foreach ($months as $month) {
            echo "<option value='$month'>$month</option>";
        }
        ?>
    </select>

    <label for="paid_salary">Paid Salary:</label>
    <input type="number" id="paid_salary" name="paid_salary" required>

    <button type="submit">Save</button>
</form>

<hr>

<div id="message"></div>

<!-- Table to Display Monthly Salary -->
<div id="salaryTable">
    <!-- Salary table will be loaded here by AJAX -->
</div>

<script>
    // Function to fetch and display salary table
    function loadSalaryTable() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "fetch_salary.php", true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                document.getElementById("salaryTable").innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    }

    // Add/Edit salary using AJAX
    document.getElementById("salaryForm").addEventListener("submit", function (e) {
        e.preventDefault();
        const formData = new FormData(this);

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "save_salary.php", true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                document.getElementById("message").innerHTML = xhr.responseText;
                document.getElementById("salaryForm").reset();
                loadSalaryTable(); // Refresh table after saving
            }
        };
        xhr.send(formData);
    });

    // Load salary table on page load
    window.onload = loadSalaryTable;
</script>
                  </div>
                </div>
                <!-- Basic with Icons -->
  
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- / Content -->
          </div>
            <!-- Footer -->
           <?php require './footer.php'; ?>
<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
  
  <script>  
 $(document).ready(function(){  
      $(document).on('click', '.view_data', function(){  
           var employee_id = $(this).attr("id");  
           if(employee_id != '')  
           {  
                $.ajax({  
                     url:"paysalary.php",  
                     method:"POST",  
                     data:{employee_id:employee_id},  
                     success:function(data){  
                          $('#employee_detail').html(data);  
                          $('#dataModal').modal('show');  
                     }  
                });  
           }            
      });  
 });  
 </script>
 
