<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ isset($client) ? 'Editar Cliente: ' . $client->name : 'Crear Nuevo Cliente' }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    
                    <form method="POST" action="{{ isset($client) ? route('clients.update', $client->id) : route('clients.store') }}">
                        @csrf
                        @if(isset($client))
                            @method('PUT')
                        @endif

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                            <!-- Nombre -->
                            <div class="md:col-span-2">
                                <x-input-label for="name" value="Nombre del Cliente Comercial *" />
                                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name', $client->name ?? '')" required autofocus />
                                <x-input-error :messages="$errors->get('name')" class="mt-2" />
                            </div>

                            <!-- Documento -->
                            <div>
                                <x-input-label for="document_number" value="DNI / RUC" />
                                <x-text-input id="document_number" class="block mt-1 w-full" type="text" name="document_number" :value="old('document_number', $client->document_number ?? '')" />
                                <x-input-error :messages="$errors->get('document_number')" class="mt-2" />
                            </div>

                            <!-- Teléfono -->
                            <div>
                                <x-input-label for="phone" value="Teléfono / Celular" />
                                <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone', $client->phone ?? '')" />
                                <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                            </div>

                            <!-- Email -->
                            <div class="md:col-span-2">
                                <x-input-label for="email" value="Correo Electrónico" />
                                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $client->email ?? '')" />
                                <x-input-error :messages="$errors->get('email')" class="mt-2" />
                            </div>

                            <!-- Límite de Crédito -->
                            <div>
                                <x-input-label for="credit_limit" value="Límite de Crédito (S/) *" />
                                <x-text-input id="credit_limit" class="block mt-1 w-full" type="number" step="0.01" name="credit_limit" :value="old('credit_limit', $client->credit_limit ?? '0.00')" required />
                                <p class="text-xs text-gray-500 mt-1">Límite máximo que se le puede fiar al cliente.</p>
                                <x-input-error :messages="$errors->get('credit_limit')" class="mt-2" />
                            </div>

                            <!-- Balance / Deuda (Solo visible en Edición) -->
                            @if(isset($client))
                            <div>
                                <x-input-label for="credit_balance" value="Deuda Actual (S/) (Modificar en caso de abonos)" />
                                <x-text-input id="credit_balance" class="block mt-1 w-full" type="number" step="0.01" name="credit_balance" :value="old('credit_balance', $client->credit_balance ?? '0.00')" />
                                <p class="text-xs text-gray-500 mt-1">Reduce este valor cuando el cliente realice un pago de su deuda.</p>
                                <x-input-error :messages="$errors->get('credit_balance')" class="mt-2" />
                            </div>
                            @endif

                        </div>

                        <div class="flex items-center justify-end mt-8">
                            <a href="{{ route('clients.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-300 mr-2">
                                Cancelar
                            </a>
                            <x-primary-button>
                                {{ isset($client) ? 'Actualizar Cliente' : 'Guardar Cliente' }}
                            </x-primary-button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>
