@extends('layouts.portal')
@section('title', 'Cambiar Dominio — Olorun Secure')

@section('content')
<div class="max-w-lg mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('portal.dashboard') }}" class="text-gray-500 hover:text-white transition">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h2 class="text-xl font-bold">Cambiar Dominio</h2>
    </div>

    <!-- Current Info -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 mb-6">
        <div class="space-y-2 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-500">Dominio actual</span>
                <span class="font-medium">{{ $license->domain }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Cambios usados</span>
                <span class="font-medium">{{ $license->domain_changes_count }} / {{ $maxChanges }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Cambios restantes</span>
                <span class="font-medium {{ $remainingChanges === 0 ? 'text-red-400' : 'text-green-400' }}">
                    {{ $remainingChanges }}
                </span>
            </div>
        </div>
    </div>

    @if($remainingChanges > 0 && $license->status === 'active')
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
        <form method="POST" action="{{ route('portal.domain.request') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm text-gray-400 mb-1">Nuevo dominio</label>
                <input type="text" name="new_domain" value="{{ old('new_domain') }}"
                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-indigo-500 transition"
                    placeholder="nuevo-sitio.com" required>
                <p class="text-xs text-gray-500 mt-1">Sin http/https ni www. Ej: mi-sitio.com</p>
            </div>

            <div class="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3 text-sm text-yellow-400">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                Se enviará un email de confirmación a <strong>{{ $license->client_email }}</strong>.
                El dominio anterior dejará de funcionar.
            </div>

            <button type="submit"
                class="w-full bg-indigo-600 hover:bg-indigo-700 rounded-lg py-3 font-medium transition">
                <i class="fas fa-exchange-alt mr-1"></i> Solicitar Cambio
            </button>
        </form>
    </div>
    @else
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-8 text-center">
        @if($license->status !== 'active')
        <i class="fas fa-lock text-3xl text-gray-600 mb-3"></i>
        <p class="text-gray-400">Tu licencia no está activa. Renuévala para poder cambiar el dominio.</p>
        @else
        <i class="fas fa-ban text-3xl text-red-500/50 mb-3"></i>
        <p class="text-gray-400">Has agotado los cambios de dominio para tu plan actual.</p>
        <p class="text-sm text-gray-600 mt-2">Contacta a soporte si necesitas un cambio adicional.</p>
        @endif
    </div>
    @endif
</div>
@endsection