@extends('layouts.layout')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('patient-details.index') }}">@lang('Patient')</a>
                        </li>
                        <li class="breadcrumb-item active">@lang('Patient Info')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    @include('patient-detail.edit-modal')
    @include('patient-appointment.create-modal')
    @include('patient-appointment.edit-modal')
    @include('patient-detail.patient-files-modal')

    <div id="abc" class="row">
        <div class="col-md-3">
            <div class="card card-primary card-outline">
                <div class="card-body box-profile">
                    <input type="hidden" name="cpid" id="cpid" value="{{ $patientDetail->id }}">
                    <div class="text-center">
                        <img class="profile-user-img img-fluid img-circle" src="{{ $patientDetail->photo_url }}" alt="" />
                    </div>
                    <h3 class="profile-username text-center mb-2">{{ $patientDetail->name }}</h3>
                    <div class="row">
                        <label class="p-0 mr-2" for="status">@lang('Status:')</label>
                        <p>
                            @if ($patientDetail->status == 1)
                                <span class="badge badge-pill badge-success">@lang('Active')</span>
                            @elseif($patientDetail->status == 2)
                                <span class="badge badge-pill badge-primary">@lang('Waitlist')</span>
                            @elseif($patientDetail->status == 3)
                                <span class="badge badge-pill badge-warning">@lang('Discharged')</span>
                            @else
                                <span class="badeg badge-pill badge-danger">@lang('Inactive')</span>
                            @endif
                        </p>
                    </div>
                    <div class="row">
                        <label class="p-0 mr-2" for="gender">@lang('Gender:')</label>
                        <p>{{ ucfirst($patientDetail->gender) }}</p>
                    </div>
                    <div class="row">
                        <label class="p-0 mr-2" for="date_of_birth">@lang('Date of Birth:')</label>
                        <p>{{ $patientDetail->date_of_birth }}</p>
                    </div>
                    <div class="row">
                        <label class="p-0 mr-2" for="blood_group">@lang('Blood Group:')</label>
                        <p>{{ $patientDetail->blood_group }}</p>
                    </div>
                    <div class="row">
                        <label class="p-0 mr-2" for="email">@lang('Email:')</label>
                        <p>{{ $patientDetail->email }}</p>
                    </div>
                    <div class="row">
                        <label class="p-0 mr-2" for="phone">@lang('Phone:')</label>
                        <p>{{ $patientDetail->phone }}</p>
                    </div>
                    <div class="row">
                        <label class="p-0 mr-2" for="address">@lang('Address:')</label>
                        <p>{!! $patientDetail->address !!}</p>
                    </div>
                </div>



            </div>
        </div>
        <div class="col-md-9 mb-2">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <h3 class="card-title col-md-3">@lang('Patient Info')</h3>

                    </div>

                    <div class="row mt-2">
                        <div class="row col-md-12 ml-auto">
                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group btn-group-sm mr-2" role="group" aria-label="First group">

                                    {{-- <button type="button" class="btn btn-secondary" onclick="window.location.href='{{ route('patient-details.edit', $patientDetail) }}';">
                                        Edit Patient
                                    </button> --}}

                                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#editPatientModal">
                                        Edit Patient
                                    </button>

                                    <div class="btn-group">
                                        <button id="btnGroupDropFee" class="btn btn-default btn-sm" type="button">
                                            Invoice
                                        </button>
                                        <button type="button" class="btn-sm btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="sr-only">Invoice</span>
                                        </button>
                                        <div class="dropdown-menu " aria-labelledby="btnGroupDropFee">
                                            <a class="dropdown-item" target="_blank" href="{{ route('patient-invoices.show', $patientDetail->id) }}">Invoices</a>
                                            <a class="dropdown-item" target="_blank" href="{{ route('invoices.create') }}">New Invoice</a>
                                        </div>
                                    </div>
                                    <button id="casesSlideButton" type="button" class="btn btn-default btn-sm">Cases</button>
                                    @if ($patientDetail->id_card_photo)
                                        <a id="idCardButton" href="{{ $patientDetail->id_card_url }}" download="{{ $patientDetail->name }}_id_card" class="btn btn-default btn-sm">ID Card</a>
                                    @endif

                                    <div class="btn-group" role="group">
                                        <button id="btnGroupDropReport" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Reports
                                        </button>
                                        <div class="dropdown-menu " aria-labelledby="btnGroupDropReport">
                                            <a class="dropdown-item" target="_blank" href="{{ route('patient-labreport.create.route', $patientDetail->id) }}">Therapy Report</a>
                                            <a class="dropdown-item" target="_blank" href="{{ route('lab-report-templates.index') }}">Report Template</a>
                                        </div>
                                    </div>


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

                </div>
                <div class="card-body" id="appointmentCardBody">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="name">@lang('Patient Appointments History')</label>
                            </div>
                            <div>
                                <div class="row">
                                    <a href="javascript:void(0)" class="btn btn-info btn-sm col-md-auto" data-toggle="modal" data-target="#createPatientAppointmentModal"><span class="mif-plus"></span> New Appointment</a>
                                    @if (auth()->user()->can('patient-delete'))
                                        <a id="delete-selected-app" href="javascript:void(0)" class="btn btn-danger btn-sm col-md-auto ml-2"><span class="mif-bin"></span> Delete Selected</a>
                                    @endif

                                </div>
                                <div class="table-responsive p-3" id="show_all_appointments">
                                    <table class="table table-sm table-bordered align-items-center table-striped table-paginate table-hover display responsive nowrap" id="appointmentsTable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th><input type="checkbox" id="app_select_all"></th>
                                                <th>Appointment Date</th>
                                                <th>Time Range</th>
                                                <th>Case/Non Case</th>
                                                <th>Therapy</th>
                                                <th>Appointment Type</th>
                                                <th>Doctor</th>
                                                <th>Status</th>
                                                <th>Issue</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="appointment_tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="caseCardBody">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="name">@lang('Patient Case History')</label>
                            </div>
                            <div>
                                <div>
                                    <a class="btn btn-info btn-sm" target="_blank" href="{{ route('patient-case.create.route', $patientDetail->id) }}"><span class="mif-plus"></span> New Case</a>
                                </div>
                                <div class="table-responsive p-3" id="show_all_cases">
                                    <table class="table table-sm table-bordered align-items-center table-striped table-paginate table-hover display" id="casesTable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Therapy</th>
                                                <th>Start Date</th>
                                                <th>End Date</th>
                                                <th>Total Hours</th>
                                                <th>Remaining Hours</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="cases_tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="feesCardBody">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="name">@lang('Patient Fee/Invoice History')</label>
                            </div>
                            <div>
                                <div>
                                    <a class="btn btn-info btn-sm" target="_blank" href="{{ route('patient-invoice.create.route', $patientDetail->id) }}"><span class="mif-plus"></span> New Invoice</a>
                                </div>
                                <div class="table-responsive p-3" id="show_all_fees">
                                    <table class="table table-sm table-bordered align-items-center table-striped table-paginate table-hover display" id="invoicesTable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Invoice Date</th>
                                                <th>Case/Non Case</th>
                                                <th>Amount Paid</th>
                                                <th>Amount Due</th>
                                                <th>Total</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="invoices_tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="filesCardBody">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="name">@lang('Patient Files')</label>
                            </div>
                            <div>
                                <div>
                                    <a class="btn btn-info btn-sm text-light" href="javascript:void(0)" data-toggle="modal" data-target="#patientFilesModal"><span class="mif-plus"></span> New File</a>
                                </div>
                                <div class="table-responsive p-3" id="show_all_files">
                                    <table class="table table-sm table-bordered align-items-center table-striped table-paginate table-hover display" id="filesTable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Document Name</th>
                                                <th>Case/Non Case</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="files_tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('one_page_js')
    <script>
        fetchAllAppointments();
        fetchAllCases();
        fetchAllInvoices();
        fetchAllFiles();


        $("#patientEditForm").submit(function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            let _url = '{{ route('patient-details-modal.update') }}';
            $("#patientEditFormSubmit").text('Updating...');
            $.ajax({
                url: _url,
                method: 'post',
                data: fd,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',

                success: function(response) {
                    if (response.status == 200) {
                        Swal.fire(
                            'Updated!',
                            'Data Updated Successfully!',
                            'success'
                        )
                        //fetchAllPatient();
                    }
                    $("#patientEditFormSubmit").text('Update');
                    $("#patientEditForm")[0].reset();
                    $("#editPatientModal").modal('hide');
                    window.location.reload();
                }
            });
        });


        $("#createAppointmentForm").submit(function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            let _url = '{{ route('details-patient-appointment.store') }}';

            if ($("#recurring_period").val() == 'daily') {
                var checkboxChecked = false;
                $('input[name="Sunday"], input[name="Monday"], input[name="Tuesday"], input[name="Wednesday"], input[name="Thursday"], input[name="Friday"], input[name="Saturday"]').each(function() {
                    if ($(this).is(':checked')) {
                        checkboxChecked = true;
                        return false; // This line will break the loop when first selected checkbox is found
                    }
                });

            } else {
                checkboxChecked = true;
            }


            if (!checkboxChecked) {
                alert("Please select at least one day from Sunday to Saturday.");
            } else {
                $.ajax({
                    url: _url,
                    method: 'post',
                    data: fd,
                    cache: false,
                    processData: false,
                    contentType: false,
                    dataType: 'json',

                    success: function(response) {
                        Swal.fire(
                            'Saved!',
                            'Data Saved Successfully!',
                            'success'
                        );
                        $("#createAppointmentForm")[0].reset();
                        $("#createPatientAppointmentModal").modal('hide');
                        fetchAllAppointments();
                        fetchAllCases();
                    },
                    error: function(response) {
                        console.log(response);
                        fetchAllAppointments();
                        fetchAllCases();
                        $("#createAppointmentForm")[0].reset();
                        $("#createPatientAppointmentModal").modal('hide');
                        Swal.fire(
                            'Alert!',
                            response.responseJSON.message,
                            'info'
                        );

                    }
                });
            }


        });

        $(document).on('click', '.edit-appointment', function(e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            let _url = '{{ route('details-patient-appointment.edit') }}';
            $.ajax({
                url: _url,
                method: 'get',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $("#patient_appointment_id").val(response.id);
                    $("#doctor_id_edit").val(response.doctor.id);
                    //$("#supervisor_therapist_edit").val(response.supervisor_therapist);
                    $("#supervisor_id_edit").val(response.supervisor_id ? response.supervisor_id : '');
                    $("#appointment_date_edit").flatpickr({
                        dateFormat: "Y-m-d",
                    }).setDate(response.appointment_date, true, 'Y-m-d');
                    $('#start_time_edit').flatpickr({
                        enableTime: true,
                        noCalendar: true,
                        dateFormat: 'H:i',
                    }).setDate(response.start_time);

                    $('#end_time_edit').flatpickr({
                        enableTime: true,
                        noCalendar: true,
                        dateFormat: 'H:i',
                    }).setDate(response.end_time);
                    $("#appointment_slot_edit").val(null);
                    $("#hospital_department_id_edit").val(response.hospital_department.id);
                    $("#appointment_type_id_edit").val(response.appointment_type.id);
                    $("#appointment_status_id_edit").val(response.appointment_status.id);
                    $("#problem_edit").val(response.problem ? response.problem : "");
                    $("#appointment_slot_edit").prop('required', false);

                    if (response.prescription) {
                        $('#if_case').html('(This appointment is related to case: ' + response.prescription.hospital_department.name + ' ' + response.prescription.prescription_date + ')');
                    } else {
                        $('#if_case').html('');
                    }
                }
            });
        });

        $('#doctor_id_edit, #appointment_date_edit').on('change', function() {
            $("#appointment_slot_edit").prop('required', true);
        });

        $("#editAppointmentForm").submit(function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            let _url = '{{ route('details-patient-appointment.update') }}';
            $.ajax({
                url: _url,
                method: 'post',
                data: fd,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',

                success: function(response) {
                    if (response.status == 200) {
                        Swal.fire(
                            'Updated!',
                            'Data Updated Successfully!',
                            'success'
                        )
                    }

                    $("#editAppointmentForm")[0].reset();
                    $("#editPatientAppointmentModal").modal('hide');
                    fetchAllAppointments();
                    fetchAllCases();
                },
                error: function(response) {
                    if (response.status == 400) {
                        Swal.fire(
                            'Alert!',
                            response.responseJSON.message,
                            'info'
                        )
                    }
                    $("#editAppointmentForm")[0].reset();
                    $("#editPatientAppointmentModal").modal('hide');
                }

            });
        });

        $(document).on('click', '.delete-appointment', function(e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            let csrf = '{{ csrf_token() }}';
            let _url = '{{ route('details-patient-appointment.delete') }}';

            swal({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                buttons: [
                    'Cancel',
                    'Yes, I am sure!'
                ],
                dangerMode: true,
            }).then(function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: _url,
                        method: 'delete',
                        data: {
                            id: id,
                            _token: csrf
                        },
                        success: function(response) {
                            /* $('#abc').html(response.view); */
                            Swal.fire(
                                'Deleted!',
                                'Data deleted successfully.',
                                'success'
                            );
                            fetchAllAppointments();
                            fetchAllCases();
                            fetchAllInvoices();
                        }
                    });
                }
            });
        });

        $(document).on('click', '.delete-casses', function(e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            let csrf = '{{ csrf_token() }}';

            let _url = '{{ route('details-patient-cases.delete') }}';


            swal({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                buttons: [
                    'Cancel',
                    'Yes, I am sure!'
                ],
                dangerMode: true,
            }).then(function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: _url,
                        method: 'delete',
                        data: {
                            id: id,
                            _token: csrf
                        },
                        success: function(response) {
                            /* $('#abc').html(response.view); */
                            Swal.fire(
                                'Deleted!',
                                'Data deleted successfully.',
                                'success'
                            );
                            fetchAllAppointments();
                            fetchAllCases();
                            fetchAllInvoices();
                        }
                    });

                }
            });
        });

        $(document).on('click', '.delete-invoices', function(e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            let csrf = '{{ csrf_token() }}';

            let _url = '{{ route('details-patient-invoices.delete') }}';


            swal({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                buttons: [
                    'Cancel',
                    'Yes, I am sure!'
                ],
                dangerMode: true,
            }).then(function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: _url,
                        method: 'delete',
                        data: {
                            id: id,
                            _token: csrf
                        },
                        success: function(response) {
                            /* $('#abc').html(response.view); */
                            Swal.fire(
                                'Deleted!',
                                'Data deleted successfully.',
                                'success'
                            );
                            fetchAllInvoices();
                        },
                        error: function(response) {
                            Swal.fire(
                                'Error',
                                //response.responseJSON.message,
                                'can not delete because the invoice is attached to a case',
                                'error'
                            );

                        }
                    });

                }
            });
        });

        $(document).on('click', '.delete-file', function(e) {
            e.preventDefault();
            let file_id = $(this).attr('data-id');
            let csrf = '{{ csrf_token() }}';

            let _file_url = '{{ route('details-patient-file.delete') }}';


            swal({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                buttons: [
                    'Cancel',
                    'Yes, I am sure!'
                ],
                dangerMode: true,
            }).then(function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: _file_url,
                        method: 'delete',
                        data: {
                            file_id: file_id,
                            _token: csrf
                        },
                        success: function(f_response) {
                            Swal.fire(
                                'Deleted!',
                                'Data deleted successfully.',
                                'success'
                            );
                            fetchAllFiles();
                        },
                        error: function(f_response) {
                            Swal.fire(
                                'Error',
                                'file missing',
                                'error'
                            );
                        }
                    });

                }
            });
        });


        function fetchAllAppointments() {

            let _url = '{{ route('patient-appointment.fetch', $patientDetail->id) }}';
            str = "";
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "json",
                success: function(response1) {
                    $('#appointmentsTable').DataTable().destroy();
                    $('#appointment_tbody').html("");
                    $.each(response1.patientAppointments, function(key, item) {
                        str += '<tr>';
                        str += '<td></td>';
                        str += '<td>' + '<input type="checkbox" class="app-checkbox" data-id="' + item.id + '">' + '</td>';
                        str += '<td>' + moment(item.appointment_date).format('DD-MMM-YYYY') + '</td>';
                        str += '<td>' + moment(item.start_time, "HH:mm:ss").format("hh:mm A") + " - " + moment(item.end_time, "HH:mm:ss").format("hh:mm A") + '</td>';
                        str += '<td>' + (item.prescription_id ? 'Case' : 'Non Case') + '</td>';
                        str += '<td>' + item.hospital_department.name + '</td>';
                        str += '<td>' + item.appointment_type.name + '</td>';
                        str += '<td>' + item.doctor.name + '</td>';
                        str += '<td>' + item.appointment_status.name + '</td>';
                        str += '<td>' + ((item.problem != null) ? item.problem : "Not Available") + '</td>';

                        str += '<td>';
                        str += '<div class="btn-group">';
                        @if (auth()->user()->can('patient-update'))
                            str += '<a href="#" data-id="' + item.id + '" class="btn btn-primary btn-sm edit-appointment" data-toggle="modal" data-target="#editPatientAppointmentModal">Edit</a>';
                        @endif

                        @if (auth()->user()->can('patient-delete'))
                            str += '<a href="#" data-id="' + item.id + '" class="btn btn-danger btn-sm delete-appointment">Delete</a>';
                        @endif
                        str += '</div>';
                        str += '</td>';

                        str += '</tr>';
                    })
                    $('#appointment_tbody').append(str);
                    $("#appointmentsTable").DataTable({
                        lengthMenu: [
                            [5, 10, 25, 50, -1],
                            [5, 10, 25, 50, 'All'],
                        ],
                        fixedHeader: true,
                        "bDestroy": true,
                        "pageLength": 5,
                        responsive: true,
                        columnDefs: [{
                                responsivePriority: 1,
                                targets: 0,
                                orderable: false
                            },
                            {
                                responsivePriority: 3,
                                targets: 1,
                                orderable: false
                            },
                            {
                                responsivePriority: 4,
                                targets: 2
                            },
                            {
                                responsivePriority: 2,
                                targets: -1
                            }
                        ]

                    });
                }
            });
        }

        function fetchAllCases() {

            let _url = '{{ route('patient-cases.fetch', $patientDetail->id) }}';
            str2 = "";
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "json",
                success: function(response2) {
                    $('#casesTable').DataTable().destroy();
                    $('#cases_tbody').html("");
                    $.each(response2.prescription, function(key2, item2) {
                        str2 += '<tr>';
                        str2 += '<td>' + (key2 + 1) + '</td>';
                        str2 += '<td>' + item2.hospital_department.name + '</td>';
                        str2 += '<td>' + moment(item2.admission_date).format('DD-MMM-YYYY') + '</td>';
                        str2 += '<td>' + (item2.discharge_date ? moment(item2.discharge_date).format('DD-MMM-YYYY') : 'null') + '</td>';
                        /* str2 += '<td>' + ((item2.visits > 60) ? ((Math.trunc(item2.visits/60)) + 'hours ' + (item2.visits/60 - Math.trunc(item2.visits/60))*60 + 'minutes') : (item2.visits + 'minutes'))  + '</td>'; */

                        str2 += '<td>' + (item2.visits ? convert_to_hours_minutes(item2.visits) : 'N/A') + '</td>';
                        str2 += '<td>' + (item2.remaining_hours ? convert_to_hours_minutes(item2.remaining_hours) : 'N/A') + '</td>';

                        var edit_url = '{{ route('details-patient-case.edit', ':id') }}';
                        edit_url = edit_url.replace(':id', item2.id);
                        var show_url = '{{ route('prescriptions.show', ':id') }}';
                        show_url = show_url.replace(':id', item2.id);
                        str2 += '<td>';
                        str2 += '<div class="btn-group">';
                        str2 += '<a target="_blank" href="' + show_url + '" data-id="' + item2.id + '" class="btn btn-success btn-sm">View</a>';
                        /* str2 += '<a target="_blank" href="' + edit_url +  '" data-id="' + item2.id + '" class="btn btn-primary btn-sm">Edit</a>'; */
                        str2 += '<a target="_blank" href="' + edit_url + '?user_id=' + item2.user_id + '" data-id="' + item2.id + '" class="btn btn-primary btn-sm">Edit</a>';
                        @if (auth()->user()->can('patient-delete'))
                            str2 += '<a href="#" data-id="' + item2.id + '" class="btn btn-danger btn-sm delete-casses">Delete</a>';
                        @endif
                        str2 += '</div>';
                        str2 += '</td>';
                        str2 += '</tr>';

                        addOption(item2.id, item2.hospital_department.name + ' ' + item2.admission_date);

                        //let patient_cases = $("<option>").val(item2.id).text(item2.hospital_department.name + ' ' + item2.admission_date);
                        //$("#prescriptionId").append(patient_cases);
                    })
                    $('#cases_tbody').append(str2);
                    $("#casesTable").DataTable({
                        lengthMenu: [
                            [5, 10, 25, 50, -1],
                            [5, 10, 25, 50, 'All'],
                        ],
                        fixedHeader: true,
                        "bDestroy": true,
                        "pageLength": 5,
                        responsive: true,
                        columnDefs: [{
                                responsivePriority: 1,
                                targets: 0
                            },
                            {
                                responsivePriority: 3,
                                targets: 1
                            },
                            {
                                responsivePriority: 4,
                                targets: 2
                            },
                            {
                                responsivePriority: 2,
                                targets: -1
                            }
                        ]
                    });
                }
            });
        }

        function fetchAllInvoices() {
            let _url = '{{ route('patient-invoices.fetch', $patientDetail->id) }}';
            str3 = "";
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "json",
                success: function(response3) {
                    $('#invoicesTable').DataTable().destroy();
                    $('#invoices_tbody').html("");
                    $.each(response3.invoices, function(key3, item3) {
                        str3 += '<tr>';
                        str3 += '<td>' + (key3 + 1) + '</td>';
                        str3 += '<td>' + moment(item3.invoice_date).format('DD-MMM-YYYY') + '</td>';
                        str3 += '<td>' + ((item3.prescription.length > 0) ? 'Case: ' + (item3.prescription ? item3.prescription[0].admission_date : '') + "<br>" + (item3.prescription ? item3.prescription[0].hospital_department.name : '') : 'Non Case') + '</td>';
                        str3 += '<td>' + item3.paid + '</td>';
                        str3 += '<td>' + item3.due + '</td>';
                        str3 += '<td>' + item3.grand_total + '</td>';

                        var view_invoice_url = '{{ route('invoices.show', ':id') }}';
                        view_invoice_url = view_invoice_url.replace(':id', item3.id);
                        var edit_invoice_url = '{{ route('invoices.edit', ':id') }}';
                        edit_invoice_url = edit_invoice_url.replace(':id', item3.id);
                        str3 += '<td>';
                        str3 += '<div class="btn-group">';
                        str3 += '<a target="_blank" href="' + view_invoice_url + '" data-id="' + item3.id + '" class="btn btn-success btn-sm">View</a>';
                        @if (auth()->user()->can('patient-delete') ||
                                auth()->user()->can('patient-update'))
                            ((item3.prescription.length > 0) ? null :
                                str3 += '<a target="_blank" href="' + edit_invoice_url + '" data-id="' + item3.id + '" class="btn btn-primary btn-sm">Edit</a>');

                            str3 += '<a href="#" data-id="' + item3.id + '" class="btn btn-danger btn-sm delete-invoices">Delete</a>';
                        @endif
                        str3 += '</div>';
                        str3 += '</td>';

                        str3 += '</tr>';
                    })
                    $('#invoices_tbody').append(str3);
                    $("#invoicesTable").DataTable({
                        lengthMenu: [
                            [5, 10, 25, 50, -1],
                            [5, 10, 25, 50, 'All'],
                        ],
                        fixedHeader: true,
                        "bDestroy": true,
                        "pageLength": 5,
                        responsive: true,
                        columnDefs: [{
                                responsivePriority: 1,
                                targets: 0
                            },
                            {
                                responsivePriority: 3,
                                targets: 1
                            },
                            {
                                responsivePriority: 4,
                                targets: 2
                            },
                            {
                                responsivePriority: 2,
                                targets: -1
                            }
                        ]

                    });
                }
            });
        }

        function fetchAllFiles() {
            let _url = '{{ route('details-patient-files.fetch', $patientDetail->id) }}';
            str_files = "";
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "json",
                success: function(file_resp) {
                    $('#filesTable').DataTable().destroy();
                    $('#files_tbody').html("");
                    $.each(file_resp.files, function(f_key, f_item) {
                        str_files += '<tr>';
                        str_files += '<td>' + (f_key + 1) + '</td>';
                        str_files += '<td>' + f_item.file_name + '</td>';
                        str_files += '<td>' + (f_item.prescription_id ? 'Case: ' + f_item.prescription.admission_date + "<br>" + f_item.prescription.hospital_department.name : 'Non Case') + '</td>';

                        str_files += '<td>';
                        str_files += '<div class="btn-group">';
                        str_files += '<a download href="' + f_item.path_url + '" data-id="' + f_item.id + '" class="btn btn-success btn-sm">Download</a>';

                        str_files += '<a href="#" data-id="' + f_item.id + '" class="btn btn-danger btn-sm delete-file">Delete</a>';
                        str_files += '</div>';
                        str_files += '</td>';

                        str_files += '</tr>';
                    })
                    $('#files_tbody').append(str_files);
                    $("#filesTable").DataTable({
                        lengthMenu: [
                            [5, 10, 25, 50, -1],
                            [5, 10, 25, 50, 'All'],
                        ],
                        fixedHeader: true,
                        "bDestroy": true,
                        "pageLength": 5,
                        responsive: true,
                        columnDefs: [{
                                responsivePriority: 1,
                                targets: 0
                            },
                            {
                                responsivePriority: 3,
                                targets: 1
                            },
                            {
                                responsivePriority: 4,
                                targets: 2
                            },
                            {
                                responsivePriority: 2,
                                targets: -1
                            }
                        ]

                    });
                }
            });
        }

        $("#casesSlideButton").click(function() {
            $([document.documentElement, document.body]).animate({
                scrollTop: $("#caseCardBody").offset().top
            }, 300);
        });

        $("#file_upload_form").submit(function(e) {
            e.preventDefault();
            const filesdata = new FormData(this);
            let _url = '{{ route('details-patient-file.store') }}';
            $.ajax({
                url: _url,
                method: 'post',
                data: filesdata,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',

                success: function(upld_resp) {
                    if (upld_resp.status == 200) {
                        Swal.fire(
                            'Updated!',
                            'Data Updated Successfully!',
                            'success'
                        )
                    }
                    $("#file_upload_form")[0].reset();
                    $("#userId").val('{{ $patientDetail->id }}');
                    $("#patientFilesModal").modal('hide');

                }
            }).done(function(data) {
                fetchAllFiles();
            });

        });

        $("#btnGroupDropFee").click(function() {
            $([document.documentElement, document.body]).animate({
                scrollTop: $("#feesCardBody").offset().top
            }, 300);
        });

        $("#recurring_period").change(function() {
            if ($(this).val() == 'daily') {
                $('#daily_day_checkbox_div').show();
            } else {
                $('#daily_day_checkbox_div').hide();
            }
        });

        $("#app_select_all").change(function() {
            $(".app-checkbox").prop('checked', $(this).prop("checked"));
        });

        $('#delete-selected-app').click(function() {
            let app_ids = [];
            let csrf = '{{ csrf_token() }}';
            let del_url = '{{ route('details-patient-appointments.delete') }}';
            $('.app-checkbox:checked').each(function() {
                app_ids.push($(this).data('id'));
            });

            if (app_ids.length <= 0) {
                alert("Please select appointments.");
            } else {
                swal({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    buttons: [
                        'Cancel',
                        'Yes, I am sure!'
                    ],
                    dangerMode: true,
                }).then(function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: del_url,
                            method: 'delete',
                            data: {
                                ids: app_ids,
                                _token: csrf
                            },
                            success: function(response) {
                                Swal.fire(
                                    'Deleted!',
                                    'Data deleted successfully.',
                                    'success'
                                );
                                fetchAllAppointments();
                                fetchAllCases();
                                fetchAllInvoices();
                            }
                        });
                    }
                });
            }
        });


        function convert_to_hours_minutes(minutes = 0) {
            if (minutes > 60) {
                let hours = Math.floor(minutes / 60);
                minutes = minutes % 60;
                return hours + ' hours ' + minutes + ' minutes';
            }
            return minutes + ' minutes';
        }

        function addOption(value, text) {
            // Check if the option already exists
            if ($("#prescriptionId option").filter(function() {
                    return $(this).val() == value;
                }).length === 0) {
                // Append the option if it doesn't exist
                $("#prescriptionId").append("<option value='" + value + "'>" + text + "</option>");
            }
        }


        // Listen for changes to the value in local storage
        window.addEventListener("storage", function(event) {
            if (event.key === "dataSaved" && event.newValue === "true") {
                // Reload the page if the value in local storage has changed to "true"
                location.reload();
                localStorage.setItem("dataSaved", false);
            }
        });
    </script>
@endsection