@extends('tickets.guest_layout')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="font-weight-bold text-dark"><i class="fas fa-ticket-alt text-primary mr-2"></i> Mis Tickets</h2>
    <div>
        <a href="{{ route('content_requests.guest.index') }}" class="btn btn-info px-4 py-2 font-weight-bold shadow-sm mr-2 text-white">
            <i class="fas fa-film mr-2"></i> Solicitar Contenido
        </a>
        <a href="{{ route('tickets.guest.create') }}" class="btn btn-success px-4 py-2 font-weight-bold shadow-sm">
            <i class="fas fa-plus-circle mr-2"></i> Crear Nuevo Ticket
        </a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success shadow-sm border-0">
        <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
    </div>
@endif

<div class="row">
    <!-- Info Cards -->
    <div class="col-md-4 mb-4">
        <div class="card bg-primary text-white h-100">
            <div class="card-body d-flex align-items-center">
                <div class="mr-3">
                    <i class="fas fa-clipboard-list fa-3x opacity-50"></i>
                </div>
                <div>
                    <h5 class="card-title mb-0">Total Tickets</h5>
                    <h2 class="mb-0">{{ $tickets->count() }}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card bg-warning text-white h-100">
            <div class="card-body d-flex align-items-center">
                <div class="mr-3">
                    <i class="fas fa-clock fa-3x opacity-50"></i>
                </div>
                <div>
                    <h5 class="card-title mb-0">En Espera</h5>
                    <h2 class="mb-0">{{ $tickets->where('status', 'waiting')->count() }}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card bg-success text-white h-100">
            <div class="card-body d-flex align-items-center">
                <div class="mr-3">
                    <i class="fas fa-check-double fa-3x opacity-50"></i>
                </div>
                <div>
                    <h5 class="card-title mb-0">Resueltos</h5>
                    <h2 class="mb-0">{{ $tickets->where('status', 'closed')->count() }}</h2>
                </div>
            </div>
        </div>
    </div>
</div>

@if($tickets->isEmpty())
    <div class="card p-5 text-center shadow-sm">
        <div class="card-body">
            <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
            <h4 class="text-muted">No tienes tickets creados.</h4>
            <p class="text-muted mb-4">¿Tienes algún problema con tu servicio? Estamos aquí para ayudar.</p>
            <a href="{{ route('tickets.guest.create') }}" class="btn btn-primary">Crear mi primer ticket</a>
        </div>
    </div>
@else
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="thead-light">
                    <tr>
                        <th class="border-top-0 pl-4">ID</th>
                        <th class="border-top-0">Asunto</th>
                        <th class="border-top-0">Plataforma</th>
                        <th class="border-top-0">Estado</th>
                        <th class="border-top-0">Última Actividad</th>
                        <th class="border-top-0 text-right pr-4">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tickets as $ticket)
                    <tr>
                        <td class="pl-4 align-middle font-weight-bold text-muted">#{{ $ticket->id }}</td>
                        <td class="align-middle">
                            <span class="font-weight-bold text-dark">{{ Str::limit($ticket->title, 40) }}</span>
                        </td>
                        <td class="align-middle">
                            @if($ticket->platform == 'plex')
                                <span class="badge badge-warning text-white px-2 py-1">Plex</span>
                            @elseif($ticket->platform == 'emby')
                                <span class="badge badge-success px-2 py-1">Emby</span>
                            @else
                                <span class="badge badge-info px-2 py-1">Jellyfin</span>
                            @endif
                        </td>
                        <td class="align-middle">
                            @if($ticket->status == 'waiting')
                                <span class="badge badge-warning text-white px-3 py-2 rounded-pill">En Espera</span>
                            @elseif($ticket->status == 'in_progress')
                                <span class="badge badge-primary px-3 py-2 rounded-pill">En Progreso</span>
                            @else
                                <span class="badge badge-secondary px-3 py-2 rounded-pill">Cerrado</span>
                            @endif
                        </td>
                        <td class="align-middle text-muted">
                            <i class="far fa-clock mr-1"></i> {{ $ticket->updated_at->diffForHumans() }}
                        </td>
                        <td class="text-right pr-4 align-middle">
                            <a href="{{ route('tickets.guest.show', $ticket->id) }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                                Ver Detalles <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endif

<div class="mt-5">
    <div class="card border-0 bg-light">
        <div class="card-body">
            <h5 class="font-weight-bold mb-3"><i class="fas fa-lightbulb text-warning mr-2"></i> Tips Útiles</h5>
            <div class="row">
                <div class="col-md-4">
                    <h6><i class="fas fa-camera text-muted mr-1"></i> Usa Capturas</h6>
                    <p class="small text-muted">Una imagen vale más que mil palabras. Adjunta capturas de pantalla del error.</p>
                </div>
                <div class="col-md-4">
                    <h6><i class="fas fa-list-ul text-muted mr-1"></i> Sé Específico</h6>
                    <p class="small text-muted">Describe qué estabas haciendo cuando ocurrió el problema.</p>
                </div>
                <div class="col-md-4">
                    <h6><i class="fas fa-check-circle text-muted mr-1"></i> Revisa el Estado</h6>
                    <p class="small text-muted">Mantente atento a las actualizaciones de tu ticket en este panel.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection