@extends('layouts.app')

@section('title', 'Proveedores')

@section('content')
    <div class="page-header page-header-row">
        <div>
            <p class="page-eyebrow">Inventario</p>
            <h1 class="page-title">Proveedores</h1>
            <p class="page-subtitle">{{ $proveedores->total() }} proveedor(es) registrado(s).</p>
        </div>

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

    <x-card title="Filtros" icon="search">
        <form method="GET" action="{{ route('proveedores.index') }}" class="filters-form">
            <div class="field field-span-3">
                <label for="q" class="field-label">Buscar</label>
                <input
                    type="text"
                    name="q"
                    id="q"
                    value="{{ request('q') }}"
                    class="field-input"
                    placeholder="Nombre, teléfono o email..."
                >
            </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()->filled('q'))
                        <a href="{{ route('proveedores.index') }}" class="btn btn-ghost">Limpiar</a>
                    @endif
                </div>
            </div>
        </form>
    </x-card>

    <x-card title="Resultados">
        @if($proveedores->isEmpty())
            <div class="empty-state">
                <span class="empty-state-icon"><x-icon name="users" /></span>
                <p class="empty-state-title">No hay proveedores registrados</p>
                <p class="empty-state-text">Empieza agregando el primer proveedor.</p>
                <a href="{{ route('proveedores.create') }}" class="btn btn-primary">
                    <x-icon name="plus" />
                    Nuevo Proveedor
                </a>
            </div>
        @else
            <div class="table-scroll">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Teléfono</th>
                            <th>Email</th>
                            <th>Dirección</th>
                            <th>Vehículos</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($proveedores as $proveedor)
                            <tr>
                                <td>
                                    <div class="vehicle-cell">
                                        <span class="vehicle-cell-icon"><x-icon name="users" /></span>
                                        <p class="vehicle-cell-title">{{ $proveedor->nombre }}</p>
                                    </div>
                                </td>
                                <td>{{ $proveedor->telefono ?: '—' }}</td>
                                <td>{{ $proveedor->email ?: '—' }}</td>
                                <td>{{ $proveedor->direccion ?: '—' }}</td>
                                <td><span class="badge badge-red">{{ $proveedor->vehiculos_count }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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