@extends('admin.layout')

@section('title', $coupon ? 'Modifier '.$coupon->code : 'Nouveau code promo')
@section('header', $coupon ? 'Modifier '.$coupon->code : 'Nouveau code promo')

@section('content')
<nav class="mb-6">
    <a href="{{ route('admin.ecommerce.coupons') }}" class="text-slate-500 hover:text-slate-900 text-sm">← Codes promo</a>
</nav>

<form method="POST" action="{{ $coupon ? route('admin.ecommerce.coupons.update', $coupon) : route('admin.ecommerce.coupons.store') }}" class="max-w-2xl space-y-6">
    @csrf
    @if($coupon) @method('PATCH') @endif

    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Informations générales</h3>
        <div class="grid md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Code *</label>
                <input type="text" name="code" value="{{ old('code', $coupon?->code) }}" required placeholder="PROMO20" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono uppercase" maxlength="50">
                <p class="text-xs text-slate-500 mt-1">Saisi en majuscules par le client</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Description (optionnel)</label>
                <input type="text" name="description" value="{{ old('description', $coupon?->description) }}" placeholder="Ex: Offre de lancement" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Réduction</h3>
        <div class="grid md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Type *</label>
                <select name="type" required class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    <option value="percent" {{ old('type', $coupon?->type ?? 'percent') === 'percent' ? 'selected' : '' }}>Pourcentage (%)</option>
                    <option value="fixed" {{ old('type', $coupon?->type) === 'fixed' ? 'selected' : '' }}>Montant fixe (€)</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Valeur *</label>
                <input type="number" name="value" step="0.01" min="0" value="{{ old('value', $coupon?->value ?? 10) }}" required class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="{{ old('type', $coupon?->type ?? 'percent') === 'percent' ? '10' : '5.00' }}">
                <p class="text-xs text-slate-500 mt-1">% ou € selon le type</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Minimum d'achat (€)</label>
                <input type="number" name="min_amount" step="0.01" min="0" value="{{ old('min_amount', $coupon?->min_amount) }}" placeholder="Ex: 50" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Produits éligibles</h3>
        <p class="text-sm text-slate-500 mb-4">Restreindre le code à certains produits ou catégories. Par défaut : tous les produits.</p>
        <div class="space-y-4">
            <div class="flex flex-wrap gap-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="scope_type" value="all" {{ old('scope_type', $coupon?->scope_type ?? 'all') === 'all' ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500" onchange="toggleScopeFields()">
                    <span>Tous les produits</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="scope_type" value="products" {{ old('scope_type', $coupon?->scope_type) === 'products' ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500" onchange="toggleScopeFields()">
                    <span>Produits spécifiques</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="scope_type" value="categories" {{ old('scope_type', $coupon?->scope_type) === 'categories' ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500" onchange="toggleScopeFields()">
                    <span>Catégories</span>
                </label>
            </div>
            <div id="scope-products-block" class="hidden">
                <label class="block text-sm font-medium text-slate-700 mb-2">Sélectionner les produits</label>
                <div class="max-h-48 overflow-y-auto border border-slate-200 rounded-xl p-3 space-y-2">
                    @foreach($products ?? [] as $p)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="scope_product_ids[]" value="{{ $p->id }}" {{ in_array($p->id, old('scope_product_ids', $coupon?->scope_ids ?? [])) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                        <span>{{ $p->name }} ({{ number_format($p->price, 2, ',', ' ') }} €)</span>
                    </label>
                    @endforeach
                </div>
            </div>
            <div id="scope-categories-block" class="hidden">
                <label class="block text-sm font-medium text-slate-700 mb-2">Sélectionner les catégories</label>
                <div class="max-h-48 overflow-y-auto border border-slate-200 rounded-xl p-3 space-y-2">
                    @foreach($categories ?? [] as $cat)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="scope_category_ids[]" value="{{ $cat->id }}" {{ in_array($cat->id, old('scope_category_ids', $coupon?->scope_ids ?? [])) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                        <span>{{ $cat->name }}</span>
                    </label>
                    @if($cat->children->isNotEmpty())
                        @foreach($cat->children as $sub)
                        <label class="flex items-center gap-2 cursor-pointer pl-6">
                            <input type="checkbox" name="scope_category_ids[]" value="{{ $sub->id }}" {{ in_array($sub->id, old('scope_category_ids', $coupon?->scope_ids ?? [])) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                            <span>↳ {{ $sub->name }}</span>
                        </label>
                        @endforeach
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Limites</h3>
        <div class="grid md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Utilisations max.</label>
                <input type="number" name="max_uses" min="1" value="{{ old('max_uses', $coupon?->max_uses) }}" placeholder="Illimité" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                <p class="text-xs text-slate-500 mt-1">Laisser vide = illimité</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Valide à partir du</label>
                <input type="date" name="valid_from" value="{{ old('valid_from', $coupon?->valid_from?->format('Y-m-d')) }}" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Valide jusqu'au</label>
                <input type="date" name="valid_until" value="{{ old('valid_until', $coupon?->valid_until?->format('Y-m-d')) }}" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Statut</h3>
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="hidden" name="is_active" value="0">
            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $coupon?->is_active ?? true) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
            <span class="text-sm font-medium text-slate-700">Code actif (utilisable au checkout)</span>
        </label>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">{{ $coupon ? 'Enregistrer' : 'Créer' }}</button>
        <a href="{{ route('admin.ecommerce.coupons') }}" class="px-6 py-2.5 border border-slate-200 rounded-xl font-medium hover:bg-slate-50 transition text-slate-700">Annuler</a>
        @if($coupon)
        <form method="POST" action="{{ route('admin.ecommerce.coupons.destroy', $coupon) }}" class="ml-auto" onsubmit="return confirm('Supprimer ce code promo ?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="px-6 py-2.5 border border-red-200 text-red-600 rounded-xl font-medium hover:bg-red-50 transition">Supprimer</button>
        </form>
        @endif
    </div>
</form>

<script>
function toggleScopeFields() {
    const type = document.querySelector('input[name="scope_type"]:checked')?.value;
    document.getElementById('scope-products-block').classList.toggle('hidden', type !== 'products');
    document.getElementById('scope-categories-block').classList.toggle('hidden', type !== 'categories');
}
document.addEventListener('DOMContentLoaded', toggleScopeFields);
</script>
@endsection
