@extends('layouts.app')

@section('title', 'Vehículos')

@section('content')
    <div class="page-header page-header-row">
        <div>
            <p class="page-eyebrow">Inventario</p>
            <h1 class="page-title">Vehículos</h1>
            <p class="page-subtitle">{{ $vehiculos->total() }} vehículo(s) en el inventario.</p>
        </div>

        <a href="{{ route('vehiculos.create') }}" class="btn btn-primary">
            <x-icon name="plus" />
            Nuevo Vehículo
        </a>
    </div>

    <x-card title="Filtros" icon="search">
        <form method="GET" action="{{ route('vehiculos.index') }}" class="filters-form">
            <div class="field">
                <label for="q" class="field-label">Buscar</label>
                <input
                    type="text"
                    name="q"
                    id="q"
                    value="{{ request('q') }}"
                    class="field-input"
                    placeholder="Placa, marca, línea, color..."
                >
            </div>

            <div class="field">
                <label for="empresa_id" class="field-label">Empresa</label>
                <select name="empresa_id" id="empresa_id" class="field-select">
                    <option value="">Todas las empresas</option>
                    @foreach($empresas as $empresa)
                        <option value="{{ $empresa->id }}" {{ (string) request('empresa_id') === (string) $empresa->id ? 'selected' : '' }}>
                            {{ $empresa->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="field">
                <label for="tipo_vehiculo" class="field-label">Tipo</label>
                <select name="tipo_vehiculo" id="tipo_vehiculo" class="field-select">
                    <option value="">Todos los tipos</option>
                    <option value="moto" {{ request('tipo_vehiculo') === 'moto' ? 'selected' : '' }}>Motocicleta</option>
                    <option value="carro" {{ request('tipo_vehiculo') === 'carro' ? 'selected' : '' }}>Carro</option>
                </select>
            </div>

            <div class="filters-actions-group">
                <span class="field-label field-label-ghost" aria-hidden="true">&nbsp;</span>
                <div class="filters-actions">
                    <button type="submit" class="btn btn-primary">Filtrar</button>
                    @if(request()->anyFilled(['q', 'empresa_id', 'tipo_vehiculo']))
                        <a href="{{ route('vehiculos.index') }}" class="btn btn-ghost">Limpiar</a>
                    @endif
                </div>
            </div>
        </form>
    </x-card>

    <div class="stat-grid">
        <x-stat-tile icon="inventory" label="Total Vehículos" :value="$stats['total']" />
        <x-stat-tile icon="check-circle" label="Disponibles" :value="$stats['disponibles']" />
        <x-stat-tile icon="tag" label="Vendidos" :value="$stats['vendidos']" />
        <x-stat-tile icon="coins" label="Costo Total" value="${{ number_format($stats['inversion_total'], 0, ',', '.') }}" />
        <x-stat-tile icon="tag" label="Venta Total" value="${{ number_format($stats['precio_venta_total'], 0, ',', '.') }}" />
        <x-stat-tile
            icon="clipboard"
            label="Utilidad Total"
            value="${{ number_format($stats['utilidad_total'], 0, ',', '.') }}"
            :variant="$stats['utilidad_total'] >= 0 ? 'success' : 'danger'"
        />
    </div>

    <x-card title="Resultados">
        @if($vehiculos->isEmpty())
            <div class="empty-state">
                <span class="empty-state-icon"><x-icon name="inbox" /></span>
                <p class="empty-state-title">No hay vehículos registrados</p>
                <p class="empty-state-text">Empieza agregando el primer vehículo al inventario.</p>
                <a href="{{ route('vehiculos.create') }}" class="btn btn-primary">
                    <x-icon name="plus" />
                    Registrar Vehículo
                </a>
            </div>
        @else
            <div class="table-scroll">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Empresa</th>
                            <th>Vehículo</th>
                            <th>Placa</th>
                            <th>Tipo</th>
                            <th>Color</th>
                            <th>Fecha de Compra</th>
                            <th>Precio de Compra</th>
                            <th>Costos Adc</th>
                            <th>Costo Total</th>
                            <th>Precio de Venta</th>
                            <th>Utilidad</th>
                            <th class="costos-col-accion">Ver Costos</th>
                            <th>Estado</th>
                            <th class="costos-col-accion">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vehiculos as $vehiculo)
                            <tr>
                                <td>{{ $vehiculo->empresa->nombre }}</td>
                                <td>
                                    <div class="vehicle-cell">
                                        <span class="vehicle-cell-icon">
                                            <x-icon :name="$vehiculo->tipo_vehiculo->value === 'carro' ? 'car' : 'motorbike'" />
                                        </span>
                                        <div>
                                            <p class="vehicle-cell-title">{{ $vehiculo->marca }} {{ $vehiculo->linea }}</p>
                                            <p class="vehicle-cell-sub">Modelo {{ $vehiculo->modelo }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td><span class="plate-chip">{{ $vehiculo->placa }}</span></td>
                                <td><span class="badge badge-red">{{ $vehiculo->tipo_vehiculo->label() }}</span></td>
                                <td>{{ $vehiculo->color }}</td>
                                <td>{{ $vehiculo->fecha_compra?->format('d/m/Y') ?? '—' }}</td>
                                <td class="cell-price">
                                    {{ $vehiculo->precio_compra !== null ? '$'.number_format($vehiculo->precio_compra, 0, ',', '.') : '—' }}
                                </td>
                                <td class="cell-price cell-price-accent">
                                    ${{ number_format($vehiculo->costos_adicionales_sum_valor ?? 0, 0, ',', '.') }}
                                </td>
                                <td class="cell-price">
                                    ${{ number_format(($vehiculo->precio_compra ?? 0) + ($vehiculo->costos_adicionales_sum_valor ?? 0), 0, ',', '.') }}
                                </td>
                                <td class="cell-price">
                                    @if($vehiculo->contrato)
                                        ${{ number_format($vehiculo->contrato->precio_venta, 0, ',', '.') }}
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="cell-price {{ $vehiculo->contrato ? 'summary-row-value-success' : '' }}">
                                    @if($vehiculo->contrato)
                                        ${{ number_format($vehiculo->contrato->precio_venta - $vehiculo->costo_total, 0, ',', '.') }}
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="costos-col-accion">
                                    <a
                                        href="{{ route('vehiculos.costos', $vehiculo) }}"
                                        class="{{ ($vehiculo->costos_adicionales_sum_valor ?? 0) > 0 ? 'btn-icon-active' : 'btn-icon-neutral' }}"
                                        title="Costos Adicionales"
                                        aria-label="Costos adicionales"
                                    >
                                        <x-icon name="coins" />
                                    </a>
                                </td>
                                <td><span class="badge {{ $vehiculo->estado->value === 'disponible' ? 'badge-success' : 'badge-red' }}">{{ $vehiculo->estado->label() }}</span></td>
                                <td class="costos-col-accion">
                                    <div class="row-actions">
                                        @if($vehiculo->contrato)
                                            <a href="{{ route('contratos.index', ['q' => $vehiculo->placa]) }}" class="btn-icon-active" title="Ver Contrato" aria-label="Ver contrato">
                                                <x-icon name="file" />
                                            </a>
                                        @else
                                            <a href="{{ route('contratos.create', $vehiculo) }}" class="btn-icon-neutral" title="Crear Contrato" aria-label="Crear contrato">
                                                <x-icon name="file" />
                                            </a>
                                        @endif
                                        <a href="{{ route('vehiculos.edit', $vehiculo) }}" class="btn-icon-neutral" title="Editar Vehículo" aria-label="Editar vehículo">
                                            <x-icon name="pencil" />
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{ $vehiculos->onEachSide(1)->links('vehiculos.partials.pagination') }}
        @endif
    </x-card>
@endsection