@extends('layouts.seller')

@section('title', 'Select Products to Promote')

@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Select Products to Promote</h4>
        <p class="text-muted mb-0">Package: <strong>{{ $package->name }}</strong> - Select up to {{ $package->max_products }} {{ 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="{{ route('seller.promotions.checkout', $package) }}" method="POST" id="promotionForm">
                    @csrf
                    <input type="hidden" name="currency" value="{{ $currency }}">

                    @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="{{ route('seller.products.create') }}" class="fw-bold">Create a product first</a>.
                        </div>
                    @else
                        <div class="row g-3">
                            @foreach($products as $product)
                                <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="{{ $product->id }}" 
                                                       id="product_{{ $product->id }}"
                                                       data-max="{{ $package->max_products }}">
                                                <label class="form-check-label w-100 ps-2" for="product_{{ $product->id }}">
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ !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="{{ $product->name }}">
                                                        <div class="overflow-hidden">
                                                            <h6 class="mb-0 text-dark fw-bold text-truncate" style="font-size: 0.9rem;">{{ $product->name }}</h6>
                                                            <p class="mb-0 small text-muted">{{ $currency == 'INR' ? '₹' : '$' }}{{ number_format($product->price, 2) }}</p>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </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="{{ route('seller.promotions.packages') }}?currency={{ $currency }}" class="btn btn-light border px-4 py-2 rounded-3">
                                Back to Packages
                            </a>
                        </div>
                    @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: {{ $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">{{ $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">{{ $currency == 'INR' ? '₹' : '$' }}{{ 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">{{ $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">{{ $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 {{ $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>{{ $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>
@endsection