@extends('admin.main')
@section('content')

<style>
    .disabledRow {
      pointer-events: none;  
      opacity: 0.6;         
      user-select: none;    
    }
</style>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                         <div class="card-header">
                            <h4 class="card-title">Appointments
                            @can('create.booking')   
                                 <a href="{{ route('booking.create') }}" class="btn btn-primary float-right">Calender View</a>
                            @endcan 
                          </h4>
                             <div class="text-center mb-3 text-dark">
                                <h4 class="font-weight-900 d-inline-block mr-2" style="color: #2E0AF0;">Booked : {{ $statusCounts['pendingCount'] }} </h4>
                                <h4 class="font-weight-900 d-inline-block mr-2" style="color: #04AAC9;">Arrived : {{ $statusCounts['waitingCount'] }} </h4>
                                <h4 class="font-weight-900 d-inline-block mr-2" style="color: #107D3D;">Ongoing  : {{ $statusCounts['ongoingCount'] }} </h4>
                                <h4 class="font-weight-900 d-inline-block" style="color: #808080;">Reviewed  : {{ $statusCounts['completeCount'] }} </h4>
                            </div>
                        </div>
                        <div class="card-body">
                            @include('admin.msg')
                            <ul class="nav nav-pills justify-content-end mb-2">
                              <li class="nav-item tab_today">
                                <a class="nav-link {{$page}} {{($page == 'today')?'active':''}}" aria-current="page" href="javascript:void(0)" onclick="fetch_appointments('today')">Today</a>
                              </li>
                              <li class="nav-item tab_all">
                                <a class="nav-link {{$page}} {{($page == 'all')?'active':''}}" href="javascript:void(0)" onclick="fetch_appointments('all')">All</a>
                              </li>
                            </ul>
                             <div class="table-responsive">
                                 <table class="display table table-bordered booking_list" id="appointment_table" width="100%" route="{{ route('get-appointments-info')}}">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th width="20%">Patient Name</th>
                                            <th>Doctor Name</th>
                                            <th>Appointment Date</th>
                                            @if($user->role == 8)
                                              <th>Stages</th>
                                              <th>Procedure Advice</th>
                                            @else
                                              <th>Wait</th>
                                              <th>Consultation Time</th>
                                              <th>Status</th>
                                            @endif
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="prescriptionModal" tabindex="-1" role="dialog" aria-labelledby="prescriptionModalLabel" aria-hidden="true">
                 <div class="modal-dialog modal-lg" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <h5 class="modal-title" id="prescriptionModalTitle">Last Prescription Detail</h5>
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                       </button>
                     </div>
                           <div class="modal-body">
                               <div class="pres_modal_content"></div>
                           </div>
                           <!-- <div class="modal-footer">
                               <button type="submit" class="btn btn-primary" name="export_type" value="csv">Export CSV</button>
                               <button type="submit" class="btn btn-primary" name="export_type" value="excel">Export Excel</button>
                           </div> -->
                   </div>
                 </div>
               </div>
