@extends('layouts.admin')

@section('title', 'Reportes de ' . $user->name)

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-6 mb-8">
    <!-- Información del Usuario -->
    <div class="lg:col-span-3 bg-white rounded-xl sm:rounded-2xl shadow-lg p-4 sm:p-8 border-l-4 border-blue-600">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6">
            <div class="flex items-center gap-3 sm:gap-6">
                <div class="w-16 h-16 sm:w-24 sm:h-24 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white text-2xl sm:text-4xl font-bold shadow-lg flex-shrink-0">
                    {{ substr($user->name, 0, 1) }}
                </div>
                <div class="min-w-0">
                    <h2 class="text-xl sm:text-3xl font-bold text-gray-900 truncate">{{ $user->name }}</h2>
                    <p class="text-gray-500 text-xs sm:text-sm mt-1 flex items-center gap-2 overflow-hidden">
                        <i class="fas fa-envelope text-blue-600 flex-shrink-0"></i> <span class="truncate">{{ $user->email }}</span>
                    </p>
                    @if($user->phone)
                    <p class="text-gray-500 text-xs sm:text-sm mt-1 flex items-center gap-2">
                        <i class="fas fa-phone text-green-600 flex-shrink-0"></i> {{ $user->phone }}
                    </p>
                    @endif
                    <p class="text-gray-500 text-xs sm:text-sm mt-1 flex items-center gap-1 sm:gap-2">
                        <i class="fas fa-calendar-alt text-orange-600 flex-shrink-0"></i> <span class="hidden sm:inline">Registrado:</span>
                        <strong class="truncate">{{ $user->created_at->locale('es')->isoFormat('D MMM, YYYY') }}</strong>
                    </p>
                </div>
            </div>
            <a href="{{ route('admin.users.index') }}" class="px-3 sm:px-6 py-2 sm:py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg text-sm sm:text-base font-semibold transition flex items-center gap-2 w-fit">
                <i class="fas fa-arrow-left"></i> <span class="hidden sm:inline">Volver</span>
            </a>
        </div>
    </div>
</div>

<!-- Estado de la Orden de Servicio (si existe) -->
@if(\App\Models\ServicioDiagnostico::where('user_id', $user->id)->exists())
    @php
        $orden = \App\Models\ServicioDiagnostico::where('user_id', $user->id)->first();
    @endphp
    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg p-4 sm:p-6 mb-8 border-l-4 border-blue-600">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 mb-4">
            <h3 class="text-lg sm:text-2xl font-bold text-gray-900">Orden de Servicio</h3>
            <a href="{{ route('admin.orders.show', $orden->id) }}" class="inline-flex items-center px-3 sm:px-4 py-2 sm:py-2 bg-blue-600 text-white rounded-lg text-sm sm:text-base font-semibold hover:bg-blue-700 transition whitespace-nowrap w-fit">
                <i class="fas fa-external-link-alt mr-2"></i>
                Ver
            </a>
        </div>
        
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
            <div class="bg-gray-50 rounded-lg p-2 sm:p-4">
                <p class="text-xs text-gray-600 uppercase font-bold mb-1 sm:mb-2">Orden ID</p>
                <p class="text-lg sm:text-2xl font-bold text-gray-900">#{{ $orden->id }}</p>
            </div>
            
            <div class="bg-gray-50 rounded-lg p-2 sm:p-4">
                <p class="text-xs text-gray-600 uppercase font-bold mb-1 sm:mb-2">Estado</p>
                @if($orden->estado === 'pendiente')
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-yellow-100 text-yellow-800">
                        <span class="w-2 h-2 bg-yellow-600 rounded-full mr-2"></span>
                        Pendiente
                    </span>
                @elseif($orden->estado === 'en_proceso')
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-purple-100 text-purple-800">
                        <span class="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
                        En Proceso
                    </span>
                @elseif($orden->estado === 'atendido')
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-green-100 text-green-800">
                        <i class="fas fa-check mr-1"></i>
                        Atendido
                    </span>
                @else
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-800">
                        <span class="w-2 h-2 bg-red-600 rounded-full mr-2"></span>
                        Cancelado
                    </span>
                @endif
            </div>
            
            <div class="bg-gray-50 rounded-lg p-2 sm:p-4">
                <p class="text-xs text-gray-600 uppercase font-bold mb-1 sm:mb-2">Documentos</p>
                <div class="flex flex-wrap gap-0.5 sm:gap-1 text-xs">
                    <span class="font-bold {{ $orden->pei_generado ? 'text-green-600' : 'text-gray-400' }}">P</span>
                    <span class="text-gray-400">/</span>
                    <span class="font-bold {{ $orden->pat_generado ? 'text-green-600' : 'text-gray-400' }}">A</span>
                    <span class="text-gray-400">/</span>
                    <span class="font-bold {{ $orden->pci_generado ? 'text-green-600' : 'text-gray-400' }}">C</span>
                    <span class="text-gray-400">/</span>
                    <span class="font-bold {{ $orden->ri_generado ? 'text-green-600' : 'text-gray-400' }}">R</span>
                    <span class="text-gray-400">/</span>
                    <span class="font-bold {{ $orden->otros_docs_generado ? 'text-green-600' : 'text-gray-400' }}">O</span>
                </div>
            </div>
            
            <div class="bg-gray-50 rounded-lg p-2 sm:p-4">
                <p class="text-xs text-gray-600 uppercase font-bold mb-1 sm:mb-2">Fecha Creación</p>
                <p class="text-xs sm:text-sm font-semibold text-gray-900">{{ $orden->created_at->format('d/m/y') }}</p>
                <p class="text-xs text-gray-500 mt-1">{{ $orden->created_at->diffForHumans() }}</p>
            </div>
        </div>
    </div>
