@extends('admin.layouts.admin')
@section('content')


<div class="pc-container">
    <div class="pc-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.appointments') }}">{{ $title }}</a></li>
                            <li class="breadcrumb-item" aria-current="page">List</li>
                        </ul>
                    </div>

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

        <!-- [ Main Content ] start -->
        <div class="row">
            @if ($message = Session::get('success'))
                <div class="col-sm-12">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ $message }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
            @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
            @endif
            <!-- [ sample-page ] start -->
            <div class="col-sm-12">
                <div class="card ">
                    <div class="card-header pb-1">
                        <h3 class="float-start">{{ $title }}</h3>
                    </div>
                    <div class="card-body pt-2">
                        <div class='d-flex justify-content-end mb-2'>
                            <a id="new-appointment-btn" class="btn btn-primary rounded-0" href="{{ route('admin.new-appointment') }}">+ New Appointment</a>
                        </div>
                        <div class="dt-responsive table-responsive">
                            <table id="jsource-table" class="table  table-bordered nowrap"> </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ sample-page ] end -->
        </div>
        <!-- [ Main Content ] end -->
        <div id="staffModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="staffModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">

                <div class="modal-content">
                    <form id="staffModel" method="post" action="{{ route('admin.appointments.assignStaff') }}">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title" id="staffModalCenterTitle">Assign Staff - <span id="appointmentNo"></span></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body row">
                            <div id="error-messages"></div>
                            <div class="staff-body col-12"></div>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="appointment_id" id="appointment_id" />
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Assign</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')

<script type="text/javascript">
    var table = $('#jsource-table').DataTable({
        ajax: "{{ route('admin.appointments') }}",
        processing: true,
        serverSide: true,
        deferRender: true,
        columns: [
            {
                title: 'Quote Number',
                data: 'quote_number',
                name: 'quote_number',
            },
            {
                title: 'First Name',
                data: 'user.first_name',
                name: 'first_name',
            },
            {
                title: 'Last Name',
                data: 'user.last_name',
                name: 'last_name',
            },
            {
                title: 'Email',
                data: 'user.email',
                name: 'email',
            },
            {
                title: 'Phone',
                data: 'user.phone',
                name: 'phone',
            },
            {
                title: 'Appointment Date',
                data: 'date',
                name: 'date',
            },
            {
                title: 'Slot',
                data: 'time',
                name: 'time',
            },
            {
                title: 'Price',
                data: 'price',
                name: 'price',
            },
            {
                title: 'Paid',
                data: 'paid',
                name: 'paid',
            },
            {
                title: 'Status',
                data: 'status',
                name: 'status',
            },
            {
                title: 'Staff',
                data: 'staff',
                name: 'staff',
            },
            {
                title: 'Action',
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    var staffModal = document.getElementById('staffModalCenter');
    staffModal.addEventListener('show.bs.modal', function(event) {
        var button = event.relatedTarget;
        var appointment_id = button.getAttribute('data-bs-id');
        $('#staffModalCenter #appointment_id').val(appointment_id);

        $.ajax({
            url: "{{ route('admin.appointments.staff') }}",
            type: 'POST',
            data: {
                appointment_id: appointment_id
            },
            success: function(res) {
                if (res.status == true) {
                    $('#appointmentNo').html(res.appointment_no);
                    $('#staffModalCenter .modal-body .staff-body').html(res.html);
                }
            },
            error: function(xhr, status, error) {
                // Handle AJAX error response
                console.error(xhr.responseText);
            },
        });

    });

    $(document).on('submit', '#staffModel', function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('admin.appointments.assignStaff') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.status == true) {
                    window.location.reload();
                }
            },
            error: function(xhr, status, error) {
                let response = JSON.parse(xhr.responseText);
                if (response.errors) {

                    let errorHtml = ' <div class="alert alert-danger alert-dismissible fade show" role="alert">';
                    $.each(response.errors, function(key, value) {
                        errorHtml += value + '<br />';
                    });
                    errorHtml += '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
                    $('#staffModalCenter .modal-body #error-messages').html(errorHtml);
                } else {
                    $('#error-messages').html('<p>An error occurred: ' + response.message + '</p>');
                }
            },
        });
    })
</script>
@endpush