@extends('layouts.app')

@section('title', 'Registrar Abono')

@section('content')
    <div class="page-header">
        <p class="page-eyebrow">Contratos</p>
        <h1 class="page-title">Registrar Abono</h1>
        <p class="page-subtitle">
            {{ $contrato->cliente->nombre }} — {{ $contrato->vehiculo->marca }} {{ $contrato->vehiculo->linea }} · Placa: {{ $contrato->vehiculo->placa }}
        </p>
    </div>

    <x-card title="Resumen del Contrato" icon="clipboard">
        <div class="info-grid">
            <div class="info-item"><span class="info-label">Empresa</span><span class="info-value">{{ $contrato->empresa->nombre }}</span></div>
            <div class="info-item"><span class="info-label">Vendedor</span><span class="info-value">{{ $contrato->vendedor->nombre }}</span></div>
            <div class="info-item"><span class="info-label">Fecha del Contrato</span><span class="info-value">{{ $contrato->fecha_contrato->format('d/m/Y') }}</span></div>
            <div class="info-item"><span class="info-label">Precio de Venta</span><span class="info-value">${{ number_format($contrato->precio_venta, 0, ',', '.') }}</span></div>
            <div class="info-item"><span class="info-label">Total Pagado</span><span class="info-value">${{ number_format($contrato->total_pagado, 0, ',', '.') }}</span></div>
            <div class="info-item">
                <span class="info-label">Saldo Pendiente</span>
                <span class="info-value {{ $contrato->saldo_pendiente <= 0 ? 'summary-row-value-success' : 'summary-row-value-danger' }}">
                    ${{ number_format($contrato->saldo_pendiente, 0, ',', '.') }}
                </span>
            </div>
        </div>
    </x-card>

    <x-card title="Historial de Abonos" icon="coins">
        @if($contrato->abonos->isEmpty())
            <div class="empty-state">
                <span class="empty-state-icon"><x-icon name="inbox" /></span>
                <p class="empty-state-title">Todavía no hay abonos registrados</p>
                <p class="empty-state-text">Usa el formulario de abajo para registrar el primero.</p>
            </div>
        @else
            <div class="table-scroll">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Monto</th>
                            <th>Estado</th>
                            <th>Método</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($contrato->abonos as $abono)
                            <tr>
                                <td>{{ $abono->fecha->format('d/m/Y') }}</td>
                                <td class="cell-price {{ $abono->estado->value === 'pendiente' ? 'summary-row-value-danger' : '' }}">
                                    ${{ number_format($abono->monto, 0, ',', '.') }}
                                </td>
                                <td>
                                    <span class="badge {{ $abono->estado->value === 'pagado' ? 'badge-success' : 'badge-red' }}">
                                        {{ $abono->estado->label() }}
                                    </span>
                                </td>
                                <td><span class="badge">{{ $abono->metodo->label() }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-card>

    <form
        action="{{ route('contratos.abonos.store', $contrato) }}"
        method="POST"
        data-abono-pago-form
        data-saldo-pendiente="{{ $contrato->saldo_pendiente }}"
        novalidate
    >
        @csrf

        <x-card title="Registrar Nuevo Abono" icon="plus">
            <div class="field-grid-3">
                <x-form.currency name="monto" label="Monto Abono" required :default="old('monto')" />

                <x-form.input
                    name="fecha"
                    label="Fecha"
                    type="date"
                    required
                    :default="old('fecha', now()->format('Y-m-d'))"
                    :max="now()->format('Y-m-d')"
                />

                <x-form.select
                    name="estado"
                    label="Estado"
                    :options="['pendiente' => 'Pendiente', 'pagado' => 'Pagado']"
                    :default="old('estado', 'pagado')"
                    required
                />
            </div>

            <x-form.select
                name="metodo"
                label="Método"
                :options="['efectivo' => 'Efectivo', 'transferencia' => 'Transferencia']"
                :default="old('metodo', 'efectivo')"
                required
            />
        </x-card>

        <div class="form-actions form-actions-split">
            <a href="{{ route('contratos.index') }}" class="btn btn-ghost">
                <x-icon name="arrow-left" />
                Volver a Contratos
            </a>
            <button type="submit" class="btn btn-primary">
                <x-icon name="check" />
                Registrar Abono
            </button>
        </div>
    </form>
@endsection