@extends('layouts.app')
@section('title', __('offerandpromotion::lang.promotions'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); padding: 30px 20px; margin: -20px -15px 30px -15px; border-radius: 0;">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-12 text-center">
                <h1 style="color: #fff; font-size: 32px; font-weight: 700; margin: 0; display: flex; align-items: center; justify-content: center; gap: 15px;">
                    <i class="fa fa-tags" style="font-size: 36px;"></i>
                    Promotion Management System
                </h1>
                <p style="color: rgba(255,255,255,0.9); font-size: 16px; margin: 10px 0 0 0;">
                    Manage different types of promotions and offers for your products
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <!-- Product Discount Promotion Card -->
            <div class="col-md-4">
                <div class="card" style="border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;">
                    <div class="card-body" style="padding: 25px;">
                        <div style="display: flex; align-items: center; margin-bottom: 20px;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fa fa-percent" style="color: #fff; font-size: 28px;"></i>
                            </div>
                            <div style="flex: 1;">
                                <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #2c3e50;">Product Discount Promotion</h3>
                            </div>
                        </div>
                        <p style="color: #6c757d; font-size: 14px; line-height: 1.6; margin-bottom: 20px;">
                            Set percentage-based discounts on specific products with date ranges, location, and variation filters. Automatic discount application in POS.
                        </p>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;">
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Percentage Discount</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Date Range</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Daily Limits</span>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <a href="{{ route('promotions.index') }}?type=product_discount" 
                               class="btn btn-primary" 
                               style="flex: 1; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px;">
                                <i class="fa fa-cog"></i> Manage
                            </a>
                            <a href="{{ route('promotions.dashboard') }}" 
                               class="btn btn-info" 
                               style="flex: 1; background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px;">
                                <i class="fa fa-chart-line"></i> Analytics
                            </a>
                        </div>
                        <div style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; color: #28a745; font-size: 13px; font-weight: 500;">
                                <i class="fa fa-check-circle" style="margin-right: 5px;"></i> Active
                            </div>
                            <div style="color: #dc3545; font-size: 13px; font-weight: 500;">
                                Version 1.1.0
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Buy X Get Y Promotion Card -->
            <div class="col-md-4">
                <div class="card" style="border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;">
                    <div class="card-body" style="padding: 25px;">
                        <div style="display: flex; align-items: center; margin-bottom: 20px;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fa fa-gift" style="color: #fff; font-size: 28px;"></i>
                            </div>
                            <div style="flex: 1;">
                                <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #2c3e50;">Buy X Get Y Promotion</h3>
                            </div>
                        </div>
                        <p style="color: #6c757d; font-size: 14px; line-height: 1.6; margin-bottom: 20px;">
                            Create buy X quantity get Y free or discounted offers. Perfect for bundle deals and quantity-based promotions.
                        </p>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;">
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Quantity Based</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Bundle Offers</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Free Items</span>
                        </div>
                        <button class="btn coming-soon-btn" 
                           style="width: 100%; background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; cursor: pointer;">
                            <i class="fa fa-clock"></i> Coming Soon
                        </button>
                        <div style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; color: #17a2b8; font-size: 13px; font-weight: 500;">
                                <i class="fa fa-clock" style="margin-right: 5px;"></i> Coming Soon
                            </div>
                            <div style="color: #dc3545; font-size: 13px; font-weight: 500;">
                                Version 2.0.0
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Category Discount Promotion Card -->
            <div class="col-md-4">
                <div class="card" style="border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;">
                    <div class="card-body" style="padding: 25px;">
                        <div style="display: flex; align-items: center; margin-bottom: 20px;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fa fa-folder" style="color: #fff; font-size: 28px;"></i>
                            </div>
                            <div style="flex: 1;">
                                <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #2c3e50;">Category Discount Promotion</h3>
                            </div>
                        </div>
                        <p style="color: #6c757d; font-size: 14px; line-height: 1.6; margin-bottom: 20px;">
                            Apply discounts to entire product categories. Perfect for seasonal sales and category-wide promotions.
                        </p>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;">
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Category Based</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Bulk Discount</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Seasonal Sales</span>
                        </div>
                        <button class="btn coming-soon-btn" 
                           style="width: 100%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; cursor: pointer;">
                            <i class="fa fa-clock"></i> Coming Soon
                        </button>
                        <div style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; color: #17a2b8; font-size: 13px; font-weight: 500;">
                                <i class="fa fa-clock" style="margin-right: 5px;"></i> Coming Soon
                            </div>
                            <div style="color: #dc3545; font-size: 13px; font-weight: 500;">
                                Version 2.0.0
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Group Promotion Card -->
            <div class="col-md-4">
                <div class="card" style="border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;">
                    <div class="card-body" style="padding: 25px;">
                        <div style="display: flex; align-items: center; margin-bottom: 20px;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fa fa-users" style="color: #fff; font-size: 28px;"></i>
                            </div>
                            <div style="flex: 1;">
                                <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #2c3e50;">Customer Group Promotion</h3>
                            </div>
                        </div>
                        <p style="color: #6c757d; font-size: 14px; line-height: 1.6; margin-bottom: 20px;">
                            Create exclusive promotions for specific customer groups or segments. Perfect for VIP customers and loyalty programs.
                        </p>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;">
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Customer Groups</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">VIP Offers</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Loyalty Programs</span>
                        </div>
                        <button class="btn coming-soon-btn" 
                           style="width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; cursor: pointer;">
                            <i class="fa fa-clock"></i> Coming Soon
                        </button>
                        <div style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; color: #17a2b8; font-size: 13px; font-weight: 500;">
                                <i class="fa fa-clock" style="margin-right: 5px;"></i> Coming Soon
                            </div>
                            <div style="color: #dc3545; font-size: 13px; font-weight: 500;">
                                Version 2.0.0
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Minimum Purchase Promotion Card -->
            <div class="col-md-4">
                <div class="card" style="border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;">
                    <div class="card-body" style="padding: 25px;">
                        <div style="display: flex; align-items: center; margin-bottom: 20px;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #fad961 0%, #f76b1c 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fa fa-shopping-cart" style="color: #fff; font-size: 28px;"></i>
                            </div>
                            <div style="flex: 1;">
                                <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #2c3e50;">Minimum Purchase Promotion</h3>
                            </div>
                        </div>
                        <p style="color: #6c757d; font-size: 14px; line-height: 1.6; margin-bottom: 20px;">
                            Offer discounts or free items when customers reach a minimum purchase amount. Great for increasing average order value.
                        </p>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;">
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Minimum Amount</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Free Shipping</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Order Value</span>
                        </div>
                        <button class="btn coming-soon-btn" 
                           style="width: 100%; background: linear-gradient(135deg, #fad961 0%, #f76b1c 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; cursor: pointer;">
                            <i class="fa fa-clock"></i> Coming Soon
                        </button>
                        <div style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; color: #17a2b8; font-size: 13px; font-weight: 500;">
                                <i class="fa fa-clock" style="margin-right: 5px;"></i> Coming Soon
                            </div>
                            <div style="color: #dc3545; font-size: 13px; font-weight: 500;">
                                Version 2.0.0
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Coupon Code Promotion Card -->
            <div class="col-md-4">
                <div class="card" style="border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;">
                    <div class="card-body" style="padding: 25px;">
                        <div style="display: flex; align-items: center; margin-bottom: 20px;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fa fa-ticket-alt" style="color: #fff; font-size: 28px;"></i>
                            </div>
                            <div style="flex: 1;">
                                <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #2c3e50;">Coupon Code Promotion</h3>
                            </div>
                        </div>
                        <p style="color: #6c757d; font-size: 14px; line-height: 1.6; margin-bottom: 20px;">
                            Create discount codes that customers can enter at checkout. Perfect for marketing campaigns and special promotions.
                        </p>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;">
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Coupon Codes</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Usage Limits</span>
                            <span style="background: #f8f9fa; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Marketing</span>
                        </div>
                        <button class="btn coming-soon-btn" 
                           style="width: 100%; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); border: none; padding: 12px; font-weight: 600; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; cursor: pointer;">
                            <i class="fa fa-clock"></i> Coming Soon
                        </button>
                        <div style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; color: #17a2b8; font-size: 13px; font-weight: 500;">
                                <i class="fa fa-clock" style="margin-right: 5px;"></i> Coming Soon
                            </div>
                            <div style="color: #dc3545; font-size: 13px; font-weight: 500;">
                                Version 2.0.0
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle clicks on "Coming Soon" buttons
        const comingSoonButtons = document.querySelectorAll('.coming-soon-btn');
        comingSoonButtons.forEach(function(button) {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                showComingSoonMessage();
            });
        });

        function showComingSoonMessage() {
            // Check if toastr is available (common in Laravel apps)
            if (typeof toastr !== 'undefined') {
                toastr.info('This feature will be available soon in the next update!', 'Coming Soon', {
                    timeOut: 5000,
                    progressBar: true,
                    positionClass: 'toast-top-right'
                });
            } else if (typeof Swal !== 'undefined') {
                // Use SweetAlert if available
                Swal.fire({
                    icon: 'info',
                    title: 'Coming Soon',
                    text: 'This feature will be available soon in the next update!',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#17a2b8'
                });
            } else {
                // Fallback to alert
                alert('This feature will be available soon in the next update!');
            }
        }
    });
</script>

@endsection