@extends('layouts.app')

@section('title', 'Nuevo Cliente')

@section('content')
    <div class="max-w-3xl mx-auto">
        <div class="flex justify-between items-end mb-8">
            <div>
                <h2 class="text-3xl font-bold text-slate-800 dark:text-white tracking-tight">Registrar Cliente</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 font-medium mt-1">Agregue un nuevo cliente a la base de
                    datos empresarial</p>
            </div>
            <a href="{{ route('clientes.index') }}"
                class="px-5 py-2.5 rounded-xl text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 font-bold border border-slate-200 dark:border-slate-700 transition shadow-sm">
                Cancelar
            </a>
        </div>

        @if($errors->any())
            <div class="glass-card-premium p-4 rounded-xl mb-6 border-l-4 border-l-red-500 bg-red-50/50 dark:bg-red-900/10">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <h4 class="font-bold text-red-700 dark:text-red-400 text-sm">Por favor corrige los siguientes errores:
                        </h4>
                        <ul class="list-disc list-inside text-xs text-red-600 dark:text-red-300 mt-1 font-medium">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <div class="glass-card-premium rounded-xl shadow-2xl p-0 overflow-hidden">
            <!-- Header con Gradiente Premium -->
            <div
                class="bg-gradient-to-r from-slate-900 to-slate-800 p-6 flex justify-between items-center border-b border-white/10 relative overflow-hidden">
                <div class="absolute top-0 right-0 p-4 opacity-10">
                    <svg class="w-32 h-32 transform rotate-12 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path
                            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                    </svg>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white tracking-tight relative z-10">
                        {{ isset($client) ? 'Editar Cliente' : 'Nuevo Cliente' }}
                    </h2>
                    <p class="text-slate-400 text-sm mt-1 relative z-10">
                        {{ isset($client) ? 'Actualice la información del cliente' : 'Registre un nuevo cliente en el sistema' }}
                    </p>
                </div>
                <a href="{{ route('clients.index') }}"
                    class="group relative z-10 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-all duration-200 flex items-center gap-2 backdrop-blur-sm border border-white/5">
                    <svg class="w-5 h-5 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    <span>Volver</span>
                </a>
            </div>
            <form action="{{ route('clientes.store') }}" method="POST" class="p-8 md:p-10 space-y-8">
                @csrf

                <!-- Datos Personales -->
                <div class="relative">
                    <h3
                        class="font-bold text-lg text-slate-800 dark:text-white border-b border-slate-100 dark:border-slate-700/50 pb-2 mb-6 flex items-center gap-2">
                        <span
                            class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </span>
                        Datos Personales
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="col-span-1 md:col-span-2">
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Nombre
                                Completo</label>
                            <input type="text" name="nombre_completo" required value="{{ old('nombre_completo') }}"
                                class="w-full px-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-medium text-slate-700 dark:text-slate-200 placeholder-slate-400"
                                placeholder="Nombre y Apellido">
                        </div>
                        <div>
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Teléfono
                                / WhatsApp</label>
                            <div class="relative">
                                <span class="absolute left-4 top-3.5 text-slate-400">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                        </path>
                                    </svg>
                                </span>
                                <input type="tel" name="telefono" required value="{{ old('telefono') }}"
                                    placeholder="300 123 4567"
                                    class="w-full pl-12 pr-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-bold text-slate-700 dark:text-slate-200 placeholder-slate-400 tracking-wide">
                            </div>
                        </div>
                        <div>
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Email
                                <span class="text-slate-400 font-normal lowercase">(Opcional)</span></label>
                            <input type="email" name="email" value="{{ old('email') }}" placeholder="cliente@ejemplo.com"
                                class="w-full px-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-medium text-slate-700 dark:text-slate-200 placeholder-slate-400">
                        </div>
                    </div>
                </div>

                <!-- Dirección -->
                <div class="relative">
                    <h3
                        class="font-bold text-lg text-slate-800 dark:text-white border-b border-slate-100 dark:border-slate-700/50 pb-2 mb-6 flex items-center gap-2">
                        <span
                            class="w-8 h-8 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </span>
                        Ubicación Principal
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="col-span-1 md:col-span-2">
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Dirección
                                Exacta</label>
                            <input type="text" name="direccion" required value="{{ old('direccion') }}"
                                placeholder="Ej: Cra 45 # 23 - 12 Apto 402"
                                class="w-full px-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-medium text-slate-700 dark:text-slate-200 placeholder-slate-400">
                        </div>
                        <div>
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Barrio</label>
                            <input type="text" name="barrio" value="{{ old('barrio') }}" placeholder="Ingresa el barrio"
                                class="w-full px-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-medium text-slate-700 dark:text-slate-200 placeholder-slate-400">
                        </div>
                        <div>
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Ciudad</label>
                            <div class="relative">
                                <select name="ciudad"
                                    class="w-full px-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-bold text-slate-700 dark:text-slate-200 appearance-none cursor-pointer">
                                    <option value="Cali">Cali</option>
                                    <option value="Jamundi">Jamundi</option>
                                    <option value="Yumbo">Yumbo</option>
                                </select>
                                <div
                                    class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-slate-500">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-1 md:col-span-2">
                            <label
                                class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1.5 ml-1">Referencia
                                / Observación <span class="text-slate-400 font-normal lowercase">(Opcional)</span></label>
                            <textarea name="referencia" rows="2" placeholder="Ej: Casa de rejas blancas, timbre dañado..."
                                class="w-full px-5 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-berry-red focus:border-transparent outline-none transition-all font-medium text-slate-700 dark:text-slate-200 placeholder-slate-400 resize-none">{{ old('referencia') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="pt-6 flex justify-end border-t border-slate-100 dark:border-slate-700/50">
                    <button type="submit"
                        class="bg-gradient-to-r from-berry-red to-pink-600 hover:from-berry-red hover:to-pink-500 text-white px-10 py-3.5 rounded-xl font-bold shadow-lg shadow-berry-red/30 hover:shadow-berry-red/50 transition-all transform hover:-translate-y-0.5 active:scale-95 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        Guardar Cliente
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection