@extends('layouts.app')

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

@section('content')
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-white">Registrar Nuevo Cliente</h2>
            <p class="text-gray-400 text-sm mt-1">Completa los datos del nuevo cliente</p>
        </div>
        <a href="{{ route('clientes.index') }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[#23482f] hover:bg-[#326744] text-white font-medium transition-colors">
            <span class="material-symbols-outlined text-[18px]">arrow_back</span>
            <span>Volver</span>
        </a>
    </div>

    <div class="bg-surface-dark border border-[#23482f] rounded-xl p-6">
        <form action="{{ route('clientes.store') }}" method="POST" class="space-y-6">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label for="codigo" class="block text-sm font-medium text-gray-300 mb-2">Código *</label>
                    <input type="text" id="codigo" name="codigo" value="{{ old('codigo') }}" required class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    @error('codigo')
                        <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="cliente" class="block text-sm font-medium text-gray-300 mb-2">Cliente *</label>
                    <input type="text" id="cliente" name="cliente" value="{{ old('cliente') }}" required class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    @error('cliente')
                        <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="dni" class="block text-sm font-medium text-gray-300 mb-2">DNI</label>
                    <input type="text" id="dni" name="dni" value="{{ old('dni') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="numero" class="block text-sm font-medium text-gray-300 mb-2">Teléfono</label>
                    <input type="text" id="numero" name="numero" value="{{ old('numero') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="correo" class="block text-sm font-medium text-gray-300 mb-2">Correo</label>
                    <input type="email" id="correo" name="correo" value="{{ old('correo') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="distrito" class="block text-sm font-medium text-gray-300 mb-2">Distrito</label>
                    <input type="text" id="distrito" name="distrito" value="{{ old('distrito') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div class="md:col-span-2">
                    <label for="direccion" class="block text-sm font-medium text-gray-300 mb-2">Dirección</label>
                    <textarea id="direccion" name="direccion" rows="2" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">{{ old('direccion') }}</textarea>
                </div>
                
                <div>
                    <label for="google_maps" class="block text-sm font-medium text-gray-300 mb-2">Google Maps</label>
                    <input type="text" id="google_maps" name="google_maps" value="{{ old('google_maps') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="plan" class="block text-sm font-medium text-gray-300 mb-2">Plan</label>
                    <input type="text" id="plan" name="plan" value="{{ old('plan') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="tipo_plan" class="block text-sm font-medium text-gray-300 mb-2">Tipo de Plan</label>
                    <select id="tipo_plan" name="tipo_plan" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <option value="internet" {{ old('tipo_plan') == 'internet' ? 'selected' : '' }}>Internet</option>
                        <option value="duo" {{ old('tipo_plan') == 'duo' ? 'selected' : '' }}>Duo</option>
                        <option value="tv" {{ old('tipo_plan') == 'tv' ? 'selected' : '' }}>TV</option>
                    </select>
                </div>
                
                <div>
                    <label for="tipo_servicio" class="block text-sm font-medium text-gray-300 mb-2">Tipo de Servicio</label>
                    <select id="tipo_servicio" name="tipo_servicio" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <option value="domiciliario" {{ old('tipo_servicio') == 'domiciliario' ? 'selected' : '' }}>Domiciliario</option>
                        <option value="mype" {{ old('tipo_servicio') == 'mype' ? 'selected' : '' }}>MYPE</option>
                        <option value="empresa" {{ old('tipo_servicio') == 'empresa' ? 'selected' : '' }}>Empresa</option>
                        <option value="hospedaje" {{ old('tipo_servicio') == 'hospedaje' ? 'selected' : '' }}>Hospedaje</option>
                    </select>
                </div>
                
                <div>
                    <label for="mac" class="block text-sm font-medium text-gray-300 mb-2">MAC</label>
                    <input type="text" id="mac" name="mac" value="{{ old('mac') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="ip" class="block text-sm font-medium text-gray-300 mb-2">IP</label>
                    <input type="text" id="ip" name="ip" value="{{ old('ip') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="fecha_instalacion" class="block text-sm font-medium text-gray-300 mb-2">Fecha Instalación</label>
                    <input type="date" id="fecha_instalacion" name="fecha_instalacion" value="{{ old('fecha_instalacion') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="tecnico" class="block text-sm font-medium text-gray-300 mb-2">Técnico</label>
                    <input type="text" id="tecnico" name="tecnico" value="{{ old('tecnico') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="estado" class="block text-sm font-medium text-gray-300 mb-2">Estado</label>
                    <select id="estado" name="estado" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <option value="Activo" {{ old('estado') == 'Activo' ? 'selected' : '' }}>Activo</option>
                        <option value="Corte" {{ old('estado') == 'Corte' ? 'selected' : '' }}>Corte</option>
                        <option value="Suspendido" {{ old('estado') == 'Suspendido' ? 'selected' : '' }}>Suspendido</option>
                        <option value="Baja" {{ old('estado') == 'Baja' ? 'selected' : '' }}>Baja</option>
                        <option value="exsonerado" {{ old('estado') == 'exsonerado' ? 'selected' : '' }}>Exonerado</option>
                    </select>
                </div>
                
                <div>
                    <label for="nombre_vendedora" class="block text-sm font-medium text-gray-300 mb-2">Nombre Vendedora</label>
                    <input type="text" id="nombre_vendedora" name="nombre_vendedora" value="{{ old('nombre_vendedora') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="monto_pago" class="block text-sm font-medium text-gray-300 mb-2">Monto de Pago</label>
                    <input type="number" step="0.01" id="monto_pago" name="monto_pago" value="{{ old('monto_pago') }}" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                
                <div>
                    <label for="estado_pago" class="block text-sm font-medium text-gray-300 mb-2">Estado de Pago</label>
                    <select id="estado_pago" name="estado_pago" class="w-full bg-[#102216] border border-[#23482f] rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <option value="Pendiente" {{ old('estado_pago') == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                        <option value="Pagado" {{ old('estado_pago') == 'Pagado' ? 'selected' : '' }}>Pagado</option>
                        <option value="Vencido" {{ old('estado_pago') == 'Vencido' ? 'selected' : '' }}>Vencido</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-end gap-4 pt-4 border-t border-[#23482f]">
                <a href="{{ route('clientes.index') }}" class="px-6 py-3 rounded-lg bg-[#23482f] text-white font-semibold hover:bg-[#326744] transition-colors">Cancelar</a>
                <button type="submit" class="px-8 py-3 rounded-lg bg-primary text-background-dark font-bold hover:bg-primary-dark transition-all shadow-[0_0_15px_rgba(19,236,91,0.3)]">Guardar Cliente</button>
            </div>
        </form>
    </div>
</div>
@endsection