@extends('layouts.app')

@section('title', 'Gerenciar Menu')

@section('content')
<div class="pb-5">
    <div class="row g-4">
        <div class="col-12">
            <div class="mb-8">
                <h2 class="mb-2">Gerenciar Menu</h2>
                <h5 class="text-body-tertiary fw-semibold">Configuração e organização do menu do sistema</h5>
            </div>

            <!-- Botões de Ação -->
            <div class="mb-4">
                <a href="{{ route('admin.menu.create') }}" class="btn btn-primary me-2">
                    <i class="fas fa-plus me-2"></i>Novo Item
                </a>
                <a href="{{ route('admin.menu.preview') }}" class="btn btn-secondary me-2" target="_blank">
                    <i class="fas fa-eye me-2"></i>Preview
                </a>
                <form action="{{ route('admin.menu.clearCache') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-sync me-2"></i>Limpar Cache
                    </button>
                </form>
            </div>

            <!-- Lista de Menu -->
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="mb-0">Estrutura do Menu</h6>
                        </div>
                        <div class="col-auto">
                            <small class="text-body-tertiary">
                                <i class="fas fa-info-circle me-1"></i>
                                Arraste para reordenar
                            </small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if($menuItems->count() > 0)
                        <div id="menu-tree">
                            @foreach($menuItems as $item)
                                <div class="menu-item mb-3 p-3 border rounded" data-id="{{ $item->id }}" data-order="{{ $item->order }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-grip-vertical text-body-tertiary me-3" style="cursor: move;"></i>
                                            
                                            @if($item->icon)
                                                @if(\Str::startsWith($item->icon, 'fas fa-') || \Str::startsWith($item->icon, 'far fa-'))
                                                    <i class="{{ $item->icon }} me-2"></i>
                                                @else
                                                    <i class="fas fa-feather me-2" title="Feather: {{ $item->icon }}"></i>
                                                @endif
                                            @endif
                                            
                                            <div>
                                                <h6 class="mb-0">{{ $item->name }}</h6>
                                                <small class="text-body-tertiary">
                                                    @if($item->route_name)
                                                        Rota: {{ $item->route_name }}
                                                    @elseif($item->url)
                                                        URL: {{ $item->url }}
                                                    @else
                                                        Apenas dropdown
                                                    @endif
                                                    
                                                    @if($item->permissions->count() > 0)
                                                        | Permissões: {{ $item->permissions->pluck('name')->implode(', ') }}
                                                    @endif
                                                </small>
                                            </div>
                                        </div>
                                        
                                        <div class="d-flex align-items-center gap-2">
                                            <!-- Status Toggle -->
                                            <div class="form-check form-switch">
                                                <input class="form-check-input toggle-status" 
                                                       type="checkbox" 
                                                       {{ $item->is_active ? 'checked' : '' }}
                                                       data-id="{{ $item->id }}">
                                                <label class="form-check-label">
                                                    {{ $item->is_active ? 'Ativo' : 'Inativo' }}
                                                </label>
                                            </div>
                                            
                                            <!-- Ações -->
                                            <a href="{{ route('admin.menu.edit', $item) }}" class="btn btn-sm btn-phoenix-secondary" title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            
                                            <form action="{{ route('admin.menu.destroy', $item) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-phoenix-danger" title="Excluir"
                                                        onclick="return confirm('Tem certeza que deseja excluir este item?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                    
                                    <!-- Subitens -->
                                    @if($item->children->count() > 0)
                                        <div class="mt-3 ms-4">
                                            @foreach($item->children as $child)
                                                <div class="menu-subitem d-flex justify-content-between align-items-center p-2 border rounded mb-2 bg-body-secondary" 
                                                     data-id="{{ $child->id }}" data-order="{{ $child->order }}" data-parent="{{ $item->id }}">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-grip-vertical text-body-tertiary me-2" style="cursor: move;"></i>
                                                        <i class="fas fa-level-up-alt fa-rotate-90 text-body-tertiary me-2"></i>
                                                        
                                                        @if($child->icon)
                                                            @if(\Str::startsWith($child->icon, 'fas fa-') || \Str::startsWith($child->icon, 'far fa-'))
                                                                <i class="{{ $child->icon }} me-2"></i>
                                                            @else
                                                                <i class="fas fa-feather me-2" title="Feather: {{ $child->icon }}"></i>
                                                            @endif
                                                        @endif
                                                        
                                                        <div>
                                                            <span class="fw-medium">{{ $child->name }}</span>
                                                            <small class="text-body-tertiary d-block">
                                                                @if($child->route_name)
                                                                    {{ $child->route_name }}
                                                                @elseif($child->url)
                                                                    {{ $child->url }}
                                                                @endif
                                                            </small>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input toggle-status" 
                                                                   type="checkbox" 
                                                                   {{ $child->is_active ? 'checked' : '' }}
                                                                   data-id="{{ $child->id }}">
                                                        </div>
                                                        
                                                        <a href="{{ route('admin.menu.edit', $child) }}" class="btn btn-sm btn-phoenix-secondary" title="Editar">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        
                                                        <form action="{{ route('admin.menu.destroy', $child) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-phoenix-danger" title="Excluir"
                                                                    onclick="return confirm('Tem certeza que deseja excluir este item?')">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-bars fa-3x text-body-tertiary mb-3"></i>
                            <h5 class="text-body-tertiary">Nenhum item de menu encontrado</h5>
                            <p class="text-body-tertiary">Clique em "Novo Item" para adicionar o primeiro item.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Adicionar uma aba para gerenciar roles -->
