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

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

    <div class="row">
        <div class="col-12">
            <div class="card">
                @if ($clinicCount < auth()->guard('business')->user()->no_of_providers)
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title">Doctors</h4>
                        <a class="btn btn-primary" href="{{ route('barbers.add') }}">Add</a>
                    </div>
                @endif
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="barberTable" class="display" style="width: !important;">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Name</th>
                                    {{-- <th>Phone No.</th> --}}
                                    <th>Speciality</th>
                                    <th>Service Time</th>
                                    <th>Service Price</th>
                                    <th>Cancel All Appointments</th>
                                    <th>Send Credentials</th>
                                    <th>status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </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">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">
                        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">Close</button>
                        <button id="submitDelForm" type="submit" class="btn btn-danger">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">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">
                        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">Close</button>
                        <button id="submitCancelForm" type="submit" class="btn btn-danger">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 = '';
            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 = '<i class="fa-solid fa-paper-plane"></i>';
                    notyf.success({
                        message: data.message,
                        duration: 3000
                    });
                    console.log('Success:', data); // Handle the success response
                })
                .catch(error => {
                    btn.innerHTML = '';
                    btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i>';
                    notyf.error({
                        message: error.message,
                        duration: 3000
                    });
                    console.error('Error:', error); // Handle errors
                });
        }

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

        //Cancel All Appointments

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


        $("#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