@extends('layouts.portal')
@section('title', 'Mis Solicitudes')
@section('content')

{{-- Saludo + CTA principal --}}
<div class="mb-5">
    <h1 class="text-xl font-bold text-gray-900">
        Hola, {{ explode(' ', auth()->user()->name)[0] }} 👋
    </h1>
    <p class="text-sm text-gray-500 mt-0.5">¿Necesitas ayuda con algo?</p>
</div>

{{-- Botón crear solicitud — protagonista --}}
<a href="{{ route('portal.create') }}"
   class="flex items-center justify-between w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-2xl px-5 py-4 mb-6 shadow-md transition">
    <div>
        <p class="font-semibold text-base">Crear nueva solicitud</p>
        <p class="text-blue-200 text-xs mt-0.5">Reporta un problema o pide ayuda</p>
    </div>
    <div class="bg-blue-500 rounded-xl p-2.5 flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
        </svg>
    </div>
</a>

{{-- Stats compactos --}}
<div class="grid grid-cols-3 gap-3 mb-6">
    <div class="bg-white rounded-xl border border-gray-100 p-3 text-center shadow-sm">
        <p class="text-2xl font-bold text-blue-600">{{ $stats['open'] }}</p>
        <p class="text-xs text-gray-400 mt-0.5 font-medium uppercase tracking-wide">Abiertas</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-3 text-center shadow-sm">
        <p class="text-2xl font-bold text-green-600">{{ $stats['closed'] }}</p>
        <p class="text-xs text-gray-400 mt-0.5 font-medium uppercase tracking-wide">Resueltas</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-3 text-center shadow-sm">
        <p class="text-2xl font-bold text-gray-700">{{ $stats['total'] }}</p>
        <p class="text-xs text-gray-400 mt-0.5 font-medium uppercase tracking-wide">Total</p>
    </div>
</div>

{{-- Lista de tickets --}}
<div class="mb-2 flex items-center justify-between">
    <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Mis solicitudes</h2>
</div>

<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
    @forelse($tickets as $ticket)
    <a href="{{ route('portal.show', $ticket) }}"
       class="flex items-start gap-3 px-4 py-4 border-b border-gray-50 last:border-b-0 hover:bg-gray-50 active:bg-gray-100 transition">

        {{-- Indicador de color según estado --}}
        <div class="flex-shrink-0 mt-1">
            <div class="w-2.5 h-2.5 rounded-full" style="background-color: {{ $ticket->status->color }}"></div>
        </div>

        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1 flex-wrap">
                <span class="text-xs font-mono text-blue-500 font-semibold">{{ $ticket->number }}</span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
                      style="background-color: {{ $ticket->priority->color }}18; color: {{ $ticket->priority->color }}">
                    {{ $ticket->priority->name }}
                </span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold"
                      style="background-color: {{ $ticket->status->color }}22; color: {{ $ticket->status->color }}">
                    {{ $ticket->status->name }}
                </span>
                @if(!$ticket->satisfaction_score && $ticket->status->is_final)
                <span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full">★ Califica</span>
                @endif
            </div>
            <p class="text-sm font-medium text-gray-900 leading-tight">{{ $ticket->title }}</p>
            <div class="flex items-center mt-1.5">
                <p class="text-xs text-gray-400">{{ $ticket->created_at->diffForHumans() }}</p>
            </div>
        </div>

        <div class="flex-shrink-0 self-center">
            <svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
            </svg>
        </div>
    </a>
    @empty
    <div class="px-6 py-14 text-center">
        <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="h-8 w-8 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
        </div>
        <p class="text-gray-500 font-medium mb-1">Sin solicitudes aún</p>
        <p class="text-sm text-gray-400 mb-4">Crea tu primera solicitud si necesitas ayuda</p>
        <a href="{{ route('portal.create') }}"
           class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white text-sm font-semibold rounded-xl hover:bg-blue-700 transition">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
            </svg>
            Crear solicitud
        </a>
    </div>
    @endforelse
</div>

@if($tickets->hasPages())
<div class="mt-4">{{ $tickets->links() }}</div>
@endif

@endsection
