@extends('layouts.app')

@section('title', 'Table Layout Setup - Tiqkets')

@section('page-title', 'Table Layout Setup')

@section('content')
    <div class="container-fluid">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Advanced Seating Status Banner -->
        <div class="alert alert-info d-flex align-items-center mb-4">
            <i class="fas fa-cog fa-lg me-3"></i>
            <div>
                <h6 class="mb-1"><strong>Advanced Seating Mode</strong></h6>
                <p class="mb-0">You are currently in <strong>Advanced Seating Mode</strong>. You can manage table layouts,
                    capacities, and configurations.</p>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-table me-2"></i>Table Layout Management
                    <span class="badge bg-success ms-2">Advanced Mode</span>
                </h5>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTableModal">
                    <i class="fas fa-plus me-1"></i> Add Table
                </button>
            </div>
            <div class="card-body">
                @if ($tables->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Table Code</th>
                                    <th>Table Name</th>
                                    <th>Description</th>
                                    <th>Min Capacity</th>
                                    <th>Max Capacity</th>
                                    <th style="width: 100px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tables as $table)
                                    <tr data-id="{{ $table->id }}">
                                        <td>
                                            <span class="badge bg-primary">{{ $table->table_code }}</span>
                                        </td>
                                        <td>
                                            <strong>{{ $table->table_name }}</strong>
                                        </td>
                                        <td>{{ $table->description ?? 'N/A' }}</td>
                                        <td>
                                            <span class="badge bg-info">{{ $table->min_capacity }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-success">{{ $table->max_capacity }}</span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-danger delete-table-btn"
                                                data-table-id="{{ $table->id }}"
                                                data-table-name="{{ $table->table_name }}" title="Delete Table">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <div class="text-muted">
                            <i class="fas fa-table fa-3x mb-3"></i>
                            <h5>No Tables Found</h5>
                            <p>Start by adding your first table to manage your restaurant layout.</p>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTableModal">
                                <i class="fas fa-plus me-1"></i> Add First Table
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Add Table Modal -->
    <div class="modal fade" id="addTableModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Table</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addTableForm">
                        @csrf
                        <input type="hidden" name="branch_id" value="{{ $branchId }}">

                        <div class="mb-3">
                            <label class="form-label">Table Name *</label>
                            <input type="text" name="table_name" class="form-control"
                                placeholder="e.g., T1, VIP-1, Window Table" required minlength="2">
                            <div class="form-text">Enter a descriptive name for the table.</div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Minimum Capacity *</label>
                                <input type="number" name="min_capacity" class="form-control" min="1" max="50"
                                    value="2" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Maximum Capacity *</label>
                                <input type="number" name="max_capacity" class="form-control" min="1" max="50"
                                    value="4" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="2"
                                placeholder="Optional table description (max 100 characters)" maxlength="100"></textarea>
                            <div class="form-text">Maximum 100 characters.</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveTableBtn">
                        <i class="fas fa-save me-1"></i> Save Table
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteTableModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete table "<strong id="tableNameToDelete"></strong>"?</p>
                    <p class="text-danger mb-0">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        This action cannot be undone.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteTableForm" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i> Delete Table
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const baseUrl = "{{ url('location-manager/table-layout') }}";
            const csrfToken = "{{ csrf_token() }}";

            // Save table
            document.getElementById('saveTableBtn').addEventListener('click', function() {
                const form = document.getElementById('addTableForm');
                const formData = new FormData(form);
                const saveBtn = this;

                // Validate form
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                // Validate capacity
                const minCapacity = parseInt(formData.get('min_capacity'));
                const maxCapacity = parseInt(formData.get('max_capacity'));

                if (minCapacity > maxCapacity) {
                    alert('Minimum capacity cannot be greater than maximum capacity.');
                    return;
                }

                // Disable button and show loading
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Saving...';

                fetch(baseUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json',
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Close modal and reload page
                            bootstrap.Modal.getInstance(document.getElementById('addTableModal'))
                        .hide();
                            location.reload();
                        } else {
                            alert('Error: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Failed to save table. Please try again.');
                    })
                    .finally(() => {
                        saveBtn.disabled = false;
                        saveBtn.innerHTML = '<i class="fas fa-save me-1"></i> Save Table';
                    });
            });

            // Delete table
            document.querySelectorAll('.delete-table-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const tableId = this.dataset.tableId;
                    const tableName = this.dataset.tableName;

                    document.getElementById('tableNameToDelete').textContent = tableName;
                    document.getElementById('deleteTableForm').action = `${baseUrl}/${tableId}`;

                    new bootstrap.Modal(document.getElementById('deleteTableModal')).show();
                });
            });

            // Reset form when modal is hidden
            document.getElementById('addTableModal').addEventListener('hidden.bs.modal', function() {
                document.getElementById('addTableForm').reset();
            });

            // Form validation for capacity
            document.querySelector('input[name="max_capacity"]').addEventListener('change', function() {
                const minCapacity = parseInt(document.querySelector('input[name="min_capacity"]').value);
                const maxCapacity = parseInt(this.value);

                if (minCapacity > maxCapacity) {
                    alert('Maximum capacity should be greater than or equal to minimum capacity.');
                    this.value = minCapacity;
                }
            });
        });
    </script>
@endpush