@extends('layout.app')
@section('title', 'Doctors | Waiting Room')


@section('content')
    <style>
        .avatar-placeholder {
            width: 1.875rem;
            height: 1.875rem;
            background-color: #ccc;
            border-radius: 50%;
            display: inline-block;
        }

        span.avatar.avatar-placeholder.bg-white.border.border-1.more-count {
            position: absolute;
            text-align: center;
            line-height: 1.8rem;
            font-size: 10px !important;
            font-weight: 500;
            cursor: pointer;
        }

        span.avatar.avatar-placeholder.bg-white.border.border-1.more-count .search-job {
            background-color: #fff !important;
        }

        .search-job .job-title-search .search-box .form-control {
            border: 0 !important;
        }

        .pos-abs {
            position: absolute;
            right: 10px;
        }
		.min-height5 {
			min-height: 32px;
		}
    </style>


    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a>
            </li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Doctors') }}</a></li>
        </ol>
    </div>

    {{-- <div class="filter cm-content-box box-primary">
        <div class="content-title SlideToolHeader">
            <div class="cpa">
                <i class="fa-sharp fa-solid fa-filter me-2"></i>{{ __('translations.Filters') }}
            </div>
            <div class="tools">
                <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
            </div>
        </div>
        <div class="cm-content-body form excerpt">
            <div class="card-body">
                <div class="row">
                    <div class="col-xl-3 col-sm-6">
                        <label class="form-label">{{ __('translations.Name') }}</label>
                        <input type="text" class="form-control mb-xl-0 mb-3" id="exampleFormControlInput1"
                               placeholder="{{ __('translations.Doctor') }}">
                    </div>
                    <div class="col-xl-3  col-sm-6 mb-3 mb-xl-0">
                        <label class="form-label">{{ __('translations.Type') }}</label>
                        <select class="form-control default-select h-auto wide" aria-label="Default select example">
                            <option selected>{{ __('translations.Select Type') }}</option>
                            <option value="1">{{ __('translations.Dermatologist') }}</option>
                            <option value="2">{{ __('translations.Cardiologist') }}</option>
                            <option value="3">{{ __('translations.General Physician') }}</option>
                        </select>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <label class="form-label">{{ __('translations.Date') }}</label>
                        <div class="input-hasicon mb-sm-0 mb-3">
                            <input name="datepicker" type="date" class="form-control bt-datepicker">
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6 align-self-end">
                        <div>
                            <button class="btn btn-primary me-2" title="Click here to Search" type="button"><i
                                    class="fa fa-filter me-1"></i>{{ __('translations.Filters') }}
                            </button>
                            <button class="btn btn-danger" title="Click here to remove filter"
                                    type="button">{{ __('translations.Remove Filter') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <div class="row">
        <div class="col">
            <h4>All Doctor</h4>
        </div>
        <div class="col d-flex justify-content-end">
            <a class="btn btn-primary" href="{{ route('barbers.add') }}">Add Doctors</a>
        </div>
    </div>

    <div class="row mt-3">
        @forelse ($serviceProviders as $serviceProvider)
            <div class="col-xl-3 col-xxl-4 col-sm-6 mt-3">
                <div class="card {{ $serviceProvider->status == 1 ? '' : 'bg-danger-light' }}">
                    <div class="card-body p-3">
                        <div class="clearfix d-flex">
                            <div
                                class="avatar avatar-md rounded bg-light d-flex align-items-center justify-content-center me-3">
                                <img src="{{ asset($serviceProvider->image ?? 'assets/profile-placeholder.jpeg') }}"
                                    class="m-0 rounded" alt="" width="50" height="40">
                            </div>
                            <div class="clearfix">
                                <h6 class="mb-0 fw-semibold"><a href="{{ route('doctor.profile', $serviceProvider->id) }}"
                                        class="text-dark">{{ $serviceProvider->name }}</a></h6>
                                <span class="text-muted fs-13">{{ $serviceProvider->specialities[0]->name }}</span>
                            </div>
                            <div class="pos-abs">
                                <span
                                    class="badge {{ $serviceProvider->status == 1 ? 'bg-success' : 'bg-danger' }}">{{ $serviceProvider->status == 1 ? 'Active' : 'Inactive' }}</span>
                                <a href="{{ route('edit.user', $serviceProvider->id) }}"
                                    class="btn btn-primary btn-xs sharp" title="Edit"><i
                                        class="fas fa-pencil-alt"></i></a>
                                <a class="btn btn-warning btn-xs sharp open-ban-modal" data-id="{{ $serviceProvider->id }}"
                                    title="Deactivate"><i class="fas fa-ban"></i></a>
                                <a href="javascript:void(0);" class="btn btn-danger btn-xs sharp open-delete-modal"
                                    data-id="{{ $serviceProvider->id }}" title="Delete">
                                    <i class="fa fa-trash"></i>
                                </a>
                            </div>
                        </div>
                        @if ($serviceProvider->bio)
                            <p class="my-3">{{ $serviceProvider->bio }}</p>
                        @else
                            <p class="my-3 min-height5"></p>
                        @endif
                        <div class="clearfix">
                            <p class="mb-1 font-w500">{{ $serviceProvider->todayBookings > 0 ? 'Patient(s)' : '' }}</p>
                            <div class="d-flex justify-content-between">
                                <div class="avatar-list avatar-list-stacked">
                                    @foreach ($serviceProvider->bookings->take(7) as $booking)
                                        @php
                                            $imagePath = $booking->getUser->image
                                                ? asset($booking->getUser->image)
                                                : null;
                                            $fileExists =
                                                $imagePath && file_exists(public_path($booking->getUser->image));
                                        @endphp
                                        @if ($fileExists)
                                            <img src="{{ $imagePath }}" class="avatar rounded-circle" alt=""
                                                title="{{ $booking->getUser->first_name . ' ' . $booking->getUser->last_name }}">
                                        @else
                                            <span class="avatar avatar-placeholder"
                                                title="{{ $booking->getUser->first_name . ' ' . $booking->getUser->last_name }}"></span>
                                        @endif
                                    @endforeach
                                    {{-- Show "+X" if there are more than 7 patients --}}
                                    @if ($serviceProvider->todayBookings > 7)
                                        <span class="avatar avatar-placeholder bg-white border border-1 more-count"
                                            title="Booking count: {{ $serviceProvider->todayBookings }}">
                                            +{{ $serviceProvider->todayBookings - 7 }}
                                        </span>
                                    @endif
                                </div>

                                <div>
                                    <button type="button" class="btn btn-xs btn-dark">
                                        Total Patient(s): {{ $serviceProvider->todayBookings }}
                                    </button>
                                </div>

                            </div>
                        </div>
                        <div class="mt-3">
                            <div class="d-flex justify-content-between">
                                <span class="fw-medium">Appointments Completed</span>
                                <span class="">{{ round($serviceProvider->completedPercentage) }}%</span>
                            </div>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-success"
                                    style="width:{{ $serviceProvider->completedPercentage }}%; height:6px; border-radius:4px;"
                                    role="progressbar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer p-3 d-flex justify-content-between flex-wrap">
                        <div>
                            <p class="mt-1">Fees: <b>${{ $serviceProvider->ServiceCharges->first()->price }}</b></p>
                        </div>
                        <div>
                            <button class="btn btn-xs btn-danger me-1 open-cancel-modal" title="Cancel All Appointments"
                                data-id="{{ $serviceProvider->id }}">Cancel
                                Appointments</button>
                            <button class="btn btn-xs btn-primary" title="Send Credentials"
                                onclick="sendCredentials({{ $serviceProvider->id }}, this)">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div>No Doctor Found</div>
        @endforelse
    </div>

    <!--Account Ban Modal -->
    <div class="modal fade" id="accountBan" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        {{ __('Ban doctor') }}
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="banUser">
                    @csrf
                    <input type="hidden" name="id" id="banUserId">
                    <div class="modal-body">
                        {{ __('Are you sure you want to deactivate this doctor?') }}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary"
                            data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="deactivateDocForm" type="submit"
                            class="btn btn-danger">{{ __('Deactivate') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--Delete Modal -->
    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        {{ __('translations.Delete doctor') }}
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="deleteUser">
                    @csrf
                    <input type="hidden" name="id" id="deleteUserId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete this doctor?') }}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary"
                            data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitDelForm" type="submit"
                            class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--Cancel All Appointments Modal -->
    <div class="modal fade" id="cancelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        {{ __('translations.Cancel All Appointments') }}
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelAllAppointments">
                    @csrf
                    <input type="hidden" name="id" id="doctorId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to cancel all appointments of this doctor?') }}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary"
                            data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitCancelForm" type="submit"
                            class="btn btn-danger">{{ __('translations.Yes, Cancel') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        // Data Table
        $(document).ready(function() {
            let table = $('#barberTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('get.doctors') }}",
                    "type": "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                    }
                },
                'columns': [
                    // {data: 'checkbox', orderable: false},
                    {
                        data: 'id',
                        orderable: false
                    },
                    {
                        data: 'name',
                        orderable: false
                    },
                    // {
                    //     data: '',
                    //     orderable: false
                    // },
                    {
                        data: 'speciality',
                        orderable: false
                    },
                    {
                        data: 'time',
                        orderable: false
                    },
                    {
                        data: 'price',
                        orderable: false
                    },
                    {
                        data: 'appointment_action',
                        orderable: false
                    },
                    {
                        data: 'send_credentials',
                        orderable: false
                    },
                    {
                        data: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        orderable: false
                    },
                ],
                language: {
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                }
            });
            // Handle status toggle
            $('#barberTable').on('change', '.status-toggle', function() {
                let userId = $(this).data('user-id');
                let status = this.checked ? 1 : 0;

                $.ajax({
                    url: "{{ route('barber.status') }}",
                    method: 'POST',
                    data: {
                        id: userId,
                        status: status,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // if (response.success) {
                        //     alert('Status updated successfully');
                        // } else {
                        //     alert('Failed to update status');
                        //     this.checked = !status; // Revert the checkbox state
                        // }
                        if (response.success === true) {
                            notyf.success({
                                message: response.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);

                        } else {
                            notyf.error({
                                message: response.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status.');
                        this.checked = !status; // Revert the checkbox state
                    }.bind(this)
                });
            });
        });

        // Edit
        function editRecord(id) {
            $('#editUserId').val(id);
            $.ajax({
                type: "GET",
                url: "{{ route('barber.detail') }}",
                dataType: 'json',
                data: {
                    id: id
                },
                beforeSend: function() {
                    // Code to execute before sending the request (optional)
                },
                success: function(res) {
                    if (res.success === true) {
                        $('#name').val(res.data.name);
                        $('#email').val(res.data.email);
                    } else {
                        // Code to handle unsuccessful response
                        console.log(res.message); // Log error message
                    }
                },
                error: function(e) {
                    // Code to execute if the request fails
                    console.log("Error:", e);
                }
            });
        }

        $("#editUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitEditForm");
            const modal = $('#editModal');
            let formData = new FormData($("#editUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('barber.update') }}",
                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('Submit');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

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

        // function sendCredentials(e, btn) {
        //     let id = e;
        //     btn.innerHTML = '<div class="spinner-grow spinner-grow-sm text-white" role="status"></div>';

        //     // Send the GET request
        //     fetch(`/dashboard/update-doctors-credentials/${id}`, {
        //             method: 'GET',
        //             headers: {
        //                 'Accept': 'application/json', // Expecting a JSON response from the controller
        //                 'X-Requested-With': 'XMLHttpRequest', // Let Laravel know it's an AJAX request
        //                 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
        //                     'content') // CSRF Token
        //             }
        //         })
        //         .then(response => {
        //             if (!response.ok) {
        //                 throw new Error('Network response was not ok');
        //             }
        //             return response.json(); // Convert the response to JSON
        //         })
        //         .then(data => {
        //             btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i>'; // Restore button icon
        //             notyf.success({
        //                 message: data.message,
        //                 duration: 3000
        //             }); // Success Notification
        //             console.log('Success:', data);
        //         })
        //         .catch(error => {
        //             btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i>'; // Restore button icon
        //             notyf.error({
        //                 message: error.message,
        //                 duration: 3000
        //             }); // Error Notification
        //             console.error('Error:', error);
        //         });
        // }

        // Fix for checkbox update status handling
        $(".checkbox-class").on("change", function() {
            let status = this.checked;
            let userId = $(this).data("id");

            $.ajax({
                type: "POST",
                url: "/update-status",
                data: {
                    id: userId,
                    status: status ? 1 : 0,
                    _token: $('meta[name="csrf-token"]').attr("content")
                },
                success: function(response) {
                    notyf.success({
                        message: "Status updated successfully!",
                        duration: 3000
                    });
                },
                error: function(xhr, status, error) {
                    alert("An error occurred while updating the status.");
                    $(this).prop("checked", !status); // Revert the checkbox state
                }.bind(this)
            });
        });

        $(document).ready(function() {
            $(".open-ban-modal").on("click", function() {
                var doctorId = $(this).data("id"); // Get doctor ID from button
                $("#banUserId").val(doctorId); // Set doctor ID in hidden input
                // Open the Bootstrap 4 modal
                $("#accountBan").modal("show");
            });
        });

        $(document).ready(function() {
            $(".open-delete-modal").on("click", function() {
                var doctorId = $(this).data("id"); // Get doctor ID from button
                $("#deleteUserId").val(doctorId); // Set doctor ID in hidden input

                // Open the Bootstrap 4 modal
                $("#deleteModal").modal("show");
            });
        });

        // Edit
        function editRecord(id) {
            $('#editUserId').val(id);
            $.ajax({
                type: "GET",
                url: "{{ route('barber.detail') }}",
                dataType: 'json',
                data: {
                    id: id
                },
                beforeSend: function() {
                    // Code to execute before sending the request (optional)
                },
                success: function(res) {
                    if (res.success === true) {
                        $('#name').val(res.data.name);
                        $('#email').val(res.data.email);
                    } else {
                        console.log(res.message); // Log error message
                    }
                },
                error: function(e) {
                    console.error("Error fetching details:", e);
                }
            });
        }

        // Delete Function
        function deleteRecord(id) {
            $('#deleteUserId').val(id);
        }

        // Cancel Appointments Function
        function cancelAppointments(id) {
            $('#doctorId').val(id);
        }

        // Form Submission for Cancelling All Appointments
        $("#banUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#deactivateDocForm");
            const modal = $('#accountBan');
            let formData = new FormData($("#banUser")[0]);

            $.ajax({
                type: "POST",
                url: "{{ route('deactivate.doctor.account') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true).html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;">' +
                        '<span class="visually-hidden">Loading...</span></div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    btn.prop('disabled', false).html('Deactivate');
                    modal.modal('hide');

                    if (res.success === true) {
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                    } else {
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }

                    setTimeout(function() {
                        window.location.reload();
                    }, 2000);
                },
                error: function(e) {
                    btn.prop('disabled', false).html('Deactivate');
                    console.error("Error cancelling appointments:", e);
                }
            });
        });

        // // Form Submission for Cancelling All Appointments
        // $("#cancelAllAppointments").on('submit', function(e) {
        //     e.preventDefault();
        //     const btn = $("#submitCancelForm");
        //     const modal = $('#cancelModal');
        //     let formData = new FormData($("#cancelAllAppointments")[0]);

        //     $.ajax({
        //         type: "POST",
        //         url: "{{ route('doctor.appointmentCancelled') }}",
        //         dataType: 'json',
        //         contentType: false,
        //         processData: false,
        //         cache: false,
        //         data: formData,
        //         beforeSend: function() {
        //             btn.prop('disabled', true).html(
        //                 '<div class="spinner-border" role="status" style="height: 14px;width: 14px;">' +
        //                 '<span class="visually-hidden">Loading...</span></div>'
        //             );
        //             $('.error-message').html('');
        //         },
        //         success: function(res) {
        //             btn.prop('disabled', false).html('Yes, Cancel');
        //             modal.modal('hide');

        //             if (res.success === true) {
        //                 notyf.success({
        //                     message: res.message,
        //                     duration: 3000
        //                 });
        //             } else {
        //                 notyf.error({
        //                     message: res.message,
        //                     duration: 3000
        //                 });
        //             }

        //             setTimeout(function() {
        //                 window.location.reload();
        //             }, 2000);
        //         },
        //         error: function(e) {
        //             btn.prop('disabled', false).html('Yes, Cancel');
        //             console.error("Error cancelling appointments:", e);
        //         }
        //     });
        // });

        function sendCredentials(e, btn) {
            let id = e;
            btn.innerHTML = '';
            btn.innerHTML = '<div class="spinner-grow spinner-grow-sm text-white" role="status"></div>';
            // Send the GET request
            fetch(`/dashboard/update-doctors-credentials/${id}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json', // Expecting a JSON response from the controller
                        'X-Requested-With': 'XMLHttpRequest', // Let Laravel know it's an AJAX request
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content') // CSRF Token

                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); // Convert the response to JSON
                })
                .then(data => {
                    btn.innerHTML = '';
                    btn.innerHTML = 'Send';
                    notyf.success({
                        message: data.message,
                        duration: 3000
                    });
                    console.log('Success:', data); // Handle the success response
                })
                .catch(error => {
                    btn.innerHTML = '';
                    btn.innerHTML = 'Send';
                    notyf.error({
                        message: error.message,
                        duration: 3000
                    });
                    console.error('Error:', error); // Handle errors
                });
        }

        // Delete
        function deleteRecord(id) {
            $('#deleteUserId').val(id);
        }

        // Cancel
        function cancelAppointments(id) {
            $('#doctorId').val(id);
        }

        $(document).ready(function() {
            $(".open-cancel-modal").on("click", function() {
                var doctorId = $(this).data("id"); // Get doctor ID from button
                $("#doctorId").val(doctorId); // Set doctor ID in hidden input
                $("#cancelModal").modal("show"); // Open modal
            });
        });

        $("#cancelAllAppointments").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitCancelForm");
            const modal = $('#cancelModal');
            let formData = new FormData($("#cancelAllAppointments")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctor.appointmentCancelled') }}",
                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('Yes, Cancel');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

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

        $("#deleteUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('barber.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