@extends('layouts.admin')

@section('title', 'Create Vouchers')
@section('page-title', 'Create Vouchers')

@section('content')
<div class="mx-auto max-w-3xl">
    <section class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-slate-900">Generate Voucher Batch</h2>
                <p class="mt-1 text-sm text-slate-500">Create one or many promo codes with shared rules and expiry.</p>
            </div>
            <a href="{{ route('admin.vouchers.index') }}" class="rounded-2xl border border-slate-300 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-400">Back</a>
        </div>

        <form method="POST" action="{{ route('admin.vouchers.store') }}" class="mt-8 grid gap-5 md:grid-cols-2">
            @csrf
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Plan</label>
                <select name="plan" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    @foreach(['starter', 'growth', 'pro'] as $plan)
                        <option value="{{ $plan }}" @selected(old('plan') === $plan)>{{ ucfirst($plan) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Period</label>
                <select name="period" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    @foreach(['monthly', 'yearly', 'lifetime'] as $period)
                        <option value="{{ $period }}" @selected(old('period') === $period)>{{ ucfirst($period) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Validity Days</label>
                <input type="number" name="days" min="1" max="36500" value="{{ old('days', 30) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Max Uses</label>
                <input type="number" name="max_uses" min="1" max="10000" value="{{ old('max_uses', 1) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Quantity</label>
                <input type="number" name="quantity" min="1" max="100" value="{{ old('quantity', 1) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Expires At</label>
                <input type="datetime-local" name="expires_at" value="{{ old('expires_at') }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
            <div class="md:col-span-2">
                <label class="mb-2 block text-sm font-semibold text-slate-700">Notes</label>
                <textarea name="notes" rows="4" class="w-full rounded-3xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10" placeholder="Campaign note, partner name, or internal reference">{{ old('notes') }}</textarea>
            </div>
            <div class="md:col-span-2">
                <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-5 py-3.5 text-sm font-semibold text-white transition hover:bg-brand-700">Create Voucher Batch</button>
            </div>
        </form>
    </section>
</div>
@endsection