

<?php $__env->startSection('title', 'Select Products to Promote'); ?>

<?php $__env->startSection('content'); ?>
<div class="page-header">
    <div>
        <h4 class="page-title">Select Products to Promote</h4>
        <p class="text-muted mb-0">Package: <strong><?php echo e($package->name); ?></strong> - Select up to <?php echo e($package->max_products); ?> <?php echo e(Str::plural('product', $package->max_products)); ?></p>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-bottom p-4">
                <h5 class="mb-0 fw-bold">Your Products</h5>
            </div>
            <div class="card-body p-4">
                <form action="<?php echo e(route('seller.promotions.checkout', $package)); ?>" method="POST" id="promotionForm">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="currency" value="<?php echo e($currency); ?>">

                    <?php if($products->count() == 0): ?>
                        <div class="alert alert-warning rounded-3">
                            <i class="bi bi-exclamation-triangle me-2"></i>You don't have any products yet. 
                            <a href="<?php echo e(route('seller.products.create')); ?>" class="fw-bold">Create a product first</a>.
                        </div>
                    <?php else: ?>
                        <div class="row g-3">
                            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="col-md-6">
                                    <div class="card product-card border rounded-4 h-100" style="cursor: pointer;">
                                        <div class="card-body p-3">
                                            <div class="form-check custom-checkbox">
                                                <input class="form-check-input product-checkbox" type="checkbox" 
                                                       name="product_ids[]" value="<?php echo e($product->id); ?>" 
                                                       id="product_<?php echo e($product->id); ?>"
                                                       data-max="<?php echo e($package->max_products); ?>">
                                                <label class="form-check-label w-100 ps-2" for="product_<?php echo e($product->id); ?>">
                                                    <div class="d-flex align-items-center">
                                                        <img src="<?php echo e(!empty($product->images_json) && isset($product->images_json[0]['thumbnail']) ? asset('storage/' . $product->images_json[0]['thumbnail']) : 'https://placehold.co/80?text=No+Image'); ?>" 
                                                             class="rounded-3 me-3 shadow-sm" style="width: 50px; height: 50px; object-fit: cover;" 
                                                             alt="<?php echo e($product->name); ?>">
                                                        <div class="overflow-hidden">
                                                            <h6 class="mb-0 text-dark fw-bold text-truncate" style="font-size: 0.9rem;"><?php echo e($product->name); ?></h6>
                                                            <p class="mb-0 small text-muted"><?php echo e($currency == 'INR' ? '₹' : '$'); ?><?php echo e(number_format($product->price, 2)); ?></p>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>

                        <div class="mt-4 pt-3 border-top d-flex gap-3">
                            <button type="submit" class="btn btn-primary-gradient px-5 py-2 rounded-3 shadow-sm" id="submitBtn" disabled>
                                <i class="bi bi-credit-card me-2"></i>Proceed to Checkout
                            </button>
                            <a href="<?php echo e(route('seller.promotions.packages')); ?>?currency=<?php echo e($currency); ?>" class="btn btn-light border px-4 py-2 rounded-3">
                                Back to Packages
                            </a>
                        </div>
                    <?php endif; ?>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 sticky-top" style="top: 100px; z-index: 10;">
            <div class="card-header border-0 p-4" style="background: <?php echo e($package->badge_color); ?>;">
                <h5 class="mb-0 text-white fw-bold">Package Summary</h5>
            </div>
            <div class="card-body p-4">
                <h4 class="fw-bold text-dark mb-3"><?php echo e($package->name); ?></h4>
                <div class="list-group list-group-flush mb-4">
                    <div class="list-group-item px-0 d-flex justify-content-between border-0">
                        <span class="text-muted">Price:</span>
                        <strong class="text-dark"><?php echo e($currency == 'INR' ? '₹' : '$'); ?><?php echo e(number_format($currency == 'INR' ? $package->price : $package->price_usd, 0)); ?></strong>
                    </div>
                    <div class="list-group-item px-0 d-flex justify-content-between border-0">
                        <span class="text-muted">Duration:</span>
                        <strong class="text-dark"><?php echo e($package->duration_days); ?> days</strong>
                    </div>
                    <div class="list-group-item px-0 d-flex justify-content-between border-0">
                        <span class="text-muted">Max Products:</span>
                        <strong class="text-dark"><?php echo e($package->max_products); ?></strong>
                    </div>
                    <div class="list-group-item px-0 d-flex justify-content-between border-0">
                        <span class="text-muted">Page Position:</span>
                        <strong class="text-dark">Page <?php echo e($package->page_position); ?></strong>
                    </div>
                </div>
                <div class="alert alert-info border-0 rounded-3 mb-0" style="background: #f0f7ff; color: #00529b;">
                    <div class="d-flex gap-2">
                        <i class="bi bi-info-circle-fill"></i>
                        <small style="font-size: 0.85rem; line-height: 1.4;">
                            Your products will be promoted for <strong><?php echo e($package->duration_days); ?> days</strong> starting immediately after successful payment.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.product-card {
    transition: all 0.2s ease;
}
.product-card:hover {
    border-color: #f97316 !important;
    background-color: #fffaf0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.08) !important;
}
.product-checkbox:checked ~ label h6 {
    color: #f97316 !important;
}
.product-checkbox:checked + div.card {
     border-color: #f97316 !important;
}
.custom-checkbox .form-check-input:checked {
    background-color: #f97316;
    border-color: #f97316;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.product-checkbox');
    const submitBtn = document.getElementById('submitBtn');
    const maxProducts = parseInt(checkboxes[0]?.dataset.max || 1);

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const checkedCount = document.querySelectorAll('.product-checkbox:checked').length;
            
            // Disable/enable checkboxes based on max limit
            if (checkedCount >= maxProducts) {
                checkboxes.forEach(cb => {
                    if (!cb.checked) {
                        cb.disabled = true;
                        cb.closest('.product-card').style.opacity = '0.5';
                    }
                });
            } else {
                checkboxes.forEach(cb => {
                    cb.disabled = false;
                    cb.closest('.product-card').style.opacity = '1';
                });
            }

            // Enable submit button if at least one selected
            submitBtn.disabled = checkedCount === 0;
        });

        // Make card clickable
        checkbox.closest('.product-card').addEventListener('click', function(e) {
            if (e.target !== checkbox) {
                if (!checkbox.disabled || checkbox.checked) {
                    checkbox.checked = !checkbox.checked;
                    checkbox.dispatchEvent(new Event('change'));
                }
            }
        });
    });
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.seller', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/seller/promotions/select-product.blade.php ENDPATH**/ ?>