@extends('admin.layouts.app')

@section('title', 'Edit 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">Edit Coupon</h1>
                <p class="text-slate-400 mt-1">Update coupon details and validity.</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.update', $coupon->id) }}" method="POST" x-data="{ 
                          code: '{{ old('code', $coupon->code) }}', 
                          generateCode() { 
                              this.code = Math.random().toString(36).substring(2, 10).toUpperCase(); 
                          } 
                      }">
                @csrf
                @method('PUT')

                <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>
                                    <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" {{ old('type', $coupon->type) == 'percentage' ? 'selected' : '' }}>
                                        Percentage</option>
                                    <option value="fixed" {{ old('type', $coupon->type) == 'fixed' ? 'selected' : '' }}>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', $coupon->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', $coupon->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', $coupon->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', $coupon->valid_from ? $coupon->valid_from->format('Y-m-d\TH:i') : '') }}"
                                    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', $coupon->valid_until ? $coupon->valid_until->format('Y-m-d\TH:i') : '') }}"
                                    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="save" class="w-4 h-4"></i>
                        Update Coupon
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection