@extends(getTemplate() . '.panel.layouts.panel_layout')

@push('styles_top')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
<style>
    .StripeElement {
        background-color: #2c3034 !important;
    }
    .StripeElement--focus {
        border-color: #0d6efd !important;
    }
    .StripeElement--invalid {
        border-color: #dc3545 !important;
    }
    .price-breakdown-item {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .price-breakdown-item:last-child {
        border-bottom: none;
    }
    .total-price {
        font-size: 1.25rem;
        font-weight: bold;
    }
    .seat-slider-container {
        padding: 20px 10px;
    }
    #seat-slider {
        height: 6px;
        margin: 30px 0;
    }
    .noUi-handle {
        height: 18px !important;
        width: 18px !important;
        border-radius: 50% !important;
        right: -9px !important;
        top: -7px !important;
    }
    .noUi-handle:before, .noUi-handle:after {
        display: none;
    }
    .discount-tier {
        transition: opacity 0.3s ease;
    }
    .discount-tier.inactive {
        opacity: 0.5;
    }
    .discount-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .current-value-label {
        text-align: center;
        font-size: 1.2rem;
        margin: 15px 0;
    }
    .slider-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        color: #6c757d;
    }
</style>
@endpush

@section('content')
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8">
                <div class="card rounded border-dark border-2 shadow-sm">
                    <div class="card-header bg-dark p-4 border-bottom border-dark">
                        <h4 class="mb-0">Subscribe to {{ $package->title }}</h4>
                    </div>

                    <div class="card-body p-4">
                        <div class="package-summary mb-4">
                            <!-- Seat Selection -->
                            <div class="form-group mb-4">
                                <label class="mb-2">Select Number of Seats</label>
                                <div class="seat-slider-container">
                                    <div id="seat-slider"></div>
                                    <div class="slider-labels">
                                        <span>1</span>
                                        <span>100</span>
                                    </div>
                                    <div class="current-value-label">
                                        <span id="seat-display">1</span> seats
                                    </div>
                                </div>
                            </div>

                            <!-- Price Breakdown -->
                            <div id="price-breakdown" class="mb-4">
                                <div class="price-breakdown-item d-flex justify-content-between align-items-center">
                                    <span>Base Price per Seat</span>
                                    <span>{{ handlePrice($package->price) }}</span>
                                </div>

                                <div class="price-breakdown-item d-flex justify-content-between align-items-center">
                                    <span>Number of Seats</span>
                                    <span id="seat-count-display">1</span>
                                </div>

                                <div class="price-breakdown-item d-flex justify-content-between align-items-center">
                                    <span>Volume Discount</span>
                                    <span id="discount-display" class="text-success">0%</span>
                                </div>

                                <div class="price-breakdown-item d-flex justify-content-between align-items-center">
                                    <span>Price per Seat After Discount</span>
                                    <span id="discounted-price-display">{{ handlePrice($package->price) }}</span>
                                </div>

                                <div class="border-top border-dark my-3"></div>

                                <div class="price-breakdown-item d-flex justify-content-between align-items-center">
                                    <span class="total-price">Total {{ ucfirst($package->billing_period) }} Charge</span>
                                    <span class="total-price" id="total-price-display">{{ handlePrice($package->price) }}</span>
                                </div>

                                <div class="price-breakdown-item d-flex justify-content-between align-items-center">
                                    <span>Billing Period</span>
                                    <span>{{ ucfirst($package->billing_period) }}</span>
                                </div>
                            </div>

                            <!-- Volume Discount Tiers Info -->
                            <div class="mt-4 bg-dark p-3 rounded">
                                <h6 class="mb-3">Volume Discounts:</h6>
                                <div class="small">
                                    <div class="mb-1 discount-tier" id="tier-1">
                                        <span class="discount-indicator bg-muted"></span>
                                        1-19 seats: Standard pricing
                                    </div>
                                    <div class="mb-1 discount-tier" id="tier-2">
                                        <span class="discount-indicator bg-success"></span>
                                        20-40 seats: 5% discount
                                    </div>
                                    <div class="mb-1 discount-tier" id="tier-3">
                                        <span class="discount-indicator bg-success"></span>
                                        41-60 seats: 10% discount
                                    </div>
                                    <div class="mb-1 discount-tier" id="tier-4">
                                        <span class="discount-indicator bg-success"></span>
                                        61+ seats: 15% discount
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="border-top border-dark my-4"></div>

                        <!-- Payment Form -->
                        <form id="subscription-form" class="mt-4">
                            @csrf
                            <input type="hidden" name="package_id" value="{{ $package->id }}">
                            <input type="hidden" id="seat-count-input" name="seat_count" value="1">
                            
                            <div class="form-group mb-4">
                                <label class="mb-2">Card Details</label>
                                <div id="card-element" class="form-control bg-dark border-dark text-light p-3" style="min-height: 45px;"></div>
                                <div id="card-errors" class="invalid-feedback d-block" role="alert"></div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-lg w-100" id="submit-button">
                                <span id="spinner" class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
                                Subscribe Now
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts_bottom')
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Initialize Stripe
const stripe = Stripe('{{ $stripe_key }}');
const elements = stripe.elements({
    appearance: {
        theme: 'night',
        variables: {
            colorPrimary: '#0d6efd',
            colorBackground: '#212529',
            colorText: '#ffffff',
            colorDanger: '#dc3545',
            fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
        },
        rules: {
            '.Input': {
                border: 'none',
                backgroundColor: '#2c3034',
            },
            '.Input:focus': {
                border: 'none',
                boxShadow: 'none',
            },
            '.Label': {
                color: '#ffffff',
            }
        }
    }
});

// Initialize slider
const slider = document.getElementById('seat-slider');
const basePrice = {{ $package->price }};

noUiSlider.create(slider, {
    start: [1],
    connect: true,
    step: 1,
    range: {
        'min': 1,
        'max': 100
    },
    format: {
        to: function(value) {
            return Math.round(value);
        },
        from: function(value) {
            return Math.round(value);
        }
    }
});

// Initialize Stripe card element
const cardElementOptions = {
    style: {
        base: {
            fontSize: '16px',
            color: '#ffffff',
            '::placeholder': {
                color: '#6c757d',
            },
        },
    },
    hidePostalCode: false
};
const cardElement = elements.create('card', cardElementOptions);
cardElement.mount('#card-element');

// Format price helper function
function formatPrice(amount) {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    }).format(amount);
}

// Update pricing when slider changes
slider.noUiSlider.on('update', function(values, handle) {
    const seatCount = parseInt(values[handle]);
    document.getElementById('seat-count-input').value = seatCount;
    document.getElementById('seat-display').textContent = seatCount;
    document.getElementById('seat-count-display').textContent = seatCount;
    updatePricing(seatCount);
});

function updatePricing(seatCount) {
    // Reset all tiers
    document.querySelectorAll('.discount-tier').forEach(tier => {
        tier.classList.add('inactive');
    });

    // Calculate discount and highlight appropriate tier
    let discount = 0;
    if (seatCount >= 61) {
        discount = 15;
        document.getElementById('tier-4').classList.remove('inactive');
    } else if (seatCount >= 41) {
        discount = 10;
        document.getElementById('tier-3').classList.remove('inactive');
    } else if (seatCount >= 20) {
        discount = 5;
        document.getElementById('tier-2').classList.remove('inactive');
    } else {
        document.getElementById('tier-1').classList.remove('inactive');
    }

    const discountedPrice = basePrice * ((100 - discount) / 100);
    const totalPrice = discountedPrice * seatCount;

    // Update display
    document.getElementById('discount-display').textContent = `${discount}%`;
    document.getElementById('discounted-price-display').textContent = formatPrice(discountedPrice);
    document.getElementById('total-price-display').textContent = formatPrice(totalPrice);
}

// Handle form submission
const form = document.getElementById('subscription-form');
const submitButton = document.getElementById('submit-button');
const spinner = document.getElementById('spinner');
const cardErrors = document.getElementById('card-errors');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    submitButton.disabled = true;
    spinner.classList.remove('d-none');
    cardErrors.textContent = '';

    try {
        const { paymentMethod, error } = await stripe.createPaymentMethod({
            type: 'card',
            card: cardElement,
        });

        if (error) {
            throw new Error(error.message);
        }

        const response = await fetch('{{ route("panel.subscription.process") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                payment_method: paymentMethod.id,
                package_id: '{{ $package->id }}',
                seat_count: document.getElementById('seat-count-input').value
            })
        });

        const result = await response.json();

        if (result.error) {
            throw new Error(result.error);
        }

        const { error: confirmError } = await stripe.confirmCardPayment(
            result.client_secret
        );

        if (confirmError) {
            throw new Error(confirmError.message);
        }

        // Show success message
        await Swal.fire({
            title: 'Success!',
            html: `
                <div class="text-left">
                    <p>Your subscription has been activated successfully.</p>
                    <p class="mt-2">An invoice has been sent to your email.</p>
                    ${result.invoice?.url ? `
                        <div class="mt-3">
                            <a href="${result.invoice.url}" target="_blank" class="btn btn-sm btn-primary">
                                View Invoice
                            </a>
                        </div>
                    ` : ''}
                </div>
            `,
            icon: 'success'
        });

        window.location.href = '{{ route("panel.subscription.packages") }}';

    } catch (error) {
        cardErrors.textContent = error.message;
        submitButton.disabled = false;
        spinner.classList.add('d-none');
    }
});

// Handle real-time card validation
cardElement.on('change', function(event) {
    if (event.error) {
        cardErrors.textContent = event.error.message;
    } else {
        cardErrors.textContent = '';
    }
});

// Initialize pricing on load
updatePricing(1);
</script>
@endpush