@extends('website.partials.app')
@section('canonical', route('website.plans'))
@push('css')
<style>
/* Full-page loader for address check → plans flow */
.address-check-loader {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
}
.address-check-loader--visible {
    display: flex;
}
/* Address check loader (three symbols: circle, triangle, rect) */
.address-check-loader .loader-scene {
    width: 100%;
    max-width: 320px;
    min-height: 140px;
    background: transparent;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.address-check-loader .loader-scene .loader-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.address-check-loader .loader-scene .loader {
    --path: #2F3545;
    --dot: #5628EE;
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
    display: inline-block;
}
.address-check-loader .loader-scene .loader:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: addressLoaderDotCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader svg {
    display: block;
    width: 100%;
    height: 100%;
}
.address-check-loader .loader-scene .loader svg circle,
.address-check-loader .loader-scene .loader svg polygon,
.address-check-loader .loader-scene .loader svg rect {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.address-check-loader .loader-scene .loader-circle:before {
    animation: addressLoaderDotCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-circle svg circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: addressLoaderPathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-triangle {
    width: 48px;
}
.address-check-loader .loader-scene .loader-triangle:before {
    left: 21px;
    transform: translate(-10px, -18px);
    animation: addressLoaderDotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-triangle svg polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: addressLoaderPathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-rect:before {
    animation: addressLoaderDotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-rect svg rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: addressLoaderPathRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes addressLoaderPathCircle {
    25% { stroke-dashoffset: 125; }
    50% { stroke-dashoffset: 175; }
    75% { stroke-dashoffset: 225; }
    100% { stroke-dashoffset: 275; }
}
@keyframes addressLoaderDotCircle {
    25% { transform: translate(0, 0); }
    50% { transform: translate(18px, -18px); }
    75% { transform: translate(0, -36px); }
    100% { transform: translate(-18px, -18px); }
}
@keyframes addressLoaderPathTriangle {
    33% { stroke-dashoffset: 74; }
    66% { stroke-dashoffset: 147; }
    100% { stroke-dashoffset: 221; }
}
@keyframes addressLoaderDotTriangle {
    33% { transform: translate(0, 0); }
    66% { transform: translate(10px, -18px); }
    100% { transform: translate(-10px, -18px); }
}
@keyframes addressLoaderPathRect {
    25% { stroke-dashoffset: 64; }
    50% { stroke-dashoffset: 128; }
    75% { stroke-dashoffset: 192; }
    100% { stroke-dashoffset: 256; }
}
@keyframes addressLoaderDotRect {
    25% { transform: translate(0, 0); }
    50% { transform: translate(18px, -18px); }
    75% { transform: translate(0, -36px); }
    100% { transform: translate(-18px, -18px); }
}
.address-check-loader .loader-scene .loader-label {
    position: relative;
    bottom: auto;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
}
.address-check-loader .loader-scene .loader-label span:nth-child(1) { color: #F7941D; }
.address-check-loader .loader-scene .loader-label span:nth-child(2) { color: #374151; }
.address-check-loader .loader-scene .loader-label span:nth-child(3) { color: #00B5CC; }
</style>
@endpush
@section('content')
    <section class="plans-result-section" data-csrf="{{ csrf_token() }}" data-dual-mode="{{ ($dualMode ?? false) ? '1' : '0' }}" data-loc-nbn="{{ $loc_nbn ?? '' }}" data-loc-cf="{{ $loc_cf ?? '' }}" data-default-tab="{{ $defaultTab ?? 'nbn' }}">
        <div class="container py-5">
            <div class="text-center mb-4">
                <h1 class="section-title">Plans for your address</h1>
                @if($address)
                    <p class="plans-result-address" id="plansAddressText"><i class="fas fa-map-marker-alt me-2"></i>{{ $address }}</p>
                @endif
                @if(!($dualMode ?? false))
                    <p class="plans-result-type">
                        <span class="plans-result-type-badge">{{ $type === 'community_fibre' ? 'Community Fibre' : 'NBN' }}</span>
                    </p>
                @endif
                @if($dualMode ?? false)
                    <div class="plans-tabs-wrap mb-4">
                        <div class="pricing-toggle-wrap d-inline-block">
                            <div class="pricing-toggle">
                                <button type="button" class="toggle-btn plans-tab-btn" id="plansTabNbn" data-type="nbn">NBN</button>
                                <button type="button" class="toggle-btn plans-tab-btn" id="plansTabCf" data-type="community_fibre">Community Fibre</button>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="position-relative min-h-200">
                <div id="plansLoading" class="packages-loading mb-5" style="display: flex;">
                    <div class="packages-loading-spinner"></div>
                   
                </div>
                <div id="plansCarousel" class="products-carousel-wrapper" style="display: none;">
                    <button type="button" class="products-carousel-btn products-carousel-btn--prev" aria-label="Previous plans" style="display: none;"><i class="fas fa-chevron-left"></i></button>
                    <div class="products-carousel-viewport">
                        <div class="products-carousel-track align-items-stretch"></div>
                    </div>
                    <button type="button" class="products-carousel-btn products-carousel-btn--next" aria-label="Next plans" style="display: none;"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div id="plansEmpty" class="plans-no-products" style="display: none;">
                    <div class="plans-no-products-icon"><i class="fas fa-exclamation-circle"></i></div>
                    <h2 class="plans-no-products-title">No plans found</h2>
                    <p class="plans-no-products-message" id="plansEmptyMessage">We couldn't find any plans for your address at the moment. Please try another address or contact our team for help.</p>
                </div>
            </div>
            <div style="display: flex;justify-content: center;align-items: center;gap: 10px" class="text-center mt-4 plans-btn">
                <a href="{{ route('home') }}" style="text-decoration: none;" class="checkout-btn"><i class="fas fa-arrow-left me-2"></i> Check another address</a>
                <form id="checkoutSessionForm" method="POST" action="{{ route('website.checkout.set-session') }}" style="display: inline;">
                    @csrf
                    <input type="hidden" name="product_id" id="checkoutSessionProductId" value="">
                    <input type="hidden" name="type" id="checkoutSessionType" value="">
                    <input type="hidden" name="description" id="checkoutSessionDescription" value="">
                    <input type="hidden" name="price" id="checkoutSessionPrice" value="">
                    <input type="hidden" name="address" id="checkoutSessionAddress" value="">
                    <input type="hidden" name="loc" id="checkoutSessionLoc" value="">
                    <button type="submit" id="plansCheckoutBtn" class="btn-gives text-decoration-none">
                        <i class="fas fa-shopping-cart me-2"></i> Checkout
                    </button>
                </form>
            </div>
        </div>
    </section>
    {{-- <div id="plansCheckoutBar" class="checkout-bar" aria-hidden="true">
        <span class="checkout-bar-label">Plan selected</span>
        
    </div> --}}

@push('scripts')
<script>
(function () {
    var nbnUrl = @json($nbnProductsUrl);
    var communityFibreUrl = @json($communityFibreProductsUrl);
    var productsUrl = @json($productsUrl ?? '');
    var initialProducts = @json($initialProducts ?? []);
    var initialProductsNbn = @json($initialProductsNbn ?? []);
    var initialProductsCf = @json($initialProductsCf ?? []);
    var dualMode = @json($dualMode ?? false);
    var defaultTab = @json($defaultTab ?? 'nbn');
    var locNbn = @json($loc_nbn ?? '');
    var locCf = @json($loc_cf ?? '');
    var type = @json($type);
    var tierLabel = type === 'community_fibre' ? 'Community Fibre' : 'NBN';
    var url = productsUrl;
    var setQualificationSessionUrl = @json(route('website.plans.set-qualification-session'));
    var pageLoc = @json($loc ?? '');
    var pageAddress = @json($address);
    var pageAddressNbn = @json($addressNbn ?? $address ?? '');
    var pageAddressCf = @json($addressCf ?? $address ?? '');
    var pageType = type;
    var currentTabType = defaultTab;
    var currentTabLoc = (defaultTab === 'community_fibre' ? locCf : locNbn) || pageLoc;
    var plansHeaderAddress = pageAddress || '';
    var selectedProductId = @json($selectedProductId ?? '');
    var selectedType = @json($selectedType ?? '');
    var checkoutFormBound = false;

    function escapeHtml(text) {
        if (!text) return '';
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    function parseAdditionalInfoFeatures(p) {
        var ai = p && p.additional_info;
        if (!ai || typeof ai !== 'object') ai = {};
        return {
            data_limit: ai.data_limit != null ? String(ai.data_limit).trim() : '',
            fee: ai.fee != null ? String(ai.fee).trim() : '',
            contract: ai.contract != null ? String(ai.contract).trim() : ''
        };
    }
    function buildPlanCardHtml(p, label, cardType) {
        var price = typeof p.sale_price === 'number' ? p.sale_price : parseFloat(p.sale_price) || 0;
        var speed = (p.service_speed || '').toString();
        var tech = (p.technology || '').toString().trim();
        var productId = (p.product_id != null && p.product_id !== '') ? p.product_id : ((p.id != null) ? p.id : '');
        var desc = (p.description || 'Plan').toString();
        var typeAttr = (cardType && cardType !== '') ? ' data-type="' + escapeHtml(cardType) + '"' : '';
        var aiF = parseAdditionalInfoFeatures(p);
        return '<div class="plan-card h-100 position-relative" style="padding-bottom: 70px;" data-product-id="' + escapeHtml(String(productId)) + '" data-description="' + escapeHtml(desc) + '" data-price="' + escapeHtml(String(Math.round(price))) + '"' + typeAttr + '>' +
            '<div class="text-center mb-2 mt-2">' +
            '<div class="plan-name">' + escapeHtml(p.description || 'Plan') + '</div>' +
            '<div class="plan-tier">' + escapeHtml(label || speed || '') + '</div>' +
            '<div class="plan-price"><span class="dollar">$</span><span class="amount">' + Math.round(price) + '</span><span class="mo">/month</span></div>' +
            '</div>' +
            '<ul class="plan-features">' +
            (tech ? '<li><i class="fas fa-network-wired feat-icon-teal"></i> ' + escapeHtml(tech) + '</li>' : '') +
            (speed ? '<li><i class="fas fa-wifi feat-icon-teal"></i> ' + escapeHtml(speed) + '</li>' : '') +
            (aiF.data_limit ? '<li><i class="fas fa-infinity feat-icon-teal"></i> ' + escapeHtml(aiF.data_limit) + '</li>' : '') +
            (aiF.fee ? '<li><i class="fas fa-shield-alt feat-icon-teal"></i> ' + escapeHtml(aiF.fee) + '</li>' : '') +
            (aiF.contract ? '<li><i class="fas fa-lock-open feat-icon-teal"></i> ' + escapeHtml(aiF.contract) + '</li>' : '') +
            '</ul>' +
            '<button type="button" class="btn-select btn-select-outline w-75 d-flex justify-content-center position-absolute bottom-0 start-50 translate-middle-x mb-3">Select Plan</button>' +
            '</div>';
    }
    function updatePlansSelection(container, checkoutBar, selectedCard) {
        if (!container) return;
        var cards = container.querySelectorAll('.plan-card');
        cards.forEach(function (card) {
            var btn = card.querySelector('.btn-select');
            if (card === selectedCard) {
                card.classList.add('plan-card--selected');
                if (btn) { btn.classList.add('btn-select--selected'); btn.textContent = 'Selected'; }
            } else {
                card.classList.remove('plan-card--selected');
                if (btn) { btn.classList.remove('btn-select--selected'); btn.textContent = 'Select Plan'; }
            }
        });
        if (checkoutBar) checkoutBar.classList.toggle('is-visible', !!selectedCard);
        if (checkoutBar) checkoutBar.setAttribute('aria-hidden', selectedCard ? 'false' : 'true');
    }

    var loading = document.getElementById('plansLoading');
    var carousel = document.getElementById('plansCarousel');
    var empty = document.getElementById('plansEmpty');
    var addressCheckLoader = document.getElementById('addressCheckLoader');
    var carouselIndex = 0;
    var isMobile = window.innerWidth <= 767;
    var carouselNavBound = false;

    // Update mobile detection on resize only (no auto re-render / no auto scroll of carousel)
    window.addEventListener('resize', function() {
        isMobile = window.innerWidth <= 767;
    });

    function hideAddressCheckLoader() {
        if (addressCheckLoader) {
            addressCheckLoader.classList.remove('address-check-loader--visible');
            addressCheckLoader.setAttribute('aria-hidden', 'true');
        }
    }

    function updateCarouselNav(currentIndex, totalSlides) {
        var prev = carousel.querySelector('.products-carousel-btn--prev');
        var next = carousel.querySelector('.products-carousel-btn--next');
        if (totalSlides <= 1) {
            if (prev) prev.style.display = 'none';
            if (next) next.style.display = 'none';
            return;
        }
        if (prev) { prev.style.display = 'flex'; prev.classList.toggle('disabled', currentIndex === 0); }
        if (next) { next.style.display = 'flex'; next.classList.toggle('disabled', currentIndex >= totalSlides - 1); }
    }

    function goCarousel(direction) {
        var track = carousel.querySelector('.products-carousel-track');
        var slides = carousel.querySelectorAll('.products-carousel-slide');
        var total = slides.length;
        if (total <= 1) return;
        
        carouselIndex += direction;
        if (carouselIndex < 0) carouselIndex = 0;
        if (carouselIndex >= total) carouselIndex = total - 1;
        
        // Move by one slide: track width = total*100%, so one slide = (100/total)%
        var offsetPercent = total > 0 ? (carouselIndex * (100 / total)) : 0;
        track.style.transform = 'translateX(-' + offsetPercent + '%)';
        updateCarouselNav(carouselIndex, total);
    }

    // Touch/swipe support for mobile
    var touchStartX = 0;
    var touchEndX = 0;
    function handleTouchStart(e) {
        touchStartX = e.changedTouches[0].screenX;
    }
    function handleTouchEnd(e) {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    }
    function handleSwipe() {
        if (touchEndX < touchStartX - 50) {
            goCarousel(1); // Swipe left - next
        }
        if (touchEndX > touchStartX + 50) {
            goCarousel(-1); // Swipe right - previous
        }
    }
    function bindCarouselNavigation() {
        if (!carousel || carouselNavBound) return;
        carousel.addEventListener('click', function (e) {
            var prevBtn = e.target.closest('.products-carousel-btn--prev');
            var nextBtn = e.target.closest('.products-carousel-btn--next');
            if (prevBtn && !prevBtn.classList.contains('disabled')) {
                e.preventDefault();
                goCarousel(-1);
                return;
            }
            if (nextBtn && !nextBtn.classList.contains('disabled')) {
                e.preventDefault();
                goCarousel(1);
            }
        });
        carouselNavBound = true;
    }

    function renderProducts(products, options) {
        options = options || {};
        var label = options.tierLabel != null ? options.tierLabel : tierLabel;
        var cardType = options.cardType != null ? options.cardType : (dualMode ? currentTabType : pageType);
        if (loading) loading.style.display = 'none';
        hideAddressCheckLoader();
        if (!Array.isArray(products)) products = [];
        if (!products.length) {
            if (carousel) carousel.style.display = 'none';
            if (empty) {
                empty.style.display = 'block';
                var msgEl = document.getElementById('plansEmptyMessage');
                if (msgEl) msgEl.textContent = 'We couldn\'t find any ' + (label || '') + ' plans for your address at the moment. Please try another address or contact our team for help.';
            }
            var checkoutBtn = document.getElementById('plansCheckoutBtn');
            if (checkoutBtn) checkoutBtn.style.display = 'none';
            return;
        }
        if (empty) empty.style.display = 'none';
        if (carousel) {
            var track = carousel.querySelector('.products-carousel-track');
            if (!track) return;
            track.innerHTML = '';
            track.style.transform = '';
            carousel.style.display = 'block';
            var checkoutBtn = document.getElementById('plansCheckoutBtn');
            if (checkoutBtn) checkoutBtn.style.display = '';
            var plansPerSlide = isMobile ? 1 : (window.innerWidth <= 991 ? 2 : 4);
            var totalSlides = Math.ceil(products.length / plansPerSlide);
            var slideWidthPercent = totalSlides > 0 ? (100 / totalSlides) : 100;
            track.style.width = (totalSlides * 100) + '%';
            for (var i = 0; i < products.length; i += plansPerSlide) {
                var slide = document.createElement('div');
                slide.className = 'products-carousel-slide';
                slide.style.flex = '0 0 ' + slideWidthPercent + '%';
                slide.style.maxWidth = slideWidthPercent + '%';
                var chunk = products.slice(i, i + plansPerSlide);
                chunk.forEach(function (p) {
                    var col = document.createElement('div');
                    col.className = isMobile ? 'col-12' : (window.innerWidth <= 991 ? 'col-6' : 'col-md-3');
                    col.innerHTML = buildPlanCardHtml(p, label, cardType);
                    slide.appendChild(col);
                });
                track.appendChild(slide);
            }
            
            carouselIndex = 0;
            track.style.transform = 'translateX(0%)';
            updateCarouselNav(0, totalSlides);
            
            // Show carousel navigation on mobile for horizontal scrolling
            // No need to hide arrows - users can swipe or use arrows
            
            // Debug: Log product data to check prices
            console.log('Products loaded:', products);
            console.log('Plans per slide:', plansPerSlide, 'Total slides:', totalSlides);
            
            // Attach event listeners
            var checkoutBar = document.getElementById('plansCheckoutBar');
            carousel.querySelectorAll('.plan-card').forEach(function (card) {
                var btn = card.querySelector('.btn-select');
                if (!btn) return;
                btn.addEventListener('click', function () {
                    var isSelected = card.classList.contains('plan-card--selected');
                    updatePlansSelection(carousel, checkoutBar, isSelected ? null : card);
                });
            });
            
            bindCarouselNavigation();
            
            // Touch events for mobile
            if (track) {
                track.ontouchstart = handleTouchStart;
                track.ontouchend = handleTouchEnd;
            }
            
            var form = document.getElementById('checkoutSessionForm');
            if (form && !checkoutFormBound) {
                checkoutFormBound = true;
                form.addEventListener('submit', function (e) {
                    var sel = carousel.querySelector('.plan-card--selected');
                    if (!sel) {
                        e.preventDefault();
                        return;
                    }
                    document.getElementById('checkoutSessionProductId').value = sel.getAttribute('data-product-id') || '';
                    document.getElementById('checkoutSessionDescription').value = sel.getAttribute('data-description') || '';
                    document.getElementById('checkoutSessionPrice').value = sel.getAttribute('data-price') || '';
                    var selectedCheckoutType = dualMode ? (sel.getAttribute('data-type') || currentTabType) : (pageType || 'nbn');
                    document.getElementById('checkoutSessionType').value = selectedCheckoutType;
                    var selectedAddress = selectedCheckoutType === 'community_fibre' ? (pageAddressCf || pageAddress) : (pageAddressNbn || pageAddress);
                    var selectedLoc = selectedCheckoutType === 'community_fibre' ? (locCf || currentTabLoc || pageLoc) : (locNbn || currentTabLoc || pageLoc);
                    document.getElementById('checkoutSessionAddress').value = selectedAddress || '';
                    document.getElementById('checkoutSessionLoc').value = dualMode ? (selectedLoc || '') : (pageLoc || '');
                });
            }
            if (selectedProductId && selectedType) {
                var cards = carousel.querySelectorAll('.plan-card');
                for (var i = 0; i < cards.length; i++) {
                    var c = cards[i];
                    if ((c.getAttribute('data-product-id') || '') === String(selectedProductId) && (c.getAttribute('data-type') || '') === String(selectedType)) {
                        var checkoutBar = document.getElementById('plansCheckoutBar');
                        updatePlansSelection(carousel, checkoutBar, c);
                        break;
                    }
                }
            }
        }
    }

    function switchPlansTab(tabType) {
        currentTabType = tabType;
        currentTabLoc = (tabType === 'community_fibre' ? locCf : locNbn) || '';
        var products = (tabType === 'community_fibre' ? initialProductsCf : initialProductsNbn) || [];
        var label = tabType === 'community_fibre' ? 'Community Fibre' : 'NBN';
        var addressEl = document.getElementById('plansAddressText');
        if (addressEl) {
            addressEl.innerHTML = '<i class="fas fa-map-marker-alt me-2"></i>' + escapeHtml(plansHeaderAddress || '');
        }
        var tabNbn = document.getElementById('plansTabNbn');
        var tabCf = document.getElementById('plansTabCf');
        if (tabNbn) { tabNbn.classList.toggle('active', tabType === 'nbn'); }
        if (tabCf) { tabCf.classList.toggle('active', tabType === 'community_fibre'); }
        renderProducts(products, { tierLabel: label, cardType: tabType });
    }

    if (dualMode) {
        var tabNbn = document.getElementById('plansTabNbn');
        var tabCf = document.getElementById('plansTabCf');
        if (tabNbn) tabNbn.addEventListener('click', function () { switchPlansTab('nbn'); });
        if (tabCf) tabCf.addEventListener('click', function () { switchPlansTab('community_fibre'); });
        switchPlansTab(defaultTab);
    } else if (initialProducts && initialProducts.length > 0) {
        renderProducts(initialProducts);
    } else if (url) {
        fetch(url)
            .then(function (res) { return res.json(); })
            .then(function (data) {
                var products = (data && data.products) ? data.products : [];
                if (data && (data.sq_uid || pageLoc) && setQualificationSessionUrl) {
                    var body = {};
                    if (data.sq_uid) body.sq_uid = data.sq_uid;
                    if (pageLoc) body.loc = pageLoc;
                    if (Object.keys(body).length) {
                        var section = document.querySelector('.plans-result-section');
                        var csrf = section ? section.getAttribute('data-csrf') : '';
                        fetch(setQualificationSessionUrl, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf || '' },
                            body: JSON.stringify(body)
                        });
                    }
                }
                renderProducts(products);
            })
            .catch(function () {
                if (loading) loading.style.display = 'none';
                if (empty) empty.style.display = 'block';
                hideAddressCheckLoader();
            });
    } else {
        if (loading) loading.style.display = 'none';
        if (empty) empty.style.display = 'block';
    }
})();
</script>
@endpush
@endsection