@extends('admin.layout')

@section('title', 'Discount Promo Codes')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
    
    <!-- Add Promo Form (4 cols) -->
    <div class="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4">
        <h3 class="font-extrabold text-slate-900 text-sm border-b border-slate-100 pb-3">Create Promo Code</h3>

        <form action="{{ route('admin.promos.store') }}" method="POST" class="space-y-4 text-xs">
            @csrf

            <div>
                <label class="block font-bold text-slate-700 mb-1">Coupon / Promo Code *</label>
                <input type="text" name="promo_name" required placeholder="e.g. WELCOME10" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 font-mono font-bold uppercase focus:bg-white focus:ring-1 focus:ring-emerald-500">
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Discount Amount (₹) *</label>
                <input type="number" step="0.01" name="discount" required placeholder="e.g. 50" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
            </div>

            <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl transition-all shadow-xs">
                Create Promo Code
            </button>
        </form>
    </div>

    <!-- Active Promo Codes (8 cols) -->
    <div class="lg:col-span-8 bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-xs">
        <div class="p-4 border-b border-slate-100 font-extrabold text-slate-900 text-sm">
            Active Discount Coupons
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="bg-slate-50 text-slate-500 border-b border-slate-200">
                        <th class="p-4 font-bold">Coupon Code</th>
                        <th class="p-4 font-bold">Discount</th>
                        <th class="p-4 font-bold">Status</th>
                        <th class="p-4 font-bold text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($promos as $promo)
                        <tr class="hover:bg-slate-50/60 transition-colors">
                            <td class="p-4 font-mono font-extrabold text-emerald-700 text-sm">{{ $promo->promo_code ?? $promo->promo_name }}</td>
                            <td class="p-4 font-bold text-slate-900">₹{{ number_format((float)$promo->discount, 2) }}</td>
                            <td class="p-4">
                                <span class="bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full text-[10px] font-bold">Active</span>
                            </td>
                            <td class="p-4 text-right">
                                <a href="{{ route('admin.promos.delete', ['id' => $promo->id]) }}" onclick="return confirm('Delete this promo code?');" class="px-3 py-1.5 rounded-xl bg-red-50 hover:bg-red-100 text-red-600 font-bold transition-all">Delete</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="p-8 text-center text-slate-400">No active promo codes.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection