<?php
$act = 6;
include './login/connect.php';
?>

<!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'; ?>
        <script>
            function showUser(str) {
                if (str == "") {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                } else {
                    if (window.XMLHttpRequest) {
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp = new XMLHttpRequest();
                    } else {
                        // code for IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                        }
                    }
                    // getuser.php is seprate php file. q is parameter 
                    xmlhttp.open("GET", "ajax.php?q=" + str, true);
                    xmlhttp.send();
                }
            }
        </script>
        <!-- serch script -->
        <script src="jeffartagame.js" type="text/javascript" charset="utf-8"></script>
        <script src="application.js" type="text/javascript" charset="utf-8"></script>
        <!-- serch script -->

        <style>
            #inputContainer {
                display: none;
                margin-top: 15px;
            }

            #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>
    </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">Student/</span> 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">Student Information</h5>


                                                <span class="float:right;" >
                                                    <button   type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                              data-bs-target="#largeModal">Fees (Pay Now)
                                                    </button>
                                                    </a></span>


                                            </div>
                                            <div class="card-body">
                                                <div class="col-xxl">
                                                    <div class="card mb-4">
                                                        <input type="text" style="padding:15px;width:300px;" name="filter" class="search_o" value="" id="filter" placeholder="Search name/id..." autocomplete="off" />

                                                        <!-- Contextual Classes -->
                                                        <style>
                                                            tr:nth-child(even) {
                                                                background-color: #D6EEEE;
                                                            }
                                                        </style>
                                                        <div class="card">

                                                            <div class="table-responsive text-nowrap">
                                                                <table class="table">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Id</th>
                                                                            <th> Student</th>
                                                                            
                                                                            <th>Date</th>
                                                                            <th>Amount</th>
                                                                            
                                                                            <th>Actions</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <?php
                                                                        include('./login/connect.php');

                                                                        $pay = $conn->query("SELECT * FROM payments");
                                                                        while ($rowp = $pay->fetch_assoc()):
                                                                                $EmployeeId = $rowp['EmployeeId'];
                                                                                $amount = $rowp['amount'];
                                                                                $date = $rowp['date'];
                                                                        
                                                                        
                                                                                $house = $conn->query("SELECT * FROM employee_details where EmployeeId = '$EmployeeId'");
                                                                                while ($row = $house->fetch_assoc()):
                                                                                 $EmployeeName = $row['EmployeeName'];
                                                                                $cardID = $row['cardID'];
                                                                                ?>
                                                                        <tr>
                                                                                <td><?php echo $cardID; ?></td>
                                                                                <td><?php echo $EmployeeName; ?></td>
                                                                                <td><?php echo $date; ?></td>
                                                                                <td><?php echo $amount; ?></td>
                                                                                <td>
                                                                                    <a rel="facebox" title="Click to edit the product" href="editproduct.php?id=<?php // echo $row['EmployeeId']; ?>"><button style="float: left; width: 20px;" class="btn btn-warning"><i class="icon-edit"></i> </button> </a>
                                                                                    <a href="#" id="<?php// echo $row['EmployeeId']; ?>" class="delbutton" title="Click to Delete the product"><button style="float: right; width: 20px;" class="btn btn-danger"><i class="icon-trash"></i></button></a>
                                                                                </td>
                                                                        </tr>
                                                                        
                                                                                <?php
                                                                                endwhile;
                                                                            
                                                                            ?>
                                                      
                                                                        <?php endwhile; ?>


                                                                    </tbody>

                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <!--/ Contextual Classes -->



                                                    </div>
                                                </div>
                                                <!-- Basic with Icons -->

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- / Content -->
                        </div>
                        <!-- Footer -->
                        <?php require './footer.php'; ?>
                        <!-- Large Modal -->
                        <form method="post" action="manage_student_teacher.php" style="font-size: 25px; padding: 15px;">
                            <div class="modal fade" id="largeModal" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel3">Student Payment Information</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"  aria-label="Close" ></button>
                                        </div>
                                        <div class="modal-body">



                                            <input type="hidden" name="id" value="<?php echo isset($id) ? $id : '' ?>">
                                            <div id="msg"></div>
                                            <div class="form-group">
                                                <label for="" class="control-label">Student/ID: </label>
                                                <input type="text" list="cars" name="product" onchange="showUser(this.value)" style="width:40%; height: 40px;font-size:20px;"class="chzn-select" required />
                                                <datalist id="cars">
                                                    <option></option>	
                                                    <option></option>
                                                    <?php
                                                    include('../connect.php');
                                                    $tenant = $conn->query("SELECT *,concat(EmployeeName) as name FROM employee_details");
                                                    while ($row = $tenant->fetch_assoc()):
                                                        ?>
                                                        <option value="<?php echo $row['cardID'] . "-" . $row['EmployeeName']; ?>"></option>
