<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Coupons</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Alpine.js for interactivity -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-50">
<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
    <div class="container mx-auto px-4 py-8">
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">Coupon Management</h1>
                <p class="text-gray-600 mt-1">Create, manage, and track your discount coupons</p>
            </div>
            <button 
                onclick="toggleModal('createCouponModal')"
                class="mt-4 md:mt-0 flex items-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-200"
            >
                <i class="fas fa-plus-circle mr-2"></i> Create Coupon
            </button>
        </div>

        <!-- Status Messages -->
        <?php if(session('success')): ?>
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 rounded">
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <p><?php echo e(session('success')); ?></p>
                </div>
            </div>
        <?php endif; ?>

        <?php if(session('error')): ?>
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <p><?php echo e(session('error')); ?></p>
                </div>
            </div>
        <?php endif; ?>
        
        <!-- Coupons Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <?php $__currentLoopData = $coupons; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $coupon): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300">
                    <!-- Coupon Header -->
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4 text-white">
                        <div class="flex justify-between items-center">
                            <h2 class="text-xl font-bold tracking-wide"><?php echo e($coupon->coupon_code); ?></h2>
                            <span class="px-2 py-1 rounded-full text-xs font-semibold <?php echo e($coupon->status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'); ?>">
                                <?php echo e($coupon->status ? 'Active' : 'Inactive'); ?>

                            </span>
                        </div>
                        <div class="mt-2 flex items-center">
                            <span class="text-2xl font-bold mr-1">
                                <?php echo e($coupon->discount); ?><?php echo e($coupon->discount_type === 'percentage' ? '%' : '₹'); ?>

                            </span>
                            <span class="text-sm">OFF</span>
                        </div>
                    </div>
                    
                    <!-- Coupon Details -->
                    <div class="p-5">
                        <div class="space-y-3">
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-calendar-alt mr-2 text-blue-500"></i>
                                <span><?php echo e(date('M d, Y', strtotime($coupon->start_date))); ?> - <?php echo e(date('M d, Y', strtotime($coupon->end_date))); ?></span>
                            </div>
                            
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-tag mr-2 text-blue-500"></i>
                                <span><?php echo e($coupon->coupon_functionality); ?></span>
                            </div>
                            
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-shopping-bag mr-2 text-blue-500"></i>
                                <span>Min. order: ₹<?php echo e(number_format($coupon->minimum_value, 2)); ?></span>
                            </div>
                            
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-bolt mr-2 text-blue-500"></i>
                                <span>Max discount: ₹<?php echo e(number_format($coupon->upto_value, 2)); ?></span>
                            </div>
                            
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-users mr-2 text-blue-500"></i>
                                <span>Usage limit: <?php echo e($coupon->usage_limit ?? 'Unlimited'); ?></span>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="mt-6 flex justify-between space-x-2">
                            <button 
                                onclick="openEditModal(<?php echo e($coupon->id); ?>)"
                                class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-3 rounded-lg text-sm font-medium transition-colors duration-200"
                            >
                                <i class="fas fa-edit mr-1"></i> Edit
                            </button>
                            
                            <form action="<?php echo e(route('coupons.updateStatus', $coupon->id)); ?>" method="POST" class="flex-1">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('PUT'); ?>
                                <input type="hidden" name="status" value="<?php echo e($coupon->status ? 0 : 1); ?>">
                                <button 
                                    type="submit" 
                                    class="w-full <?php echo e($coupon->status ? 'bg-gray-500 hover:bg-gray-600' : 'bg-green-500 hover:bg-green-600'); ?> text-white py-2 px-3 rounded-lg text-sm font-medium transition-colors duration-200"
                                >
                                    <i class="fas <?php echo e($coupon->status ? 'fa-toggle-off' : 'fa-toggle-on'); ?> mr-1"></i>
                                    <?php echo e($coupon->status ? 'Deactivate' : 'Activate'); ?>

                                </button>
                            </form>
                            
                            <form action="<?php echo e(route('coupons.destroy', $coupon->id)); ?>" method="POST" class="flex-1">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('DELETE'); ?>
                                <button 
                                    type="submit" 
                                    onclick="return confirm('Are you sure you want to delete this coupon?')"
                                    class="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-3 rounded-lg text-sm font-medium transition-colors duration-200"
                                >
                                    <i class="fas fa-trash-alt mr-1"></i> Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <!-- Create Coupon Modal -->
        <div id="createCouponModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
            <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center border-b pb-4">
                        <h2 class="text-2xl font-bold text-gray-800">Create New Coupon</h2>
                        <button onclick="toggleModal('createCouponModal')" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <form action="<?php echo e(route('coupons.store')); ?>" method="POST" class="mt-6 space-y-4">
                        <?php echo csrf_field(); ?>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Coupon Code -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Coupon Code *</label>
                                <div class="relative">
                                    <input 
                                        type="text" 
                                        name="coupon_code" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="SUMMER2024" 
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- Discount Type -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Discount Type *</label>
                                <select 
                                    name="discount_type" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    required
                                >
                                    <option value="percentage" selected>Percentage (%)</option>
                                    <option value="fixed">Fixed Amount (₹)</option>
                                </select>
                            </div>
                            
                            <!-- Discount Amount -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Discount Value *</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        name="discount" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="15" 
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- Usage Limit -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Usage Limit</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        name="usage_limit" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="100 (leave empty for unlimited)"
                                    >
                                </div>
                            </div>
                            
                            <!-- Minimum Order Value -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Minimum Order Value (₹)</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        step="0.01" 
                                        name="minimum_value" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="50.00"
                                    >
                                </div>
                            </div>
                            
                            <!-- Maximum Discount -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Maximum Discount (₹)</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        step="0.01" 
                                        name="upto_value" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="200.00"
                                    >
                                </div>
                            </div>
                            
                            <!-- Start Date -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Start Date *</label>
                                <div class="relative">
                                    <input 
                                        type="date" 
                                        name="start_date" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- End Date -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">End Date *</label>
                                <div class="relative">
                                    <input 
                                        type="date" 
                                        name="end_date" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- Apply on Product -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Apply to Products</label>
                                <select 
                                    name="apply_coupon_on_product" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                >
                                    <option value="1" selected>Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                            
                            <!-- Coupon Functionality -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Coupon Type</label>
                                <input 
                                    type="text" 
                                    name="coupon_functionality" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="Order discount"
                                >
                            </div>
                            
                            <!-- Status -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Status *</label>
                                <select 
                                    name="status" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    required
                                >
                                    <option value="1" selected>Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="pt-4 flex justify-end space-x-3">
                            <button 
                                type="button" 
                                onclick="toggleModal('createCouponModal')"
                                class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200"
                            >
                                Cancel
                            </button>
                            <button 
                                type="submit" 
                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200"
                            >
                                Create Coupon
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Edit Coupon Modal -->
        <div id="editCouponModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
            <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center border-b pb-4">
                        <h2 class="text-2xl font-bold text-gray-800">Edit Coupon</h2>
                        <button onclick="toggleModal('editCouponModal')" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <form id="editCouponForm" action="" method="POST" class="mt-6 space-y-4">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('PUT'); ?>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Coupon Code -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Coupon Code *</label>
                                <div class="relative">
                                    <input 
                                        type="text" 
                                        name="coupon_code" 
                                        id="edit_coupon_code"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- Discount Type -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Discount Type *</label>
                                <select 
                                    name="discount_type" 
                                    id="edit_discount_type"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    required
                                >
                                    <option value="percentage">Percentage (%)</option>
                                    <option value="fixed">Fixed Amount (₹)</option>
                                </select>
                            </div>
                            
                            <!-- Discount Amount -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Discount Value *</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        name="discount" 
                                        id="edit_discount"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- Usage Limit -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Usage Limit</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        name="usage_limit" 
                                        id="edit_usage_limit"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    >
                                </div>
                            </div>
                            
                            <!-- Minimum Order Value -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Minimum Order Value (₹)</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        step="0.01" 
                                        name="minimum_value" 
                                        id="edit_minimum_value"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    >
                                </div>
                            </div>
                            
                            <!-- Maximum Discount -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Maximum Discount (₹)</label>
                                <div class="relative">
                                    <input 
                                        type="number" 
                                        step="0.01" 
                                        name="upto_value" 
                                        id="edit_upto_value"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    >
                                </div>
                            </div>
                            
                            <!-- Start Date -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Start Date *</label>
                                <div class="relative">
                                    <input 
                                        type="date" 
                                        name="start_date" 
                                        id="edit_start_date"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- End Date -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">End Date *</label>
                                <div class="relative">
                                    <input 
                                        type="date" 
                                        name="end_date" 
                                        id="edit_end_date"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        required
                                    >
                                </div>
                            </div>
                            
                            <!-- Apply on Product -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Apply to Products</label>
                                <select 
                                    name="apply_coupon_on_product" 
                                    id="edit_apply_coupon_on_product"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                >
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                            
                            <!-- Coupon Functionality -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Coupon Type</label>
                                <input 
                                    type="text" 
                                    name="coupon_functionality" 
                                    id="edit_coupon_functionality"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                >
                            </div>
                            
                            <!-- Status -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Status *</label>
                                <select 
                                    name="status" 
                                    id="edit_status"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    required
                                >
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="pt-4 flex justify-end space-x-3">
                            <button 
                                type="button" 
                                onclick="toggleModal('editCouponModal')"
                                class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200"
                            >
                                Cancel
                            </button>
                            <button 
                                type="submit" 
                                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors duration-200"
                            >
                                Update Coupon
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.toggle('hidden');
            document.body.classList.toggle('overflow-hidden');
        }

        async function openEditModal(couponId) {
            try {
                const response = await fetch(`https://drycleaneo.com/admin/coupons/${couponId}/edit`);
                if (!response.ok) {
                    throw new Error('Failed to fetch coupon data');
                }
                
                const data = await response.json();
                
                // Populate form fields
                document.getElementById('edit_coupon_code').value = data.coupon_code;
                document.getElementById('edit_discount').value = data.discount;
                document.getElementById('edit_discount_type').value = data.discount_type;
                document.getElementById('edit_usage_limit').value = data.usage_limit || '';
                document.getElementById('edit_minimum_value').value = data.minimum_value || '';
                document.getElementById('edit_upto_value').value = data.upto_value || '';
                document.getElementById('edit_start_date').value = data.start_date;
                document.getElementById('edit_end_date').value = data.end_date;
                document.getElementById('edit_apply_coupon_on_product').value = data.apply_coupon_on_product;
                document.getElementById('edit_coupon_functionality').value = data.coupon_functionality || '';
                document.getElementById('edit_status').value = data.status;
                
                // Update form action
                document.getElementById('editCouponForm').action = `https://drycleaneo.com/admin/coupons/${couponId}`;
                
                // Show the modal
                toggleModal('editCouponModal');
            } catch (error) {
                console.error('Error:', error);
                alert('Failed to load coupon data. Please try again.');
            }
        }

        // Set default dates for create form
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date().toISOString().split('T')[0];
            const nextMonth = new Date();
            nextMonth.setMonth(nextMonth.getMonth() + 1);
            const nextMonthFormatted = nextMonth.toISOString().split('T')[0];
            
            document.querySelector('input[name="start_date"]').value = today;
            document.querySelector('input[name="end_date"]').value = nextMonthFormatted;
        });
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?>
</body>
</html><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/discount.blade.php ENDPATH**/ ?>