@endif
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-2 sm:gap-4 mb-8">
    @php
        $colores = ['blue', 'purple', 'yellow', 'green', 'red'];
        $titulos = [
            'compromiso1' => 'Proceso de Gestión 1',
            'compromiso2' => 'Proceso de Gestión 2',
            'compromiso3' => 'Proceso de Gestión 3',
            'compromiso4' => 'Proceso de Gestión 4',
            'compromiso5' => 'Proceso de Gestión 5',
        ];
        $estados = [
            'no_iniciado' => ['label' => 'No Iniciado', 'color' => 'bg-gray-100 text-gray-700'],
            'pendiente' => ['label' => 'Pendiente', 'color' => 'bg-yellow-100 text-yellow-700'],
            'completado' => ['label' => 'Completado', 'color' => 'bg-green-100 text-green-700'],
        ];
        $i = 0;
    @endphp
    @foreach($titulos as $tipo => $titulo)
        <div class="bg-white rounded-lg shadow-md p-3 sm:p-5 border-l-4 border-{{ $colores[$i] }}-600 hover:shadow-lg transition">
            <div class="flex items-start justify-between gap-2 mb-2 sm:mb-3">
                <h3 class="text-sm sm:text-base font-bold text-gray-800">{{ $titulo }}</h3>
                <span class="px-2 py-0.5 sm:py-1 {{ $estados[$procesos[$tipo]]['color'] }} rounded text-xs font-bold whitespace-nowrap">
                    {{ $estados[$procesos[$tipo]]['label'] }}
                </span>
            </div>
            <div class="text-xs sm:text-sm text-gray-600">
                <p class="text-gray-500 italic">
                    @if($procesos[$tipo] == 'no_iniciado')
                        Pendiente
                    @elseif($procesos[$tipo] == 'pendiente')
                        En proceso
                    @else
                        ✓ Completado
                    @endif
                </p>
            </div>
        </div>
        @php $i++; @endphp
    @endforeach
</div>

<!-- Reportes Generados -->
@if($pagos->isNotEmpty())
<div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
    <div class="px-8 py-6 bg-indigo-900 border-b border-indigo-800">
        <h3 class="text-xl font-bold text-white tracking-wide">Reportes Generados</h3>
        <p class="text-indigo-100 text-sm mt-1 opacity-80">Total de {{ $pagos->count() }} reportes completados</p>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr class="text-gray-400 uppercase text-xs font-black tracking-widest">
                    <th class="py-5 px-6">Fecha Generación</th>
                    <th class="py-5 px-6">Estado</th>
                    <th class="py-5 px-6">Tipo</th>
                    <th class="py-5 px-6 text-center">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($pagos as $pago)
                <tr class="hover:bg-indigo-50/40 transition duration-150 group">
                    <td class="py-6 px-6 text-sm">
                        <p class="font-bold text-gray-900">{{ $pago->created_at->locale('es')->isoFormat('D MMMM, YYYY') }}</p>
                        <p class="text-xs text-gray-500 mt-1">{{ $pago->created_at->format('H:i:s') }}</p>
                    </td>
                    <td class="py-6 px-6">
                        @if($pago->estado == 'completado')
                            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase">✓ Completado</span>
                        @elseif($pago->estado == 'pendiente')
                            <span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-bold uppercase">⏳ Pendiente</span>
                        @else
                            <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold uppercase">✕ {{ ucfirst($pago->estado) }}</span>
                        @endif
                    </td>
                    <td class="py-6 px-6">
                        <p class="text-sm text-gray-600">{{ ucfirst($pago->tipo ?? 'General') }}</p>
                    </td>
                    <td class="py-6 px-6 text-center">
                        <div class="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <a title="Ver PDF" href="#" class="w-10 h-10 bg-red-100 text-red-600 rounded-xl flex items-center justify-center hover:bg-red-600 hover:text-white transition-all transform hover:scale-110 shadow-sm border border-red-200">
                                <i class="fas fa-file-pdf"></i>
                            </a>
                            <a title="Descargar" href="#" class="w-10 h-10 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center hover:bg-blue-600 hover:text-white transition-all transform hover:scale-110 shadow-sm border border-blue-200">
                                <i class="fas fa-download"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@else
<div class="bg-white rounded-2xl shadow-lg p-12 text-center border border-gray-100">
    <i class="fas fa-inbox text-6xl text-gray-300 mb-4 block"></i>
    <p class="text-xl font-bold text-gray-600 mb-2">No hay reportes completados</p>
    <p class="text-gray-500">Este usuario aún no ha generado ningún reporte.</p>
</div>
@endif
@endsection