@extends('Admin.layout')

@section('content')

    <div class="row align-items-center mb-5">
        <div class="col-12 col-sm">
            <h4>Restaurant Management</h4>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{{ route('add_restaurant') }}" class="btn btn-primary w-100">Add Restaurant</a>
        </div>
    </div>

    <div class="card p-5">

        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">
            <div class="mb-3 mb-lg-0">
                <select id="pageLength" class="form-select w-auto">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="-1">All</option>
                </select>
            </div>
            <div class="col-lg-6 col-12 mb-3">
                <div class="d-flex flex-column flex-lg-row gap-3">
                    <div class="search-box flex-grow-1">
                        <input type="search" id="searchBox" class="form-control" placeholder="Search">
                    </div>
                    <button type="button" class="btn btn-primary border flex-shrink-0" id="exportBtn">
                        <i class="ti tabler-download me-2"></i>Export
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive p-2">
            <table id="table" class="table">
                <thead class="bg-primary-subtle">
                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>RESTAURANT</th>
                        <th>OWNER</th>
                        <th>PHONE</th>
                        <th>SOURCE</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center p-3 gap-2">
            <span id="paginationInfo" class="text-muted small"></span>
            <ul class="pagination pagination-sm mb-0" id="paginationControls"></ul>
        </div>

    </div>

    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="statusForm" method="POST" action="{{ route('restaurant_status_update') }}" id="statusForm">
                    @csrf
                    <input type="hidden" name="id" id="status_restaurant_id">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Status</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <label class="form-label">Select Status</label>
                        <select name="status" class="form-select" id="statusSelect">
                            <option value="Pending">Pending</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="statusBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Modal — id in hidden input, not in the route --}}
    <div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form action="{{ route('restaurant_delete') }}" method="POST" id="deleteForm">
                    @csrf
                    <input type="hidden" name="id" id="delete_restaurant_id">
                    <h5 class="fw-bold mb-2">Delete Restaurant</h5>
                    <p class="text-muted">Are you sure you want to delete this restaurant? This will also remove all its
                        uploaded documents.</p>
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger p-3" id="deleteBtn">Yes, Delete</button>
                    </div>
                </form>
            </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 src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script>
        $(document).ready(function () {

            const table = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("restaurants_data") }}',
                pageLength: 10,
                lengthChange: false,
                ordering: true,
                searching: true,

                buttons: [
                    {
                        extend: 'excelHtml5',

                        title: 'Restaurant Report',
                        filename: 'Restaurant Report',

                        exportOptions: {

                            // Export only these columns
                            // SNO, DATE, RESTAURANT, OWNER, PHONE, SOURCE, STATUS
                            // Exclude ACTION column
                            columns: [0, 1, 2, 3, 4, 5, 6],

                            format: {
                                body: function (data, row, column, node) {

                                    // Remove HTML from any column
                                    return $('<div>')
                                        .html(data)
                                        .text()
                                        .trim();
                                }
                            }
                        },

                        // Keep the actual DataTables export button hidden
                        className: 'd-none'
                    }
                ],
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],
                columns: [
                    { data: 'id', orderable: false, searchable: false, render: function (data, type, row, meta) { return meta.row + 1; } },
                    { data: 'created_at' },
                    { data: 'name' },
                    { data: 'owner_name' },
                    { data: 'phone' },
                    { data: 'source', orderable: false, searchable: false },
                    { data: 'status', orderable: false, searchable: false },
                    { data: 'action', orderable: false, searchable: false }
                ],
                createdRow: function (row, data, dataIndex) {
                    if (dataIndex % 2 != 0) {
                        $(row).addClass('bg-primary-subtle');
                    }
                },
            });

            $('#searchBox').on('keyup', function () {
                table.search(this.value).draw();
            });

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

            $('#exportBtn').on('click', function () {
                table.button('.buttons-excel').trigger();
            });

            $(document).on('click', '.statusBtn', function () {
                const id = $(this).data('id');
                const status = $(this).data('status');
                $('#status_restaurant_id').val(id);
                $('#statusSelect').val(status);
            });

            // ── Delete modal — capture which restaurant to delete ──
            $(document).on('click', '[data-bs-target="#delete"]', function () {
                const id = $(this).data('id');
                $('#delete_restaurant_id').val(id);
            });
        });
    </script>

    <script>
        document.getElementById('deleteBtn').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('deleteForm').submit();
        });
    </script>
    <script>
        document.getElementById('statusBtn').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('statusForm').submit();
        });
    </script>
@endsection