<ul class="nav nav-tabs" id="menuTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="structure-tab" data-bs-toggle="tab" data-bs-target="#structure" type="button" role="tab">
            Estrutura do Menu
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="permissions-tab" data-bs-toggle="tab" data-bs-target="#permissions" type="button" role="tab">
            Gerenciar Permissões
        </button>
    </li>
</ul>

<div class="tab-content" id="menuTabsContent">
    <div class="tab-pane fade show active" id="structure" role="tabpanel">
        <!-- Todo o conteúdo atual da página -->
    </div>
    <div class="tab-pane fade" id="permissions" role="tabpanel">
        @include('admin.menu.role-manager')
    </div>
</div>
@endsection

@push('scripts-custom')
<script>
$(document).ready(function() {
    console.log('jQuery carregado:', typeof jQuery !== 'undefined');
    console.log('CSRF token:', $('meta[name="csrf-token"]').attr('content'));
    
    // Toggle status via AJAX
    $('.toggle-status').on('change', function() {
        const itemId = $(this).data('id');
        const isActive = $(this).is(':checked');
        const token = $('meta[name="csrf-token"]').attr('content');
        
        console.log('Toggle clicado:', itemId, isActive, token);
        
        if (!token) {
            alert('CSRF token não encontrado!');
            return;
        }
        
        $.ajax({
            url: `/admin/menu/${itemId}/toggle`,
            method: 'POST',
            data: {
                _token: token
            },
            success: function(response) {
                console.log('Sucesso:', response);
                if (response.success) {
                    showAlert('success', response.message);
                    // Atualizar label
                    const label = $(`.toggle-status[data-id="${itemId}"]`).next('label');
                    label.text(response.is_active ? 'Ativo' : 'Inativo');
                } else {
                    showAlert('danger', response.message || 'Erro desconhecido');
                    // Reverter toggle
                    $(`.toggle-status[data-id="${itemId}"]`).prop('checked', !isActive);
                }
            },
            error: function(xhr, status, error) {
                console.error('Erro AJAX:', xhr, status, error);
                console.error('Response:', xhr.responseText);
                
                let errorMessage = 'Erro ao alterar status do item';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    errorMessage += ': ' + xhr.responseText;
                }
                
                showAlert('danger', errorMessage);
                // Reverter toggle
                $(`.toggle-status[data-id="${itemId}"]`).prop('checked', !isActive);
            }
        });
    });
});

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    `;
    
    $('#alert-container').html(alertHtml);
    
    setTimeout(() => {
        $('.alert').fadeOut();
    }, 5000);
}
</script>
@endpush