@extends('layouts.admin')

@section('content')
<div class="p-6">
    <!-- Título -->
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Todas las Órdenes</h1>
            <p class="text-gray-600 mt-2">Gestión completa de diagnósticos y documentos</p>
        </div>
        <a href="{{ route('admin.orders.dashboard') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition">
            <i class="fas fa-arrow-left mr-2"></i>
            Volver al Dashboard
        </a>
    </div>

    <!-- Tabla de Órdenes -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        @if($ordenes->isEmpty())
            <div class="px-6 py-12 text-center">
                <i class="fas fa-inbox text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500 text-lg">No hay órdenes registradas aún</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">ID</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">Usuario</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">Correo</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">Teléfono</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">Trabajado por</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">Estado</th>
                            <th class="px-6 py-4 text-center text-xs font-medium text-gray-700 uppercase">Documentos</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase">Inicio</th>
                            <th class="px-6 py-4 text-center text-xs font-medium text-gray-700 uppercase">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($ordenes as $orden)
                            <tr class="border-b border-gray-200 hover:bg-gray-50 transition">
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 rounded-full text-blue-600 font-bold text-sm">
                                        {{ $orden->id }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mr-3">
                                            <span class="text-xs font-bold text-white">
                                                {{ strtoupper(substr($orden->user->name, 0, 1)) }}
                                            </span>
                                        </div>
                                        <span class="text-sm font-medium text-gray-900">{{ Str::limit($orden->user->name, 20) }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">
                                    {{ $orden->user->email }}
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">
                                    @if($orden->user->phone)
                                        {{ $orden->user->phone }}
                                    @else
                                        <span class="text-gray-400 italic">No proporcionado</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">
                                    @if(isset($orden->trabajador) && $orden->trabajador)
                                        <span class="font-semibold text-blue-700">{{ $orden->trabajador->name }}</span>
                                    @else
                                        <span class="text-gray-400 italic">Sin asignar</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    @if($orden->estado === 'pendiente')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold 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-xs font-semibold 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-xs font-semibold bg-green-100 text-green-800">
                                            <span class="w-2 h-2 bg-green-600 rounded-full mr-2"></span>
                                            Atendido
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">
                                            <span class="w-2 h-2 bg-red-600 rounded-full mr-2"></span>
                                            Cancelado
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center justify-center space-x-1">
                                        <div class="flex items-center" title="PEI - Proyecto Educativo Institucional">
                                            @if($orden->pei_generado)
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-green-100 rounded text-green-600 text-xs font-bold">
                                                    <i class="fas fa-check text-xs"></i>
                                                </span>
                                            @else
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-gray-100 rounded text-gray-400 text-xs">
                                                    ○
                                                </span>
                                            @endif
                                        </div>
                                        <div class="flex items-center" title="PAT - Plan Anual de Trabajo">
                                            @if($orden->pat_generado)
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-green-100 rounded text-green-600 text-xs font-bold">
                                                    <i class="fas fa-check text-xs"></i>
                                                </span>
                                            @else
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-gray-100 rounded text-gray-400 text-xs">
                                                    ○
                                                </span>
                                            @endif
                                        </div>
                                        <div class="flex items-center" title="PCI - Proyecto Curricular Institucional">
                                            @if($orden->pci_generado)
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-green-100 rounded text-green-600 text-xs font-bold">
                                                    <i class="fas fa-check text-xs"></i>
                                                </span>
                                            @else
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-gray-100 rounded text-gray-400 text-xs">
                                                    ○
                                                </span>
                                            @endif
                                        </div>
                                        <div class="flex items-center" title="RI - Reglamento Interno">
                                            @if($orden->ri_generado)
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-green-100 rounded text-green-600 text-xs font-bold">
                                                    <i class="fas fa-check text-xs"></i>
                                                </span>
                                            @else
                                                <span class="inline-flex items-center justify-center w-6 h-6 bg-gray-100 rounded text-gray-400 text-xs">
                                                    ○
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">
                                    {{ $orden->fecha_inicio ? $orden->fecha_inicio->format('d/m/Y') : $orden->created_at->format('d/m/Y') }}
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <a href="{{ route('admin.orders.show', $orden->id) }}" class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700 transition">
                                        <i class="fas fa-arrow-right mr-1"></i>
                                        Ver
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Paginación -->
            @if($ordenes->hasPages())
                <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                    <div class="text-sm text-gray-600">
                        Mostrando <span class="font-medium">{{ $ordenes->firstItem() }}</span> a 
                        <span class="font-medium">{{ $ordenes->lastItem() }}</span> de 
                        <span class="font-medium">{{ $ordenes->total() }}</span> órdenes
                    </div>
                    <div>
                        {{ $ordenes->links() }}
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>

<style>
    /* Estilos para la paginación */
    .pagination { @apply flex justify-center gap-1; }
    .pagination a, .pagination span { 
        @apply px-3 py-1 border border-gray-300 rounded text-sm text-gray-700;
    }
    .pagination a:hover { @apply bg-gray-100; }
    .pagination .active span { @apply bg-blue-600 text-white border-blue-600; }
</style>
@endsection