@extends('dashboard.layouts.app')

@section('title', 'Solicitar Cambio de Plan')

@section('content')
<div class="p-4 mx-auto max-w-4xl md:p-6">
    <!-- Breadcrumb Start -->
    <div x-data="{ pageName: `Solicitar Cambio de Plan`}">
        <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 -->

    <!-- Resumen del Cambio -->
    <div class="mb-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-6 text-lg font-semibold text-gray-800 dark:text-white/90">
            Resumen del Cambio de Plan
        </h3>
        
        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
            <!-- Plan Actual -->
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
                <h4 class="mb-3 font-medium text-gray-800 dark:text-white/90">Plan Actual</h4>
                <div class="space-y-2">
                    <p class="text-xl font-bold text-gray-800 dark:text-white/90">{{ $informacionCambio['plan_actual'] }}</p>
                    <p class="text-lg font-semibold text-gray-600 dark:text-gray-400">
                        S/ {{ number_format($informacionCambio['precio_actual'], 2) }} / año
                    </p>
                </div>
            </div>

            <!-- Plan Solicitado -->
            <div class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
                <h4 class="mb-3 font-medium text-blue-800 dark:text-blue-200">Plan Solicitado</h4>
                <div class="space-y-2">
                    <p class="text-xl font-bold text-blue-800 dark:text-blue-200">{{ $informacionCambio['plan_nuevo'] }}</p>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                        S/ {{ number_format($informacionCambio['precio_nuevo'], 2) }} / año
                    </p>
                </div>
            </div>
        </div>

        <!-- Diferencia de Precio -->
        <div class="mt-6 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
            <h4 class="mb-3 font-medium text-gray-800 dark:text-white/90">Diferencia de Precio</h4>
            <div class="flex items-center justify-between">
                <span class="text-gray-600 dark:text-gray-400">Diferencia anual:</span>
                <span class="text-lg font-bold 
                    @if($informacionCambio['diferencia'] > 0) text-red-600 dark:text-red-400
                    @elseif($informacionCambio['diferencia'] < 0) text-green-600 dark:text-green-400
                    @else text-gray-600 dark:text-gray-400 @endif">
                    @if($informacionCambio['diferencia'] > 0)
                        +S/ {{ number_format($informacionCambio['diferencia'], 2) }}
                    @elseif($informacionCambio['diferencia'] < 0)
                        -S/ {{ number_format(abs($informacionCambio['diferencia']), 2) }}
                    @else
                        S/ 0.00
                    @endif
                </span>
            </div>
            
            @if(isset($informacionCambio['prorrateo']) && $informacionCambio['prorrateo'] > 0)
                <div class="mt-3 flex items-center justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Prorrateo aplicable:</span>
                    <span class="text-lg font-bold text-blue-600 dark:text-blue-400">
                        S/ {{ number_format($informacionCambio['prorrateo'], 2) }}
                    </span>
                </div>
            @endif
        </div>
    </div>

    <!-- Información de Pago -->
    <div class="mb-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-6 text-lg font-semibold text-gray-800 dark:text-white/90">
            Información de Pago
        </h3>
        
        <div class="space-y-4">
            <!-- Número de Cuenta -->
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
                <h4 class="mb-2 font-medium text-gray-800 dark:text-white/90">Número de Cuenta</h4>
                <div class="flex items-center justify-between">
                    <span class="text-lg font-mono text-gray-800 dark:text-white/90" id="numero-cuenta">{{ $datosPago['numero_cuenta'] }}</span>
                    <button onclick="copiarNumeroCuenta()" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700">
                        <i data-lucide="copy" class="h-4 w-4"></i>
                        Copiar
                    </button>
                </div>
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    Banco: {{ $datosPago['banco'] }}<br>
                    Titular: {{ $datosPago['titular'] }}<br>
                    Tipo: {{ $datosPago['tipo_cuenta'] }}
                </p>
            </div>

            <!-- Monto a Pagar -->
            <div class="rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20">
                <h4 class="mb-2 font-medium text-green-800 dark:text-green-200">Monto a Pagar</h4>
                <div class="flex items-center justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Total a pagar:</span>
                    <span class="text-2xl font-bold text-green-800 dark:text-green-200">
                        @if($informacionCambio['es_gratuito'])
                            GRATIS
                        @elseif(isset($informacionCambio['prorrateo']) && $informacionCambio['prorrateo'] > 0)
                            S/ {{ number_format($informacionCambio['prorrateo'], 2) }}
                        @else
                            S/ {{ number_format($informacionCambio['precio_nuevo'], 2) }}
                        @endif
                    </span>
                </div>
                @if(isset($informacionCambio['prorrateo']) && $informacionCambio['prorrateo'] > 0)
                    <p class="mt-2 text-sm text-green-700 dark:text-green-300">
                        * Monto calculado con prorrateo por días restantes del período actual
                    </p>
                @endif
            </div>

            <!-- Instrucciones -->
            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-900/20">
                <h4 class="mb-2 font-medium text-yellow-800 dark:text-yellow-200">Instrucciones de Pago</h4>
                <ol class="list-decimal list-inside space-y-1 text-sm text-yellow-700 dark:text-yellow-300">
                    <li>Realiza la transferencia al número de cuenta indicado</li>
                    <li>Toma una captura de pantalla del comprobante de pago</li>
                    <li>Haz clic en el botón "Enviar Comprobante por WhatsApp"</li>
                    <li>Adjunta la imagen del comprobante en el chat</li>
                    <li>Espera la confirmación de nuestro equipo</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Botones de Acción -->
    <div class="mb-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-6 text-lg font-semibold text-gray-800 dark:text-white/90">
            Confirmar Solicitud
        </h3>
        
        <form action="{{ route('dashboard.suscripcion.confirmar-solicitud') }}" method="POST" class="space-y-4">
            @csrf
            <input type="hidden" name="plan_id" value="{{ $planNuevo->public_id }}">
            
            <!-- Términos y Condiciones -->
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            Acepto los términos y condiciones
                        </label>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            He leído y comprendido las instrucciones de pago. Entiendo que el cambio de plan se realizará 
                            una vez confirmado el pago por nuestro equipo de soporte.
                        </p>
                    </div>
                    <div x-data="{ switcherToggle: false }" class="ml-4">
                        <label class="flex cursor-pointer items-center">
                            <div class="relative">
                                <input
                                    type="checkbox"
                                    name="aceptar_terminos"
                                    value="1"
                                    required
                                    class="sr-only"
                                    @change="switcherToggle = !switcherToggle"
                                />
                                <div
                                    class="block h-6 w-11 rounded-full"
                                    :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                                ></div>
                                <div
                                    :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                                    class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                                ></div>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    <span :class="switcherToggle ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
                        <i data-lucide="alert-circle" class="inline h-3 w-3 mr-1"></i>
                        <span x-text="switcherToggle ? 'Términos aceptados' : 'Debe aceptar los términos para continuar'"></span>
                    </span>
                </div>
            </div>

            <!-- Botones -->
            <div class="flex flex-col gap-3 sm:flex-row">
                <button type="submit" 
                        class="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10">
                    <i data-lucide="check-circle" class="h-5 w-5"></i>
                    Confirmar Solicitud
                </button>
                
                <a href="https://wa.me/{{ $datosPago['numero_whatsapp'] }}?text={{ urlencode($datosPago['mensaje_whatsapp'] . ' a ' . $planNuevo->nombre . '. Mi usuario es: ' . auth()->user()->email) }}" 
                   target="_blank"
                   class="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-3 font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-3 focus:ring-green-500/10">
                    <i data-lucide="message-circle" class="h-5 w-5"></i>
                    Enviar Comprobante por WhatsApp
                </a>
            </div>
        </form>
    </div>

    <!-- Información Adicional -->
    <div class="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">
            Información Importante
        </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">Proceso de Cambio</h4>
                <ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li>• La solicitud se procesa en 24-48 horas</li>
                    <li>• Se valida el comprobante de pago</li>
                    <li>• El cambio se aplica inmediatamente</li>
                    <li>• Se notifica por email la confirmación</li>
                </ul>
            </div>
            <div>
                <h4 class="font-medium text-gray-800 dark:text-white/90 mb-2">Soporte</h4>
                <ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li>• WhatsApp: {{ config('app.whatsapp') }}</li>
                    <li>• Email: {{ config('app.email') }}</li>
                    <li>• Horario: L-V 9:00 - 18:00</li>
                    <li>• Respuesta en máximo 2 horas</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
function copiarNumeroCuenta() {
    const numeroCuenta = document.getElementById('numero-cuenta').textContent;
    navigator.clipboard.writeText(numeroCuenta).then(function() {
        // Mostrar notificación de éxito
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i data-lucide="check" class="h-4 w-4"></i> Copiado';
        button.classList.remove('bg-blue-600', 'hover:bg-blue-700');
        button.classList.add('bg-green-600', 'hover:bg-green-700');
        
        setTimeout(function() {
            button.innerHTML = originalText;
            button.classList.remove('bg-green-600', 'hover:bg-green-700');
            button.classList.add('bg-blue-600', 'hover:bg-blue-700');
        }, 2000);
    });
}
</script>
@endsection