<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
      <title>confirm order</title>
    <script src="https://cdn.tailwindcss.com"></script>
      <link rel="stylesheet" href="../css/styles.css"> 
      <link rel="stylesheet" href="../css/product.css"><!-- Link to your CSS file -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">     
    </link>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;700;800&display=swap" rel="stylesheet">
     <body class="bg-white">        
      
          <div id="header-container"></div>
  <script src="../digijs/menu.js"></script>      
            <script src="../digijs/iphone13header.js"> </script>
          <script src="../digijs/menutoggle.js"></script>                <script src="../digijs/tracking.js"></script>
  
  
    </header>
  <style>
        .transition-height {
            transition: height 0.3s ease;
        }
        .hidden {
            display: none;
        }
        .slide-up {
            animation: slide-up 0.5s forwards;
        }
        .slide-down {
            animation: slide-down 0.5s forwards;
        }
        @keyframes slide-up {
            from {
                max-height: 500px;
                opacity: 1;
            }
            to {
                max-height: 0;
                opacity: 0;
            }
        }
        @keyframes slide-down {
            from {
                max-height: 0;
                opacity: 0;
            }
            to {
                max-height: 500px;
                opacity: 1;
            }
        }
    </style>

    
    
    
<body class="bg-gray-100 text-gray-900">
   <div class="max-w-md mx-auto bg-white p-4 rounded-lg shadow-md mb-8 order-summary" style="margin-top: 75px;">     <div class="flex justify-between items-center border-b pb-2 mb-4">
            <button id="toggle-summary" class="text-blue-600">
                Hide order summary
                <i id="toggle-icon" class="fas fa-chevron-up"></i>
            </button>
            <span class="text-xl font-bold" id="total-amount">₱30,990.00</span>
        </div>
        <div id="order-summary" class="transition-all duration-500">
            <div class="flex items-center mb-4">
                <div class="relative">
                    <img alt="Product image of iPhone 13 in Midnight color with 128GB storage" class="w-16 h-16 rounded-lg" height="60" id="product-image" src="https://storage.googleapis.com/a1aa/image/Dy4glfCDfbhfCIBINC44n5vfTPBpwOVg9Bb3AeaqCvP16jGeE.jpg" width="60"/>
                    <span class="absolute top-0 right-0 bg-gray-700 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center" id="product-quantity">1</span>
                </div>
                <div class="ml-4">
                    <div class="font-semibold" id="product-name">iPhone 13</div>
                    <div class="text-gray-500 text-sm" id="product-details">Midnight / 128GB</div>
                </div>
                <div class="ml-auto font-semibold" id="product-price">₱30,990.00</div>
            </div>
            <div class="mb-4">
                <input class="w-full p-2 border rounded-lg" placeholder="Discount code or gift card" type="text"/>
                <button class="mt-2 w-full bg-gray-200 text-gray-700 p-2 rounded-lg">Apply</button>
            </div>
            <div class="flex justify-between mb-2">
                <span><i class="fas fa-box mr-2"></i>Quantity</span>
                <span id="quantity">1</span>
            </div>
            <div class="flex justify-between mb-4">
                <span><i class="fas fa-shipping-fast mr-2"></i>Shipping</span>
                <span class="text-blue-600">₱0</span>
            </div>
            <div class="flex justify-between mb-4">
                <span><i class="fas fa-palette mr-2"></i>Color</span>
                <span id="color">Midnight</span>
            </div>
            <div class="flex justify-between mb-4">
                <span><i class="fas fa-hdd mr-2"></i>Storage</span>
                <span id="storage">128GB</span>
            </div>
            <div class="mb-4 p-4 border rounded-lg">
                <div class="flex justify-between items-center mb-2">
                    <div class="flex items-center">
                        <i class="fas fa-gift mr-2 text-s"></i>
                        <span>Included</span>
                    </div>
                    <button id="toggle-giftbox" class="text-blue-600">
                        <i id="giftbox-icon" class="fas fa-chevron-up"></i>
                    </button>
                </div>
                <div id="giftbox-content">
                    <ul class="list-disc list-inside ml-6 text-sm">
                        <li>Apple AirPods</li>
                        <li>Magnetic Case</li>
                        <li>Original Fast Charger</li>
                        <li>Tempered Glass</li>
                    </ul>
                </div>
            </div>
        </div>
            <div class="flex justify-between items-center border-t pt-2">
                <span class="text-lg font-bold">Total</span>
                <span class="text-lg font-bold" id="total">PHP ₱30,990.00</span>
            </body>
   </div>
        
    </div>


    <div class="max-w-lg mx-auto p-4">
        <h2 class="text-2xl font-bold mb-4">Where should we send your order?</h2>
        <p class="text-lg mb-4">Enter your name and address:</p>
        <form id="addressForm" class="space-y-4 mb-8">
            <input type="text" id="firstName" placeholder="First Name" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" id="lastName" placeholder="Last Name" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" id="streetAddress" placeholder="Street Address" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" placeholder="Apartment or Suite (Optional)" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" placeholder="Additional Address Information (Optional)" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" placeholder="Zip Code" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" placeholder="District e.g., Barangay (Optional)" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" id="townCity" placeholder="Town/City" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" id="province" placeholder="Province" class="w-full p-3 border border-gray-300 rounded-lg">
            <input type="text" placeholder="Country/Region" value="Philippines" class="w-full p-3 border border-gray-300 rounded-lg">
        </form>
    </div>

    <div class="max-w-md mx-auto p-4">
        <!-- Credit or Debit Card -->
        <div class="bg-gray-200 rounded-lg shadow p-4 mb-4 flex items-center cursor-pointer" onclick="toggleSection('creditCardSection')">
            <div class="flex-shrink-0">
                <i class="fas fa-credit-card text-gray-500 text-2xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-lg font-medium text-gray-500">Credit or Debit Card</p>
                <p class="text-xs text-gray-500">Temporarily not available</p>
            </div>
            <div class="ml-auto">
                <i class="fas fa-chevron-down text-gray-500" id="creditCardArrow"></i>
            </div>
        </div>
        <div id="creditCardSection" class="hidden transition-height overflow-hidden">
            <!-- Add your credit card form or details here -->
        </div>

        <!-- E-Wallets -->
        <div class="bg-white rounded-lg shadow p-4 mb-4 flex items-center border-2 border-blue-500 cursor-pointer" onclick="toggleSection('eWalletSection')">
            <div class="flex-shrink-0">
                <i class="fas fa-wallet text-dark-500 text-2xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-lg font-medium">E-Wallets</p>
                <p class="text-gray-500 text-xs">GCash, GrabPay, and more</p>
            </div>
            <div class="ml-auto">
                <i class="fas fa-chevron-down text-gray-500" id="eWalletArrow"></i>
            </div>
        </div>
        <div id="eWalletSection" class="hidden transition-height overflow-hidden">
            <!-- GCash -->
            <div class="flex items-center p-4 mb-4 cursor-pointer" onclick="selectEWallet('gcash')">
                <input checked class="form-radio text-blue-500 h-5 w-5" id="gcash" name="ewallet" type="radio"/>
                <label class="ml-4 text-lg font-medium" for="gcash">GCash</label>
                <div class="ml-auto">
                    <img alt="GCash logo" class="h-6 w-auto" src="https://images.seeklogo.com/logo-png/52/1/gcash-logo-png_seeklogo-522261.png"/>
                </div>
            </div>
            <hr class="border-gray-300">
            <!-- GrabPay -->
            <div class="flex items-center p-4 mb-4 cursor-pointer" onclick="selectEWallet('grabpay')">
                <input class="form-radio text-blue-500 h-5 w-5" id="grabpay" name="ewallet" type="radio"/>
                <label class="ml-4 text-lg font-medium" for="grabpay">GrabPay</label>
                <div class="ml-auto">
                    <img alt="GrabPay logo" class="h-7 w-auto" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiuBo7rzmXvZYQZTV7BJ4njy7TIwPCsffoMw&usqp=CAU"/>
                </div>
            </div>
            <hr class="border-gray-300">
            <!-- Maya -->
            <div class="flex items-center p-4 mb-4 cursor-pointer" onclick="selectEWallet('maya')">
                <input class="form-radio text-blue-500 h-5 w-5" id="maya" name="ewallet" type="radio"/>
                <label class="ml-4 text-lg font-medium" for="maya">Maya</label>
                <div class="ml-auto">
                    <img alt="Maya logo" class="h-8 w-auto" src="https://images.crunchbase.com/image/upload/c_pad,f_auto,q_auto:eco,dpr_1/amx0mdduyvb5lzhn5mtr"/>
                </div>
            </div>
            <hr class="border-gray-300">
            <!-- QRPH -->
            <div class="flex items-center p-4 mb-4 cursor-pointer" onclick="selectEWallet('qrph')">
                <input class="form-radio text-blue-500 h-5 w-5" id="qrph" name="ewallet" type="radio"/>
                <label class="ml-4 text-lg font-medium" for="qrph">QR PH</label>
                <div class="ml-auto">
                    <img alt="Maya logo" class="h-7 w-auto" src="https://i0.wp.com/ronxronquillo.com/wp-content/uploads/2019/11/philippine-qr-code-standard-logo.jpg?w=163&ssl=1"/>
                </div>
            </div> <hr class="border-gray-300">
            <!-- INSTAPAY -->
            <div class="flex items-center p-4 mb-4 cursor-pointer" onclick="selectEWallet('instapay')">
                <input class="form-radio text-blue-500 h-5 w-5" id="instapay" name="ewallet" type="radio"/>
                <label class="ml-4 text-lg font-medium" for="instapay">InstaPay</label>
                <div class="ml-auto">
                    <img alt="Maya logo" class="h-7 w-auto" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAfUHLcwK-PdIFqy2HScg-vmR3BOVLpMDTfQ&usqp=CAU"/>
                </div>
            </div>
            <hr class="border-gray-300">
        </div>
    </div>

    <div class="w-full max-w-md mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">What’s your contact information?</h1>
        
        <div class="mb-4">
            <label class="block mb-2 text-gray-700" for="email">Email</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg" type="email" id="email" placeholder="Email">
            <p class="text-sm text-gray-600 mt-2">We’ll email you a receipt and send order updates to your mobile phone via SMS or iMessage.</p>
        </div>
        
        <div class="mb-4">
            <label class="block mb-2 text-gray-700" for="phone">Mobile Phone Number</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg" type="tel" id="phone" placeholder="Mobile Phone Number">
            <p class="text-sm text-gray-600 mt-2">The phone number you enter can’t be changed after you place your order, so please make sure it’s correct.</p>
        </div>
           <hr class="my-4">
        <div class="mb-4">
            <input type="checkbox" id="no-phone" class="mr-2">
            <label for="no-phone" class="text-gray-700">I don’t have a mobile phone number.</label>   <hr class="my-4">
        </div> <p class="text-xs text-gray-900 mt-2">Once your payment is completed, you will be automatically redirected to your cart. From there, you can easily check the status of your order.

