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

<?php
include 'partial/head.php';
include 'partial/status.php';
include 'partial/message.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">Class</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">Class</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 id="saveForm">
                                <div class="form-body">
                                    <div class="row">
                                        <?php
                                        include 'partial/alerts.php';
                                        ?>
                                        <div class="col-md-4">
                                            <div class="form-group mb-4">
                                                <label class="form-label">Grade</label>
                                                <select class="form-select mr-sm-2" id="grade_id" name="grade_id" required>
                                                    <option value="" disabled selected>Choose</option>
                                                    <?php foreach($grades as $item): ?>
                                                        <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-4">
                                                <label class="form-label">Class Type</label>
                                                <select class="form-select mr-sm-2" id="class_type_id" name="class_type_id" required>
                                                    <option value="" disabled selected>Choose</option>
                                                    <?php foreach($classtypes as $item): ?>
                                                        <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-4">
                                                <label class="form-label">Payment Type</label>
                                                <select class="form-select mr-sm-2" id="payment_type_id" name="payment_type_id" required>
                                                    <option value="" disabled selected>Choose</option>
                                                    <?php foreach($paymenttypes as $item): ?>
                                                        <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Class Code</label>
                                                <input type="text" class="form-control" placeholder="" id="code" name="code" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Class Name</label>
                                                <input type="text" class="form-control" placeholder="" id="name" name="name" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Description</label>
                                                <input type="text" class="form-control" placeholder="" id="description" name="description">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Class Day</label>
                                                <select class="form-select mr-sm-2" id="class_days" name="class_days" multiple required>
                                                    <option value="1">Monday</option>
                                                    <option value="2">Tuesday</option>
                                                    <option value="3">Wednesday</option>
                                                    <option value="4">Thursday</option>
                                                    <option value="5">Friday</option>
                                                    <option value="6">Saturday</option>
                                                    <option value="7">Sunday</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <table class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th width="40%">Day</th>
                                                    <th>Start Time</th>
                                                    <th>End Time</th>
                                                </tr>
                                                </thead>
                                                <tbody id="classDayTable">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Started Date</label>
                                                <input type="date" class="form-control" placeholder="" id="started_date" name="started_date">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Students</label>
                                                <select class="form-select mr-sm-2" id="student_ids" required multiple>
                                                    <?php foreach($students as $item): ?>
                                                        <option value="<?= $item['id'] ?>"><?= $item['first_name'] ?> <?= $item['last_name'] ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <table class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>Student</th>
                                                    <th width="30%">Fee</th>
                                                </tr>
                                                </thead>
                                                <tbody id="studentFeeTable">
                                                </tbody>
                                            </table>
                                        </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>Code</th>
                                        <th>Name</th>
                                        <th>Grade</th>
                                        <th>Class Type</th>
                                        <th>Class Day</th>
                                        <th>Students</th>
                                        <th style="text-align: center">Status</th>
                                        <th style="text-align: center">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </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="updateModal" 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 Class</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <form id="updateForm">
                    <div class="form-body">
                        <div class="row">
                            <?php
                            include 'partial/alerts.php';
                            ?>
                            <div class="col-md-4">
                                <!-- hidden id to update -->
                                <input type="hidden" class="form-control" placeholder="" id="updid" name="updid">
                                <div class="form-group mb-4">
                                    <label class="form-label">Grade</label>
                                    <select class="form-select mr-sm-2" id="updgrade_id" name="updgrade_id" required>
                                        <option value="" disabled selected>Choose</option>
                                        <?php foreach($grades as $item): ?>
                                            <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-4">
                                    <label class="form-label">Class Type</label>
                                    <select class="form-select mr-sm-2" id="updclass_type_id" name="updclass_type_id" required>
                                        <option value="" disabled selected>Choose</option>
                                        <?php foreach($classtypes as $item): ?>
                                            <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-4">
                                    <label class="form-label">Payment Type</label>
                                    <select class="form-select mr-sm-2" id="updpayment_type_id" name="updpayment_type_id" required>
                                        <option value="" disabled selected>Choose</option>
                                        <?php foreach($paymenttypes as $item): ?>
                                            <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Class Code</label>
                                    <input type="text" class="form-control" placeholder="" id="updcode" name="updcode" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Class Name</label>
                                    <input type="text" class="form-control" placeholder="" id="updname" name="updname" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label">Description</label>
                                    <input type="text" class="form-control" placeholder="" id="upddescription" name="upddescription">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label class="form-label">Class Day</label>
                                    <select class="form-select mr-sm-2" id="updclass_day" name="updclass_day[]" multiple required>
                                        <option value="1">Monday</option>
                                        <option value="2">Tuesday</option>
                                        <option value="3">Wednesday</option>
                                        <option value="4">Thursday</option>
                                        <option value="5">Friday</option>
                                        <option value="6">Saturday</option>
                                        <option value="7">Sunday</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th width="40%">Day</th>
                                        <th>Start Time</th>
                                        <th>End Time</th>
                                    </tr>
                                    </thead>
                                    <tbody id="updclassDayTable">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label class="form-label">Started Date</label>
                                    <input type="date" class="form-control" placeholder="" id="updstarted_date" name="updstarted_date" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Students</label>
                                    <select class="form-select mr-sm-2" id="updstudent_id" name="updstudent_id[]" required multiple>
                                        <?php foreach($students as $item): ?>
                                            <option value="<?= $item['id'] ?>"><?= $item['first_name'] ?> <?= $item['last_name'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>Student</th>
                                        <th width="30%">Fee</th>
                                    </tr>
                                    </thead>
                                    <tbody id="updstudentFeeTable">
                                    </tbody>
                                </table>
                            </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 Class</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <form id="deleteForm">
                    <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/class.js') ?>"></script>

</html>
