<!DOCTYPE html>
<html dir="ltr" lang="en">

<?php
include 'partial/head.php';
include 'partial/status.php';
?>

<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
    <div class="lds-ripple">
        <div class="lds-pos"></div>
        <div class="lds-pos"></div>
    </div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
     data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
    <!-- ============================================================== -->
    <!-- Topbar header - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <?php
    include 'partial/topbar.php';
    ?>
    <!-- ============================================================== -->
    <!-- End Topbar header -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <?php
    include 'partial/sidebar.php';
    ?>
    <!-- ============================================================== -->
    <!-- End Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb">
            <div class="row">
                <div class="col-7 align-self-center">
                    <h2 class="page-title text-truncate text-dark font-weight-medium mb-1">Student</h2>
                    <div class="d-flex align-items-center">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb m-0 p-0">
                                <li class="breadcrumb-item"><a href="<?= base_url() ?>" class="text-muted">Home</a></li>
                                <li class="breadcrumb-item text-muted active" aria-current="page">Student</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->

        <div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form method="post" action="<?= base_url('student/save') ?>">
                                <div class="form-body">
                                    <div class="row">
                                        <?php
                                        include 'partial/alerts.php';
                                        ?>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">First Name</label>
                                                <input type="text" class="form-control" placeholder="" id="first_name" name="first_name" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Last Name</label>
                                                <input type="text" class="form-control" placeholder="" id="last_name" name="last_name" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Address</label>
                                                <input type="text" class="form-control" placeholder="" id="address" name="address">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group mb-3">
                                                <label class="form-label">City</label>
                                                <input type="text" class="form-control" placeholder="" id="city" name="city" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Contact No 1</label>
                                                <input type="text" class="form-control" placeholder="" id="contact_no_1" name="contact_no_1" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Contact No 2</label>
                                                <input type="text" class="form-control" placeholder="" id="contact_no_2" name="contact_no_2">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Guardian Name</label>
                                                <input type="text" class="form-control" placeholder="" id="guardian_name" name="guardian_name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Email</label>
                                                <input type="email" class="form-control" placeholder="" id="email" name="email" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-4">
                                                <label class="form-label">Status</label>
                                                <select class="form-select mr-sm-2" id="status" name="status" required>
                                                    <option value="1">Active</option>
                                                    <option value="2">Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <button type="submit" class="btn btn-primary btn-rounded" style="width:100px;"><i class="fas fa-check"></i>
                                                Save</button>
                                            <button type="reset" class="btn btn-danger btn-rounded" style="width:100px;"><i class="fas fa-undo"></i>
                                                Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title"></h4>
                            <h6 class="card-subtitle"></h6>
                            <div class="table-responsive">
                                <table id="zero_config" class="table border table-striped table-bordered text-nowrap">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>City</th>
                                        <th>Contact No</th>
                                        <th>email</th>
                                        <th style="text-align: center">Status</th>
                                        <th style="text-align: center">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <?php foreach($students as $item): ?>

                                        <tr>
                                            <td><?= $item['first_name'] ?> <?= $item['last_name'] ?></td>
                                            <td><?= $item['city'] ?></td>
                                            <td><?= $item['contact_no_1'] ?></td>
                                            <td><?= $item['email'] ?></td>
                                            <td style="text-align: center"><?= $statusMap[$item['status']] ?? 'Unknown' ?></td>
                                            <td style="text-align: center"><button id="btnUpdate" data-id="<?= $item['id'] ?>" data-bs-toggle="modal" data-bs-target="#bs-example-modal-lg" type="button" class="btn btn-secondary btn-circle" style="padding: 3px 3px; width: 30px; height: 30px;" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top" ><i class="fa fa-pencil-alt"></i></button>
                                                <button id="btnDelete" data-id="<?= $item['id'] ?>" data-bs-toggle="modal" data-bs-target="#deleteModal" type="button" class="btn btn-danger btn-circle" style="padding: 3px 3px; width: 30px; height: 30px;"><i class="fa fa-trash"></i></button></td>
                                        </tr>

                                    <?php endforeach; ?>


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper  -->
    <!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->

<!--  update modal -->
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Update Student</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="<?= base_url('student/update') ?>">
                    <div class="form-body">
                        <div class="row">
                            <!-- hidden id to update -->
                            <input type="hidden" class="form-control" placeholder="" id="updid" name="updid">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">First Name</label>
                                    <input type="text" class="form-control" placeholder="" id="updfirst_name" name="updfirst_name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Last Name</label>
                                    <input type="text" class="form-control" placeholder="" id="updlast_name" name="updlast_name" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group mb-3">
                                    <label class="form-label">Address</label>
                                    <input type="text" class="form-control" placeholder="" id="updaddress" name="updaddress">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label class="form-label">City</label>
                                    <input type="text" class="form-control" placeholder="" id="updcity" name="updcity" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Contact No 1</label>
                                    <input type="text" class="form-control" placeholder="" id="updcontact_no_1" name="updcontact_no_1" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Contact No 2</label>
                                    <input type="text" class="form-control" placeholder="" id="updcontact_no_2" name="updcontact_no_2">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Guardian Name</label>
                                    <input type="text" class="form-control" placeholder="" id="updguardian_name" name="updguardian_name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" placeholder="" id="updemail" name="updemail" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-4">
                                    <label class="form-label">Status</label>
                                    <select class="form-select mr-sm-2" id="updstatus" name="updstatus" required>
                                        <option value="1">Active</option>
                                        <option value="2">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                <button type="submit" class="btn btn-primary btn-rounded" style="width:130px;"><i class="fas fa-check"></i>
                                    Update</button>
                                <button data-bs-dismiss="modal" aria-hidden="true" type="button" class="btn btn-danger btn-rounded" style="width:130px;"><i class="fas fa-window-close"></i>
                                    Cancel</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--  delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
     aria-labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteModal">Delete Student</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="<?= base_url('student/delete') ?>">
                    <div class="form-body">
                        <div class="row">
                            <!-- hidden id to update -->
                            <input type="hidden" class="form-control" placeholder="" id="delid" name="delid">
                            <label class="form-label">Are you sure to delete this item?</label>
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                <button type="submit" class="btn btn-danger btn-rounded" style="width:130px;"><i class="fas fa-trash"></i>
                                    Delete</button>
                                <button data-bs-dismiss="modal" aria-hidden="true" type="button" class="btn btn-info btn-rounded" style="width:130px;"><i class="fas fa-window-close"></i>
                                    Cancel</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>

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


<script>
    var base_url = "<?= base_url() ?>";
</script>

<script src="<?= base_url('dist/js/custom_v1.js') ?>"></script>
<script src="<?= base_url('dist/js/student.js') ?>"></script>

</html>
