@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->


<div class="page-wrapper">

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

        <!-- Start Page Header -->
        <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
            <div class="flex-grow-1">
                <h4 class="fw-bold mb-0">{{ $module }}<span
                        class="badge badge-soft-primary border border-primary fs-13 fw-medium ms-2">Total
                        {{ $module }} : <span id="totalRows"></span></span></h4>
            </div>
            <div class="text-end d-flex">
                <!-- dropdown-->
                <div class="dropdown me-1">
                    <a href="javascript:void(0);"
                        class="btn btn-md fs-14 fw-normal border bg-white rounded text-dark d-inline-flex align-items-center"
                        data-bs-toggle="dropdown">
                        Export<i class="ti ti-chevron-down ms-2"></i>
                    </a>
                    <ul class="dropdown-menu p-2">
                        <li>
                            <a class="dropdown-item" href="#">Download as PDF</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">Download as Excel</a>
                        </li>
                    </ul>
                </div>
                <a href="{{ route('appointment.create') }}" class="btn btn-primary ms-2 fs-13 btn-md"><i
                        class="ti ti-plus me-1"></i>New
                    {{ $singluar }}</a>
            </div>
        </div>
        <!-- End Page Header -->


        <div class="filters mb-3">
            <div class="row">
                <div class="col-md-3">
                    <label class="mb-2">Date :</label>
                    <input type="text" id="date-range" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="mb-2">Doctor :</label>
                    <select class="form-control select2" id="find-doctor">
                        <option value="">All Doctors</option>
                        @foreach ($doctors as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="mb-2">Status :</label>
                    <select class="form-control select2Custom" id="find-status">
                        <option value="">All Statuses</option>
                        @foreach ($statusDropdown as $key => $value)
                            <option  value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="mb-2">Token :</label>
                    <input type="text" id="find-token" class="form-control">
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-nowrap" id="datatable">
                <thead class="thead-light">
                    <tr>
                        <th>Token</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Patient</th>
                        <th>Doctor</th>
                        <th>Fee</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Created Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>



                </tbody>
            </table>
        </div>

    </div>
    <!-- End Content -->

</div>

<!-- ========================
   End Page Content
  ========================= -->


<!-- Start Delete Modal  -->
<div class="modal fade" id="delete_modal">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center position-relative z-1">
                <img src="assets/img/bg/delete-modal-bg-01.png" alt=""
                    class="img-fluid position-absolute top-0 start-0 z-n1">
                <img src="assets/img/bg/delete-modal-bg-02.png" alt=""
                    class="img-fluid position-absolute bottom-0 end-0 z-n1">
                <div class="mb-3">
                    <span class="avatar avatar-lg bg-danger text-white"><i class="ti ti-trash fs-24"></i></span>
                </div>
                <h5 class="fw-bold mb-1">Delete Confirmation</h5>
                <p class="mb-3">Are you sure want to delete?</p>
                <div class="d-flex justify-content-center">
                    <div class="d-flex justify-content-center">
                        <a href="javascript:void(0);" class="btn btn-light position-relative z-1 me-3"
                            data-bs-dismiss="modal">Cancel</a>
                        <form id="deleteForm" method="POST" class="modal-content">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-danger position-relative z-1">Yes, Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- DataTables  -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
    $(function() {

        let today = moment();

        $('#date-range').daterangepicker({
            startDate: today,
            endDate: today,
            autoUpdateInput: true, // IMPORTANT
            opens: 'right',
            locale: {
                cancelLabel: 'Clear',
                format: 'YYYY-MM-DD'
            },
            ranges: {
                'Today': [moment(), moment()],
                'Tomorrow': [moment().add(1, 'days'), moment().add(1, 'days')],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'This Week': [moment().startOf('week'), moment().endOf('week')],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
            }
        });

    });

    $(document).ready(function() {

        // function formatStatus(option) {
        //     if (!option.id) return option.text;

        //     return $(
        //         `<span class="status-${option.id}">${option.text}</span>`
        //     );
        // }

        // $('#find-status').select2();
        //  $('.select2-colors').select2();


        let table = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            lengthMenu: [
                [25, 50, 150, 500],
                [25, 50, 150, 500]
            ],
            ajax: {
                url: "",
                data: function(d) {
                    d.token = $('#find-token').val();
                    d.doctor = $('#find-doctor').val();
                    d.status = $('#find-status').val();
                    d.date_range = $('#date-range').val();
                },
                dataSrc: function(json) {
                    $('#totalRows').text(json.recordsFiltered);
                    return json.data;
                }
            },
            order: [
                [0, "desc"]
            ],
            columns: [{
                    data: 'token_number',
                    name: 'token_number',
                    searchable: false
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'time',
                    name: 'time'
                },
                {
                    data: 'patient',
                    name: 'patient',
                },
                {
                    data: 'doctor',
                    name: 'doctor',
                    searchable: false
                },
                {
                    data: 'fee',
                    name: 'fee'
                },
                {
                    data: 'payment_status',
                    name: 'payment_status',
                    searchable: false
                },
                {
                    data: 'status',
                    name: 'status',
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    className: 'action-item',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        $('#find-token').on('keyup', function() {
            table.draw();
        });
        $('#find-doctor').on('change', function() {
            table.draw();
        });
        $('#find-status').on('change', function() {
            table.draw();
        });
        $('#date-range').on('apply.daterangepicker', function() {
            
            
            table.draw();
        });



        $(document).on('click', '.delete_modal', function() {
            const id = $(this).data('id');
            const url = $(this).data('url');
            $('#deleteForm').attr('action', url);
            $('#delete_modal').modal('show');
        });


    });
</script>


@include('layouts.footer')