@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header">
            <h1 class="page-title">Gerenciamento de Menus</h1>
            <p class="page-subtitle">Controle e administração dos menus do sistema</p>
        </div>

        <div class="users-card">
            <div class="users-header">
                <h3 class="users-title">Lista de Menus</h3>
                <div class="users-actions">
                    <input type="text" class="search-input" placeholder="Buscar menus..." id="searchInput" onkeyup="searchMenus()">
                    <a href="{{ route('menus.create') }}" class="btn-primary">
                        <i class="fas fa-plus"></i>
                        Novo Menu
                    </a>
                </div>
            </div>

            <table class="users-table">
                <thead>
                    <tr>
                        <th>Título</th>
                        <th>Identificador</th>
                        <th>Tipo</th>
                        <th>Menu Pai</th>
                        <th>Ordem</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($menus as $menu)
                        <tr>
                            <td>{{ $menu->titulo }}</td>
                            <td>{{ $menu->nome }}</td>
                            <td>{{ $menu->tipo === 'menu' ? 'Menu' : 'Submenu' }}</td>
                            <td>{{ $menu->parent?->titulo ?? '-' }}</td>
                            <td>{{ $menu->ordem }}</td>
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('menus.edit', $menu->id) }}" class="btn-action btn-edit" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-bars"></i>
                                    </div>
                                    <h3>Nenhum menu encontrado</h3>
                                    <p>Cadastre um novo menu para começar.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </main>

    <script>
    function searchMenus() {
        const input = document.getElementById('searchInput');
        const filter = input.value.toLowerCase();
        const table = document.querySelector('.users-table tbody');
        const rows = table.getElementsByTagName('tr');

        for (let i = 0; i < rows.length; i++) {
            const row = rows[i];
            const cells = row.getElementsByTagName('td');
            let found = false;

            for (let j = 0; j < cells.length; j++) {
                const cell = cells[j];
                if (cell) {
                    const textValue = cell.textContent || cell.innerText;
                    if (textValue.toLowerCase().indexOf(filter) > -1) {
                        found = true;
                        break;
                    }
                }
            }

            if (found) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        }
    }
    </script>
@endsection