@extends('layouts.admin')
@section('title', $coupon ? __('Edit coupon') : __('New coupon'))
@section('content')
@php $c = $coupon; $dt = fn ($v) => $v ? \Illuminate\Support\Carbon::parse($v)->format('Y-m-d\TH:i') : ''; @endphp
<a href="{{ route('admin.coupons') }}" class="text-sm font-bold text-primary hover:underline">← {{ __('Coupons') }}</a>
<h1 class="mb-6 mt-2 text-2xl font-extrabold text-primary">{{ $c ? __('Edit coupon') : __('New coupon') }}</h1>
<form method="POST" action="{{ $c ? route('admin.coupons.update', $c->id) : route('admin.coupons.store') }}" class="max-w-2xl space-y-4 rounded-[32px] border border-surface-variant bg-white p-6">
    @csrf @if ($c) @method('PUT') @endif
    <div class="grid gap-4 sm:grid-cols-2">
        <x-field name="code" :label="__('Code')" :value="$c->code ?? ''" required/>
        <x-field name="description" :label="__('Description')" :value="$c->description ?? ''"/>
    </div>
    <div class="grid gap-4 sm:grid-cols-3">
        <div><label for="discount_type" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ __('Type') }}</label>
            <select id="discount_type" name="discount_type" class="min-h-[48px] w-full rounded-2xl border border-outline-variant bg-white px-4">
                @foreach (['percent' => __('Percentage off'), 'fixed' => __('Fixed amount off (USD)'), 'free_shipping' => __('Free delivery')] as $k => $l)<option value="{{ $k }}" @selected(old('discount_type', $c->discount_type ?? 'percent') === $k)>{{ $l }}</option>@endforeach</select></div>
        <x-field name="discount_value" type="number" step="0.01" min="0" :label="__('Value')" :value="$c->discount_value ?? ''" :hint="__('Percent (1–100) or dollars. Ignored for free delivery.')"/>
        <x-field name="max_discount" type="number" step="0.01" min="0" :label="__('Max discount (USD)')" :value="$c->max_discount ?? ''"/>
    </div>
    <div class="grid gap-4 sm:grid-cols-3">
        <x-field name="min_order_amount" type="number" step="0.01" min="0" :label="__('Minimum order (USD)')" :value="$c->min_order_amount ?? ''"/>
        <x-field name="usage_limit" type="number" min="1" :label="__('Total uses')" :value="$c->usage_limit ?? ''"/>
        <x-field name="usage_limit_per_user" type="number" min="1" :label="__('Uses per customer')" :value="$c->usage_limit_per_user ?? ''"/>
    </div>
    <div class="grid gap-4 sm:grid-cols-2">
        <x-field name="starts_at" type="datetime-local" :label="__('Starts')" :value="$dt($c->starts_at ?? null)"/>
        <x-field name="expires_at" type="datetime-local" :label="__('Expires')" :value="$dt($c->expires_at ?? null)"/>
    </div>

    {{-- Who can use this coupon: everyone, or only the customers ticked below. --}}
    @php $aud = old('audience', count($picked) ? 'selected' : 'all'); $pickedNow = array_map('intval', (array) old('customers', $picked)); @endphp
    <fieldset class="rounded-2xl bg-surface-mid p-4" id="audience-box">
        <legend class="px-1 text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Who can use it') }}</legend>
        <div class="flex flex-wrap gap-x-6">
            <label class="flex min-h-[40px] items-center gap-2"><input type="radio" name="audience" value="all" @checked($aud === 'all') class="h-4 w-4 accent-[#1a3627]"> {{ __('All customers') }}</label>
            <label class="flex min-h-[40px] items-center gap-2"><input type="radio" name="audience" value="selected" @checked($aud === 'selected') class="h-4 w-4 accent-[#1a3627]"> {{ __('Specific customers') }}</label>
        </div>
        <div id="audience-picker" class="mt-3 {{ $aud === 'selected' ? '' : 'hidden' }}">
            <input type="search" id="cust-search" placeholder="{{ __('Search name or email') }}" class="min-h-[44px] w-full rounded-2xl border border-outline-variant bg-white px-4 text-sm">
            <div class="mt-2 flex items-center justify-between text-xs font-bold text-on-surface-variant"><span><span id="cust-count">0</span> {{ __('selected') }}</span><button type="button" id="cust-none" class="underline">{{ __('Clear selection') }}</button></div>
            <ul class="mt-2 max-h-64 space-y-1 overflow-y-auto rounded-2xl border border-outline-variant bg-white p-2">
                @forelse ($customers as $u)
                    <li data-cust="{{ strtolower($u->first_name . ' ' . $u->last_name . ' ' . $u->email) }}"><label class="flex min-h-[40px] cursor-pointer items-center gap-3 rounded-xl px-2 hover:bg-surface-mid"><input type="checkbox" name="customers[]" value="{{ $u->id }}" @checked(in_array((int) $u->id, $pickedNow, true)) class="h-4 w-4 accent-[#1a3627]"> <span class="min-w-0"><span class="font-bold text-primary">{{ trim($u->first_name . ' ' . $u->last_name) }}</span> <span class="block truncate text-xs text-outline">{{ $u->email }}</span></span></label></li>
                @empty
                    <li class="p-3 text-sm text-on-surface-variant">{{ __('No customers yet.') }}</li>
                @endforelse
            </ul>
        </div>
    </fieldset>

    <div class="space-y-1">
        <label class="flex min-h-[40px] items-center gap-3"><input type="checkbox" name="first_order_only" value="1" @checked(old('first_order_only', $c->first_order_only ?? 0)) class="h-4 w-4 accent-[#1a3627]"> {{ __('First orders only') }}</label>
        <label class="flex min-h-[40px] items-center gap-3"><input type="checkbox" name="is_active" value="1" @checked(old('is_active', $c->is_active ?? 1)) class="h-4 w-4 accent-[#1a3627]"> {{ __('Active') }}</label>
    </div>
    <label class="flex min-h-[40px] items-center gap-3 rounded-2xl bg-surface-mid px-4"><input type="checkbox" name="notify" value="1" @checked(old('notify', $c ? 0 : 1)) class="h-4 w-4 accent-[#1a3627]"> {{ __('Tell customers about this coupon (they get a notification in their account)') }}</label>
    <x-btn type="submit">{{ __('Save coupon') }}</x-btn>
