@extends('layouts.dashboard')

@section('title', 'No. Meja')
@section('main')
@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
@endpush

<div class="pcoded-inner-content">
    <!-- Main-body start -->
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page-body start -->
            <div class="page-body">
                <!-- Hover table card start -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                        <h4>@yield('title')</h4>
                        <span>Silakan kelola <code>Data @yield('title')</code> sesuai kebutuhan bisnis Anda</span>
                        </div>
                        <div>
                            <form id="saveTambah" autocomplete="off" class="d-flex align-items-end mb-2">
                                @csrf
                                <div class="flex-grow-1">
                                    <label class="form-label">Nomor Meja</label>
                                    <input type="text" name="table_number" class="form-control" required>
                                </div>
                                <div style="margin-left: 0.3rem;">
                                    <label class="form-label d-block invisible">Submit</label>
                                    <button type="submit" class="btn btn-primary btn-sm px-2">Tambah</button>
                                </div>
                            </form>
                            <a href="{{ url('tables/download-all') }}" class="btn btn-danger d-flex align-items-end btn-sm">
                                Download Semua QR Meja (PDF)
                            </a>
                        </div>
                    </div>
                    <div class="card-block table-border-style">
                        <div class="table-responsive">
                            <table id="tbl_list" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th width="5%">No</th>
                                        <th>No. Meja</th>
                                        <th width="10%">QR Code</th>
                                        <th width="15%">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
@include('admin.table.edit')

@endsection
@push('script')
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        datatableCall('tbl_list', '{{ route('dashboard.tables.index') }}', [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex',
        },
        {
            data: 'table_number',
            name: 'table_number',
        },
        {
            data: 'qr_code_image',
            name: 'qr_code_image', orderable: false, searchable: false,
        },
        {
            data: 'action',
            name: 'action', orderable: false, searchable: false,
        },
        ]);

        $("#saveData, #saveTambah").submit(function(e) {
                setButtonLoadingState("#saveData .btn.btn-primary", true);
                e.preventDefault();
                const $form = $(this); // ambil form yang sedang disubmit
                const kode = $form.find("#id").val(); // cari #id dari form yang sedang aktif
                let url = "{{ route('dashboard.tables.store') }}";
                const data = new FormData(this);

                if (kode && kode.trim() !== "") {
                    data.append("_method", "PUT");
                    url = `/dashboard/tables/${kode}`;
                }

                const successCallback = function(response) {
                    setButtonLoadingState("#saveData .btn.btn-primary", false);
                    handleSuccess(response, "tbl_list", "createModal");
                    $("#saveTambah")[0].reset();
                };

                const errorCallback = function(error) {
                    setButtonLoadingState("#saveData .btn.btn-primary", false);
                    handleError(error, 'dataTableId', 'modalId');
                    handleValidationErrors(error, "saveData", ["table_number"]);
                };
                
                ajaxCall(url, "POST", data, successCallback, errorCallback);
            });
    });
</script>
@endpush