@extends('layouts.app')

@section('title', 'Outlet Management - Tiqkets')
@section('page-title', 'Outlet Management')

@section('header-action')
    @if(!$outlets->isEmpty())
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addOutletModal">
            Add Outlet
        </button>
    @endif
@endsection

@section('content')
    @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"></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"></button>
        </div>
    @endif

    @if ($outlets->isEmpty())
        <!-- Empty State -->
        <div class="empty-state-container">
            <div class="text-center mb-4">
                <img src="{{ asset('assest/images/logo-dark.png') }}" alt="Setup Outlet" class="logo-image">
            </div>
            <div class="empty-state-card">
                <h5 class="welcome-text">Welcome {{ auth()->user()->name }}!</h5>
                <h4 class="setup-title">Setup Your First Outlet</h4>
                <p class="setup-description">
                    Add your first outlet with contact details and start managing your food court operations.
                </p>
                <button type="button" class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#addOutletModal">
                    <i class="fas fa-plus-circle me-2"></i> Add Outlet
                </button>
            </div>
        </div>
    @else
        <!-- Outlets Table -->
        <div class="outlets-table-card">
            <div class="table-wrapper">
                <table class="outlets-table">
                    <thead>
                        <tr>
                            <th>Shop No.</th>
                            <th>Outlet Name</th>
                            <th>Contact Details</th>
                            <th class="text-center">No. of Users</th>
                            <th>Last Updated</th>
                            <th>Manage QR</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($outlets as $outlet)
                            <tr>
                                <td>{{ $outlet->shop_number ?? '-' }}</td>
                                <td>
                                    <div class="outlet-name">{{ $outlet->outlet_name }}</div>
                                </td>
                                <td>
                                    <div class="contact-name">{{ $outlet->outlet_contact_name }}</div>
                                    <div class="contact-details">
                                        {{ $outlet->outlet_contact_phone }} {{ $outlet->outlet_contact_email }}
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="user-count">{{ $outlet->users_count }}</span>
                                </td>
                                <td>
                                    <div class="last-updated">{{ $outlet->updated_at->format('d M, Y \a\t g:i A') }}</div>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-outline-primary btn-sm"
                                            onclick="window.location='{{ route('food-court.outlets.show', $outlet) }}'">
                                        Manage QR
                                    </button>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <div class="dropdown">
                                            <button class="btn-icon dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                                <i class="fas fa-pen"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a class="dropdown-item" href="javascript:void(0)"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#viewOutletModal"
                                                       data-outlet-id="{{ $outlet->id }}"
                                                       data-outlet-name="{{ $outlet->outlet_name }}"
                                                       data-shop-number="{{ $outlet->shop_number }}"
                                                       data-contact-name="{{ $outlet->outlet_contact_name }}"
                                                       data-contact-phone="{{ $outlet->outlet_contact_phone }}"
                                                       data-contact-email="{{ $outlet->outlet_contact_email }}">
                                                        <i class="fas fa-eye me-2"></i>View
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="javascript:void(0)"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#editOutletModal"
                                                       data-outlet-id="{{ $outlet->id }}"
                                                       data-outlet-name="{{ $outlet->outlet_name }}"
                                                       data-shop-number="{{ $outlet->shop_number }}"
                                                       data-contact-name="{{ $outlet->outlet_contact_name }}"
                                                       data-contact-phone="{{ $outlet->outlet_contact_phone }}"
                                                       data-contact-email="{{ $outlet->outlet_contact_email }}">
                                                        <i class="fas fa-edit me-2"></i>Edit
                                                    </a>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form action="{{ route('food-court.outlets.toggle-status', $outlet) }}" method="POST" class="d-inline" id="toggleForm{{ $outlet->id }}">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item text-warning" onclick="return confirm('Are you sure?')">
                                                            <i class="fas fa-pause me-2"></i>{{ $outlet->status === 'active' ? 'Suspend' : 'Activate' }}
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($outlets->hasPages())
                <div class="pagination-wrapper">
                    {{ $outlets->links('pagination::bootstrap-5') }}
                </div>
            @endif
        </div>
    @endif

    <!-- View Outlet Modal -->
    <div class="modal fade" id="viewOutletModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Outlet Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Outlet Name</label>
                        <div class="form-value" id="view_outlet_name"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted">Shop Number</label>
                        <div class="form-value" id="view_shop_number">-</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted">Contact Name</label>
                        <div class="form-value" id="view_contact_name"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted">Contact Phone</label>
                        <div class="form-value" id="view_contact_phone"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted">Contact Email</label>
                        <div class="form-value" id="view_contact_email"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Outlet Modal -->
    <div class="modal fade" id="editOutletModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Outlet</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editOutletForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Outlet Name <span class="text-danger">*</span></label>
                            <input type="text" name="outlet_name" id="edit_outlet_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Shop Number</label>
                            <input type="text" name="shop_number" id="edit_shop_number" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Contact Name <span class="text-danger">*</span></label>
                            <input type="text" name="outlet_contact_name" id="edit_contact_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Contact Phone <span class="text-danger">*</span></label>
                            <input type="tel" name="outlet_contact_phone" id="edit_contact_phone" class="form-control" required pattern="[0-9]{10}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Contact Email <span class="text-danger">*</span></label>
                            <input type="email" name="outlet_contact_email" id="edit_contact_email" class="form-control" required>
                        </div>
                    </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">Update Outlet</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Add Outlet Modal -->
    <div class="modal fade" id="addOutletModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Outlet</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('food-court.outlets.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Outlet Name <span class="text-danger">*</span></label>
                            <input type="text" name="outlet_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Shop Number</label>
                            <input type="text" name="shop_number" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Contact Name <span class="text-danger">*</span></label>
                            <input type="text" name="outlet_contact_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Contact Phone <span class="text-danger">*</span></label>
                            <input type="tel" name="outlet_contact_phone" class="form-control" required pattern="[0-9]{10}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Contact Email <span class="text-danger">*</span></label>
                            <input type="email" name="outlet_contact_email" class="form-control" required>
                        </div>
                    </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">Add Outlet</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    /* Empty State */
    .empty-state-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        padding: 40px 20px;
    }

    .logo-image {
        width: 150px;
        height: auto;
        margin-bottom: 30px;
    }

    .empty-state-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 40px;
        max-width: 420px;
        width: 100%;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .welcome-text {
        font-size: 18px;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 8px;
    }

    .setup-title {
        font-size: 28px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 16px;
    }

    .setup-description {
        font-size: 15px;
        color: #6b7280;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    /* Table Card */
    .outlets-table-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .outlets-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }

    .outlets-table thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .outlets-table thead th {
        padding: 16px 20px;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        border: none;
    }

    .outlets-table tbody tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background-color 0.2s;
    }

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

    .outlets-table tbody tr:last-child {
        border-bottom: none;
    }

    .outlets-table tbody td {
        padding: 16px 20px;
        font-size: 14px;
        color: #111827;
        vertical-align: middle;
    }

    .outlets-table .text-center {
        text-align: center;
    }

    .outlet-name {
        font-weight: 500;
        color: #111827;
    }

    .contact-name {
        font-weight: 500;
        color: #111827;
        margin-bottom: 4px;
    }

    .contact-details {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.4;
    }

    .user-count {
        font-weight: 500;
        color: #111827;
    }

    .last-updated {
        font-size: 13px;
        color: #6b7280;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    .btn-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        color: #6b7280;
        padding: 0;
    }

    .btn-icon:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #374151;
    }

    /* Dropdown Menu */
    .dropdown-menu {
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 8px 0;
    }

    .dropdown-item {
        padding: 10px 16px;
        font-size: 14px;
        color: #374151;
        transition: all 0.2s;
    }

    .dropdown-item:hover {
        background-color: #f9fafb;
        color: #111827;
    }

    .dropdown-item.text-warning {
        color: #f59e0b;
    }

    .dropdown-item.text-warning:hover {
        background-color: #fef3c7;
        color: #d97706;
    }

    .dropdown-divider {
        margin: 8px 0;
        border-color: #f3f4f6;
    }

    /* Modal Styling */
    .modal-header {
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 24px;
    }

    .modal-body {
        padding: 24px;
    }

    .modal-footer {
        border-top: 1px solid #e5e7eb;
        padding: 16px 24px;
    }

    .form-label {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
    }

    .form-value {
        font-size: 14px;
        color: #111827;
        padding: 8px 0;
    }

    .form-control {
        font-size: 14px;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
    }

    .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .pagination-wrapper {
        padding: 16px 20px;
        border-top: 1px solid #e5e7eb;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .outlets-table {
            font-size: 13px;
        }

        .outlets-table thead th,
        .outlets-table tbody td {
            padding: 12px 10px;
        }

        .empty-state-card {
            padding: 30px 20px;
        }

        .btn-icon {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // View outlet modal
        const viewButtons = document.querySelectorAll('[data-bs-target="#viewOutletModal"]');

        viewButtons.forEach(button => {
            button.addEventListener('click', function() {
                document.getElementById('view_outlet_name').textContent = this.dataset.outletName;
                document.getElementById('view_shop_number').textContent = this.dataset.shopNumber || '-';
                document.getElementById('view_contact_name').textContent = this.dataset.contactName;
                document.getElementById('view_contact_phone').textContent = this.dataset.contactPhone;
                document.getElementById('view_contact_email').textContent = this.dataset.contactEmail;
            });
        });

        // Edit outlet modal
        const editButtons = document.querySelectorAll('[data-bs-target="#editOutletModal"]');

        editButtons.forEach(button => {
            button.addEventListener('click', function() {
                const outletId = this.dataset.outletId;

                document.getElementById('editOutletForm').action = `/food-court/outlets/${outletId}`;
                document.getElementById('edit_outlet_name').value = this.dataset.outletName;
                document.getElementById('edit_shop_number').value = this.dataset.shopNumber || '';
                document.getElementById('edit_contact_name').value = this.dataset.contactName;
                document.getElementById('edit_contact_phone').value = this.dataset.contactPhone;
                document.getElementById('edit_contact_email').value = this.dataset.contactEmail;
            });
        });

        // Auto-dismiss alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>
@endpush