@section('title', "ZEINER | Criar conta")

<div>
    <div class="min-h-screen flex flex-col">    
    <x-home.header />
    <div class="w-full flex flex-col items-center py-10 px-4 md:px-0">
        
     <form wire:submit='store'>
    <!-- Título e Breadcrumb -->
    <h1 class="text-5xl font-bold text-white mb-2">Registar</h1>

    <nav class="text-sm text-gray-400 mb-10">
        <a href="#" class="hover:underline">Página Inicial</a>
        <span class="mx-1">/</span>
        <span class="text-gray-400">Registar</span>
    </nav>

    <!-- ====================================== -->
    <!-- INFORMAÇÃO PESSOAL -->
    <!-- ====================================== -->
    <h2 class="text-2xl font-semibold text-white mb-4 w-full max-w-5xl">
        Informação Pessoal
    </h2>
 
    <div class="w-full max-w-5xl bg-white shadow rounded-lg border p-8">

        <!-- Grid dos inputs -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

            <!-- Primeiro Nome -->
            <div class="flex flex-col">
                <div class="flex items-center bg-gray-100 border rounded-md px-3">
                    <i class="fas fa-user text-gray-400"></i>
                    <input                     
                        wire:model='first_name'
                        type="text"
                        placeholder="Primeiro Nome"
                        class="w-full bg-transparent px-3 py-3 outline-none text-black"
                    >
                </div>
                @error('first_name') 
                    <span class="text-red-400">{{ $message }}</span> 
                @enderror
            </div>

            <!-- Último Nome -->
            <div class="flex flex-col">
                <div class="flex items-center bg-gray-100 border rounded-md px-3">
                    <i class="fas fa-user text-gray-400"></i>
                    <input 
                        wire:model='last_name'
                        type="text"
                        placeholder="Último Nome"
                        class="w-full bg-transparent px-3 py-3 outline-none text-black"
                    >
                </div>
                @error('last_name') 
                    <span class="text-red-400">{{ $message }}</span> 
                @enderror
            </div>

        </div>

        <!-- Email -->
        <div class="mt-4 flex flex-col">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-envelope text-gray-400"></i>
                <input 
                    type="email"
                    placeholder="Email"   
                    wire:model='email'             
                    class="w-full bg-transparent text-black px-3 py-3 outline-none"
                >
            </div>
            @error('email') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- Telefone -->
        <div class="mt-4 flex gap-4">
            <!-- País e código -->
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <img src="https://flagcdn.com/w20/ao.png" class="w-6 h-4" alt="">
                <span class="ml-2 font-semibold text-black">+244</span>
                <i class="fas fa-caret-down ml-1 text-gray-500"></i>
            </div>

            <!-- Número de telefone -->
            <div class="flex-1 flex flex-col">
                <div class="flex items-center bg-gray-100 border rounded-md px-3">
                    <i class="fas fa-phone text-gray-400"></i>
                    <input 
                        type="text"
                        placeholder="Número de Telefone"
                        wire:model='phone'
                        class="w-full bg-transparent text-black px-3 py-3 outline-none"
                    >
                </div>
                @error('phone') 
                    <span class="text-red-400">{{ $message }}</span> 
                @enderror
            </div>

        </div>

    </div>


    <!-- ====================================== -->
    <!-- ENDEREÇO DE FATURAÇÃO -->
    <!-- ====================================== -->
    <h2 class="text-2xl font-semibold text-white mt-10 mb-4 w-full max-w-5xl">
        Endereço de Faturação
    </h2>

    <div class="w-full max-w-5xl bg-white shadow rounded-lg border p-8">

        <!-- Empresa -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-building text-gray-400"></i>
                <input 
                    type="text"
                    placeholder="Nome da Empresa (Opcional)"
                    wire:model='company_name'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('company_name') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- Endereço 1 -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-map-marker-alt text-gray-400"></i>
                <input 
                    type="text"
                    placeholder="Endereço 1"
                    wire:model='address_1'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('address_1') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- Endereço 2 -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-map-marker-alt text-gray-400"></i>
                <input 
                    type="text"
                    placeholder="Endereço 2"
                    wire:model='address_2'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('address_2') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- Cidade / Província / Código -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">

            <!-- Cidade -->
            <div class="flex flex-col">
                <div class="flex items-center bg-gray-100 border rounded-md px-3">
                    <i class="fas fa-city text-gray-400"></i>
                    <input 
                        type="text"
                        placeholder="Cidade"
                        wire:model='city'
                        class="w-full bg-transparent px-3 py-3 outline-none text-black"
                    >
                </div>
                @error('city') 
                    <span class="text-red-400">{{ $message }}</span> 
                @enderror
            </div>

            <!-- Provincia -->
            <div class="flex flex-col">
                <div class="flex items-center bg-gray-100 border rounded-md px-3">
                    <i class="fas fa-building text-gray-400"></i>
                    <input 
                        type="text"
                        placeholder="Província"
                        wire:model='province'
                        class="w-full bg-transparent px-3 py-3 outline-none text-black"
                    >
                </div>
                @error('province') 
                    <span class="text-red-400">{{ $message }}</span> 
                @enderror
            </div>

            <!-- Código postal -->
            <div class="flex flex-col">
                <div class="flex items-center bg-gray-100 border rounded-md px-3">
                    <i class="fas fa-cog text-gray-400"></i>
                    <input 
                        type="text"
                        placeholder="Código postal"
                        wire:model='postal_code'
                        class="w-full bg-transparent px-3 py-3 outline-none text-black"
                    >
                </div>
                @error('postal_code') 
                    <span class="text-red-400">{{ $message }}</span> 
                @enderror
            </div>

        </div>

    </div>


    <!-- ====================================== -->
    <!-- INFORMAÇÃO ADICIONAL -->
    <!-- ====================================== -->
    <h2 class="text-2xl font-semibold text-white mt-10 mb-4 w-full max-w-5xl">
        Informação adicional
    </h2>

    <div class="w-full max-w-5xl bg-white shadow rounded-lg border p-8">

        <!-- NIF -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-id-card text-gray-400"></i>
                <input 
                    type="text"
                    placeholder="NIF"
                    wire:model='nif'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('nif') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- BI / Passaporte -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-id-badge text-gray-400"></i>
                <input 
                    type="text"
                    placeholder="BI / Passaporte"
                    wire:model='doc_number'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('doc_number') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- Senha -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-lock text-gray-400"></i>
                <input 
                    type="password"
                    placeholder="Senha"
                    wire:model='password'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('password') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

        <!-- Confirmar senha -->
        <div class="flex flex-col mb-4">
            <div class="flex items-center bg-gray-100 border rounded-md px-3">
                <i class="fas fa-lock text-gray-400"></i>
                <input 
                    type="password"
                    placeholder="Confirmar senha"
                    wire:model='password_confirmation'
                    class="w-full bg-transparent px-3 py-3 outline-none text-black"
                >
            </div>
            @error('password_confirmation') 
                <span class="text-red-400">{{ $message }}</span> 
            @enderror
        </div>

    </div>

    <div class="flex justify-start mt-4 w-full max-w-5xl">
        <button 
        type="submit"
        class="w-full sm:w-auto bg-[#0b5ce7] hover:bg-[#084aba] text-white text-lg font-semibold py-3 px-2 rounded-lg transition">
        Cadastrar
        </button>
    </div>

    </form>
</div>

    </div>
</div>
