@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header">
            <h1 class="page-title">Gerenciar Permissões</h1>
            <p class="page-subtitle">
                Configure as permissões de acesso para cada tipo de usuário
            </p>
        </div>

        <!-- Search Form -->
        <div class="form-card">
            <div class="form-section">
                <h3 class="section-title">
                    <i class="fas fa-search"></i>
                    Selecionar Tipo de Usuário
                </h3>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="userTypeSelect" class="form-label">
                                Tipo de Usuário <span class="required">*</span>
                            </label>

                            <select class="form-select"
                                    id="userTypeSelect"
                                    name="userTypeSelect"
                                    onchange="loadPermissions()">
                                <option value="">Selecione um tipo de usuário</option>
                                @foreach($tipos as $tipo)
                                    <option value="{{ $tipo->id }}" data-status="{{ $tipo->status }}" data-nome="{{ $tipo->nome }}">
                                        {{ $tipo->nome }}
                                    </option>
                                @endforeach
                            </select>

                            <div class="form-text">
                                <i class="fas fa-info-circle"></i>
                                Selecione o tipo de usuário para visualizar e editar suas permissões
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Status do Tipo</label>

                            <div class="form-control"
                                 style="background: #f8f9fa; border-style: dashed;"
                                 id="typeStatus">
                                <i class="fas fa-info-circle"></i>
                                Selecione um tipo para ver o status
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Permissions Display -->
        <div class="permissions-card" id="permissionsContainer" style="display: none;">
            <form id="permissionsForm">
                @csrf
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-shield-alt"></i>
                        Permissões do Tipo: <span id="selectedTypeName">-</span>
                    </h3>

                    <div id="permissionsContent">
                        <!-- Permissions will be loaded here -->
                    </div>

                    <div class="mt-4">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="marcarTodas(true)">
                            <i class="fas fa-check-square"></i> Marcar Todas
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="marcarTodas(false)">
                            <i class="fas fa-square"></i> Desmarcar Todas
                        </button>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="form-actions">
                    <button type="button"
                            class="btn-secondary"
                            onclick="clearSelection()">
                        <i class="fas fa-times"></i>
                        Cancelar
                    </button>

                    <button type="button"
                            class="btn-primary"
                            onclick="savePermissions()"
                            id="saveBtn">
                        <i class="fas fa-save"></i>
                        Salvar Permissões
                    </button>
                </div>
            </form>
        </div>

        <!-- Empty State -->
        <div class="permissions-card" id="emptyState">
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>

                <h3>Selecione um Tipo de Usuário</h3>
                <p>
                    Escolha um tipo de usuário acima para visualizar e gerenciar
                    suas permissões de acesso ao sistema.
                </p>
            </div>
        </div>
    </main>

    <script>
    let currentTipoId = null;

    const permissoes = [
        {nome: 'permissoes', label: 'Permissões', icon: 'fas fa-shield-alt'},
        {nome: 'usuarios', label: 'Usuários', icon: 'fas fa-users'},
        {nome: 'tipos_usuarios', label: 'Tipos de Usuários', icon: 'fas fa-users-cog'},
        {nome: 'menus', label: 'Menus', icon: 'fas fa-bars'},
        {nome: 'fornecedores', label: 'Fornecedores', icon: 'fas fa-truck'},
        {nome: 'secretarias', label: 'Secretarias', icon: 'fas fa-building'},
        {nome: 'contas_apagar', label: 'Contas a Pagar', icon: 'fas fa-file-invoice-dollar'},
    ];

    function loadPermissions() {
        console.log('=== loadPermissions INICIADO ===');
        const select = document.getElementById('userTypeSelect');
        const tipoId = select.value;
        console.log('Tipo ID selecionado:', tipoId);
        
        if (!tipoId) {
            console.log('Nenhum tipo selecionado, limpando seleção');
            clearSelection();
            return;
        }

        currentTipoId = tipoId;
        const option = select.options[select.selectedIndex];
        const nome = option.dataset.nome;
        const status = option.dataset.status;
        console.log('Nome:', nome, 'Status:', status);

        // Atualiza nome e status
        document.getElementById('selectedTypeName').textContent = nome;
        const statusDiv = document.getElementById('typeStatus');
        statusDiv.innerHTML = status === 'Ativo' 
            ? '<span class="status-badge status-active">Ativo</span>'
            : '<span class="status-badge status-inactive">Bloqueado</span>';

        // Busca permissões do tipo
        const url = `/permissoes/${tipoId}`;
        
        console.log('URL da requisição:', url);
        
        showGlobalLoading('Carregando permissões...');
        fetch(url, {
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(async response => {
                console.log('=== RESPOSTA RECEBIDA ===');
                console.log('Status:', response.status);
                console.log('Status Text:', response.statusText);
                console.log('Headers:', [...response.headers.entries()]);
                
                const contentType = response.headers.get('content-type');
                console.log('Content-Type:', contentType);
                
                let data;
                try {
                    data = await response.json();
                    console.log('JSON parseado com sucesso:', data);
                } catch (e) {
                    console.error('Erro ao parsear JSON:', e);
                    hideGlobalLoading();
                    showMessage('Erro: resposta não é JSON válido', 'error');
                    throw e;
                }
                
                if (!response.ok || data.error) {
                    hideGlobalLoading();
                    showMessage(data.message || 'Erro ao carregar permissões', 'error');
                    throw new Error(data.message || `HTTP error! status: ${response.status}`);
                }
                
                return data;
            })
            .then(data => {
                console.log('=== PROCESSANDO DADOS ===');
                console.log('Data completo:', data);
                hideGlobalLoading();
                
                renderPermissions(data);
                document.getElementById('emptyState').style.display = 'none';
                document.getElementById('permissionsContainer').style.display = 'block';
                console.log('=== PERMISSÕES RENDERIZADAS COM SUCESSO ===');
            })
            .catch(error => {
                console.error('=== ERRO CAPTURADO ===');
                console.error('Tipo:', error.constructor.name);
                console.error('Mensagem:', error.message);
                console.error('Stack:', error.stack);
                hideGlobalLoading();
            });
    }

    function renderPermissions(tipo) {
        const container = document.getElementById('permissionsContent');
        
        let html = '<div class="permissions-grid">';
        
        permissoes.forEach(perm => {
            const checked = tipo[perm.nome] ? 'checked' : '';
            html += `
                <div class="permission-item">
                    <div class="permission-info">
                        <div class="permission-icon">
                            <i class="${perm.icon}"></i>
                        </div>
                        <div class="permission-details">
                            <div class="permission-name">${perm.label}</div>
                            <div class="permission-description">Acesso ao módulo de ${perm.label.toLowerCase()}</div>
                        </div>
                    </div>
                    <label class="permission-toggle">
                        <input 
                            type="checkbox" 
                            name="${perm.nome}" 
                            id="${perm.nome}"
                            value="1"
                            ${checked}
                        >
                        <span class="permission-slider"></span>
                    </label>
                </div>
            `;
        });
        
        html += '</div>';
        container.innerHTML = html;
    }

    function marcarTodas(marcar) {
        document.querySelectorAll('#permissionsContent input[type="checkbox"]').forEach(checkbox => {
            checkbox.checked = marcar;
        });
    }

    function savePermissions() {
        if (!currentTipoId) {
            showMessage('Selecione um tipo de usuário', 'error');
            return;
        }

        const form = document.getElementById('permissionsForm');
        const formData = new FormData(form);

        showGlobalLoading('Salvando permissões...');
        fetch(`/permissoes/${currentTipoId}`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            hideGlobalLoading();
            if (data.success) {
                showMessage(data.message, 'success');
            } else {
                showMessage('Erro ao salvar permissões', 'error');
            }
        })
        .catch(error => {
            hideGlobalLoading();
            console.error('Erro:', error);
            showMessage('Erro ao salvar permissões', 'error');
        });
    }

    function clearSelection() {
        document.getElementById('userTypeSelect').value = '';
        document.getElementById('typeStatus').innerHTML = '<i class="fas fa-info-circle"></i> Selecione um tipo para ver o status';
        document.getElementById('emptyState').style.display = 'block';
        document.getElementById('permissionsContainer').style.display = 'none';
        currentTipoId = null;
    }
    </script>
@endsection