@section('title', 'Dashboard')

@extends('vetdoctor.layouts.app')

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

        @include('vetdoctor.common.flash')
        <div class="row">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2>Dashboard
                    <small class="text-muted">Welcome to Animal Consultation Vet Doctor Panel</small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right">
                    <li class="breadcrumb-item"><a href="{{route('vetdoctor-dashboard')}}"><i class="zmdi zmdi-home"></i> Animal Consultation</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        @guest
                        @include('vetdoctor.common.flash')
                        @endguest

                        <div class="form-outline">
                            <input type="text" id="search-input" class="form-control" placeholder="Search here" />
                        </div>

                        <table id="booking-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>Appointment Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody class="text">

                            </tbody>
                        </table>

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
    </div>
    </div>
</section>
@endsection

@push('script')

<script>
    var table;
    $(document).ready(function() {

        table = $('#booking-datatable').DataTable({
            
            searching: false,
            processing: true,
            serverSide: true,
            aaSorting: [
                [0, 'asc']
            ],
            "ajax": {
                type: 'GET',
                url: '{{route("vetdoctor-get_bookings")}}',
                data: function(d) {
                    d.keyword = $('#search-input').val(); // Add keyword parameter for searching
                }
            },
            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: 'appointment_status',
                    orderable: false,
                },
                {
                    data: 'action',
                    orderable: false,
                },
            ],
        });
        
        $('#search-input').on('keyup', function() {
            table.search($(this).val()).draw();
        });


        // START CONSULTATION BUTTON CLICK EVENT
        $(document).on('click', '.start-consultation', function(e) {
            e.preventDefault();
            var appointmentID = $(this).data('id');

            Swal.fire({
                title: 'Start Consultation',
                text: 'Are you sure you want to start the consultation for this Appointmnet?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('vetdoctor-start_consultation',['id' => '__appointmentID__']) }}".replace('__appointmentID__', appointmentID),
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: appointmentID
                        },
                        success: function(response) {
                            $('.start-consultation[data-id="' + appointmentID + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-success mx-2 completeBtn" data-id="' + appointmentID + '" title="Complete">Complete</a>');
                            Swal.fire('Success', response.success, 'success');
                            $('#booking-datatable').DataTable().ajax.reload();

                        },
                        error: function(xhr, status, error) {
                            // Handle error, if any
                        }
                    });
                }
            });
        });

         // COMPELTE BUTTON  CLICK EVENT
        $(document).on('click', '.completeBtn', function(e) {
            e.preventDefault();
            var appointmentID = $(this).data('id');

            Swal.fire({
                title: 'Complete Consultation',
                text: 'Are you sure,Your Consultation is Completed?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('vetdoctor-complete_consultation',['id' => '__appointmentID__']) }}".replace('__appointmentID__', appointmentID),
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: appointmentID
                        },
                        success: function(response) {
                            if (response.success) {

                                $('.completeBtn[data-id="' + appointmentID + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-success mx-2 completedBtn text-white" data-id="' + appointmentID + '" title="Completed" style="pointer-events: none; opacity: 3;" disabled>Completed</a>');
                                Swal.fire('Success', response.success, 'success');
                                window.location.reload();
                            }
                        },
                        error: function(xhr, status, error) {
                            // Handle error, if any
                        }
                    });
                }
            });
        });

  

    });
</script>
@endpush