@extends('layouts.app')

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

@section('content')
    <div class="page-header">
        <p class="page-eyebrow">Contratos</p>
        <h1 class="page-title">Crear Contrato de Compraventa</h1>
        <p class="page-subtitle">
            {{ $vehiculo->marca }} {{ $vehiculo->linea }} — {{ $vehiculo->modelo }} {{ $vehiculo->color }} · Placa: {{ $vehiculo->placa }}
        </p>
    </div>

    <form
        action="{{ route('contratos.store', $vehiculo) }}"
        method="POST"
        data-contrato-form
        data-vehiculo-id="{{ $vehiculo->id }}"
        data-costo-total="{{ $vehiculo->costo_total }}"
        novalidate
    >
        @csrf

        <x-card title="Datos del Contrato" icon="clipboard">
            <div class="field">
                <label class="field-label">Empresa</label>
                <input type="text" class="field-input" value="{{ $vehiculo->empresa->nombre }}" disabled>
                <p class="field-hint">La empresa la define la motocicleta que se está vendiendo (ya está asignada en el inventario).</p>
            </div>

            <div class="field-grid-3">
                <x-form.input
                    name="fecha_contrato"
                    label="Fecha del Contrato"
                    type="date"
                    required
                    :default="now()->format('Y-m-d')"
                    :max="now()->format('Y-m-d')"
                />

                <x-form.select
                    name="tipo_venta"
                    label="Tipo de Venta"
                    :options="['efectivo' => 'Efectivo', 'transferencia' => 'Transferencia']"
                    placeholder="Seleccione el tipo de venta"
                    :default="old('tipo_venta')"
                    required
                />

                <x-form.currency name="precio_venta" label="Precio de Venta" required :default="old('precio_venta')" />
            </div>

            <div class="field-grid">
                <x-form.select
                    name="vendedor_id"
                    label="Vendedor"
                    :options="$vendedores->pluck('nombre', 'id')"
                    placeholder="Seleccione un vendedor"
                    required
                />

                <x-form.select
                    name="tipo_traspaso"
                    label="Tipo de Traspaso"
                    :options="['normal' => 'Normal', 'abierto' => 'Abierto', 'indefinido' => 'Indefinido']"
                    placeholder="Seleccione el tipo de traspaso"
                    :default="old('tipo_traspaso')"
                    required
                    hint="Define qué contrato se va a mostrar en el PDF."
                />
            </div>
        </x-card>

        <x-card title="Forma de Pago" icon="coins">
            <div class="table-scroll">
                <table class="data-table costos-table">
                    <thead>
                        <tr>
                            <th>Monto Abono</th>
                            <th>Fecha</th>
                            <th>Estado</th>
                            <th>Método</th>
                            <th class="costos-col-accion">Acción</th>
                        </tr>
                    </thead>
                    <tbody data-abono-rows>
                        @include('contratos.partials.abono-row')
                    </tbody>
                </table>
            </div>

            @error('abonos_monto')
                <p class="field-error">{{ $message }}</p>
            @enderror

            <button type="button" class="btn btn-success" data-abono-add>
                <x-icon name="plus" />
                Agregar Abono
            </button>

            <template data-abono-row-template>
                @include('contratos.partials.abono-row')
            </template>
        </x-card>

        <x-card class="costos-summary">
            <div class="summary-row">
                <span class="summary-row-label">Precio de venta</span>
                <span class="summary-row-value" data-summary-precio>—</span>
            </div>
            <div class="summary-row">
                <span class="summary-row-label">Costo total del vehículo</span>
                <span class="summary-row-value" data-summary-costo>—</span>
            </div>
            <div class="summary-row">
                <span class="summary-row-label">Total abonado</span>
                <span class="summary-row-value summary-row-value-accent" data-summary-abonado>—</span>
            </div>
            <div class="summary-row summary-row-total">
                <span class="summary-row-label">Diferencia (abonos)</span>
                <span class="summary-row-value" data-summary-diferencia>—</span>
            </div>
            <div class="summary-row summary-row-total">
                <span class="summary-row-label">Utilidad</span>
                <span class="summary-row-value" data-summary-utilidad>—</span>
            </div>
        </x-card>

        <x-card title="Datos del Comprador" icon="user-badge">
            <div class="field-grid">
                <x-form.input name="comprador_nombre" label="Nombre Completo" required :default="old('comprador_nombre')" placeholder="Nombre completo del comprador" />
                <x-form.input name="comprador_cc" label="C.C." required :default="old('comprador_cc')" placeholder="Número de cédula" />
                <x-form.input name="comprador_telefono" label="Teléfono" required :default="old('comprador_telefono')" placeholder="Número de teléfono" />
                <x-form.input name="comprador_email" label="Email" type="email" required :default="old('comprador_email')" placeholder="correo@ejemplo.com" />
            </div>

            <x-form.textarea name="comprador_direccion" label="Dirección" required :default="old('comprador_direccion')" placeholder="Dirección completa del comprador" />
        </x-card>

        <x-card title="Vehículo" icon="motorbike" hint="Datos tomados del vehículo ya registrado en el inventario.">
            <div class="info-grid">
                <div class="info-item"><span class="info-label">Marca</span><span class="info-value">{{ $vehiculo->marca }}</span></div>
                <div class="info-item"><span class="info-label">Línea</span><span class="info-value">{{ $vehiculo->linea }}</span></div>
                <div class="info-item"><span class="info-label">Modelo</span><span class="info-value">{{ $vehiculo->modelo }}</span></div>
                <div class="info-item"><span class="info-label">Color</span><span class="info-value">{{ $vehiculo->color }}</span></div>
                <div class="info-item"><span class="info-label">Cilindraje</span><span class="info-value">{{ $vehiculo->cilindraje ?? '—' }}</span></div>
                <div class="info-item"><span class="info-label">Placa</span><span class="info-value">{{ $vehiculo->placa }}</span></div>
                <div class="info-item"><span class="info-label">Matrícula</span><span class="info-value">{{ $vehiculo->matricula ?? '—' }}</span></div>
                <div class="info-item"><span class="info-label">Chasis / Serie (VIN)</span><span class="info-value">{{ $vehiculo->chasis ?? '—' }}</span></div>
                <div class="info-item"><span class="info-label">Motor</span><span class="info-value">{{ $vehiculo->moto ?? '—' }}</span></div>
                <div class="info-item"><span class="info-label">Manifiesto</span><span class="info-value">{{ $vehiculo->manifiesto ?? '—' }}</span></div>
                <div class="info-item"><span class="info-label">SOAT</span><span class="info-value">{{ $vehiculo->soat_numero ?? '—' }}</span></div>
                <div class="info-item"><span class="info-label">Tecnomecánica</span><span class="info-value">{{ $vehiculo->tecnomecanica_numero ?? '—' }}</span></div>
            </div>
        </x-card>

        <x-card title="Observaciones" icon="file">
            <div class="field">
                <label for="observaciones" class="field-label">Observación</label>
                <textarea
                    name="observaciones"
                    id="observaciones"
                    rows="4"
                    class="field-input"
                    placeholder="Escriba las observaciones del contrato aquí..."
                >{{ old('observaciones') }}</textarea>
                @error('observaciones')
                    <p class="field-error">{{ $message }}</p>
                @enderror
            </div>
        </x-card>

        <div class="form-actions form-actions-split">
            <a href="{{ route('vehiculos.index') }}" class="btn btn-ghost">
                <x-icon name="arrow-left" />
                Cancelar
            </a>
            <button type="submit" class="btn btn-primary">
                <x-icon name="check" />
                Crear Contrato
            </button>
        </div>
    </form>
@endsection