@extends('admin.layout.index')
@section('title', 'Patient Details')
@section('custom-style')
    <style>
    </style>
@endsection
@section('content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                        <h4 class="mb-sm-0">{{ __('translations.Patient Details') }}</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('translations.Admin') }}</a></li>
                                <li class="breadcrumb-item active">{{ __('translations.Patient Details') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <!-- Clinic Details Section -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card border">
                        <div class="card-body">
                            <p><strong>Patient Name:</strong> {{ $patient->first_name . ' ' . $patient->last_name }} </p>
                            {{-- <p><strong>Location:</strong> {{$patient->location}} </p> --}}
                            {{-- <p><strong>Specialization:</strong> {{$specialityNames}} </p> --}}
                            <p><strong>Email:</strong> {{ $patient->email }}</p>
                            {{-- <p><strong>Phone:</strong> +1 234 567 890 </p> --}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-lg-12">
                    <!-- Bookings Table Section -->
                    <div class="card mt-4">
                        <div class="card-header border-bottom-dashed">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm">
                                    <h5 class="card-title mb-0">{{ __('translations.Bookings') }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="booking-table" class="table nowrap align-middle" style="width:100%">
                                <thead class="text-muted table-light">
                                    <tr class="text-uppercase">
                                        <th>{{ __('translations.No.') }}</th>
                                        <th>{{ __('translations.Patient Name') }}</th>
                                        <th>{{ __('translations.Doctor Name') }}</th>
                                        <th>{{ __('translations.Total Price') }}</th>
                                        <th>{{ __('translations.Date') }}</th>
                                        <th>{{ __('translations.Status') }}</th>
                                        <th>{{ __('translations.Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>


                    <!-- Delete Booking Modal -->
                    <div class="modal fade" id="deleteBookingModal" tabindex="-1" aria-labelledby="deleteBookingModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteBookingModalLabel">{{ __('translations.Delete Booking') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <form id="deleteBooking">
                                    @csrf
                                    <input type="hidden" name="id" id="deleteBookingId">
                                    <div class="modal-body">
                                        <p>{{ __('translations.Are you sure you want to delete this booking?') }}</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                            {{ __('translations.Cancel') }}
                                        </button>
                                        <button type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

    @endsection
    @section('custom-script')
        <script>
            // Delete
            function deleteBookingRecord(id) {

                $('#deleteBookingId').val(id);
            }

            $(document).ready(function() {
                // Bookings DataTable
                $('#booking-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ordering: false,
                    ajax: {
                        url: "{{ route('getPatientDetail', $id) }}",
                        type: "GET",
                    },
                    columns: [{
                            data: null, // This column will not have any data, just an index
                            orderable: false,
                            searchable: false,
                            render: function(data, type, row, meta) {
                                return meta.row + 1 + (meta.settings
                                    ._iDisplayStart); // Calculate serial number
                            },
                        },
                        {
                            data: 'patient_name',
                            name: 'patient_name'
                        },
                        {
                            data: 'doctor_name',
                            name: 'doctor_name'
                        },
                        // { data: 'services', name: 'services' },
                        {
                            data: 'total_price',
                            name: 'total_price'
                        },
                        {
                            data: 'date',
                            name: 'date'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });


                $("#deleteBooking").on('submit', function(e) {
                    e.preventDefault();
                    const btn = $("#submitDelForm");
                    const modal = $('#deleteModal');
                    let formData = new FormData($("#deleteBooking")[0]);
                    $.ajax({
                        type: "POST",
                        url: "{{ route('clinicBooking.delete') }}",
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        cache: false,
                        data: formData,
                        beforeSend: function() {
                            btn.prop('disabled', true);
                            btn.html(
                                '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                            );
                            $('.error-message').html('');
                        },
                        success: function(res) {
                            if (res.success === true) {
                                btn.prop('disabled', false);
                                btn.html('Delete');
                                modal.modal('hide');
                                notyf.success({
                                    message: res.message,
                                    duration: 3000
                                });
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);

                            } else {
                                btn.prop('disabled', false);
                                btn.html('Delete');
                                modal.modal('hide');
                                notyf.error({
                                    message: res.message,
                                    duration: 3000
                                });
                            }
                        },
                        error: function(e) {
                            btn.prop('disabled', false);
                            btn.html('Delete');
                        }
                    });
                });


            });
        </script>
    @endsection