@section('title', 'Booking History')
@extends('vetdoctor.layouts.app')

@push('style')
<!-- third party css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<link href="{{asset('admin/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KzY5v3Z/y2mc6TBx1+YpwwBR2cM5GRFd4iEQjIqtsydLb9ncppntq62GK6ad4CCekfT0HTl4Z5BjUdgHmR4vww==" crossorigin="anonymous" />

@endpush

@section('content')
<section class="content home">
    <div class="block-header">

        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb mb-4">
                                <li class="breadcrumb-item"><a href="{{route('vetdoctor-dashboard')}}">Animal Consultation</a></li>
                                <li class="breadcrumb-item active">Availability</li>
                            </ol>
                        </div>
                        <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="form-outline mt-3">
                                        <input type="text" id="search-input" class="form-control" placeholder="Search here" />
                                    </div>
                                </div>

                                <div class="col-lg-3">
                                    <select id="booking-status-select">
                                        <option value="Upcoming">Upcoming</option>
                                        <option value="Completed">Completed</option>
                                    </select>
                                </div>
                            </div>

                            @include('vetdoctor.common.flash')



                            <table id="booking_history-datatable" class="table dt-responsive nowrap w-100 mb-5" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Customer Name</th>
                                        <th>Phone Number</th>
                                        <th>Pet Name</th>
                                        <th>Speciality</th>
                                        <th>Consultation Type</th>
                                        <th>Appointment Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody class="text">

                                </tbody>
                            </table>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
        </div> <!-- container -->

    </div> <!-- content -->

    </div>

    @endsection

    @push('script')
    <script>
        $(document).ready(function() {
            var table;
            var statusSelect = $('#booking-status-select');

            // Initialize DataTable with upcoming data
            initializeDataTable('Upcoming');

            // Handle status select change event
            statusSelect.on('change', function() {
                var status = $(this).val();
                table.destroy(); // Destroy the existing DataTable
                initializeDataTable(status); // Initialize DataTable with the selected status
            });

            function initializeDataTable(status) {
                table = $('#booking_history-datatable').DataTable({
                    searching: false,
                    processing: true,
                    serverSide: true,
                    aaSorting: [
                        [0, 'asc']
                    ],
                    ajax: {
                        type: 'GET',
                        url: '{{ route("vetdoctor-get_booking_history") }}',
                        data: function(d) {
                            d.keyword = $('#search-input').val(); // Add keyword parameter for searching
                            d.status = status; // Add status parameter for filtering
                        }
                    },
                    columns: [{
                            data: 'appointmentID',
                            orderable: true,
                            visible: false
                        },
                        {
                            data: 'user_name',
                            orderable: false
                        },
                        {
                            data: 'user_number',
                            orderable: false
                        },
                        {
                            data: 'pet_name',
                            orderable: false
                        },
                        {
                            data: 'speciality',
                            orderable: false
                        },
                        {
                            data: 'consultation_type',
                            orderable: false
                        },
                        {
                            data: 'appointment_datetime',
                            orderable: false
                        },
                        {
                            data: 'action',
                            orderable: false
                        },
                    ]
                });
            }
        });
    </script>
    @endpush