@extends('dashboard.layouts.app')

@section('title', 'Historial de Solicitudes')

@section('content')
<div class="p-4 mx-auto max-w-7xl md:p-6">
    <!-- Breadcrumb Start -->
    <div x-data="{ pageName: `Historial de Solicitudes`}">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.index') }}">
                            Dashboard
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.suscripcion.index') }}">
                            Suscripción
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Mensajes Flash -->
    @if(session('success'))
        <div class="mb-6 overflow-hidden rounded-2xl border border-success-200 bg-success-50 p-4 dark:border-success-800 dark:bg-success-900/20">
            <div class="flex items-center">
                <i data-lucide="check-circle" class="mr-3 h-5 w-5 text-success-600 dark:text-success-400"></i>
                <p class="text-success-700 dark:text-success-300">{{ session('success') }}</p>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 overflow-hidden rounded-2xl border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/20">
            <div class="flex items-center">
                <i data-lucide="alert-circle" class="mr-3 h-5 w-5 text-error-600 dark:text-error-400"></i>
                <p class="text-error-700 dark:text-error-300">{{ session('error') }}</p>
            </div>
        </div>
    @endif

    @if(session('warning'))
        <div class="mb-6 overflow-hidden rounded-2xl border border-warning-200 bg-warning-50 p-4 dark:border-warning-800 dark:bg-warning-900/20">
            <div class="flex items-center">
                <i data-lucide="alert-triangle" class="mr-3 h-5 w-5 text-warning-600 dark:text-warning-400"></i>
                <p class="text-warning-700 dark:text-warning-300">{{ session('warning') }}</p>
            </div>
        </div>
    @endif

    <!-- Lista de Solicitudes -->
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                Mis Solicitudes de Cambio de Plan
            </h3>
        </div>

        @if($solicitudes->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Fecha
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Plan Actual
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Plan Solicitado
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Monto
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Estado
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Acciones
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-white/[0.03] divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($solicitudes as $solicitud)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white/90">
                                    {{ $solicitud->fecha_solicitud->format('d/m/Y H:i') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white/90">
                                    @if($solicitud->planActual)
                                        <div>
                                            <div class="font-medium">{{ $solicitud->planActual->nombre }}</div>
                                            <div class="text-gray-500 dark:text-gray-400">S/ {{ number_format($solicitud->precio_plan_actual, 2) }}</div>
                                        </div>
                                    @else
                                        <span class="text-gray-500 dark:text-gray-400">Sin plan</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white/90">
                                    <div>
                                        <div class="font-medium">{{ $solicitud->planSolicitado->nombre }}</div>
                                        <div class="text-gray-500 dark:text-gray-400">S/ {{ number_format($solicitud->precio_plan_nuevo, 2) }}</div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white/90">
                                    @if($solicitud->es_gratuito)
                                        <span class="text-green-600 dark:text-green-400 font-medium">GRATIS</span>
                                    @else
                                        <span class="font-medium">
                                            @if($solicitud->es_upgrade)
                                                +S/ {{ number_format($solicitud->diferencia_precio, 2) }}
                                            @elseif($solicitud->es_downgrade)
                                                -S/ {{ number_format(abs($solicitud->diferencia_precio), 2) }}
                                            @else
                                                S/ 0.00
                                            @endif
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        @if($solicitud->estado === 'pendiente') bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400
                                        @elseif($solicitud->estado === 'aprobada') bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400
                                        @elseif($solicitud->estado === 'rechazada') bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400
                                        @else bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200 @endif">
                                        {{ $solicitud->estado_formateado }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white/90">
                                    @if($solicitud->estado === 'pendiente')
                                        <a href="https://wa.me/51999999999?text=Hola, necesito enviar el comprobante de pago para la solicitud #{{ $solicitud->id }}. Mi usuario es: {{ auth()->user()->email }}" 
                                           target="_blank"
                                           class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                            <i data-lucide="message-circle" class="h-4 w-4"></i>
                                            Enviar Comprobante
                                        </a>
                                    @elseif($solicitud->estado === 'rechazada' && $solicitud->motivo_rechazo)
                                        <button onclick="mostrarMotivoRechazo('{{ $solicitud->motivo_rechazo }}')" 
                                                class="inline-flex items-center gap-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
                                            <i data-lucide="alert-circle" class="h-4 w-4"></i>
                                            Ver Motivo
                                        </button>
                                    @else
                                        <span class="text-gray-500 dark:text-gray-400">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-12">
                <i data-lucide="file-text" class="mx-auto h-16 w-16 text-gray-400 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white/90 mb-2">No tienes solicitudes de cambio de plan</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-6">Cuando solicites un cambio de plan, aparecerá aquí el historial</p>
                <a href="{{ route('dashboard.suscripcion.planes') }}" 
                   class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10">
                    <i data-lucide="plus" class="h-5 w-5"></i>
                    Ver Planes Disponibles
                </a>
            </div>
        @endif
    </div>

    <!-- Información Adicional -->
    <div class="mt-8 overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">
            Estados de las Solicitudes
        </h3>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
                <h4 class="font-medium text-gray-800 dark:text-white/90 mb-2">Significado de Estados</h4>
                <ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pendiente</span> - Esperando confirmación de pago</li>
                    <li><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Aprobada</span> - Cambio de plan aplicado</li>
                    <li><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Rechazada</span> - Solicitud rechazada por algún motivo</li>
                    <li><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Cancelada</span> - Solicitud cancelada</li>
                </ul>
            </div>
            <div>
                <h4 class="font-medium text-gray-800 dark:text-white/90 mb-2">Tiempos de Procesamiento</h4>
                <ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li>• Solicitudes pendientes: 24-48 horas</li>
                    <li>• Validación de pago: 2-4 horas</li>
                    <li>• Aplicación del cambio: Inmediata</li>
                    <li>• Notificación por email: Automática</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Modal para mostrar motivo de rechazo -->
<div id="modalMotivoRechazo" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md mx-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-4">Motivo del Rechazo</h3>
        <p id="motivoRechazo" class="text-gray-600 dark:text-gray-400 mb-6"></p>
        <button onclick="cerrarModal()" 
                class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-gray-600 px-4 py-2 font-medium text-white hover:bg-gray-700">
            Cerrar
        </button>
    </div>
</div>

<script>
function mostrarMotivoRechazo(motivo) {
    document.getElementById('motivoRechazo').textContent = motivo;
    document.getElementById('modalMotivoRechazo').classList.remove('hidden');
}

function cerrarModal() {
    document.getElementById('modalMotivoRechazo').classList.add('hidden');
}

// Cerrar modal al hacer clic fuera
document.getElementById('modalMotivoRechazo').addEventListener('click', function(e) {
    if (e.target === this) {
        cerrarModal();
    }
});
</script>
@endsection