@extends('admin.layout.index')
@section('title', 'Doctor 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.Doctor 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.Doctor 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>{{ __('translations.Doctor Name') }}:</strong> {{ $doctor->name }} </p>
                            <p><strong>{{ __('translations.Location') }}:</strong> {{ $doctor->location }} </p>
                            <p><strong>{{ __('translations.Specializations') }}:</strong> {{ $specialityNames }} </p>
                            <p><strong>{{ __('translations.Email') }}:</strong> {{ $doctor->email }}</p>
                            <p><strong>{{ __('translations.Queue Adjustment Number') }}
                                    :</strong> {{ $doctor->queue_adjustment_number ?? 'N/A' }}
                            </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 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.Working Days') }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="workingTimeTable" class="table nowrap align-middle" style="width:100%">
                                <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>{{ __('translations.No.') }}</th>
                                    <th>{{ __('translations.Day Name') }}</th>
                                    <th>{{ __('translations.Start Time') }}</th>
                                    <th>{{ __('translations.End Time') }}</th>
                                    <th>{{ __('translations.Break Time') }}</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </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('clinic.doctor.data', $id) }}",
                            type: "GET",
                        },
                        columns: [{
                            data: null,
                            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
                            }
                        ]
                    });


                    // Bookings DataTable
                    $('#workingTimeTable').DataTable({
                        processing: true,
                        serverSide: true,
                        ordering: false,
                        ajax: {
                            url: "{{ route('clinic.working.hours', $doctor->id) }}",
                            type: "GET",
                        },
                        columns: [{
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: function (data, type, row, meta) {
                                return meta.row + 1 + (meta.settings
                                    ._iDisplayStart); // Calculate serial number
                            },
                        },
                            {
                                data: 'day',
                                name: 'day'
                            },
                            {
                                data: 'from',
                                name: 'from'
                            },
                            // { data: 'services', name: 'services' },
                            {
                                data: 'to',
                                name: 'to'
                            },
                            {
                                data: 'break_time',
                                name: 'break_time'
                            },
                            // {
                            //     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