@extends('layouts.app')
@section('title', $coupon->exists ? __('Edit coupon') : __('New coupon'))

@section('content')
<form method="POST"
      action="{{ $coupon->exists ? route('super-admin.coupons.update', $coupon) : route('super-admin.coupons.store') }}"
      class="space-y-5"
      x-data="{ type: '{{ old('type', $coupon->type ?? 'percent') }}' }">
    @csrf
    @if($coupon->exists) @method('PATCH') @endif

    {{-- Header --}}
    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="min-w-0">
            <div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-[10px] uppercase tracking-wider font-semibold ring-1 ring-slate-200 dark:ring-slate-700 mb-2">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                {{ __('Pay-per-analysis coupon') }}
            </div>
            <h1 class="text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white">
                {{ $coupon->exists ? __('Edit coupon') : __('New coupon') }}
            </h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                {{ __('Applies a discount to a tenant\'s monthly invoice.') }}
            </p>
        </div>
        <a href="{{ route('super-admin.coupons.index') }}"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-medium">
            ← {{ __('Back') }}
        </a>
    </div>

    @if($errors->any())
        <div class="px-4 py-3 rounded-xl border border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-900/20 text-rose-800 dark:text-rose-200 text-sm">
            <ul class="list-disc ms-5 space-y-0.5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    {{-- Identity + discount --}}
    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white mb-5 pb-3 border-b border-slate-200 dark:border-slate-800">
            {{ __('Discount') }}
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Code') }}</label>
                <input name="code" required value="{{ old('code', $coupon->code) }}"
                       placeholder="WELCOME20"
                       class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 text-sm font-mono uppercase tracking-wider focus:ring-2 focus:ring-indigo-500">
                <p class="mt-1 text-[11px] text-slate-500">{{ __('Customer-facing identifier.') }}</p>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Discount type') }}</label>
                <select name="type" x-model="type" required
                        class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500">
                    <option value="percent">{{ __('Percent off invoice') }}</option>
                    <option value="amount">{{ __('Fixed amount off') }}</option>
                    <option value="free_analyses">{{ __('Free analyses') }}</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Value') }}</label>
                <div class="relative">
                    <input type="number" step="0.01" min="0" name="value" required
                           value="{{ old('value', $coupon->value) }}"
                           class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 pe-12 text-sm tabular-nums focus:ring-2 focus:ring-indigo-500">
                    <span class="absolute end-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-mono">
                        <span x-show="type === 'percent'">%</span>
                        <span x-show="type === 'amount'">EUR</span>
                        <span x-show="type === 'free_analyses'">{{ __('analyses') }}</span>
                    </span>
                </div>
                <p class="mt-1 text-[11px] text-slate-500">
                    <span x-show="type === 'percent'" x-cloak>{{ __('Percentage off the invoice subtotal (max 100).') }}</span>
                    <span x-show="type === 'amount'" x-cloak>{{ __('Fixed amount deducted from the invoice subtotal.') }}</span>
                    <span x-show="type === 'free_analyses'" x-cloak>{{ __('Number of analyses turned into 0-amount lines.') }}</span>
                </p>
            </div>
        </div>
    </div>

    {{-- Validity + limits --}}
    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white mb-5 pb-3 border-b border-slate-200 dark:border-slate-800">
            {{ __('Validity & limits') }}
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Valid from') }}</label>
                <input type="date" name="valid_from"
                       value="{{ old('valid_from', $coupon->valid_from?->format('Y-m-d')) }}"
                       class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Valid until') }}</label>
                <input type="date" name="valid_until"
                       value="{{ old('valid_until', $coupon->valid_until?->format('Y-m-d')) }}"
                       class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Max total uses') }}</label>
                <input type="number" min="1" name="max_uses" placeholder="∞"
                       value="{{ old('max_uses', $coupon->max_uses) }}"
                       class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 text-sm tabular-nums focus:ring-2 focus:ring-indigo-500">
                <p class="mt-1 text-[11px] text-slate-500">{{ __('Empty = unlimited.') }}</p>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Max per tenant') }}</label>
                <input type="number" min="1" name="max_per_tenant"
                       value="{{ old('max_per_tenant', $coupon->max_per_tenant ?? 1) }}"
                       class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-3 py-2 text-sm tabular-nums focus:ring-2 focus:ring-indigo-500">
            </div>
        </div>

        <div class="mt-5 pt-4 border-t border-slate-200 dark:border-slate-800 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
            <label class="flex items-start gap-2 p-3 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50/40 dark:has-[:checked]:bg-indigo-900/20">
                <input type="hidden" name="first_time_only" value="0">
                <input type="checkbox" name="first_time_only" value="1" class="mt-0.5"
                       {{ old('first_time_only', $coupon->first_time_only) ? 'checked' : '' }}>
                <span>
                    <span class="font-medium text-slate-800 dark:text-slate-100">{{ __('First invoice only') }}</span>
                    <span class="block text-[11px] text-slate-500 mt-0.5">{{ __('Apply only to the tenant\'s very first monthly invoice.') }}</span>
                </span>
            </label>
            <label class="flex items-start gap-2 p-3 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50/40 dark:has-[:checked]:bg-indigo-900/20">
                <input type="hidden" name="stacks" value="0">
                <input type="checkbox" name="stacks" value="1" class="mt-0.5"
                       {{ old('stacks', $coupon->stacks) ? 'checked' : '' }}>
                <span>
                    <span class="font-medium text-slate-800 dark:text-slate-100">{{ __('Can stack with other coupons') }}</span>
                    <span class="block text-[11px] text-slate-500 mt-0.5">{{ __('Allow combining with another coupon on the same invoice.') }}</span>
                </span>
            </label>
            <label class="flex items-start gap-2 p-3 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50/40 dark:has-[:checked]:bg-emerald-900/20">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" class="mt-0.5"
                       {{ old('is_active', $coupon->is_active) ? 'checked' : '' }}>
                <span>
                    <span class="font-medium text-slate-800 dark:text-slate-100">{{ __('Active') }}</span>
                    <span class="block text-[11px] text-slate-500 mt-0.5">{{ __('Inactive coupons are never applied or redeemable.') }}</span>
                </span>
            </label>
        </div>
    </div>

    {{-- Tenant scope --}}
    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6">
        @php
            $selectedTenants = old('applies_to_tenant_ids', $coupon->applies_to_tenant_ids ?? []) ?: [];
            $selectedTenants = array_map('intval', (array) $selectedTenants);
        @endphp
        <div class="flex items-center justify-between mb-3 pb-3 border-b border-slate-200 dark:border-slate-800">
            <div>
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">{{ __('Tenant scope') }}</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ __('Leave empty to apply to every tenant.') }}</p>
            </div>
            <div class="text-xs text-slate-500 font-mono tabular-nums">
                {{ count($selectedTenants) }} / {{ count($tenants) }}
            </div>
        </div>

        @if($tenants->isEmpty())
            <p class="text-sm text-slate-500">{{ __('No tenants exist yet.') }}</p>
        @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-72 overflow-y-auto">
                @foreach($tenants as $t)
                    <label class="flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/60 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50/40 dark:has-[:checked]:bg-indigo-900/20 text-sm">
                        <input type="checkbox" name="applies_to_tenant_ids[]" value="{{ $t->id }}"
                               class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                               {{ in_array($t->id, $selectedTenants, true) ? 'checked' : '' }}>
                        <span class="min-w-0">
                            <span class="block truncate font-medium text-slate-800 dark:text-slate-100">{{ $t->name }}</span>
                            <span class="block text-[11px] text-slate-400 font-mono truncate">/{{ $t->slug }}</span>
                        </span>
                    </label>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Sticky save bar --}}
    <div class="sticky bottom-4 z-20 flex items-center justify-end gap-2 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur shadow-lg">
        @if($coupon->exists)
            <span class="text-[11px] text-slate-500 me-auto font-mono">
                {{ __('Used :n times', ['n' => $coupon->uses_count ?? 0]) }}
            </span>
        @endif
        <a href="{{ route('super-admin.coupons.index') }}"
           class="inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-medium">
            {{ __('Cancel') }}
        </a>
        <button class="inline-flex items-center px-4 py-1.5 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-sm font-semibold hover:bg-slate-800 dark:hover:bg-white">
            {{ __('Save coupon') }}
        </button>
    </div>
</form>
@endsection