@extends('Branch.layout')

@section('content')

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

    <link rel="stylesheet"
        href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="container-fluid py-3">

        {{-- Header --}}
        <div class="row align-items-center justify-content-between mb-3">

            <div class="col-auto">

                <h5 class="fw-bold mb-1">
                    <i class="bi bi-grid-3x3-gap-fill me-1"></i>
                    KOT Tables
                </h5>

                <small class="text-muted">
                    {{ $branch->branch_name }}
                </small>

            </div>

        </div>

        {{-- Add KOT Table Card --}}
        <div class="card border-0 shadow-sm mb-4">

            <div class="card-header bg-white border-bottom py-3">

                <h5 class="fw-bold mb-0">
                    <i class="bi bi-plus-square me-1"></i>
                    Add KOT Table
                </h5>

            </div>

            <div class="card-body">

                <form
                    action="{{ route('branch.store_kot_table') }}"
                    method="POST"
                    id="kotTableForm"
                >

                    @csrf

                    {{-- branch_id hidden input தேவையில்லை --}}

                    <div class="row align-items-end">

                        <div class="col-lg-5 col-md-6">

                            <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="col-lg-auto col-md-6 mt-3 mt-md-0">

                            <div class="d-flex gap-2">

                                <button
                                    type="reset"
                                    class="btn btn-label-secondary"
                                >
                                    <i class="bi bi-x-circle me-1"></i>
                                    Discard
                                </button>

                                <button
                                    type="submit"
                                    class="btn btn-primary"
                                    id="finalSubmit"
                                >
                                    <i class="bi bi-check-circle me-1"></i>
                                    Submit
                                </button>

                            </div>

                        </div>

                    </div>

                </form>

            </div>

        </div>

        {{-- KOT Table List --}}
        <div class="card border-0 shadow-sm">

            <div class="card-header bg-white border-bottom py-3">

                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">

                    <h5 class="fw-bold mb-0">
                        <i class="bi bi-table me-1"></i>
                        KOT Table List
                    </h5>

                    <div class="d-flex gap-2">

                        <select
                            id="pageLength"
                            class="form-select form-select-sm"
                            style="width: 90px;"
                        >
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>

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

                    </div>

                </div>

            </div>

            <div class="table-responsive">

                <table
                    id="kotTableList"
                    class="table table-hover align-middle mb-0"
                    width="100%"
                >

                    <thead class="bg-light">

                        <tr>
                            <th>S.No</th>

                            <th class="text-center">
                                Table ID
                            </th>

                            <th class="text-center">
                                Status
                            </th>

                            <th class="text-center">
                                Created Date
                            </th>

                            <th class="text-center">
                                Action
                            </th>
                        </tr>

                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>

    </div>

    {{-- Status Change Modal --}}
    <div
        class="modal fade"
        id="statusModal"
        tabindex="-1"
        data-bs-backdrop="static"
        data-bs-keyboard="false"
    >

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Change Status
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                    ></button>

                </div>

                <div class="modal-body text-center">

                    <p class="mb-0" id="statusMessage">
                        Are you sure you want to change this status?
                    </p>

                </div>

                <div class="modal-footer justify-content-center">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        Cancel
                    </button>

                    <button
                        type="button"
                        class="btn btn-success"
                        id="confirmStatusChange"
                    >
                        Yes, Change
                    </button>

                </div>

            </div>

        </div>

    </div>

    {{-- Delete Modal --}}
    <div
        class="modal fade"
        id="deleteKotModal"
        tabindex="-1"
    >

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Delete KOT Table
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                    ></button>

                </div>

                <div class="modal-body">

                    Are you sure you want to delete this KOT table?

                </div>

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        Cancel
                    </button>

                    <button
                        type="button"
                        class="btn btn-danger"
                        id="confirmDeleteKot"
                    >
                        <i class="bi bi-trash me-1"></i>
                        Delete
                    </button>

                </div>

            </div>

        </div>

    </div>

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

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

    <script>
        $(document).ready(function() {

            const kotTable = $('#kotTableList').DataTable({

                processing: true,
                serverSide: true,
                ordering: false,
                searching: true,
                lengthChange: false,
                pageLength: 10,

                ajax: {
                    url: "{{ route('branch.kot_table_data') }}",
                    type: "GET",

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

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

                columnDefs: [
                    {
                        targets: '_all',
                        className: 'align-middle text-nowrap'
                    }
                ],

                dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',

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

            $('#pageLength').on('change', function() {
                kotTable
                    .page
                    .len(this.value)
                    .draw();
            });

            let searchTimer;

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

                clearTimeout(searchTimer);

                const value = this.value;

                searchTimer = setTimeout(function() {

                    kotTable
                        .search(value)
                        .draw();

                }, 400);

            });

            $('#kotTableForm').on('submit', function() {

                const button = $('#finalSubmit');

                button
                    .prop('disabled', true)
                    .html(
                        '<span class="spinner-border spinner-border-sm me-1"></span> Processing...'
                    );

            });

            let statusTableId = null;
            let nextStatus = null;

            $(document).on('click', '.toggleStatusBtn', function() {

                statusTableId = $(this).data('id');
                nextStatus = $(this).data('status');

                const message = Number(nextStatus) === 1
                    ? 'Are you sure you want to activate this KOT table?'
                    : 'Are you sure you want to deactivate this KOT table?';

                $('#statusMessage').text(message);

            });

            $('#confirmStatusChange').on('click', function() {

                const button = $(this);

                button
                    .prop('disabled', true)
                    .html(
                        '<span class="spinner-border spinner-border-sm me-1"></span> Updating...'
                    );

                $.ajax({

                    url: "{{ route('branch.kot_table_status') }}",

                    type: 'POST',

                    data: {
                        _token: "{{ csrf_token() }}",
                        id: statusTableId,
                        status: nextStatus
                    },

                    success: function(response) {

                        $('#statusModal').modal('hide');

                        kotTable.ajax.reload(null, false);

                    },

                    error: function(xhr) {

                        alert(
                            xhr.responseJSON?.message ??
                            'Unable to update KOT table status.'
                        );

                    },

                    complete: function() {

                        button
                            .prop('disabled', false)
                            .text('Yes, Change');

                    }

                });

            });

            let deleteTableId = null;

            $(document).on('click', '.deleteKotBtn', function() {

                deleteTableId = $(this).data('id');

            });

            $('#confirmDeleteKot').on('click', function() {

                const button = $(this);

                button
                    .prop('disabled', true)
                    .html(
                        '<span class="spinner-border spinner-border-sm me-1"></span> Deleting...'
                    );

                $.ajax({

                    url: "{{ route('branch.delete_kot_table') }}",

                    type: 'POST',

                    data: {
                        _token: "{{ csrf_token() }}",
                        id: deleteTableId
                    },

                    success: function(response) {

                        $('#deleteKotModal').modal('hide');

                        kotTable.ajax.reload(null, false);

                    },

                    error: function(xhr) {

                        alert(
                            xhr.responseJSON?.message ??
                            'Unable to delete KOT table.'
                        );

                    },

                    complete: function() {

                        button
                            .prop('disabled', false)
                            .html(
                                '<i class="bi bi-trash me-1"></i> Delete'
                            );

                    }

                });

            });

        });
    </script>

@endsection