@extends('admin.layouts.app')

@section('title', 'Create Coupon')

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="mb-6 flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-white tracking-tight">Create Coupon</h1>
                <p class="text-slate-400 mt-1">Add a new discount coupon.</p>
            </div>
            <a href="{{ route('admin.coupons.index') }}"
                class="text-slate-400 hover:text-white transition-colors flex items-center gap-2">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                Back to Coupons
            </a>
        </div>

        @if ($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="glass-card rounded-2xl p-6 md:p-8">
            <form action="{{ route('admin.coupons.store') }}" method="POST" x-data="{ 
                          code: '{{ old('code') }}', 
                          generateCode() { 
                              this.code = Math.random().toString(36).substring(2, 10).toUpperCase(); 
                          } 
                      }">
                @csrf

                <div class="space-y-8">
                    <div class="border-b border-white/5 pb-8">
                        <h3 class="text-lg font-semibold text-white mb-4">Coupon Details</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Code</label>
                                <div class="flex">
                                    <input type="text" name="code" x-model="code"
                                        class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-l-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all"
                                        required placeholder="e.g. SUMMER2024">
                                    <button type="button" @click="generateCode()"
                                        class="px-4 py-2 border border-l-0 border-white/10 bg-slate-800 text-slate-300 rounded-r-xl hover:bg-slate-700 text-sm transition-colors">Generate</button>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Type</label>
                                <select name="type"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all">
                                    <option value="percentage">Percentage</option>
                                    <option value="fixed">Fixed Amount</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Value</label>
                                <input type="number" step="0.01" name="value" value="{{ old('value') }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all"
                                    required>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Minimum Spend
                                    (Optional)</label>
                                <input type="number" step="0.01" name="min_spend" value="{{ old('min_spend') }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all">
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold text-white mb-4">Limitations & Validity</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Usage Limit (Optional)</label>
                                <input type="number" name="usage_limit" value="{{ old('usage_limit') }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all"
                                    placeholder="Total times redeemable">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Valid From</label>
                                <input type="datetime-local" name="valid_from" value="{{ old('valid_from') }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Valid Until</label>
                                <input type="datetime-local" name="valid_until" value="{{ old('valid_until') }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end border-t border-white/5 pt-6 mt-8">
                    <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-xl transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2">
                        <i data-lucide="plus" class="w-4 h-4"></i>
                        Create Coupon
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection