<!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">Payment</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">Payment</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('payment/save') ?>">
                                <div class="form-body">
                                    <div class="row">
                                        <?php
                                        include 'partial/alerts.php';
                                        ?>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label class="form-label">Student</label>
                                                <select class="form-select mr-sm-2" id="student" name="student" required>
                                                    <option value="" selected disabled>Choose</option>
                                                    <?php foreach($students as $item): ?>
                                                        <option value="<?= $item['id'] ?>"><?= $item['first_name'] ?> <?= $item['last_name'] ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                        </div>
                                    </div>
                                    <div id="msg"></div>
                                        <!--card-->
                                        <div class="col-sm-6 col-lg-3">
                                            <div class="card border-end bg-info text-white">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <h2 class="mb-1 w-100 text-truncate font-weight-medium" id="presentCount">0
                                                            </h2>
                                                            <h6 class="font-weight-normal mb-0 w-100 text-truncate text-white">
                                                                Completed
                                                            </h6>
                                                        </div>
                                                        <div class="ms-auto mt-md-3 mt-lg-0">
                                                            <span class="opacity-75">
                                                                <i data-feather="check"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-lg-3">
                                            <div class="card border-end bg-danger text-white">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <h2 class="mb-1 w-100 text-truncate font-weight-medium" id="absentCount">0
                                                            </h2>
                                                            <h6 class="font-weight-normal mb-0 w-100 text-truncate text-white">
                                                                Cancelled
                                                            </h6>
                                                        </div>
                                                        <div class="ms-auto mt-md-3 mt-lg-0">
                                                            <span class="opacity-75">
                                                                <i class="fa fa-xmark"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-lg-3">
                                            <div class="card border-end bg-warning text-white">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <h2 class="mb-1 w-100 text-truncate font-weight-medium" id="pandingCount">0
                                                            </h2>
                                                            <h6 class="font-weight-normal mb-0 w-100 text-truncate text-white">
                                                                Pending Payments
                                                            </h6>
                                                        </div>
                                                        <div class="ms-auto mt-md-3 mt-lg-0">
                                                            <span class="opacity-75">
                                                                <i class="fa fa-hourglass-half"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-lg-3">
                                            <div class="card border-end bg-success text-white">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <h2 class="mb-1 w-100 text-truncate font-weight-medium" id="paidCount">0
                                                            </h2>
                                                            <h6 class="font-weight-normal mb-0 w-100 text-truncate text-white">
                                                                Paid Payments
                                                            </h6>
                                                        </div>
                                                        <div class="ms-auto mt-md-3 mt-lg-0">
                                                            <span class="opacity-75">
                                                                <i class="fa fa-circle-check"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </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>Class Date</th>
                                        <th>Class</th>
                                        <th>Status</th>
                                        <th>Paid Date</th>
                                        <th>Payment Method</th>
                                        <th>Action</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">Make Payment</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <form id="paymentForm">
                    <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-7">
                                <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 readonly>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group mb-3">
                                    <label class="form-label">Class Date</label>
                                    <input type="text" class="form-control" placeholder="" id="upddate" name="upddate" required readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label class="form-label">Fee</label>
                                    <input type="number" class="form-control" placeholder="" id="updfee" name="updfee">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label class="form-label">Paid Date</label>
                                    <input type="date" class="form-control" placeholder="" id="updpaidDate" name="updpaidDate">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-4">
                                    <label class="form-label">Payment Method</label>
                                    <select class="form-select mr-sm-2" id="payment_method_id" name="payment_method_id" required>
                                        <option value="" selected disabled>Choose</option>
                                        <?php foreach($paymentmethods as $item): ?>
                                            <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                        <?php endforeach; ?>
                                    </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 Payment</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('payment/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/payment.js') ?>"></script>

</html>
