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

@section('content')
<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.Bookings') }}</a></li>
    </ol>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title">{{ __('translations.Bookings') }}</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="usersTable" class="display" style="width: 1160px !important;">
                        <thead>
                            <tr>
                                <th>{{ __('translations.No.') }}</th>
                                <th>{{ __('translations.Doctor') }}</th>
                                <th>{{ __('translations.User') }}</th>
                                <th>{{ __('translations.Services') }}</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>
        </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 Appointment') }}</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 record?') }}
                </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>

@endsection

@section('custom-script')
<script>
    // Data Table
    $(document).ready(function () {
        let table = $('#usersTable').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.bookings') }}",
                "type": "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                }
            },
            'columns': [
                // {data: 'checkbox', orderable: false},
                {
                    data: 'id',
                    orderable: false
                },
                {
                    data: 'barber_name',
                    orderable: false
                },
                {
                    data: 'user_name',
                    orderable: false
                },
                {
                    data: 'services',
                    orderable: false
                },
                {
                    data: 'total_price',
                    orderable: false
                },
                {
                    data: 'date',
                    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>'
                }
            }
        });
    });


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

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