<?php $__env->startSection('title', 'Coupons Management'); ?>

<?php $__env->startSection('content'); ?>
<div class="max-w-[1600px] mx-auto">
    <!-- Clean Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8 border-b border-gray-100 pb-8">
        <div class="space-y-1">
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-2 text-[10px] font-bold uppercase tracking-wider">
                    <li><a href="<?php echo e(route('admin.dashboard')); ?>" class="text-gray-400 hover:text-brand transition-colors">Admin</a></li>
                    <li><i class="fas fa-chevron-right text-gray-300 text-[8px]"></i></li>
                    <li class="text-brand">Coupons</li>
                </ol>
            </nav>
            <h1 class="text-3xl font-black text-gray-900 tracking-tight">Coupon Management</h1>
            <p class="text-gray-500 text-sm font-medium">Create and manage discount codes to boost your store sales.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="<?php echo e(route('admin.coupons.create')); ?>" class="inline-flex items-center gap-2 btn-brand text-white px-6 py-3 rounded-xl text-xs font-bold shadow-lg shadow-brand/20">
                <i class="fas fa-plus text-[10px]"></i>
                Add New Coupon
            </a>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all group">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-emerald-50 flex items-center justify-center text-brand group-hover:scale-110 transition-transform">
                    <i class="fas fa-ticket-alt text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Active</span>
            </div>
            <h3 class="text-2xl font-black text-gray-900"><?php echo e($activeCoupons); ?></h3>
            <p class="text-xs font-bold text-gray-400 mt-1">Live Campaigns</p>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all group">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform">
                    <i class="fas fa-bolt text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Used</span>
            </div>
            <h3 class="text-2xl font-black text-gray-900"><?php echo e($totalUsed); ?></h3>
            <p class="text-xs font-bold text-gray-400 mt-1">Total Redemptions</p>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all group">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-500 group-hover:scale-110 transition-transform">
                    <i class="fas fa-clock text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Expired</span>
            </div>
            <h3 class="text-2xl font-black text-gray-900"><?php echo e($expiredCoupons); ?></h3>
            <p class="text-xs font-bold text-gray-400 mt-1">Past Sequences</p>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all group">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-gray-50 flex items-center justify-center text-gray-400 group-hover:scale-110 transition-transform">
                    <i class="fas fa-layer-group text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Total</span>
            </div>
            <h3 class="text-2xl font-black text-gray-900"><?php echo e($totalCoupons); ?></h3>
            <p class="text-xs font-bold text-gray-400 mt-1">Coupon Codes</p>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm mb-6 flex flex-col md:flex-row items-center gap-4">
        <form action="<?php echo e(route('admin.coupons.index')); ?>" method="GET" class="flex flex-col md:flex-row items-center gap-4 flex-1 w-full">
            <div class="relative flex-1 w-full">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-300"></i>
                <input type="text" name="search" value="<?php echo e(request('search')); ?>" 
                    class="w-full pl-10 pr-4 py-3 bg-gray-50 border-none rounded-xl text-sm font-semibold placeholder:text-gray-400 focus:ring-2 focus:ring-brand/20 transition-all" 
                    placeholder="Search by coupon code...">
            </div>
            
            <div class="flex items-center gap-3 w-full md:w-auto">
                <select name="status" class="bg-gray-50 border-none rounded-xl px-4 py-3 text-xs font-bold text-gray-500 focus:ring-2 focus:ring-brand/20">
                    <option value="">All Status</option>
                    <option value="active" <?php echo e(request('status') == 'active' ? 'selected' : ''); ?>>Active</option>
                    <option value="inactive" <?php echo e(request('status') == 'inactive' ? 'selected' : ''); ?>>Inactive</option>
                </select>

                <select name="type" class="bg-gray-50 border-none rounded-xl px-4 py-3 text-xs font-bold text-gray-500 focus:ring-2 focus:ring-brand/20">
                    <option value="">All Types</option>
                    <option value="fixed" <?php echo e(request('type') == 'fixed' ? 'selected' : ''); ?>>Fixed</option>
                    <option value="percent" <?php echo e(request('type') == 'percent' ? 'selected' : ''); ?>>Percentage</option>
                </select>

                <button type="submit" class="h-11 px-6 bg-zinc-900 text-white rounded-xl text-xs font-bold hover:bg-brand transition-all shadow-md">
                    Filter
                </button>
                
                <?php if(request()->anyFilled(['search', 'status', 'type'])): ?>
                    <a href="<?php echo e(route('admin.coupons.index')); ?>" class="h-11 w-11 flex items-center justify-center bg-gray-100 text-gray-400 rounded-xl hover:text-red-500 transition-all">
                        <i class="fas fa-times text-xs"></i>
                    </a>
                <?php endif; ?>
            </div>
        </form>
    </div>

    <!-- Coupons Table -->
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50/50">
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Coupon Details</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Discount</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Usage</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Expiry</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Status</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <?php $__empty_1 = true; $__currentLoopData = $coupons; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $coupon): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="group hover:bg-gray-50/30 transition-colors">
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-brand/5 text-brand flex items-center justify-center text-xs">
                                        <i class="fas fa-tag"></i>
                                    </div>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm font-black text-gray-900 tracking-tight"><?php echo e($coupon->code); ?></span>
                                            <button onclick="copyToClipboard('<?php echo e($coupon->code); ?>')" 
                                                class="text-gray-300 hover:text-brand transition-colors focus:outline-none" 
                                                title="Copy Code">
                                                <i class="far fa-copy text-[10px]"></i>
                                            </button>
                                        </div>
                                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-0.5">ID: #<?php echo e(str_pad($coupon->id, 5, '0', STR_PAD_LEFT)); ?></p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                <div class="flex flex-col">
                                    <span class="text-sm font-black text-gray-900">
                                        <?php if($coupon->type == 'fixed'): ?>
                                            <?php echo e($currencySymbol); ?><?php echo e(number_format($coupon->value, 2)); ?>

                                        <?php else: ?>
                                            <?php echo e(number_format($coupon->value, 1)); ?>%
                                        <?php endif; ?>
                                    </span>
                                    <span class="text-[10px] font-bold text-gray-400 mt-0.5">Min: <?php echo e($currencySymbol); ?><?php echo e(number_format($coupon->min_purchase, 0)); ?></span>
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                <div class="w-32">
                                    <div class="flex justify-between items-center mb-1.5">
                                        <span class="text-[10px] font-bold text-gray-900"><?php echo e($coupon->used_count); ?> Used</span>
                                        <span class="text-[10px] font-bold text-gray-400">
                                            <?php if($coupon->usage_limit): ?>
                                                Limit: <?php echo e($coupon->usage_limit); ?>

                                            <?php else: ?>
                                                ∞
                                            <?php endif; ?>
                                        </span>
                                    </div>
                                    <?php if($coupon->usage_limit > 0): ?>
                                        <?php
                                            $percent = min(100, ($coupon->used_count / $coupon->usage_limit) * 100);
                                            $color = $percent >= 90 ? 'bg-red-500' : ($percent >= 50 ? 'bg-amber-500' : 'bg-brand');
                                        ?>
                                        <div class="w-full bg-gray-100 rounded-full h-1">
                                            <div class="<?php echo e($color); ?> h-full rounded-full transition-all duration-500" style="width: <?php echo e($percent); ?>%"></div>
                                        </div>
                                    <?php else: ?>
                                        <div class="w-full bg-gray-100 rounded-full h-1">
                                            <div class="bg-brand h-full rounded-full" style="width: 100%"></div>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                <?php if($coupon->expires_at): ?>
                                    <div class="flex flex-col">
                                        <span class="text-xs font-bold text-gray-900"><?php echo e($coupon->expires_at->format('M d, Y')); ?></span>
                                        <span class="text-[10px] font-bold mt-0.5 <?php echo e($coupon->expires_at->isPast() ? 'text-red-400' : 'text-emerald-500'); ?>">
                                            <?php echo e($coupon->expires_at->isPast() ? 'Expired' : 'Active'); ?>

                                        </span>
                                    </div>
                                <?php else: ?>
                                    <span class="inline-flex px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-500 text-[9px] font-bold">
                                        No Expiry
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td class="px-8 py-5">
                                <?php
                                    $isActive = $coupon->is_active && (!$coupon->expires_at || !$coupon->expires_at->isPast());
                                    $statusClass = $isActive ? 'bg-emerald-50 text-emerald-500 border-emerald-100' : ($coupon->is_active ? 'bg-red-50 text-red-400 border-red-100' : 'bg-gray-50 text-gray-400 border-gray-100');
                                    $statusText = $isActive ? 'Active' : ($coupon->is_active ? 'Expired' : 'Inactive');
                                ?>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider <?php echo e($statusClass); ?> border">
                                    <?php echo e($statusText); ?>

                                </span>
                            </td>
                            <td class="px-8 py-5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="<?php echo e(route('admin.coupons.edit', $coupon->id)); ?>" 
                                       class="h-9 w-9 flex items-center justify-center rounded-xl bg-gray-50 border border-gray-100 text-gray-500 hover:text-brand hover:bg-emerald-50 hover:border-brand/20 transition-all shadow-sm"
                                       title="Edit">
                                        <i class="fas fa-edit text-[11px]"></i>
                                    </a>
                                    <form action="<?php echo e(route('admin.coupons.destroy', $coupon->id)); ?>" method="POST" class="inline-block" 
                                          onsubmit="return confirm('Delete this coupon?');">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit"
                                                class="h-9 w-9 flex items-center justify-center rounded-xl bg-gray-50 border border-gray-100 text-gray-500 hover:text-red-500 hover:bg-red-50 hover:border-red-100 transition-all shadow-sm"
                                                title="Delete">
                                            <i class="fas fa-trash text-[11px]"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr>
                        <td colspan="6" class="px-8 py-20 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <i class="fas fa-inbox text-3xl text-gray-200"></i>
                                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">No coupons found</p>
                            </div>
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <?php if($coupons->hasPages()): ?>
            <div class="px-8 py-5 bg-gray-50/50 border-t border-gray-100">
                <?php echo e($coupons->links()); ?>

            </div>
        <?php endif; ?>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            // Optional: Show toast
        });
    }
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/burhjijr/adminprovendorx.burhanstore.online/resources/views/admin/coupons/index.blade.php ENDPATH**/ ?>