@include('admin.appointment-modal')
            <script type="text/javascript">
                $(document).ready(function(){
                    $('[data-toggle="tooltip"]').tooltip();

                    $("#appointment_table").on("click", '.show_presc_details', function(){
                        let url = $(this).attr("data-route");
                        if (url) {
                            $.ajax({
                                url: url,
                                type: "GET",
                                success: function (response) {
                                    if (response) {
                                        $('#prescriptionModal .pres_modal_content').html(response);
                                    }else{
                                        $('#prescriptionModal .pres_modal_content').html("No prescription added yet");
                                    }
                                    $('#prescriptionModal').modal('show');
                                },
                                error: function (xhr) {
                                    console.error(xhr.responseText);
                                    alert('An error occurred. Please try again.');
                                }
                            });
                        }
                    })

                    fetch_appointments("{{($page == 'all')?'all':'today'}}");
                });

                var userRole = "{{ $user->role }}";
                let columns = [
                    { data: 'index' },
                    { data: 'patient_name' },
                    { data: 'doctor_name' },
                    { data: 'appointment_date' },
                ];

                if (userRole == 8) {
                    columns.push({ data: 'lead_stages' });
                    columns.push({ data: 'procedure_advice' });
                }else{
                    columns.push({ data: 'wait_time' });
                    columns.push({ data: 'c_time' });
                    columns.push({ data: 'booking_status' });
                }

               columns.push({ data: 'action' });
              

                function fetch_appointments(type)
                {
                    if (type == "today") {
                        $(".tab_all a").removeClass('active');
                        $(".tab_today a").addClass('active');
                    }else{
                        $(".tab_today a").removeClass('active');
                        $(".tab_all a").addClass('active');
                    }
                 $('#appointment_table').DataTable({
                        processing: true,
                        serverSide: true,
                        destroy: true,
                        paging: false,             
                        scrollY: '470px',             
                        scrollCollapse: true,        
                        searching: true,
                        info: false,                 
                        ajax: {
                            url: "{{ route('get-appointments') }}",
                            type: "POST",
                            data: function (data) {
                                data._token = "{{ csrf_token() }}";
                                data.search = $('input[type="search"]').val();
                                data.type = type;
                            },
                            complete: function (xhr, status) {
                                $('[data-toggle="tooltip"]').tooltip();
                                $('.dataTables_scrollBody').css('min-height', '400px');
                            }
                        },
                        order: [['4', 'DESC']],
                        columns: columns,
                         createdRow: function (row, data) {  
                                if (data.current_booking_status === 'REVIEWED') {
                                    $(row).css('background-color', 'rgb(246 243 243)'); 
                                } 
                            }
                    });
                }

// change lead stages - 9 sept 2025


$(document).on('change', '.changeLeadStage', function () {
    var select = $(this);
    var newStage = select.val();
    var leadId = select.data('lead-id');
    var currentStage = select.data('current');

    if (!leadId) {
        swal({
            title: "Error",
            text: "Lead not available for this Appointment.",
            icon: "error",
            buttons: false,
            timer: 2000
        });
        select.val(currentStage); 
        return;
    }

    swal({
        title: "Are you sure?",
        text: "You are about to change the lead stage.",
        icon: "warning",
        buttons: {
                cancel: "Cancel",
                confirm: {
                    text: "Yes", 
                    value: true,
                    visible: true,
                    className: "",
                    closeModal: true
                }
            },
        dangerMode: true,
    }).then((willChange) => {
        if (willChange) {
            $.ajax({
                url: "{{ route('leads.updateLeadStage') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    lead_id: leadId,
                    stage: newStage
                },
                success: function (response) {
                    swal({
                        title: "Success",
                        text: "Lead stage updated!",
                        icon: "success",
                        buttons: false,
                        timer: 2000 
                    });
                    select.data('current', newStage);
                },
                error: function (xhr) {
                     swal({
                            title: "Error",
                            text: "The selected Lead is invalid.",
                            icon: "error", 
                            buttons: false,
                            timer: 2000 
                        });
                    select.val(currentStage);
                }
            });
        } else {
            select.val(currentStage);
        }
    });
});



// change booking status - 17 sept 2025

$(document).on('change', '.booking_status', function () {
    var select = $(this);
    var bookingId = select.attr('id');
    var booking_status = select.val();
    var statusesWithoutConfirmation = ['BOOKED', 'REVIEWED', 'ARRIVED', 'ONGOING'];

    function updateBookingStatus() {
        $.ajax({
            url: "{{ route('booking.changeStatus') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                bookingId: bookingId,
                booking_status: booking_status,
            },
            success: function (response) {
                swal({
                    title: "Success",
                    text: "Booking status updated!",
                    icon: "success",
                    buttons: false,
                    timer: 2000 
                });
                select.data('current', booking_status);
                location.reload();
            },
            error: function (xhr) {
                swal({
                    title: "Error",
                    text: "Failed to update status!",
                    icon: "error",
                    buttons: false,
                    timer: 2000
                });
            }
        });
    }

    if (statusesWithoutConfirmation.includes(booking_status)) {
        updateBookingStatus();
    } else {
        swal({
            title: "Are you sure?",
            text: "You are about to change the status.",
            icon: "warning",
            buttons: {
                cancel: "Cancel",
                confirm: {
                    text: "Yes",
                    value: true,
                    visible: true,
                    className: "",
                    closeModal: true
                }
            },
            dangerMode: true,
        }).then((willChange) => {
            if (willChange) {
                updateBookingStatus();
            } else {
                select.val(select.data('current'));
            }
        });
    }
});





 </script>
@endsection