@extends('Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5 class="mb-0">
            <a
                href="{{ route('branch') }}"
                class="btn btn-icon bg-white me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path
                        stroke="none"
                        d="M0 0h24v24H0z"
                        fill="none"
                    />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>

            Add KOT Table
        </h5>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6">

        <div class="card">
            <div class="card-body p-4">

              
                <form
                    action="{{ route('store_kot_table', $branch->id) }}"
                    method="POST"
                    id="kotTableForm"
                >
                    @csrf

                    <input
                        type="hidden"
                        name="branch_id"
                        value="{{ $branch->id }}"
                    >

                    <div class="mb-3">
                        <label
                            for="table_id"
                            class="form-label"
                        >
                            Table ID
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            name="table_id"
                            id="table_id"
                            class="form-control
                                @error('table_id') is-invalid @enderror"
                            value="{{ old('table_id') }}"
                            min="1"
                            placeholder="Enter Table ID"
                            required
                        >

                        @error('table_id')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                   
                    <div class="d-flex justify-content-center gap-2">

                        <button
                            type="reset"
                            class="btn btn-label-secondary"
                        >
                            Discard
                        </button>

                        <button
                            type="submit"
                            class="btn btn-primary"
                            id="finalSubmit"
                        >
                            Submit
                        </button>

                    </div>

                </form>

            </div>
        </div>
<!-- <div class="row justify-content-center mt-4">
    <div class="col-lg-10">

        <div class="card">

            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">

                    <h5 class="mb-0">
                        KOT Table List
                    </h5>

                    <input
                        type="text"
                        id="kotSearch"
                        class="form-control"
                        style="max-width: 300px;"
                        placeholder="Search table ID..."
                    >

                </div>
            </div>

            <div class="card-datatable table-responsive">

                <table
                    id="kotTableList"
                    class="table table-hover align-middle"
                    style="width: 100%;"
                >
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Table ID</th>
                            <th>Status</th>
                            <th>Created Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody></tbody>
                </table>

            </div>

        </div>

    </div>
</div> -->
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>
<script>
document
    .getElementById('kotTableForm')
    .addEventListener('submit', function () {
        const button =
            document.getElementById('finalSubmit');

        button.disabled = true;
        button.innerText = 'Processing...';
    });
</script>
<script>
$(document).ready(function () {

    const kotTable = $('#kotTableList').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        searching: true,
        lengthChange: false,
        pageLength: 10,

        ajax: {
            url: "{{ route('kot_table_data', $branch->id) }}",
            type: "GET",

            error: function (xhr) {
                console.error(
                    'KOT table error:',
                    xhr.responseText
                );
            }
        },

        columns: [
            {
                data: 'DT_RowIndex',
                name: '',
                searchable: false,
                orderable: false
            },
            {
                data: 'table_id',
                name: 'table_id',
                orderable: false
            },
            {
                data: 'status',
                name: 'is_active',
                orderable: false
            },
            {
                data: 'date',
                name: 'created_at',
                orderable: false
            },
            {
                data: 'action',
                name: '',
                searchable: false,
                orderable: false
            }
        ],

        language: {
            processing: 'Loading KOT tables...',
            emptyTable: 'No KOT tables found.',
            zeroRecords: 'No matching KOT table found.'
        }
    });

    let searchTimer;

    $('#kotSearch').on('input', function () {
        clearTimeout(searchTimer);

        const value = $(this).val();

        searchTimer = setTimeout(function () {
            kotTable
                .search(value)
                .draw();
        }, 400);
    });

});
</script>
@endsection