@extends('admin.layouts.app')
@section('title', 'Coupons')

@section('content')
<div class="space-y-5" x-data="{ showForm: false }">

    <div class="flex items-center justify-between">
        <p class="text-sm text-slate-500">Create discount codes for your customers.</p>
        <button @click="showForm = !showForm"
            class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700">
            + Create Coupon
        </button>
    </div>

    {{-- Create Form --}}
    <div x-show="showForm" x-cloak class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="font-semibold text-slate-700 mb-4">New Coupon</h3>
        <form method="POST" action="{{ route('admin.coupons.store') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @csrf

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Coupon Code *</label>
                <input type="text" name="code" required placeholder="SAVE10"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm uppercase focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    oninput="this.value = this.value.toUpperCase()">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Type *</label>
                <select name="type" required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="percentage">Percentage (%)</option>
                    <option value="flat">Flat Amount (₹)</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Value *</label>
                <input type="number" name="value" required min="0" step="0.01" placeholder="10"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Min. Order Value (₹)</label>
                <input type="number" name="min_order_value" min="0" step="0.01" placeholder="199"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Max Uses</label>
                <input type="number" name="max_uses" min="1" placeholder="Unlimited"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Expiry Date</label>
                <input type="date" name="expires_at" min="{{ today()->addDay()->format('Y-m-d') }}"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div class="md:col-span-3 flex gap-3">
                <button type="submit" class="px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700">Create Coupon</button>
                <button type="button" @click="showForm = false" class="px-5 py-2 bg-slate-100 text-slate-600 text-sm font-medium rounded-lg hover:bg-slate-200">Cancel</button>
            </div>
        </form>
    </div>

    {{-- Coupons Table --}}
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr class="text-left text-xs text-slate-500 font-medium">
                    <th class="px-5 py-3">Code</th>
                    <th class="px-5 py-3">Discount</th>
                    <th class="px-5 py-3">Min. Order</th>
                    <th class="px-5 py-3">Used / Max</th>
                    <th class="px-5 py-3">Expires</th>
                    <th class="px-5 py-3">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($coupons as $coupon)
                <tr class="hover:bg-slate-50">
                    <td class="px-5 py-3.5">
                        <span class="font-mono font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded">{{ $coupon->code }}</span>
                    </td>
                    <td class="px-5 py-3.5 font-medium">
                        {{ $coupon->type === 'percentage' ? $coupon->value.'%' : '₹'.$coupon->value }}
                        <span class="text-xs text-slate-400 ml-1">off</span>
                    </td>
                    <td class="px-5 py-3.5 text-slate-500">{{ $coupon->min_order_value ? '₹'.$coupon->min_order_value : '—' }}</td>
                    <td class="px-5 py-3.5 text-slate-500">{{ $coupon->used_count }} / {{ $coupon->max_uses ?? '∞' }}</td>
                    <td class="px-5 py-3.5 text-slate-500 text-xs">
                        {{ $coupon->expires_at ? $coupon->expires_at->format('d M Y') : '—' }}
                    </td>
                    <td class="px-5 py-3.5">
                        <span class="{{ $coupon->is_active ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500' }} px-2 py-0.5 rounded-full text-xs font-medium">
                            {{ $coupon->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td class="px-5 py-3.5 flex gap-3">
                        <form method="POST" action="{{ route('admin.coupons.toggle', $coupon->id) }}">
                            @csrf
                            <button type="submit" class="text-xs font-medium {{ $coupon->is_active ? 'text-amber-600 hover:text-amber-700' : 'text-green-600 hover:text-green-700' }}">
                                {{ $coupon->is_active ? 'Disable' : 'Enable' }}
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.coupons.destroy', $coupon->id) }}"
                              onsubmit="return confirm('Delete coupon {{ $coupon->code }}?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700 text-xs font-medium">Delete</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-5 py-12 text-center text-slate-400">No coupons yet. Create your first discount above.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection