@extends('client.layouts.app')

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title mb-0">Mis Tickets</h4>
            <a href="{{ route('client.tickets.create') }}" class="btn btn-success">Nuevo Ticket</a>
        </div>
        <div class="card-body">
            <!-- Filtros -->
            <form method="GET" class="row g-3 mb-4">
                <div class="col-md-3">
                    <select name="estatus" class="form-select">
                        <option value="">Todos los estados</option>
                        <option value="abierto" {{ request('estatus') == 'abierto' ? 'selected' : '' }}>Abierto</option>
                        <option value="en_proceso" {{ request('estatus') == 'en_proceso' ? 'selected' : '' }}>En Proceso</option>
                        <option value="resuelto" {{ request('estatus') == 'resuelto' ? 'selected' : '' }}>Resuelto</option>
                        <option value="cerrado" {{ request('estatus') == 'cerrado' ? 'selected' : '' }}>Cerrado</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="prioridad" class="form-select">
                        <option value="">Todas las prioridades</option>
                        <option value="baja" {{ request('prioridad') == 'baja' ? 'selected' : '' }}>Baja</option>
                        <option value="media" {{ request('prioridad') == 'media' ? 'selected' : '' }}>Media</option>
                        <option value="alta" {{ request('prioridad') == 'alta' ? 'selected' : '' }}>Alta</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">Filtrar</button>
                    <a href="{{ route('client.tickets.index') }}" class="btn btn-outline-secondary">Limpiar</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Titulo</th>
                            <th>Prioridad</th>
                            <th>Estado</th>
                            <th>Asignado a</th>
                            <th>Fecha</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tickets as $ticket)
                            <tr>
                                <td>{{ $ticket->id }}</td>
                                <td>{{ Str::limit($ticket->titulo, 40) }}</td>
                                <td>{!! $ticket->prioridad_badge !!}</td>
                                <td>{!! $ticket->estatus_badge !!}</td>
                                <td>{{ $ticket->asignado ? $ticket->asignado->name : 'Sin asignar' }}</td>
                                <td>{{ $ticket->created_at->format('d/m/Y H:i') }}</td>
                                <td>
                                    <a href="{{ route('client.tickets.show', $ticket->id) }}" class="btn btn-sm btn-info">Ver</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">No hay tickets</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{ $tickets->appends(request()->query())->links() }}
        </div>
    </div>
@endsection