@extends('layouts.app')

@section('title', 'Costos Adicionales')

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

    <form
        action="{{ route('vehiculos.costos.store', $vehiculo) }}"
        method="POST"
        data-costos-form
        data-precio-compra="{{ $vehiculo->precio_compra ?? 0 }}"
        novalidate
    >
        @csrf

        <x-card title="Registro de Costos" icon="coins">
            <div class="table-scroll">
                <table class="data-table costos-table">
                    <thead>
                        <tr>
                            <th>Concepto</th>
                            <th>Valor</th>
                            <th class="costos-col-accion">Acción</th>
                        </tr>
                    </thead>
                    <tbody data-costos-rows>
                        @forelse($vehiculo->costosAdicionales as $costo)
                            @include('vehiculos.partials.costo-row', ['concepto' => $costo->concepto, 'valor' => $costo->valor])
                        @empty
                            @include('vehiculos.partials.costo-row')
                        @endforelse
                    </tbody>
                </table>
            </div>

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

            <template data-costo-row-template>
                @include('vehiculos.partials.costo-row')
            </template>

            <div class="field costos-observaciones">
                <label for="observaciones" class="field-label">Observaciones</label>
                <textarea name="observaciones" id="observaciones" rows="3" class="field-input">{{ old('observaciones', $vehiculo->costos_observaciones) }}</textarea>
            </div>
        </x-card>

        <x-card class="costos-summary" title="Resumen" icon="clipboard">
            <div class="summary-row">
                <span class="summary-row-label">Precio de compra</span>
                <span class="summary-row-value" data-summary-precio>—</span>
            </div>
            <div class="summary-row">
                <span class="summary-row-label">Costos adicionales</span>
                <span class="summary-row-value summary-row-value-accent" data-summary-costos>—</span>
            </div>
            <div class="summary-row summary-row-total">
                <span class="summary-row-label">Costo total</span>
                <span class="summary-row-value" data-summary-total>—</span>
            </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" />
                Guardar Costos
            </button>
        </div>
    </form>
@endsection