</p>
        
        <hr class="my-4">
        
        <button onclick="validateForm()" class="w-full bg-blue-600 text-white p-3 rounded-lg font-medium ">Continue to Payment</button>
    </div>
   
      

   
    <div id="footer-container"></div>   
                <script src="../digijs/iphone13footer.js"> </script>
  <script src="productiphone11.js"> </script>
                      <script src="../digijs/tracking.js"></script>
  
  

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const productDetails = JSON.parse(localStorage.getItem('productDetails'));

            if (productDetails) {
                const pricePerUnit = productDetails.total / productDetails.quantity;
                const totalPrice = pricePerUnit * productDetails.quantity;

                document.getElementById('product-image').src = productDetails.image;
                document.getElementById('product-name').innerText = productDetails.name;
                document.getElementById('product-details').innerText = `${productDetails.color} / ${productDetails.storage}`;
                document.getElementById('product-quantity').innerText = productDetails.quantity;
                document.getElementById('product-price').innerText = `₱${pricePerUnit.toLocaleString()}.00`;
                document.getElementById('quantity').innerText = productDetails.quantity;
                document.getElementById('total').innerText = `PHP ₱${pricePerUnit.toLocaleString()}.00`;
                document.getElementById('total-amount').innerText = `₱${pricePerUnit.toLocaleString()}.00`;
                document.getElementById('color').innerText = productDetails.color;
                document.getElementById('storage').innerText = productDetails.storage;
            }

            const toggleButton = document.getElementById('toggle-summary');
            const orderSummary = document.getElementById('order-summary');
            const toggleIcon = document.getElementById('toggle-icon');

            toggleButton.addEventListener('click', function() {
                if (orderSummary.classList.contains('hidden')) {
                    orderSummary.classList.remove('hidden', 'slide-up');
                    orderSummary.classList.add('slide-down');
                    toggleIcon.classList.remove('fa-chevron-down');
                    toggleIcon.classList.add('fa-chevron-up');
                    toggleButton.innerHTML = 'Hide order summary <i id="toggle-icon" class="fas fa-chevron-up"></i>';
                } else {
                    orderSummary.classList.remove('slide-down');
                    orderSummary.classList.add('slide-up');
                    setTimeout(() => {
                        orderSummary.classList.add('hidden');
                    }, 500);
                    toggleIcon.classList.remove('fa-chevron-up');
                    toggleIcon.classList.add('fa-chevron-down');
                    toggleButton.innerHTML = 'Show order summary <i id="toggle-icon" class="fas fa-chevron-down"></i>';
                }
            });
        });

        function toggleSection(sectionId) {
            const section = document.getElementById(sectionId);
            const arrow = sectionId === 'creditCardSection' ? document.getElementById('creditCardArrow') : document.getElementById('eWalletArrow');
            if (section.classList.contains('hidden')) {
                section.classList.remove('hidden');
                section.style.height = section.scrollHeight + 'px';
                arrow.classList.remove('fa-chevron-down');
                arrow.classList.add('fa-chevron-up');
            } else {
                section.style.height = '0px';
                section.addEventListener('transitionend', () => {
                    section.classList.add('hidden');
                }, { once: true });
                arrow.classList.remove('fa-chevron-up');
                arrow.classList.add('fa-chevron-down');
            }
        }

        function selectEWallet(wallet) {
            document.getElementById(wallet).checked = true;
        }

        function validateForm() {
            const firstName = document.getElementById('firstName').value;
            const lastName = document.getElementById('lastName').value;
            const streetAddress = document.getElementById('streetAddress').value;
            const townCity = document.getElementById('townCity').value;
            const province = document.getElementById('province').value;

            if (!firstName || !lastName || !streetAddress || !townCity || !province) {
                alert('Please fill out all required fields: First Name, Last Name, Street Address, Town/City, and Province.');
                return false;
            }

            // If all required fields are filled, redirect based on selected e-wallet
            const selectedWallet = document.querySelector('input[name="ewallet"]:checked').id;
            if (selectedWallet === 'gcash') {
                window.location.href = '/www.digikey.com/gcash/';
            } else if (selectedWallet === 'grabpay') {
                window.location.href = 'grabpay.html';
            } else if (selectedWallet === 'maya') {
                window.location.href = 'maya.html';} 
            else if (selectedWallet === 'qrph') {
                window.location.href = 'qrph.html';
            } else if (selectedWallet === 'instapay') {
                window.location.href = 'instapay.html';
            }
        }
    </script>   
    <script>
        document.addEventListener('DOMContentLoaded', function () {         
            const toggleIcon = document.getElementById('toggle-icon');
            const toggleGiftBoxButton = document.getElementById('toggle-giftbox');
            const giftBoxContent = document.getElementById('giftbox-content');
            const giftBoxIcon = document.getElementById('giftbox-icon');

            toggleGiftBoxButton.addEventListener('click', function () {
                if (giftBoxContent.classList.contains('hidden')) {
                    giftBoxContent.classList.remove('hidden');
                    giftBoxIcon.classList.remove('fa-chevron-down');
                    giftBoxIcon.classList.add('fa-chevron-up');
                } else {
                    giftBoxContent.classList.add('hidden');
                    giftBoxIcon.classList.remove('fa-chevron-up');
                    giftBoxIcon.classList.add('fa-chevron-down');
                }
            });
        });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const productDetails = JSON.parse(localStorage.getItem('productDetails'));

        if (productDetails) {
            const pricePerUnit = productDetails.total / productDetails.quantity;
            const totalPrice = pricePerUnit * productDetails.quantity;

            document.getElementById('product-image').src = productDetails.image;
            document.getElementById('product-name').innerText = productDetails.name;
            document.getElementById('product-details').innerText = `${productDetails.color} / ${productDetails.storage}`;
            document.getElementById('product-quantity').innerText = productDetails.quantity;
            document.getElementById('product-price').innerText = `₱${pricePerUnit.toLocaleString()}.00`;
            document.getElementById('quantity').innerText = productDetails.quantity;
            document.getElementById('total').innerText = `PHP ₱${totalPrice.toLocaleString()}.00`;
            document.getElementById('total-amount').innerText = `₱${totalPrice.toLocaleString()}.00`;
            document.getElementById('color').innerText = productDetails.color;
            document.getElementById('storage').innerText = productDetails.storage;
        }

        const eWallets = document.querySelectorAll('input[name="ewallet"]');
        eWallets.forEach(wallet => {
            wallet.addEventListener('change', function() {
                const selectedWallet = this.id;
                updateTotalPrice(selectedWallet);
            });
        });

        function updateTotalPrice(wallet) {
            const totalElement = document.getElementById('total');
            const totalAmountElement = document.getElementById('total-amount');
            const totalPrice = productDetails.total; // Assuming total is already defined in productDetails

            // Here you can add logic to change the total based on the selected wallet if necessary
            totalElement.innerText = `PHP ₱${totalPrice.toLocaleString()}.00`;
            totalAmountElement.innerText = `₱${totalPrice.toLocaleString()}.00`;
        }

        const toggleButton = document.getElementById('toggle-summary');
        const orderSummary = document.getElementById('order-summary');
        const toggleIcon = document.getElementById('toggle-icon');

        toggleButton.addEventListener('click', function() {
            if (orderSummary.classList.contains('hidden')) {
                orderSummary.classList.remove('hidden', 'slide-up');
                orderSummary.classList.add('slide-down');
                toggleIcon.classList.remove('fa-chevron-down');
                toggleIcon.classList.add('fa-chevron-up');
                toggleButton.innerHTML = 'Hide order summary <i id="toggle-icon" class="fas fa-chevron-up"></i>';
            } else {
                orderSummary.classList.remove('slide-down');
                orderSummary.classList.add('slide-up');
                setTimeout(() => {
                    orderSummary.classList.add('hidden');
                }, 500);
                toggleIcon.classList.remove('fa-chevron-up');
                toggleIcon.classList.add('fa-chevron-down');
                toggleButton.innerHTML = 'Show order summary <i id="toggle-icon" class="fas fa-chevron-down"></i>';
            }
        });
    });

    function toggleSection(sectionId) {
        const section = document.getElementById(sectionId);
        const arrow = sectionId === 'creditCardSection' ? document.getElementById('creditCardArrow') : document.getElementById('eWalletArrow');
        if (section.classList.contains('hidden')) {
            section.classList.remove('hidden');
            section.style.height = section.scrollHeight + 'px';
            arrow.classList.remove('fa-chevron-down');
            arrow.classList.add('fa-chevron-up');
        } else {
            section.style.height = '0px';
            section.addEventListener('transitionend', () => {
                section.class ```javascript
                section.classList.add('hidden');
            }, { once: true });
            arrow.classList.remove('fa-chevron-up');
            arrow.classList.add('fa-chevron-down');
        }
    }

    function selectEWallet(wallet) {
        document.getElementById(wallet).checked = true;
        updateTotalPrice(wallet);
    }

    function validateForm() {
        const firstName = document.getElementById('firstName').value;
        const lastName = document.getElementById('lastName').value;
        const streetAddress = document.getElementById('streetAddress').value;
        const townCity = document.getElementById('townCity').value;
        const province = document.getElementById('province').value;

        if (!firstName || !lastName || !streetAddress || !townCity || !province) {
            alert('Please fill out all required fields: First Name, Last Name, Street Address, Town/City, and Province.');
            return false;
        }

        // If all required fields are filled, redirect based on selected e-wallet
        const selectedWallet = document.querySelector('input[name="ewallet"]:checked').id;
        if (selectedWallet === 'gcash') {
            window.location.href = 'gcash.html';
        } else if (selectedWallet === 'grabpay') {
            window.location.href = 'grabpay.html';
        } else if (selectedWallet === 'maya') {
            window.location.href = 'maya.html';
                } else if (selectedWallet === 'qrph.html') {
            window.location.href = 'qrph.html';
        }
    }
</script>
                <script>
    document.addEventListener('DOMContentLoaded', function () {
        const header = document.getElementById('header');
        let lastScrollTop = 0; // Keep track of the last scroll position
        let isHeaderHidden = false; // Track the visibility of the header

        window.addEventListener('scroll', function () {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > lastScrollTop && scrollTop > header.offsetHeight) {
                // Scrolling down
                if (!isHeaderHidden) {
                    header.classList.add('hidden');
                    isHeaderHidden = true;
                }
            } else {
                // Scrolling up
                if (isHeaderHidden) {
                    header.classList.remove('hidden');
                    isHeaderHidden = false;
                }
            }
            lastScrollTop = scrollTop; // Update the last scroll position
        });
    });
</script>
                <!-- iPhone 13 Section -->
      
      
      <section class="hidden">
          <p class="text-orange-700 font-semibold text-sm"> NEW </p>
        <h1 class="text-4xl font-bold text-gray-900"> iPhone 13</h1>
        <p class="text-gray-800 mt-2 "> Profoundly Powerful. </p>
        <p class="text-gray-500 mt-2">
          <span class="line-through text-orange-700 font-medium"> ₱45,990 </span>
          <br />
          <span class="text-black font-bold text-2xl"> ₱25,000 </span>
        </p>
        <button class="bg-blue-600 text-white py-3 px-6 rounded-full mt-6 text-sm font-semibold hover:bg-blue-700 transition duration-300" id="buy-now-iphone" onclick="location.href='/www.powermaccebu.com/iphone13'"> Buy now </button>
        <div class="relative mt-6 mx-auto w-3/4 lg:w-1/2">
          <div class="absolute top-0 left-0 bg-gray-700 text-white text-xs font-medium py-1 px-1 rounded-br-lg"> 50% OFF </div>
          <img alt="iPhone 13 image" class="w-full" src="https://powermaccenter.com/cdn/shop/files/iPhone_13_Green_PDP_Image_Position-1A__en-US.jpg?v=1692028861&width=823" />
        </div>
        <p class="mt-6 text-gray-900 font-medium text-sm"> Sale ends in: <span id="countdown-iphone" class="text-orange-700 font- text-sm"></span>
        </p>
      </section>
          
<!-- iPhone 11 Section -->
          
<section class="hidden">
        <p class="text-orange-700 font-semibold text-sm"> NEW </p>
        <h1 class="text-4xl font-bold text-gray-900"> iPhone 11 </h1>
        <p class="text-gray-800 mt-2"> Powerful performance. </p>
        <p class="text-gray-500 mt-2">
          <span class="line-through text-orange-700 font-medium"> ₱30,990 </span>
          <br />
          <span class="text-black font-semibold text-2xl"> ₱13,500 </span>
        </p>
        <button class="bg-blue-600 text-white py-3 px-6 rounded-full mt-6 text-sm font-semibold hover:bg-blue-700 transition duration-300" id="buy-now-iphone" onclick="location.href='iphone11.html'"> Buy now </button>
        <div class="relative mt-6 mx-auto w-3/4 lg:w-1/2">
          <div class="absolute top-0 left-0 bg-gray-700 text-white text-xs font- py-0.5 px-0.5 rounded-br-lg font-"> 50% OFF </div>
          <img alt="iPhone 16 Pro image" class="w-full" src="https://powermaccenter.com/cdn/shop/files/A012000x2000_1c4df06a-f1b6-4fb9-88c7-cfa350e46b9d.jpg?v=1692051393&width=823" />
        </div>
        <p class="mt-0 text-gray-900 font-medium text-sm"> Sale ends in: <span id="countdown-iphone11" class="text-orange-700 font- text-sm"></span>
        </p>
      </section>
      
          
          
          <!-- iPhone 12 Section -->
          
<section class="hidden 
               ">
        <p class="text-orange-700 font-semibold text-sm"> NEW </p>
        <h1 class="text-4xl font-bold text-gray-900"> iPhone 12 </h1>
        <p class="text-gray-800 mt-2"> Powerful performance. </p>
        <p class="text-gray-500 mt-2">
          <span class="line-through text-orange-700 font-medium"> ₱40,990 </span>
          <br />
          <span class="text-black font-semibold text-2xl"> ₱19,000 </span>
        </p>
        <button class="bg-blue-600 text-white py-3 px-6 rounded-full mt-6 text-sm font-semibold hover:bg-blue-700 transition duration-300" id="buy-now-iphone" onclick="location.href='iphone12.html'"> Buy now </button>
        <div class="relative mt-6 mx-auto w-3/4 lg:w-1/2">
          <div class="absolute top-0 left-0 bg-gray-700 text-white text-xs font- py-0.5 px-0.5 rounded-br-lg font-"> 50% OFF </div>
          <img alt="iPhone 16 Pro image" class="w-full" src="https://powermaccenter.com/cdn/shop/files/A022000x2000_bd80f1f9-80db-4088-8ff1-23c1388947ad.jpg?v=1692099214&width=823" />
        </div>
        <p class="mt-0 text-gray-900 font-medium text-sm"> Sale ends in: <span id="countdown-iphone12" class="text-orange-700 font- text-sm"></span>
        </p>
      </section>
      

          
          
          
                    <!-- iPhone Xr Section -->
          
<section class="hidden 
                ">
  <p class="text-gray-500 mt-2">
          <span class="line-through text-transparent font-medium"> ₱28,990 </span>
          <br />
</div>
        <p class="mt-0 text-transparent font-medium text-sm"> Sale ends in: <span id="countdown-iphonexr" class="text-hidden font-medium text-sm"></span>
        </p>
      </section>
      
          
                              <!-- iPhone 14 Section -->
          
<section class="hidden">
        <p class="text-orange-700 font-semibold text-sm"> NEW </p>
        <h1 class="text-4xl font-bold text-gray-900"> iPhone 14 </h1>
        <p class="text-gray-800 mt-2"> Limited Offer. </p>
        <p class="text-gray-500 mt-2">
          <span class="line-through text-orange-700 font-medium"> ₱48,990 </span>
          <br />
          <span class="text-black font-semibold text-2xl"> ₱30,000 </span>
        </p>
        <button class="bg-blue-600 text-white py-3 px-6 rounded-full mt-6 text-sm font-semibold hover:bg-blue-700 transition duration-300" id="buy-now-iphone" onclick="location.href='iphone14.html'"> Buy now </button>
        <div class="relative mt-6 mx-auto w-4/4 lg:w-1/2">
          <div class="absolute top-0 left-0 bg-gray-700 text-white text-xs font-sm py-0.5 px-0.5 rounded-br-lg font-"> 40% OFF </div>
          <img alt="iPhone 16 Pro image" class="w-full" src="https://powermaccenter.com/cdn/shop/files/iPhone_14_Purple_PDP_Image_Position-1A__en-US_5af10573-a48a-42a7-85b4-e109223c8e35.jpg?v=1705401694&width=823" />
        </div>
        <p class="mt-0 text-gray-900 text-sm font-medium text"> Sale ends in: <span id="countdown-iphone14" class="text-orange-700 font- text-sm"></span>
        </p>
      </section>
      
             
</body>
</html>