<?php endwhile; ?>
                                                </datalist>



                                            </div>
                                            <div class="form-group" id="txtHint">
                                                <div class=""style="float: left; width: 100%; height: 150px; margin-top: 30px;font-size: 18px;">
                            
                                                   <div class=""style="float: left;width: 100%; height: 50px;">
                                                        <div class=""style="float: left;width: 40%; height: 25px;">Total Due  </div>
                                                        <div class=""style="float: left;width: 59%; height: 25px;">: </div>
                                                    </div>
                                                     <div class=""style="width: 100%; height: 50px;">
                                                         <div class=""style="float: left;width: 40%; height: 25px;">Total Payable Month </div>
                                                        <div class=""style="float: left;width: 59%; height: 25px;">: </div>
                                                    </div>

                                                    <div class=""style="width: 100%; height: 50px;">
                                                         <div class=""style="float: left;width: 40%; height: 25px;">Student Name </div>
                                                        <div class=""style="float: left;width: 59%; height: 25px;">: </div>
                                                    </div>
                                                    <div class=""style="width: 100%; height: 50px;">
                                                         <div class=""style="float: left;width: 40%; height: 25px;">Father's Name </div>
                                                        <div class=""style="float: left;width: 59%; height: 25px;">: </div>
                                                    </div>
                                                </div>
                                                 <div class="row g-2" style="margin-top: 130px;">
                                                <div class="col mb-0">
                                                    <label for="emailLarge" class="form-label"><h3>Amount</h3> </label>
                                                    <input type="number" id="input1" value="0" oninput="calculateSum()" required  id="emailLarge" />

                                                </div>
                                                <div class="col mb-0">

                                                    <label for="showInputCheckbox">Exam Fees:</label>
                                                    <input type="checkbox"  >

                                                    <div id="inputContainer">
                                                        <input type="number" id="input2" value="0"  id="additionalInput"  name="examfees">
                                                    </div>

                                                </div>
                                            </div>
                                            </div>

                                           

                                        </div>
                                        <div class="col mb-0"style="margin-left: 20px; ">
                                            <label for="sum">Total Pay:</label><br>
                                            <input type="text" id="sum" name="amount" readonly style="border: 1px solid #f2f2f2;">
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" name="fees"  class="btn btn-primary">Save</button>


                                        </div>





                                        <script>
                                            function calculateSum() {
                                                var input1 = document.getElementById("input1").value;
                                                var input2 = document.getElementById("input2").value;
                                                var sum = parseFloat(input1) + parseFloat(input2);

                                                if (!isNaN(sum)) {
                                                    document.getElementById("sum").value = sum;
                                                } else {
                                                    document.getElementById("sum").value = "Invalid input";
                                                }
                                            }
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <!-- Extra Large Modal -->
                        <script>
                            function toggleInputField() {
                                var inputContainer = document.getElementById("inputContainer");
                                var checkbox = document.getElementById("showInputCheckbox");

                                if (checkbox.checked) {
                                    inputContainer.style.display = "block";
                                } else {
                                    inputContainer.style.display = "none";
                                }
                            }
                        </script>