@extends('studio-photoshoot-module.layouts.admin.admin')

@section('title', 'Appointments')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h5 class="mb-0 font-size-18">Appointments</h5>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                    <li class="breadcrumb-item">Appointments</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="user" class="col-form-label pt-0">Type</label>
                    <select data-placeholder="Select Option" id="type"
                        class="select2 tail-select  form-control" name="type" required>
                        <option value="{{ config('custom.all') }}">{{ config('custom.all') }}</option>
                        <option value="{{ config('custom.upcoming') }}" selected>{{ config('custom.upcoming') }}</option>
                        <option value="{{ config('custom.previous') }}">{{ config('custom.previous') }}</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="user" class="col-form-label pt-0">Date From</label>
                    <input type="date" id="date_from" class="form-control" name="date_from">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="user" class="col-form-label pt-0">Date To</label>
                    <input type="date" id="date_to" class="form-control" name="date_to">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="user" class="col-form-label pt-0">Status</label>
                    <select data-placeholder="Select Option" id="appointment_status" class="select2 tail-select  form-control" name="appointment_status" required>
                        <option value="{{ config('custom.all') }}">{{ config('custom.all') }}</option>
                        @foreach (config('custom.appointment_status') as $status)
                            <option value="{{ $status }}">{{$status}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div>
                    <button class="btn btn-primary btn-sm mr-3" type="button" id="get-appointments">
                        <i class="fa fa-search"></i> Search
                    </button>
                    <button class="btn btn-dark btn-sm mr-3" type="button" onclick="exportAppointment()">
                        <i class="fa fa-file-excel"></i> Export
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card p-4">
    <div class="card-body">
        <div class="table-responsive">

            <table id="datatable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Student ID</th>
                        <th>Graduate Name</th>
                        <th>University</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection


@section('page-specific-scripts')
    <script>
        $(document).ready(function() {
            var table = $('#datatable').DataTable({
                "language": {
                    "searchPlaceholder": "By Invoice Number",
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('sp.appointment.index') }}",
                    data: function(d) {
                        d.status = $('#appointment_status').val();
                        d.date_from = $('#date_from').val();
                        d.date_to = $('#date_to').val();
                        d.type = $('#type').val();
                    }
                },
                "columns": [
                    { "data": "id", 'visible': false },
                    { "data": "date_formatted", 'orderable': false, 'searchable': false },
                    { "data": "time_formatted", 'orderable': false, 'searchable': false },
                    { "data": "student_id" },
                    { "data": "graduate_full_name" },
                    { "data": "university" },
                    { "data": "status_formatted" },
                    { "data": "actions" },
                ],
                order: [
                    [0, 'desc']
                ]
            });
            // $('#institution_id').change(function(){
            //     table.draw();
            // });
            // $('#order_status').change(function(){
            //     table.draw();
            // });
            // $('#academic_regalia_status').change(function(){
            //     table.draw();
            // });
            $("#get-appointments").click(function(){
                table.draw();
            });
        });

        function exportAppointment()
        {
            const baseURL = "{{ url('sp/appointment/export-data') }}";
            const params = {
                status: $('#appointment_status').val(),
                date_from: $('#date_from').val(),
                date_to: $('#date_to').val(),
                type: $('#type').val()
            };
            
            const paramString = new URLSearchParams(params).toString();
            let url = `${baseURL}?${paramString}`;
            window.open(url , "_blank");
        }

        // function printLabel()
        // {
        //     const baseURL = "{{ url('order/print-label') }}";
        //     const institution_id = $('#institution_id').val();
        //     if (institution_id == 0) {
        //         alert('Choose An Institute to EXPORT.')
        //     } else {
        //         const params = {
        //             institution_id: $('#institution_id').val(),
        //             order_status: $('#order_status').val(),
        //             ceremony_id: $('#ceremony').val(),
        //             ceremony_type: $('#ceremony_type').val(),
        //             course_id: $('#course_id').val(),
        //             academic_regalia_status: $('#academic_regalia_status').val(),
        //             guest_invitation_letter: $('#guest_invitation_letter').val(),
        //             payment_by: $('#payment_by').val(),
        //             user_type: $('#user_type').val()
        //         };
                
        //         const paramString = new URLSearchParams(params).toString();
        //         let url = `${baseURL}?${paramString}`;
        //         window.open(url , "_blank");
        //     }
        // }

        // function exportPayment()
        // {
        //     const baseURL = "{{ url('order/payment-export') }}";
        //     const institution_id = $('#institution_id').val();
        //     if (institution_id == 0) {
        //         alert('Choose An Institute to EXPORT.')
        //     } else {
        //         const params = {
        //             institution_id: $('#institution_id').val(),
        //             order_status: $('#order_status').val(),
        //             ceremony_id: $('#ceremony').val(),
        //             ceremony_type: $('#ceremony_type').val(),
        //             user_type: $('#user_type').val()
        //         };
                
        //         const paramString = new URLSearchParams(params).toString();
        //         let url = `${baseURL}?${paramString}`;
        //         window.open(url , "_blank");
        //     }
        // }
        
        // $("#usercode").on("click", function() {
        //     const institution_id = $('#institution_id').val();
        //     if (institution_id == 0) {
        //         alert('Choose An Institution.');
        //         return;
        //     }
        //     $('#usercode').hide();
        //     $("#usercode-processing").removeClass('hide');
        //     $.ajax({
        //         url: "/fetch-usercode",
        //         type: "POST",
        //         data: {
        //             institution_id: institution_id,
        //         },
        //         success: function(response) {
        //             $("#usercode-processing").addClass('hide');
        //             $('#usercode').show();
        //             // table.ajax.reload(null, false); // false = retain current pagination
        //             // if (response.status === "success") {
        //             //     table.draw();
        //             // }
        //         },
        //         error: function(xhr) {
        //             $("#usercode-processing").addClass('hide');
        //             $('#usercode').show();
        //             console.log(xhr.responseText);
        //             $("#result").text("Error fetching data");
        //         }
        //     });
        // });
    </script>
@endsection