</form>
@push('scripts')
<script>
(() => {
  const box = document.getElementById('audience-box'), pick = document.getElementById('audience-picker'), q = document.getElementById('cust-search'), n = document.getElementById('cust-count');
  const boxes = () => [...pick.querySelectorAll('input[type=checkbox]')];
  const count = () => { n.textContent = boxes().filter(b => b.checked).length; };
  box.addEventListener('change', (e) => {
    if (e.target.name === 'audience') pick.classList.toggle('hidden', e.target.value !== 'selected');
    count();
  });
  q.addEventListener('input', () => { const t = q.value.trim().toLowerCase(); pick.querySelectorAll('li[data-cust]').forEach(li => { li.hidden = t !== '' && !li.dataset.cust.includes(t); }); });
  q.addEventListener('keydown', (e) => { if (e.key === 'Enter') e.preventDefault(); });
  document.getElementById('cust-none').addEventListener('click', () => { boxes().forEach(b => { b.checked = false; }); count(); });
  count();
})();
</script>
@endpush
@if ($c && $c->is_active)<form method="POST" action="{{ route('admin.coupons.notify', $c->id) }}" class="mt-4">@csrf<x-btn type="submit" variant="soft">{{ __('Notify customers now') }}</x-btn></form>@endif
@if ($c)<form method="POST" action="{{ route('admin.coupons.delete', $c->id) }}" class="mt-6" onsubmit="return confirm('{{ __('Delete this coupon?') }}')">@csrf @method('DELETE')<x-btn type="submit" variant="danger">{{ __('Delete coupon') }}</x-btn></form>@endif
@endsection