@extends('layouts.app')

@section('title', 'Vendedores')

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

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

    <x-card title="Filtros" icon="search">
        <form method="GET" action="{{ route('vendedores.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('vendedores.index') }}" class="btn btn-ghost">Limpiar</a>
                    @endif
                </div>
            </div>
        </form>
    </x-card>

    <x-card title="Resultados">
        @if($vendedores->isEmpty())
            <div class="empty-state">
                <span class="empty-state-icon"><x-icon name="users" /></span>
                <p class="empty-state-title">No hay vendedores registrados</p>
                <p class="empty-state-text">Empieza agregando el primer vendedor.</p>
                <a href="{{ route('vendedores.create') }}" class="btn btn-primary">
                    <x-icon name="plus" />
                    Nuevo Vendedor
                </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 class="actions-col">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vendedores as $vendedor)
                            <tr>
                                <td>
                                    <div class="vehicle-cell">
                                        <span class="vehicle-cell-icon"><x-icon name="users" /></span>
                                        <p class="vehicle-cell-title">{{ $vendedor->nombre }}</p>
                                    </div>
                                </td>
                                <td>{{ $vendedor->telefono ?: '—' }}</td>
                                <td>{{ $vendedor->email ?: '—' }}</td>
                                <td>{{ $vendedor->direccion ?: '—' }}</td>
                                <td class="actions-col">
                                    <div class="row-actions">
                                        <a href="{{ route('vendedores.edit', $vendedor) }}" class="btn-icon-neutral" title="Editar Vendedor" aria-label="Editar vendedor">
                                            <x-icon name="pencil" />
                                        </a>
                                        <form
                                            action="{{ route('vendedores.destroy', $vendedor) }}"
                                            method="POST"
                                            data-confirm="¿Eliminar al vendedor &quot;{{ $vendedor->nombre }}&quot;? Esta acción no se puede deshacer."
                                        >
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-icon-danger" title="Eliminar Vendedor" aria-label="Eliminar vendedor">
                                                <x-icon name="trash" />
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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