@extends('layouts.admin')
@section('title', ($license ? 'Editar' : 'Nueva') . ' Licencia — Admin')

@section('content')
    <div class="max-w-2xl">
        <div class="flex items-center gap-4 mb-8">
            <a href="{{ route('admin.licenses') }}" class="text-gray-500 hover:text-white transition">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-2xl font-bold">{{ $license ? 'Editar Licencia' : 'Nueva Licencia' }}</h1>
        </div>

        <form method="POST"
            action="{{ $license ? route('admin.license.update', $license->id) : route('admin.license.store') }}"
            class="space-y-6">
            @csrf
            @if($license) @method('PUT') @endif

            <!-- License Key -->
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
                <h2 class="font-semibold mb-4">🔑 Clave de Licencia</h2>

                @if($license)
                    <div class="bg-gray-800 rounded-lg p-4">
                        <code class="text-lg font-mono text-blue-400">{{ $license->license_key }}</code>
                    </div>
                @else
                    <div class="flex gap-2">
                        <input type="text" name="license_key" id="license_key"
                            value="{{ old('license_key', $generatedKey ?? '') }}"
                            class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 font-mono text-lg focus:outline-none focus:border-blue-500"
                            required readonly>
                        <button type="button" onclick="copyKey()"
                            class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition" title="Copiar">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">Clave generada automáticamente. Compártela con el cliente.</p>
                @endif
            </div>

            <!-- Client Info -->
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
                <h2 class="font-semibold mb-4">👤 Información del Cliente</h2>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Nombre del cliente *</label>
                        <input type="text" name="client_name" value="{{ old('client_name', $license->client_name ?? '') }}"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500"
                            required>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Email</label>
                        <input type="email" name="client_email"
                            value="{{ old('client_email', $license->client_email ?? '') }}"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Dominio autorizado *</label>
                        <input type="text" name="domain" value="{{ old('domain', $license->domain ?? '') }}"
                            placeholder="ejemplo.com.do"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500"
                            required>
                        <p class="text-xs text-gray-500 mt-1">Sin http/https. Ej: coopnectados.com.do</p>
                    </div>
                </div>
            </div>

            <!-- Plan & Status -->
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
                <h2 class="font-semibold mb-4">⚙️ Configuración</h2>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Plan *</label>
                        <select name="plan_id"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500">
                            @foreach($plans as $p)
                            <option value="{{ $p->id }}" {{ old('plan_id', $license->plan_id ?? '') == $p->id ? 'selected' : '' }}>
                                {{ $p->name }} — ${{ number_format($p->price, 2) }}/{{ $p->duration_days }}d · {{ $p->max_domains === 0 ? '∞' : $p->max_domains }} dominio(s)
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Estado *</label>
                        <select name="status"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500">
                            <option value="active" {{ old('status', $license->status ?? 'active') === 'active' ? 'selected' : '' }}>Activa</option>
                            <option value="suspended" {{ old('status', $license->status ?? '') === 'suspended' ? 'selected' : '' }}>Suspendida</option>
                            @if($license)
                                <option value="expired" {{ old('status', $license->status ?? '') === 'expired' ? 'selected' : '' }}>Expirada</option>
                                <option value="revoked" {{ old('status', $license->status ?? '') === 'revoked' ? 'selected' : '' }}>Revocada</option>
                            @endif
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Fecha de expiración</label>
                        <input type="date" name="expires_at"
                            value="{{ old('expires_at', $license && $license->expires_at ? $license->expires_at->format('Y-m-d') : '') }}"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Vacío = sin expiración</p>
                    </div>
                </div>
            </div>

            <!-- Notes -->
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
                <h2 class="font-semibold mb-4">📝 Notas</h2>
                <textarea name="notes" rows="3"
                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500"
                    placeholder="Notas internas sobre esta licencia...">{{ old('notes', $license->notes ?? '') }}</textarea>
            </div>

            @if($errors->any())
                <div class="bg-red-500/20 border border-red-500/30 rounded-lg p-4 text-red-400 text-sm">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="flex gap-3">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
                    <i class="fas fa-save mr-1"></i> {{ $license ? 'Actualizar' : 'Crear Licencia' }}
                </button>
                <a href="{{ route('admin.licenses') }}"
                    class="px-6 py-2.5 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition">
                    Cancelar
                </a>
            </div>
        </form>
    </div>

    <script>
        function copyKey() {
            var input = document.getElementById('license_key');
            navigator.clipboard.writeText(input.value).then(function () {
                // Brief visual feedback
                input.classList.add('border-green-500');
                setTimeout(function () { input.classList.remove('border-green-500'); }, 1000);
            });
        }
    </script>
@endsection