@extends('layouts.master')
@section('title')
    Branch Setup - Table Management
@endsection

@section('content')
    <style>
        .step-indicator {
            display: flex;
            align-items: flex-start;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .step-indicator.active {
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .step-indicator.completed {
            opacity: 0.7;
            background: #e8f5e9;
        }

        .step-icon-wrapper {
            width: 48px;
            height: 48px;
            background: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
        }

        .step-indicator.active .step-icon-wrapper {
            background: #f3e8ff;
            color: #7c3aed;
        }

        .step-indicator.completed .step-icon-wrapper {
            background: #4caf50;
            color: white;
        }

        .step-details {
            flex: 1;
        }

        .step-name {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .step-description {
            margin: 0;
            font-size: 13px;
            color: #6c757d;
        }

        .step-badge {
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .step-badge.in-progress {
            background: #fbbf24;
            color: #92400e;
        }

        .step-badge.completed {
            background: #4caf50;
            color: white;
        }

        .form-section {
            background: #fff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .section-card {
            max-width: 100%;
        }

        .section-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            color: #111827;
        }

        .radio-card {
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .radio-card:hover {
            border-color: #7c3aed;
        }

        .radio-card.selected {
            border-color: #7c3aed;
            background: #faf5ff;
        }

        .radio-card input[type="radio"] {
            margin-top: 2px;
        }

        .radio-card-title {
            font-weight: 600;
            font-size: 16px;
            color: #374151;
            margin-bottom: 5px;
        }

        .radio-card-desc {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        .action-bar {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 20px;
        }

        .action-bar h5 {
            margin: 0;
            font-weight: 600;
            color: #374151;
        }

        .btn-custom {
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 600;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
        }

        .btn-primary-custom:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
            color: white;
        }

        .table-custom {
            width: 100%;
            border-collapse: collapse;
        }

        .table-custom th {
            background: #f8fafc;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
        }

        .table-custom td {
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: middle;
        }

        .table-custom tbody tr:hover {
            background: #f9fafb;
        }

        .btn-icon {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            background: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 5px;
        }

        .btn-icon:hover {
            background: #f3f4f6;
        }

        .btn-icon.delete:hover {
            background: #fee;
            border-color: #ef4444;
            color: #ef4444;
        }

        .form-actions {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
        }

        .btn-previous {
            background: transparent;
            color: #6b7280;
            padding: 12px 30px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .btn-previous:hover {
            background: #f9fafb;
            color: #374151;
        }

        .btn-next {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            padding: 12px 30px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-next:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
            color: white;
        }

        .btn-skip {
            background: transparent;
            color: #9ca3af;
            padding: 12px 30px;
            border: none;
            font-weight: 600;
            text-decoration: underline;
        }

        .btn-skip:hover {
            color: #6b7280;
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #9ca3af;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
    </style>

    <div class="row">
        <!-- Sidebar Steps -->
        <div class="col-lg-3">
            <div class="step-indicator completed">
                <div class="step-icon-wrapper">✓</div>
                <div class="step-details">
                    <div class="step-name">
                        Branch Details
                        <span class="step-badge completed">Completed</span>
                    </div>
                    <p class="step-description">Add name and address of your business branch</p>
                </div>
            </div>

            <div class="step-indicator active">
                <div class="step-icon-wrapper">🪑</div>
                <div class="step-details">
                    <div class="step-name">
                        Table Management
                        <span class="step-badge in-progress">In Progress</span>
                    </div>
                    <p class="step-description">Manage tables on your branch for advanced seating</p>
                </div>
            </div>

            <div class="step-indicator">
                <div class="step-icon-wrapper">👥</div>
                <div class="step-details">
                    <div class="step-name">Team Members</div>
                    <p class="step-description">Add your team members working in this branch</p>
                </div>
            </div>
        </div>

        <!-- Main Form -->
        <div class="col-lg-9">
            <form id="tableForm" method="POST">
                @csrf
                <input type="hidden" name="current_step" value="2">
                <input type="hidden" name="branch_id" value="{{ $branch->id }}">

                <div class="form-section" id="step2">
                    <div class="section-card">
                        <h2 class="section-title">Table Management</h2>

                        <div class="radio-card selected">
                            <label class="d-flex align-items-start gap-3 w-100 mb-0">
                                <input type="radio" name="tableType" value="simple" checked>
                                <div>
                                    <div class="radio-card-title">Simple</div>
                                    <p class="radio-card-desc">Enter table number manually for each booking.</p>
                                </div>
                            </label>
                        </div>

                        <div class="radio-card">
                            <label class="d-flex align-items-start gap-3 w-100 mb-0">
                                <input type="radio" name="tableType" value="advanced">
                                <div>
                                    <div class="radio-card-title">Advanced</div>
                                    <p class="radio-card-desc">Allow detailed seat selection. Requires additional setup.</p>
                                </div>
                            </label>
                        </div>

                        <div id="tableManagement" style="display: none;">
                            <div class="action-bar mt-4">
                                <h5>Tables</h5>
                                <button type="button" class="btn-custom btn-primary-custom" data-bs-toggle="modal"
                                    data-bs-target="#addTableModal">
                                    <i class="fas fa-plus"></i> Add Table
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-custom">
                                    <thead>
                                        <tr>
                                            <th>Table ID</th>
                                            <th>Name</th>
                                            <th>Description</th>
                                            <th>Min</th>
                                            <th>Max</th>
                                            <th style="width: 100px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="tablesTableBody">
                                        <!-- Tables will be dynamically added here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="form-actions">
                    <a href="{{ route('branch.edit2', $branch->tenant_id) }}" class="btn-previous">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                        </svg>
                        Previous
                    </a>
                    <div>
                        <button type="button" class="btn-skip" onclick="skipStep()">
                            Skip for now
                        </button>
                        <button type="submit" class="btn-next">
                            Next
                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Table Modal -->
    <div class="modal fade" id="addTableModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <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">
                        <div class="mb-3">
                            <label class="form-label">Table Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="tableName" placeholder="e.g., Table 1, VIP Table"
                                required>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <input type="text" class="form-control" id="tableDescription" placeholder="Brief description">
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Min Capacity <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="tableMinCapacity" 
                                        placeholder="Minimum seats" min="1" max="20" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Max Capacity <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="tableMaxCapacity" 
                                        placeholder="Maximum seats" min="1" max="20" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-secondary" style="font-size: 13px;">
                            <strong>Auto-Generation:</strong><br>
                            • Table Code: TBL001, TBL002, etc.<br>
                            • Seat Codes: TBL001-S01, TBL001-S02, etc.
                        </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" onclick="addTable()">Add Table</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        let tables = [];
        let tableCounter = 1;

        $(document).ready(function() {
            // Initialize table type selection
            $('input[name="tableType"]').on('change', function() {
                const selectedValue = $(this).val();
                const tableManagement = $('#tableManagement');
                
                if (selectedValue === 'advanced') {
                    tableManagement.slideDown();
                } else {
                    tableManagement.slideUp();
                }

                // Update radio card selection
                $('.radio-card').removeClass('selected');
                $(this).closest('.radio-card').addClass('selected');
            });

            // Load existing tables if any
            loadExistingTables();

            // Clear validation on input
            $('#addTableForm input').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').text('');
            });
        });

        function loadExistingTables() {
            // TODO: Fetch existing tables from API if editing
            renderTables();
        }

        function validateTableForm() {
            let isValid = true;
            const name = $('#tableName');
            const minCapacity = $('#tableMinCapacity');
            const maxCapacity = $('#tableMaxCapacity');

            // Clear previous errors
            $('#addTableForm .is-invalid').removeClass('is-invalid');
            $('#addTableForm .invalid-feedback').text('');

            // Validate name
            if (!name.val().trim()) {
                name.addClass('is-invalid');
                name.next('.invalid-feedback').text('Please enter table name');
                isValid = false;
            } else if (name.val().trim().length < 2) {
                name.addClass('is-invalid');
                name.next('.invalid-feedback').text('Table name must be at least 2 characters');
                isValid = false;
            }

            // Validate capacities
            if (!minCapacity.val() || minCapacity.val() < 1) {
                minCapacity.addClass('is-invalid');
                minCapacity.next('.invalid-feedback').text('Please enter a valid minimum capacity');
                isValid = false;
            }

            if (!maxCapacity.val() || maxCapacity.val() < 1) {
                maxCapacity.addClass('is-invalid');
                maxCapacity.next('.invalid-feedback').text('Please enter a valid maximum capacity');
                isValid = false;
            }

            if (minCapacity.val() && maxCapacity.val() && parseInt(minCapacity.val()) > parseInt(maxCapacity.val())) {
                maxCapacity.addClass('is-invalid');
                maxCapacity.next('.invalid-feedback').text('Max capacity must be greater than or equal to min capacity');
                isValid = false;
            }

            return isValid;
        }

        function addTable() {
            if (!validateTableForm()) {
                return;
            }

            const name = $('#tableName').val().trim();
            const description = $('#tableDescription').val().trim();
            const minCapacity = parseInt($('#tableMinCapacity').val());
            const maxCapacity = parseInt($('#tableMaxCapacity').val());

            const table = {
                id: Date.now(),
                tableId: 'TBL' + String(tableCounter).padStart(3, '0'),
                name: name,
                description: description,
                minCapacity: minCapacity,
                maxCapacity: maxCapacity
            };

            tables.push(table);
            tableCounter++;
            renderTables();
            $('#addTableModal').modal('hide');
            document.getElementById('addTableForm').reset();
        }

        function removeTable(id) {
            if (confirm('Are you sure you want to remove this table? All associated seats will also be removed.')) {
                tables = tables.filter(t => t.id !== id);
                renderTables();
            }
        }

        function renderTables() {
            const container = document.getElementById('tablesTableBody');

            if (tables.length === 0) {
                container.innerHTML = `
                    <tr>
                        <td colspan="6" class="text-center">
                            <div class="empty-state">
                                <i class="fas fa-chair"></i>
                                <p>No tables added yet. Click "Add Table" to get started.</p>
                            </div>
                        </td>
                    </tr>
                `;
                return;
            }

            container.innerHTML = '';

            tables.forEach(table => {
                const row = `
                    <tr>
                        <td><strong>${table.tableId}</strong></td>
                        <td>${table.name}</td>
                        <td>${table.description || '-'}</td>
                        <td>${table.minCapacity}</td>
                        <td>${table.maxCapacity}</td>
                        <td>
                            <button type="button" class="btn-icon delete" onclick="removeTable(${table.id})" title="Remove">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
                container.innerHTML += row;
            });
        }

        function skipStep() {
            if (confirm(
                    'Are you sure you want to skip table setup? You can add tables later from branch settings.'
                )) {
                submitForm();
            }
        }

        // Form submission
        $('#tableForm').on('submit', function(e) {
            e.preventDefault();
            submitForm();
        });

        function submitForm() {
            const submitBtn = $('#tableForm').find('button[type="submit"]');
            const skipBtn = $('#tableForm').find('.btn-skip');
            const originalText = submitBtn.html();

            submitBtn.prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm me-2"></span>Saving...</span>');
            skipBtn.prop('disabled', true);

            const tableType = $('input[name="tableType"]:checked').val();
            const formData = {
                _token: '{{ csrf_token() }}',
                branch_id: {{ $branch->id }},
                current_step: 2,
                table_type: tableType,
                tables: tableType === 'advanced' ? JSON.stringify(tables) : '[]'
            };

            $.ajax({
                url: "{{ route('branch.updateStep', $branch->id) }}",
                type: "POST",
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // Show brief success message
                        const successAlert = `
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>✓ Success!</strong> ${response.message || 'Tables saved successfully!'}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        `;
                        $('.form-section').prepend(successAlert);

                        // Redirect after short delay
                        setTimeout(function() {
                            window.location.href = response.redirect_url;
                        }, 1000);
                    } else {
                        submitBtn.prop('disabled', false).html(originalText);
                        skipBtn.prop('disabled', false);
                        alert(response.message || 'An error occurred. Please try again.');
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false).html(originalText);
                    skipBtn.prop('disabled', false);

                    let errorMessage = 'An error occurred. Please try again.';

                    if (xhr.responseJSON) {
                        if (xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        } else if (xhr.responseJSON.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat();
                            errorMessage = errors.join('\n');
                        }
                    }

                    alert(errorMessage);
                }
            });
        }
    </script>
@endsection