@extends('layouts.admin')
@section('title', ($plan ? 'Editar' : 'Nuevo') . ' Plan — Admin')

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

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

        <!-- Basic Info -->
        <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
            <h2 class="font-semibold mb-4">📦 Información del Plan</h2>
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Nombre *</label>
                        <input type="text" name="name" value="{{ old('name', $plan->name ?? '') }}"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500"
                            placeholder="Ej: Pro" required>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Slug *</label>
                        <input type="text" name="slug" value="{{ old('slug', $plan->slug ?? '') }}"
                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 font-mono focus:outline-none focus:border-blue-500"
                            placeholder="Ej: pro" required {{ $plan ? 'readonly' : '' }}>
                        <p class="text-xs text-gray-500 mt-1">Identificador único (sin espacios)</p>
                    </div>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Descripción</label>
                    <textarea name="description" rows="2"
                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500"
                        placeholder="Descripción del plan...">{{ old('description', $plan->description ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Pricing -->
        <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
            <h2 class="font-semibold mb-4">💰 Precio y Duración</h2>
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Precio *</label>
                    <input type="number" name="price" step="0.01" min="0"
                        value="{{ old('price', $plan->price ?? '29.00') }}"
                        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">Moneda *</label>
                    <select name="currency"
                        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="USD" {{ old('currency', $plan->currency ?? 'USD') === 'USD' ? 'selected' : '' }}>USD</option>
                        <option value="EUR" {{ old('currency', $plan->currency ?? '') === 'EUR' ? 'selected' : '' }}>EUR</option>
                        <option value="DOP" {{ old('currency', $plan->currency ?? '') === 'DOP' ? 'selected' : '' }}>DOP</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Duración (días) *</label>
                    <input type="number" name="duration_days" min="1"
                        value="{{ old('duration_days', $plan->duration_days ?? 365) }}"
                        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>
        </div>

        <!-- Limits -->
        <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
            <h2 class="font-semibold mb-4">🔢 Límites</h2>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Máx dominios activos *</label>
                    <input type="number" name="max_domains" min="0"
                        value="{{ old('max_domains', $plan->max_domains ?? 1) }}"
                        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">0 = ilimitados</p>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Máx cambios de dominio *</label>
                    <input type="number" name="max_domain_changes" min="0"
                        value="{{ old('max_domain_changes', $plan->max_domain_changes ?? 2) }}"
                        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">Por período de vigencia</p>
                </div>
            </div>
        </div>

        <!-- Features -->
        <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
            <h2 class="font-semibold mb-4">✅ Features Incluidas</h2>
            <p class="text-xs text-gray-500 mb-4">
                Selecciona las funcionalidades premium que incluye este plan.
                Las funciones gratuitas (Login Monitor, Comment Guard, Headers, GZIP, Minify) siempre están activas.
            </p>
            <div class="space-y-3">
                @foreach($availableFeatures as $key => $label)
                <label class="flex items-center gap-3 cursor-pointer group">
                    <input type="checkbox" name="features[]" value="{{ $key }}"
                        class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
                        {{ (is_array(old('features', $plan ? $plan->features : [])) && in_array($key, old('features', $plan ? $plan->features : []))) ? 'checked' : '' }}>
                    <span class="text-sm text-gray-300 group-hover:text-white transition">{{ $label }}</span>
                </label>
                @endforeach
            </div>
        </div>

        <!-- Display -->
        <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">Orden de visualización *</label>
                    <input type="number" name="sort_order" min="0"
                        value="{{ old('sort_order', $plan->sort_order ?? 0) }}"
                        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 class="flex items-end">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1"
                            class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
                            {{ old('is_active', $plan ? $plan->is_active : true) ? 'checked' : '' }}>
                        <span class="text-sm text-gray-300">Plan activo (visible para nuevas licencias)</span>
                    </label>
                </div>
            </div>
        </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> {{ $plan ? 'Actualizar Plan' : 'Crear Plan' }}
            </button>
            <a href="{{ route('admin.plans') }}"
               class="px-6 py-2.5 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection