@extends('layouts.admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 uppercase tracking-tight">Editar <span class="text-[#06458F]">Utilizador</span></h1>
            <p class="text-slate-500 text-sm font-bold">A atualizar os dados de: {{ $user->name }}</p>
        </div>
        <a href="{{ route('admin.usuarios.index') }}" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl text-xs font-bold uppercase transition shadow-sm">
            Voltar
        </a>
    </div>

    @if ($errors->any())
        <div class="bg-blue-50 border-l-4 border-[#06458F] text-[#06458F] p-4 mb-6">
            <ul class="list-disc ml-4 font-bold text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.usuarios.update', $user->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="md:col-span-1 text-center">
                <div class="bg-white p-6 rounded-3xl border border-slate-200">
                    <div class="relative inline-block mb-4">
                        <img src="{{ $user->foto_perfil_url }}" class="w-32 h-32 rounded-3xl object-cover shadow-xl border-4 border-white mx-auto" id="preview-foto">
                        <label for="foto_perfil" class="absolute -bottom-2 -right-2 w-10 h-10 bg-[#06458F] text-white rounded-xl flex items-center justify-center cursor-pointer hover:bg-[#0a2348] transition">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15a2.25 2.25 0 002.25-2.25V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
                            </svg>
                        </label>
                        <input type="file" name="foto_perfil" id="foto_perfil" class="hidden" onchange="previewImage(event)">
                    </div>
                </div>
            </div>

            <div class="md:col-span-2 space-y-6">
                <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-500 uppercase ml-1">Nome</label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-sm" required>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-500 uppercase ml-1">Email</label>
                            <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-sm" required>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-500 uppercase ml-1">Telefone</label>
                            <input type="text" name="telefone" value="{{ old('telefone', $user->telefone) }}" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-sm">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-500 uppercase ml-1">Cargo/Fun��o</label>
                            <input type="text" name="cargo" value="{{ old('cargo', $user->cargo) }}" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-sm">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-500 uppercase ml-1">Alterar Senha</label>
                            <input type="password" name="password" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-sm">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-500 uppercase ml-1">Confirmar Senha</label>
                            <input type="password" name="password_confirmation" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-sm">
                        </div>
                    </div>
                </div>

                <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-widest mb-6">Permiss�es de Acesso</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @php
                            $perms = [
                                'is_admin' => 'Administrador Geral',
                                'perm_noticias' => 'Not�cias',
                                'perm_loja' => 'Loja Virtual',
                                'perm_pedidos' => 'Pedidos & Proformas',
                                'perm_hero' => 'Destaques / Hero',
                                'perm_contactos' => 'Mensagens de Contacto',
                                'perm_cursos' => 'Cursos',
                                'perm_formacoes' => 'Forma��es',
                                'perm_inscricoes' => 'Inscri��es',
                                'perm_chatbot' => 'Chatbot IA',
                                'perm_usuarios' => 'Utilizadores',
                                'perm_logs' => 'Logs de Auditoria',
                                'perm_configuracoes' => 'Configura��es',
                            ];
                        @endphp
                        @foreach($perms as $key => $label)
                        <label class="flex items-center gap-3 p-4 bg-slate-50 hover:bg-slate-100 rounded-2xl cursor-pointer transition group">
                            <input type="checkbox" name="{{ $key }}" value="1" {{ $user->$key ? 'checked' : '' }} class="w-5 h-5 rounded-lg border-slate-300 text-[#06458F] focus:ring-blue-500 cursor-pointer">
                            <span class="text-sm font-bold text-slate-700 group-hover:text-slate-900">{{ $label }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <button type="submit" class="w-full py-4 bg-[#06458F] hover:bg-[#0a2348] text-white rounded-2xl font-bold text-sm uppercase tracking-widest transition shadow-lg shadow-blue-200">
                    Guardar Altera��es
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = () => {
            document.getElementById('preview-foto').src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    }
</script>
@endsection