@include('layouts.navigation')

<div class="page-container">

    {{-- Header Stats Cards --}}
    <div class="stats-grid">
        <div class="stat-card primary">
            <div class="stat-icon">🪑</div>
            <div class="stat-content">
                <h3>{{ $tables->count() }}</h3>
                <p>Total Tables</p>
            </div>
        </div>

        <div class="stat-card success">
            <div class="stat-icon">✔️</div>
            <div class="stat-content">
                <h3>{{ $tables->where('status', 'available')->count() }}</h3>
                <p>Available</p>
            </div>
        </div>

        <div class="stat-card warning">
            <div class="stat-icon">⏳</div>
            <div class="stat-content">
                <h3>{{ $tables->where('status', 'in_use')->count() }}</h3>
                <p>In Use</p>
            </div>
        </div>
    </div>

    {{-- Filter & Actions --}}
    <div class="filter-bar">
        <div class="filter-section">
            <input type="text" id="searchInput" placeholder="Search table name..." class="search-input">

            <select id="statusFilter" class="filter-select">
                <option value="">All Status</option>
                <option value="available">Available</option>
                <option value="in_use">In Use</option>
            </select>
        </div>

        <div class="action-buttons">
            <button class="btn-icon" onclick="resetFilter()" title="Reset Filter">🔄</button>

            <a href="{{ route('admin.tables.create') }}" class="btn-primary">
                + Add Table
            </a>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            <span>✓</span> {{ session('success') }}
        </div>
    @endif

    {{-- Table --}}
    <div class="table-container">
        <table class="data-table" id="tableList">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Capacity</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                @forelse ($tables as $index => $table)
                    <tr data-status="{{ $table->status }}">
                        <td>{{ $index + 1 }}</td>
                        <td class="table-name">{{ $table->name }}</td>
                        <td>{{ $table->capacity }}</td>
                        <td>
                            @if ($table->status === 'available')
                                <span class="badge badge-success">Available</span>
                            @else
                                <span class="badge badge-warning">In Use</span>
                            @endif
                        </td>
                        <td>
                            <div class="action-icons">

                                <a href="{{ route('admin.tables.show', $table->id) }}" class="icon-btn detail"
                                    title="Detail">
                                    👁️
                                </a>

                                <a href="{{ route('admin.tables.edit', $table->id) }}" class="icon-btn edit" title="Edit">
                                    ✏️
                                </a>

                                <form action="{{ route('admin.tables.destroy', $table->id) }}" method="POST"
                                    style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button class="icon-btn delete" onclick="return confirm('Delete this table?')"
                                        title="Delete">
                                        🗑️
                                    </button>
                                </form>

                            </div>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="5" class="empty-state">
                            <div class="empty-content">
                                <span class="empty-icon">📭</span>
                                <p>No tables found</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="table-footer">
        <div class="showing-info">
            Showing <span id="showingCount">{{ $tables->count() }}</span> of {{ $tables->count() }} entries
        </div>
    </div>

</div>


{{-- ====================== CSS (COPY DARI CONTOH SAMA PERSIS) ====================== --}}
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .page-container {
        max-width: 1400px;
        margin: 20px auto;
        padding: 0 20px;
    }

    /* Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: #dc2626;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 20px;
        color: white;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
        transition: transform 0.3s;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
    }

    .stat-card.primary {
        background: #dc2626;
    }

    .stat-card.success {
        background: #10b981;
    }

    .stat-card.warning {
        background: #f59e0b;
    }

    .stat-card.danger {
        background: #ef4444;
    }

    .stat-icon {
        font-size: 48px;
        line-height: 1;
    }

    .stat-content h3 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .stat-content p {
        font-size: 14px;
        opacity: 0.9;
    }

    /* Filter Bar */
    .filter-bar {
        background: white;
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        flex-wrap: wrap;
    }

    .filter-section {
        display: flex;
        gap: 15px;
        flex: 1;
        flex-wrap: wrap;
    }

    .search-input {
        flex: 1;
        min-width: 250px;
        padding: 10px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.3s;
    }

    .search-input:focus {
        outline: none;
        border-color: #dc2626;
    }

    .filter-select {
        padding: 10px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        background: white;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .btn-icon {
        width: 40px;
        height: 40px;
        border: none;
        background: #f3f4f6;
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .btn-icon:hover {
        background: #e5e7eb;
        transform: scale(1.05);
    }

    .btn-primary {
        padding: 10px 20px;
        background: #dc2626;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        background: #b91c1c;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }

    /* Alert */
    .alert {
        padding: 16px 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
    }

    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    /* Table */
    .table-container {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

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

    .data-table thead {
        background: #dc2626;
        color: white;
    }

    .data-table th {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .data-table td {
        padding: 16px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
    }

    .data-table tbody tr {
        transition: background-color 0.3s;
    }

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

    .product-thumb {
        width: 50px;
        height: 50px;
        object-fit: contain;
        border-radius: 8px;
        background: #f9fafb;
        padding: 4px;
    }

    .product-name {
        font-weight: 600;
        color: #1f2937;
    }

    .product-price {
        color: #059669;
        font-weight: 600;
    }

    .product-stock {
        font-weight: 600;
    }

    /* Badges */
    .badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        display: inline-block;
    }

    .badge-success {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-warning {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-danger {
        background: #fee2e2;
        color: #991b1b;
    }

    /* Action Icons */
    .action-icons {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .icon-btn:hover {
        transform: scale(1.1);
    }

    .icon-btn.view:hover {
        background: #dbeafe;
    }

    .icon-btn.edit:hover {
        background: #fef3c7;
    }

    .icon-btn.delete:hover {
        background: #fee2e2;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px !important;
    }

    .empty-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .empty-icon {
        font-size: 64px;
        opacity: 0.5;
    }

    .empty-content p {
        color: #6b7280;
        font-size: 16px;
    }

    /* Table Footer */
    .table-footer {
        background: white;
        padding: 16px 20px;
        border-radius: 0 0 12px 12px;
        margin-top: -1px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .showing-info {
        color: #6b7280;
        font-size: 14px;
    }

    .showing-info span {
        font-weight: 600;
        color: #1f2937;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .filter-bar {
            flex-direction: column;
            align-items: stretch;
        }

        .filter-section {
            flex-direction: column;
        }

        .action-buttons {
            justify-content: flex-end;
        }

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

        .data-table {
            min-width: 800px;
        }
    }
</style>

{{-- ====================== FILTER SCRIPT ====================== --}}
<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        filterTable();
    });

    document.getElementById('statusFilter').addEventListener('change', function () {
        filterTable();
    });

    function filterTable() {
        const search = document.getElementById('searchInput').value.toLowerCase();
        const status = document.getElementById('statusFilter').value;

        const rows = document.querySelectorAll('#tableList tbody tr');
        let visible = 0;

        rows.forEach(row => {
            const name = row.querySelector('.table-name').textContent.toLowerCase();
            const rowStatus = row.getAttribute('data-status');

            let show = true;

            if (search && !name.includes(search)) show = false;
            if (status && rowStatus !== status) show = false;

            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        document.getElementById('showingCount').textContent = visible;
    }

    function resetFilter() {
        document.getElementById('searchInput').value = "";
        document.getElementById('statusFilter').value = "";
        filterTable();
    }
</script>