@extends('layouts.admin')

@section('header_title', 'Novo Cliente')
@section('header_subtitle', 'Crie um novo registo de cliente e a respetiva conta de acesso.')

@section('content')
    <div class="mb-6 flex items-center">
        <a href="{{ route('admin.clients.index') }}" class="text-sm font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
            Voltar à Listagem
        </a>
    </div>

    <div class="bg-slate-900 border border-white/5 rounded-2xl p-6 md:p-8 shadow-xl max-w-4xl">
        
        @if ($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.clients.store') }}" method="POST" class="space-y-6">
            @csrf

            <div class="border-b border-white/5 pb-4 mb-4">
                <h3 class="text-lg font-semibold text-white">Informações Pessoais / Corporativas</h3>
                <p class="text-xs text-slate-500 mt-1">Os dados básicos do cliente, incluindo morada principal de faturação.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Nome -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Nome Completo / Empresa *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                        class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" placeholder="Ex: SecureTech Lda">
                </div>

                <!-- NIF/Documento -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">NIF / NIPC</label>
                    <input type="text" name="document_number" value="{{ old('document_number') }}"
                        class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" placeholder="123 456 789">
                </div>

                <!-- Email (Access) -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Email de Acesso *</label>
                    <input type="email" name="email" value="{{ old('email') }}" required
                        class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" placeholder="cliente@dominio.com">
                    <p class="mt-1.5 text-xs text-slate-500">Este será o email utilizado pelo cliente para aceder ao portal. O sistema irá gerar uma senha aleatória segura automaticamente.</p>
                </div>

                <!-- Telefone -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Telefone Comercial</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <span class="text-slate-500 sm:text-sm">+351</span>
                        </div>
                        <input type="text" name="phone" value="{{ old('phone') }}"
                            class="block w-full pl-12 pr-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" placeholder="910 000 000">
                    </div>
                </div>

                <!-- Morada Base -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Morada Sede / Faturação</label>
                    <textarea name="address" rows="3"
                        class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" placeholder="Avenida Principal, nº 100..."></textarea>
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-white/5 flex items-center justify-end gap-4">
                <a href="{{ route('admin.clients.index') }}" class="px-5 py-2.5 text-sm font-medium text-slate-300 hover:text-white transition-colors">
                    Cancelar
                </a>
                <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl shadow-lg shadow-blue-500/20 transition-all flex items-center gap-2">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
                    Aprovar e Criar Cliente
                </button>
            </div>
        </form>
    </div>
@endsection