@extends('layouts.admin.base-dashboard')

@section('title', 'List Reservations')

@section('content')
    @include('layouts.admin.include.message')

    <div class="card">
        <div class="card-body">
            <h1 class="text-center mb-4">List Reservations</h1>
            <div class="table-responsive">
                <table id="reservations-table" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>No. HP</th>
                            <th>Tanggal</th>
                            <th>Jam</th>
                            <th>Cabang</th>
                            <th>No. Antrian</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    var table = $('#reservations-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("barbershop.reservations.data") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'phone_number', name: 'phone_number' },
            { data: 'reservation_date', name: 'reservation_date' },
            { data: 'reservation_time', name: 'reservation_time' },
            { data: 'branch_name', name: 'branch_name', orderable: false, searchable: false },
            { data: 'queue_number_badge', name: 'queue_number', orderable: false, searchable: false },
            { data: 'status_select', name: 'status', orderable: false, searchable: false }
        ],
        order: [[4, 'desc']],
        createdRow: function(row, data, dataIndex) {
            $(row).find('.status-select').on('focus', function() {
                $(this).data('previous', $(this).val());
            });

            $(row).find('.status-select').on('change', function() {
                let reservationId = $(this).data('id');
                let newStatus = $(this).val();
                let selectElement = $(this);

                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin mengubah status reservasi ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Update',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route("barbershop.reservations.updateStatus") }}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: reservationId,
                                status: newStatus
                            },
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Status Updated',
                                    text: response.message,
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            },
                            error: function(xhr) {
                                Swal.fire('Error', 'Failed to update status. Please try again.', 'error');
                                selectElement.val(selectElement.data('previous'));
                            }
                        });
                    } else {
                        selectElement.val(selectElement.data('previous'));
                    }
                });
            });
        }
    });
});
</script>
@endpush