@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800 uppercase tracking-tight">Gest�o de <span class="text-[#06458F]">Utilizadores</span></h1>
        @if(auth()->user()->is_admin)
        <button onclick="document.getElementById('modalCriar').classList.remove('hidden')" 
                class="bg-[#06458F] hover:bg-[#0a2348] text-white px-4 py-2 rounded-lg font-bold shadow-lg transition transform hover:scale-105">
            + Novo Utilizador
        </button>
        @endif
    </div>

    {{-- Alertas de Feedback --}}
    @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4 shadow-sm rounded-r-lg">
            <span class="font-bold">Sucesso!</span> {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-blue-50 border-l-4 border-[#06458F] text-[#06458F] p-4 mb-4 shadow-sm rounded-r-lg">
            <span class="font-bold">Erro:</span> {{ session('error') }}
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-slate-50">
                    <tr class="text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">
                        <th class="px-6 py-4">Utilizador</th>
                        <th class="px-6 py-4">Telefone</th>
                        <th class="px-6 py-4">Fun��o</th>
                        <th class="px-6 py-4 text-center">Permiss�es</th>
                        <th class="px-6 py-4 text-right">A��es</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-slate-100">
                    @foreach($users as $user)
                    <tr class="hover:bg-slate-50/50 transition">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0 border border-slate-200 shadow-sm">
                                    <img src="{{ $user->foto_perfil_url }}" alt="{{ $user->name }}" class="w-full h-full object-cover">
                                </div>
                                <div>
                                    <div class="text-sm font-bold text-slate-900">{{ $user->name }}</div>
                                    <div class="text-[11px] text-slate-500">{{ $user->email }}</div>
                                    @if($user->is_admin)
                                        <span class="text-[9px] bg-blue-50 text-[#06458F] px-2 py-0.5 rounded-md font-bold uppercase mt-1 inline-block">Admin</span>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-xs font-bold text-slate-600">{{ $user->telefone ?? '�' }}</td>
                        <td class="px-6 py-4 text-xs font-bold text-slate-600 uppercase tracking-tighter">{{ $user->cargo ?? '�' }}</td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-1.5 flex-wrap max-w-[240px]">
                                @php
                                    $badges = [
                                        'perm_noticias' => ['N', 'Notícias'],
                                        'perm_loja' => ['L', 'Loja Virtual'],
                                        'perm_pedidos' => ['P', 'Pedidos & Proformas'],
                                        'perm_hero' => ['H', 'Destaques / Hero'],
                                        'perm_contactos' => ['M', 'Mensagens de Contacto'],
                                        'perm_cursos' => ['C', 'Cursos'],
                                        'perm_formacoes' => ['F', 'Formações'],
                                        'perm_inscricoes' => ['I', 'Inscrições & Vendas'],
                                        'perm_chatbot' => ['B', 'Chatbot IA'],
                                        'perm_usuarios' => ['U', 'Utilizadores'],
                                        'perm_logs' => ['G', 'Logs de Auditoria'],
                                        'perm_configuracoes' => ['S', 'Configurações'],
                                    ];
                                @endphp
                                @foreach($badges as $key => [$letter, $label])
                                <span title="{{ $label }}" class="{{ $user->$key ? 'bg-green-100 text-green-600' : 'bg-slate-100 text-slate-300' }} w-6 h-6 flex items-center justify-center rounded-lg text-[10px] font-bold">{{ $letter }}</span>
                                @endforeach
                            </div>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                <button data-user="{{ json_encode($user) }}" onclick="abrirEditar(JSON.parse(this.dataset.user))" 
                                        class="px-3 py-1.5 bg-slate-100 hover:bg-blue-600 hover:text-white text-slate-600 rounded-lg text-[10px] font-bold uppercase transition border border-slate-200 shadow-sm">
                                    Editar
                                </button>
                                @if($user->id != 1 && $user->id != auth()->id())
                                <form action="{{ route('admin.usuarios.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Apagar este utilizador definitivamente?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="px-3 py-1.5 bg-slate-100 hover:bg-[#06458F] hover:text-white text-[#06458F] rounded-lg text-[10px] font-bold uppercase transition border border-slate-200 shadow-sm">
                                        Apagar
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- MODAL CRIAR --}}
<div id="modalCriar" class="fixed inset-0 bg-slate-900/60 hidden flex items-center justify-center z-50 p-4 backdrop-blur-sm">
    <div class="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden border border-slate-200">
        <form action="{{ route('admin.usuarios.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="p-8">
                <h3 class="text-xl font-bold mb-6 text-slate-800 uppercase tracking-tight">Novo <span class="text-[#06458F]">Utilizador</span></h3>
                
                <div class="mb-6">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-2 ml-1">Foto de Perfil</label>
                    <div class="flex items-center gap-4">
                        <div class="w-16 h-16 rounded-2xl bg-slate-100 overflow-hidden flex-shrink-0 border-2 border-dashed border-slate-300" id="previewCriar">
                            <div class="w-full h-full flex items-center justify-center text-slate-400 text-[10px] font-bold text-center p-2">S/ FOTO</div>
                        </div>
                        <input type="file" name="foto_perfil" id="fotoCriar" accept="image/*" class="text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-bold file:uppercase file:bg-blue-50 file:text-[#06458F] hover:file:bg-blue-50 cursor-pointer">
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <input type="text" name="name" placeholder="NOME COMPLETO *" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-[#06458F] transition">
                    <input type="email" name="email" placeholder="EMAIL DE ACESSO *" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-[#06458F] transition">
                    <input type="text" name="telefone" placeholder="TELEFONE" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-[#06458F] transition">
                    <input type="text" name="cargo" placeholder="FUN��O / CARGO" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-[#06458F] transition">
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <input type="password" name="password" placeholder="SENHA *" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-[#06458F] transition">
                    <input type="password" name="password_confirmation" placeholder="REPETIR SENHA *" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-[#06458F] transition">
                </div>
                
                <div class="bg-slate-50 p-5 rounded-2xl border border-slate-100">
                    <p class="text-[10px] font-bold uppercase text-slate-400 mb-3 tracking-widest">N�veis de Acesso</p>
                    @php
                        $permCreateOptions = [
                            'is_admin' => 'ADMIN GERAL',
                            'perm_noticias' => 'NOT�CIAS',
                            'perm_loja' => 'LOJA ONLINE',
                            'perm_pedidos' => 'PEDIDOS & PROFORMAS',
                            'perm_hero' => 'DESTAQUES / HERO',
                            'perm_contactos' => 'MENSAGENS DE CONTACTO',
                            'perm_cursos' => 'CURSOS',
                            'perm_formacoes' => 'FORMA��ES',
                            'perm_inscricoes' => 'INSCRI��ES & VENDAS',
                            'perm_chatbot' => 'CHATBOT IA',
                            'perm_usuarios' => 'UTILIZADORES',
                            'perm_logs' => 'LOGS DE AUDITORIA',
                            'perm_configuracoes' => 'CONFIGURA��ES',
                        ];
                    @endphp
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($permCreateOptions as $key => $label)
                        <label class="flex items-center text-xs font-bold text-slate-600 cursor-pointer">
                            <input type="checkbox" name="{{ $key }}" value="1" class="mr-2 h-4 w-4 rounded border-slate-300 text-[#06458F] focus:ring-blue-500"> {{ $label }}
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="bg-slate-50 p-6 flex justify-end gap-3 border-t border-slate-100">
                <button type="button" onclick="document.getElementById('modalCriar').classList.add('hidden')" class="px-5 py-2 text-[11px] font-bold uppercase text-slate-400 hover:text-slate-600 transition">Cancelar</button>
                <button type="submit" class="bg-slate-900 text-white px-8 py-3 rounded-xl font-bold text-[11px] uppercase tracking-widest shadow-lg shadow-slate-200 hover:bg-[#06458F] transition transform hover:-translate-y-0.5">Criar Utilizador</button>
            </div>
        </form>
    </div>
</div>

{{-- MODAL EDITAR --}}
<div id="modalEditar" class="fixed inset-0 bg-slate-900/60 hidden flex items-center justify-center z-50 p-4 backdrop-blur-sm">
    <div class="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden border border-slate-200">
        <form id="formEditar" method="POST" enctype="multipart/form-data">
            @csrf @method('PUT')
            <div class="p-8">
                <h3 class="text-xl font-bold mb-6 text-slate-800 uppercase tracking-tight">Editar <span class="text-blue-600">Utilizador</span></h3>
                
                <div class="mb-6 flex items-center gap-5">
                    <div class="w-20 h-20 rounded-2xl bg-slate-100 overflow-hidden border-2 border-white shadow-md" id="previewEditar"></div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-2 ml-1">Nova Foto (Opcional)</label>
                        <input type="file" name="foto_perfil" id="fotoEditar" accept="image/*" class="text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-bold file:uppercase file:bg-blue-50 file:text-blue-600 hover:file:bg-blue-100 cursor-pointer">
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div class="flex flex-col gap-1">
                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">Nome</label>
                        <input type="text" name="name" id="ed_name" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:border-blue-500 transition">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">Email</label>
                        <input type="email" name="email" id="ed_email" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:border-blue-500 transition">
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div class="flex flex-col gap-1">
                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">Telefone</label>
                        <input type="text" name="telefone" id="ed_telefone" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:border-blue-500 transition">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">Cargo</label>
                        <input type="text" name="cargo" id="ed_cargo" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:border-blue-500 transition">
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="flex flex-col gap-1">
                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">Nova Senha</label>
                        <input type="password" name="password" placeholder="Vazio p/ manter" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:border-blue-500 transition">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">Confirmar Senha</label>
                        <input type="password" name="password_confirmation" placeholder="Repita a senha" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm font-bold outline-none focus:border-blue-500 transition">
                    </div>
                </div>
                
                <div class="bg-blue-50/50 p-5 rounded-2xl border border-blue-100">
                    <p class="text-[10px] font-bold uppercase text-blue-400 mb-3 tracking-widest">Controlo de Acesso</p>
                    @php
                        $permEditOptions = [
                            'is_admin' => 'ADMIN GERAL',
                            'perm_noticias' => 'NOT�CIAS',
                            'perm_loja' => 'LOJA',
                            'perm_pedidos' => 'PEDIDOS & PROFORMAS',
                            'perm_hero' => 'DESTAQUES / HERO',
                            'perm_contactos' => 'MENSAGENS DE CONTACTO',
                            'perm_cursos' => 'CURSOS',
                            'perm_formacoes' => 'FORMA��ES',
                            'perm_inscricoes' => 'INSCRI��ES & VENDAS',
                            'perm_chatbot' => 'CHATBOT IA',
                            'perm_usuarios' => 'UTILIZADORES',
                            'perm_logs' => 'LOGS DE AUDITORIA',
                            'perm_configuracoes' => 'CONFIGURA��ES',
                        ];
                    @endphp
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($permEditOptions as $key => $label)
                        <label id="box_{{ $key === 'is_admin' ? 'admin' : $key }}" class="flex items-center text-xs font-bold text-slate-600 cursor-pointer">
                            <input type="checkbox" name="{{ $key }}" id="ed_{{ $key }}" value="1" class="mr-2 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"> {{ $label }}
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="bg-slate-50 p-6 flex justify-end gap-3 border-t border-slate-100">
                <button type="button" onclick="document.getElementById('modalEditar').classList.add('hidden')" class="px-5 py-2 text-[11px] font-bold uppercase text-slate-400 hover:text-slate-600 transition">Sair</button>
                <button type="submit" class="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold text-[11px] uppercase tracking-widest shadow-lg shadow-blue-100 hover:bg-blue-700 transition">Salvar Altera��es</button>
            </div>
        </form>
    </div>
</div>

<script>
    function handlePreview(inputId, previewId) {
        document.getElementById(inputId)?.addEventListener('change', function(e) {
            const preview = document.getElementById(previewId);
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    preview.innerHTML = `<img src="${ev.target.result}" class="w-full h-full object-cover">`;
                }
                reader.readAsDataURL(file);
            }
        });
    }

    handlePreview('fotoCriar', 'previewCriar');
    handlePreview('fotoEditar', 'previewEditar');

    function abrirEditar(user) {
        try {
            document.getElementById('formEditar').action = "{{ url('admin/usuarios') }}/" + user.id;
            
            document.getElementById('ed_name').value = user.name || '';
            document.getElementById('ed_email').value = user.email || '';
            document.getElementById('ed_telefone').value = user.telefone || '';
            document.getElementById('ed_cargo').value = user.cargo || '';
            
            // Atribui��o segura das checkboxes
            ['is_admin','perm_noticias','perm_loja','perm_cursos','perm_inscricoes',
             'perm_usuarios','perm_logs','perm_configuracoes','perm_chatbot',
             'perm_pedidos','perm_hero','perm_contactos','perm_formacoes'].forEach(function(p){
                const el = document.getElementById('ed_' + p);
                if (el) el.checked = !!user[p];
            });

            const preview = document.getElementById('previewEditar');
            if (user.foto_perfil) {
                preview.innerHTML = `<img src="/storage/${user.foto_perfil}" class="w-full h-full object-cover">`;
            } else {
                const initial = (user.name || 'U').charAt(0).toUpperCase();
                preview.innerHTML = `<div class="w-full h-full flex items-center justify-center bg-slate-200 text-slate-500 font-bold text-xl">${initial}</div>`;
            }

            document.getElementById('box_admin').style.display = (user.id == 1) ? 'none' : 'flex';
            document.getElementById('modalEditar').classList.remove('hidden');
        } catch (e) { console.error(e); }
    }

    window.addEventListener('keydown', (e) => { 
        if (e.key === "Escape") {
            document.getElementById('modalCriar').classList.add('hidden');
            document.getElementById('modalEditar').classList.add('hidden');
        }
    });
</script>
@endsection