<?php
/**
 * Updated Pay Bill & Payment Instructions Page
 * Removed Preloader, kept all other styles and functionalities.
 */

// Header inclusion
include 'header.php'; 
?>
    <title>বিল পেমেন্ট গাইড - ইন্টারনেট বিল</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        .reg-hero-banner {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/files/bill/Gemini_Generated_Image_gisalr9isalr9isal.webp');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>

<section class="reg-hero-banner" style="padding: 0px 0px 60px 0px; position: relative;">
    <div class="hero-content">
        <h1>সহজ পেমেন্ট গাইড</h1>
        <p>আমাদের ডিজিটাল পেমেন্ট সিস্টেমের মাধ্যমে আপনার ইন্টারনেট বিল পরিশোধ করার সঠিক নিয়মাবলী দেখে নিন।</p>
        <span style="display: inline-flex; gap: 10px;">
            <p style="background-color: rgb(255 255 255 / 0.1); font-size: 0.75rem; width: fit-content; border-radius: 20px; padding: 2px 10px; border: 1px solid rgb(255 255 255 / 0.2); margin: 0 auto;">
                <i class="fas fa-shield-alt" style="color: rgb(59 130 246 / var(--tw-text-opacity, 1));"></i> ১০০% নিরাপদ</p>
            <p style="background-color: rgb(255 255 255 / 0.1); font-size: 0.75rem; width: fit-content; border-radius: 20px; padding: 2px 10px; border: 1px solid rgb(255 255 255 / 0.2); margin: 0 auto;"><i class="fas fa-bolt" style="color: rgb(250 204 21 / var(--tw-text-opacity, 1));"></i> দ্রুত পেমেন্ট
            </p>
        </span>
    </div>
    
    <div class="divider-bottom">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z" fill="var(--white)"></path>
        </svg>
    </div>
</section>

<section style="padding: 60px 0px; margin-top: 50px; text-align: center; background: var(--white); position: relative;">
    <main class="container reveal up">
        <!-- Tab Buttons -->
        <div>
            <button id="btn-paybill" onclick="switchTab('paybill')" class="tab-btn-pay-bill active">
                <i class="fas fa-file-invoice-dollar mr-2"></i> পে বিল
            </button>
            <button id="btn-payment" onclick="switchTab('payment')" class="tab-btn-payment">
                <i class="fas fa-qrcode mr-2"></i> পেমেন্ট
            </button>
        </div>

        <div class="relative">
            <!-- Pay Bill Section -->
            <div id="section-paybill">
                <div class="text-center"> 
                    <span style="color: var(--primary-color);">অ্যাপ পদ্ধতি</span>
                    <h2>পে বিল করার নিয়ম</h2>
                </div>

                <div class="slider-container" id="slider-paybill">
                    <div class="pay-nav-btn pay-prev-btn"><i class="fas fa-chevron-left"></i></div>
                    <div class="pay-nav-btn pay-next-btn"><i class="fas fa-chevron-right"></i></div>
                    <div class="slider-wrapper">
                        <?php 
                        $paySteps = [
                            ["অ্যাপে প্রবেশ", "অ্যাপের হোম স্ক্রিন থেকে 'পে বিল' আইকনটি সিলেক্ট করুন।", "/assets/files/bill/pay-bill-1.webp"],
                            ["প্রতিষ্ঠানের ধরন", "'প্রতিষ্ঠানের ধরন' থেকে 'ইন্টারনেট' আইকনটি বেছে নিন।", "/assets/files/bill/pay-bill-2.webp"],
                            ["সার্ভিস প্রোভাইডার", "সার্চ বক্সে আপনার ইন্টারনেট কোম্পানির নাম লিখে সার্চ করুন।", "/assets/files/bill/pay-bill-3.webp"],
                            ["আইডি ও নম্বর", "আপনার সাবস্ক্রাইবার আইডি এবং কন্টাক্ট নম্বর সঠিকভাবে লিখুন।", "/assets/files/bill/pay-bill-4.webp"],
                            ["বিলের পরিমাণ", "বিলের টাকার পরিমাণ লিখুন অথবা প্যাকেজ অনুযায়ী সিলেক্ট করুন।", "/assets/files/bill/pay-bill-5.webp"],
                            ["তথ্য যাচাই", "সবকিছু ঠিক আছে কিনা দেখে নিয়ে 'পরবর্তী ধাপে যান' এ ক্লিক করুন।", "/assets/files/bill/pay-bill-6.webp"],
                            ["পিন নম্বর দিন", "আপনার অ্যাকাউন্টের পিন নম্বর দিয়ে কনফার্ম করুন।", "/assets/files/bill/pay-bill-7.webp"],
                            ["ট্যাপ করে ধরুন", "পে বিল সম্পন্ন করতে নিচের অংশে কিছুক্ষণ ট্যাপ করে ধরে রাখুন।", "/assets/files/bill/pay-bill-8.webp"],
                            ["পেমেন্ট সফল", "আপনার বিল সফলভাবে জমা হয়েছে। ট্রানজেকশন আইডিটি সংরক্ষণ করুন।", "/assets/files/bill/pay-bill-9.webp"]
                        ];
                        foreach($paySteps as $index => $step): 
                            $isLast = ($index === count($paySteps) - 1);
                        ?>
                        <div class="slider-item">
                            <div class="instruction-card-pay-bill">
                                <div class="step-number <?php echo $isLast ? 'step-number-success' : ''; ?>"><?php echo $index + 1; ?></div>
                                <h3><?php echo $step[0]; ?></h3>
                                <p><?php echo $step[1]; ?></p>
                                <div class="pay-img-container">
                                    <img src="<?php echo $step[2]; ?>" alt="<?php echo $step[0]; ?>" class="instruction-image">
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Payment Section -->
            <div id="section-payment" class="hidden">
                <div class="text-center">
                    <span style="color: var(--secondary-color);">মার্চেন্ট পদ্ধতি</span>
                    <h2>পেমেন্ট করার নিয়ম</h2>
                </div>

                <div class="slider-container" id="slider-payment">
                    <div class="pay-nav-btn pay-prev-btn"><i class="fas fa-chevron-left"></i></div>
                    <div class="pay-nav-btn pay-next-btn"><i class="fas fa-chevron-right"></i></div>
                    <div class="slider-wrapper">
                        <?php 
                        $paymentSteps = [
                            ["পেমেন্ট সিলেক্ট", "অ্যাপের মেনু থেকে 'পেমেন্ট' অপশনটি বেছে নিন।", "/assets/files/bill/payment-1.webp"],
                            ["মার্চেন্ট নম্বর", "মার্চেন্ট নম্বর হিসেবে নির্দিষ্ট নম্বরটি লিখুন অথবা QR স্ক্যান করুন।", "/assets/files/bill/payment-2.webp"],
                            ["টাকার পরিমাণ", "আপনার মাসিক বিলের সঠিক টাকার পরিমাণটি ইনপুট দিন।", "/assets/files/bill/payment-3.webp"],
                            ["রেফারেন্স ও পিন", "রেফারেন্স বক্সে আপনার User ID দিন এবং আপনার সিক্রেট পিন দিন।", "/assets/files/bill/payment-4.webp"],
                            ["নিশ্চিত করুন", "পেমেন্টটি সফল করতে স্ক্রিনের নিচের অংশে ট্যাপ করে ধরে রাখুন।", "/assets/files/bill/payment-5.webp"],
                            ["সফল পেমেন্ট", "পেমেন্ট সফল হলে কনফার্মেশন মেসেজ এবং ট্রানজেকশন আইডি পাবেন।", "/assets/files/bill/payment-6.webp"]
                        ];
                        foreach($paymentSteps as $index => $pStep): 
                            $isLastPayment = ($index === count($paymentSteps) - 1);
                        ?>
                        <div class="slider-item">
                            <div class="instruction-card-payment">
                                <div class="step-number <?php echo $isLastPayment ? 'step-number-success' : ''; ?>" style="<?php echo !$isLastPayment ? 'background: linear-gradient(135deg, var(--secondary-color) 0%, #76c055 100%);' : ''; ?>"><?php echo $index + 1; ?></div>
                                <h3><?php echo $pStep[0]; ?></h3>
                                <p><?php echo $pStep[1]; ?></p>
                                <div class="pay-img-container">
                                    <img src="<?php echo $pStep[2]; ?>" alt="<?php echo $pStep[0]; ?>" class="instruction-image">
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Post-Payment Info -->
        <div class="reveal zoom">
            <div>
                <i class="fas fa-check-double text-xl"></i>
            </div>
            <h3>পেমেন্ট করার পর করণীয়</h3>
            <p>
                পেমেন্ট সফলভাবে সম্পন্ন হলে আপনার ইন্টারনেট সংযোগটি স্বয়ংক্রিয়ভাবে রিনিউ হয়ে যাবে। কোনো সমস্যায় আমাদের হটলাইনে যোগাযোগ করুন।
            </p>
        </div>
    </main>
    
    <div class="divider-bottom">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z" fill="var(--light-bg)"></path>
        </svg>
    </div>
</section>

<section style="padding: 0px 0px; text-align: center; background: var(--light-bg); position: relative;">
    <div class="container>
        <div id="faq">
            <?php if(file_exists('faq_section.php')) include('faq_section.php'); ?>
        </div>
    </div>
</section>

<?php 
// Footer inclusion
include 'footer.php'; 
?>
<script src="assets/js/reveal.js"></script>
<script>

    function switchTab(tab) {
        const btnPayBill = document.getElementById('btn-paybill');
        const btnPayment = document.getElementById('btn-payment');
        const sectionPayBill = document.getElementById('section-paybill');
        const sectionPayment = document.getElementById('section-payment');

        if (tab === 'paybill') {
            btnPayBill.classList.add('active');
            btnPayBill.classList.remove('text-gray-400');
            btnPayment.classList.remove('active');
            btnPayment.classList.add('text-gray-400');
            sectionPayBill.classList.remove('hidden');
            sectionPayment.classList.add('hidden');
        } else {
            btnPayment.classList.add('active');
            btnPayment.classList.remove('text-gray-400');
            btnPayBill.classList.remove('active');
            btnPayBill.classList.add('text-gray-400');
            sectionPayment.classList.remove('hidden');
            sectionPayBill.classList.add('hidden');
            // Re-init slider for the visible section
            initSlider('slider-payment');
        }
    }

    function initSlider(containerId) {
        const container = document.getElementById(containerId);
        if(!container) return;
        const wrapper = container.querySelector('.slider-wrapper');
        const prevBtn = container.querySelector('.pay-prev-btn');
        const nextBtn = container.querySelector('.pay-next-btn');
        
        let isDragging = false;
        let startX, currentTranslate = 0, prevTranslate = 0;
        let currentIndex = 0;
        let autoPlayInterval;

        function getItemsInView() {
            if (window.innerWidth >= 1024) return 3;
            if (window.innerWidth >= 640) return 2;
            return 1;
        }

        function updateSliderPosition() {
            wrapper.style.transform = `translateX(${currentTranslate}px)`;
        }

        function snapToSlide(withTransition = true) {
            const itemWidth = container.offsetWidth / getItemsInView();
            wrapper.style.transition = withTransition ? 'transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)' : 'none';
            currentTranslate = currentIndex * -itemWidth;
            prevTranslate = currentTranslate;
            updateSliderPosition();
        }

        function nextSlide() {
            const itemsCount = wrapper.querySelectorAll('.slider-item').length;
            const viewCount = getItemsInView();
            if (currentIndex < itemsCount - viewCount) {
                currentIndex++;
            } else {
                currentIndex = 0;
            }
            snapToSlide();
        }

        function prevSlide() {
            const itemsCount = wrapper.querySelectorAll('.slider-item').length;
            const viewCount = getItemsInView();
            if (currentIndex > 0) {
                currentIndex--;
            } else {
                currentIndex = Math.max(0, itemsCount - viewCount);
            }
            snapToSlide();
        }

        nextBtn.addEventListener('click', () => {
            nextSlide();
            resetAutoPlay();
        });

        prevBtn.addEventListener('click', () => {
            prevSlide();
            resetAutoPlay();
        });

        wrapper.addEventListener('mousedown', startDrag);
        wrapper.addEventListener('touchstart', startDrag, { passive: true });
        window.addEventListener('mousemove', dragMove);
        window.addEventListener('touchmove', dragMove, { passive: false });
        window.addEventListener('mouseup', endDrag);
        window.addEventListener('touchend', endDrag);

        function startDrag(e) {
            isDragging = true;
            startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
            wrapper.style.transition = 'none';
            wrapper.style.cursor = 'grabbing';
            clearInterval(autoPlayInterval);
        }

        function dragMove(e) {
            if (!isDragging) return;
            const currentX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
            const diff = currentX - startX;
            currentTranslate = prevTranslate + diff;
            updateSliderPosition();
        }

        function endDrag() {
            if (!isDragging) return;
            isDragging = false;
            wrapper.style.cursor = 'grab';
            const movedBy = currentTranslate - prevTranslate;
            const itemWidth = container.offsetWidth / getItemsInView();
            if (movedBy < -itemWidth / 5) {
                const itemsCount = wrapper.querySelectorAll('.slider-item').length;
                if (currentIndex < itemsCount - getItemsInView()) currentIndex++;
            } else if (movedBy > itemWidth / 5) {
                if (currentIndex > 0) currentIndex--;
            }
            snapToSlide();
            resetAutoPlay();
        }

        function resetAutoPlay() {
            clearInterval(autoPlayInterval);
            autoPlayInterval = setInterval(nextSlide, 6000);
        }

        window.addEventListener('resize', () => snapToSlide(false));
        snapToSlide(false);
        resetAutoPlay();
    }

    window.addEventListener('DOMContentLoaded', () => {
        initSlider('slider-paybill');
        initSlider('slider-payment');
    });
</script>