<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PharmaEase</title>
    <link rel="stylesheet" href="style.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Days+One&family=Lexend:wght@100..900&family=Teko:wght@300..700&display=swap');

        /* Popup Styles */
        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .popup-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            width: 350px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            font-family: 'Lexend', sans-serif;
        }

        .popup h3 {
            color: #2a4365;
            margin-bottom: 20px;
            text-align: center;
            font-size: 1.5rem;
        }

        .popup input {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            box-sizing: border-box;
        }

        .popup button[type="submit"] {
            background-color: #4299e1;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        .popup button[type="submit"]:hover {
            background-color: #3182ce;
        }

        .close {
            float: right;
            cursor: pointer;
            font-size: 24px;
            font-weight: bold;
            color: #718096;
        }

        .close:hover {
            color: #2d3748;
        }

        #errorMsg {
            color: #e53e3e;
            display: none;
            margin-top: -10px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }

        .check-discount-offer {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .check-discount-offer:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <section id="homebg">
        <nav class="navbar">
            <div class="navbar-container">
                <a href="#" class="navbar-brand">
                    <img src="Frame 6.png" alt="PharmaEase Logo">
                    <span>PharmaEase</span> </a>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="cart.php" class="nav-link">Cart</a>
                    </li>
                    <li class="nav-item">
                        <a href="users.php" class="nav-link">User</a>
                    </li>
                    <li class="nav-item">
                        <a href="index.php" class="nav-link">Logout</a>
                    </li>
                </ul>
            </div>
        </nav>
        <section id="welcome">
            <h1>Welcome to PharmaEase <br>
                A service you can trust</h1>

            <div class="frame-11">
                <button class="check-discount-offer" onclick="openPopup()">Check Discount Offer</button>

                <!-- Popup Form (hidden by default) -->
                <div id="phonePopup" class="popup">
                    <div class="popup-content">
                        <span class="close" onclick="closePopup()">&times;</span>
                        <h3>Enter Your 11-Digit Mobile Number</h3>
                        <form id="discountForm" method="post" action="../../controller/sms.php">
                            <input type="text" id="phoneInput" name="phoneNumber" placeholder="e.g. 09123456789"
                                maxlength="11" inputmode="numeric" required>
                            <p id="errorMsg">Please enter exactly 11 digits</p>
                            <button type="submit">Check Offers</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <section id="whitespace">
            <br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br>
        </section>

    </section>
    <section id="navigation">
        <div class="navbox" id="navbox1">
            <h2>Over the Counter</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua</p>
            <button id="navbutton"> View </button>
        </div>
        <div class="navbox" id="navbox2">
            <h2>Prescription Needed</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua</p>
            <button id="navbutton"> View </button>
        </div>
        <div class="navbox" id="navbox3">
            <h2>Herbal Medicines</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua</p>
            <button id="navbutton"> View </button>
        </div>
    </section>
    <section id="pos">
        <h1 id="popular">Popular Medicine</h1>
    </section>
    <section id="list">
        <div class="medicine-list">
            <img class="frame-13" src="Frame 13.png" />
            <div class="medtitle">Paracetamol Biogesic</div>
            <div class="medprice">₱6.45</div>
            <div class="meddesc">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </div>
            <button title="Add New" class="add-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24"
                    class="button-icon">
                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                        stroke-width="1.5"></path>
                    <path d="M8 12H16" stroke-width="1.5"></path>
                    <path d="M12 16V8" stroke-width="1.5"></path>
                </svg>
            </button>

        </div>
        <div class="medicine-list">
            <img class="frame-13" src="Frame 14.png" />
            <div class="medtitle">BioFlu</div>
            <div class="medprice">₱6.45</div>
            <div class="meddesc">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </div>
            <button title="Add New" class="add-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24"
                    class="button-icon">
                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                        stroke-width="1.5"></path>
                    <path d="M8 12H16" stroke-width="1.5"></path>
                    <path d="M12 16V8" stroke-width="1.5"></path>
                </svg>
            </button>
        </div>
        <div class="medicine-list">
            <img class="frame-13" src="Frame 15.png" />
            <div class="medtitle">Cetirizine</div>
            <div class="medprice">₱8.45</div>
            <div class="meddesc">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </div>
            <button title="Add New" class="add-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24"
                    class="button-icon">
                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                        stroke-width="1.5"></path>
                    <path d="M8 12H16" stroke-width="1.5"></path>
                    <path d="M12 16V8" stroke-width="1.5"></path>
                </svg>
            </button>
        </div>
        <div class="medicine-list">
            <img class="frame-13" src="Frame 16.png" />
            <div class="medtitle">Celebrex</div>
            <div class="medprice">₱17.25</div>
            <div class="meddesc">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </div>
            <button title="Add New" class="add-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24"
                    class="button-icon">
                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                        stroke-width="1.5"></path>
                    <path d="M8 12H16" stroke-width="1.5"></path>
                    <path d="M12 16V8" stroke-width="1.5"></path>
                </svg>
            </button>
        </div>
        <div class="medicine-list">
            <img class="frame-13" src="Frame 17.png" />
            <div class="medtitle">Metformin</div>
            <div class="medprice">₱13.00</div>
            <div class="meddesc">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </div>
            <button title="Add New" class="add-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24"
                    class="button-icon">
                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                        stroke-width="1.5"></path>
                    <path d="M8 12H16" stroke-width="1.5"></path>
                    <path d="M12 16V8" stroke-width="1.5"></path>
                </svg>
            </button>
        </div>
        <div class="medicine-list">
            <img class="frame-13" src="Frame 18.png" />
            <div class="medtitle">Medicol Ibuprofen</div>
            <div class="medprice">₱24.00</div>
            <div class="meddesc">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </div>
            <button title="Add New" class="add-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24"
                    class="button-icon">
                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                        stroke-width="1.5"></path>
                    <path d="M8 12H16" stroke-width="1.5"></path>
                    <path d="M12 16V8" stroke-width="1.5"></path>
                </svg>
            </button>
        </div>
    </section>
    <div id="addModal" class="modal">
        <div class="modal-content">
            <span class="close">&larr;</span>
            <h2>Add to Cart</h2>
            <div class="modal-body">
                <div class="product-info">
                    <img id="modalImage" src="" alt="Medicine" class="modal-image">
                    <div class="product-details">
                        <h3 id="modalTitle"></h3>
                        <p id="modalPrice"></p>
                    </div>
                    <div class="quantity-selector">
                        <div class="quantity-controls">
                            <button class="quantity-btn" onclick="decrementQuantity()">-</button>
                            <input type="number" id="quantity" value="1" min="1">
                            <button class="quantity-btn" onclick="incrementQuantity()">+</button>
                        </div>
                    </div>
                </div>
                <button class="add-to-cart-btn">Add to Cart</button>
            </div>
        </div>
    </div>
    <script>
        // Popup functionality
        function openPopup() {
            document.getElementById('phonePopup').style.display = 'flex';
            document.getElementById('errorMsg').style.display = 'none';
        }

        function closePopup() {
            document.getElementById('phonePopup').style.display = 'none';
        }

        function validatePhoneNumber(event) {
            event.preventDefault();
            const phoneNumber = document.getElementById('phoneInput').value;
            const errorElement = document.getElementById('errorMsg');

            // Check if input is exactly 11 digits
            if (/^\d{11}$/.test(phoneNumber)) {
                // Submit the form if valid
                document.getElementById('discountForm').submit();
                return true;
            } else {
                // Show error message
                errorElement.style.display = 'block';
                return false;
            }
        }

        // Close popup when clicking outside of it
        window.onclick = function (event) {
            const popup = document.getElementById('phonePopup');
            if (event.target == popup) {
                closePopup();
            }
        }

        // Restrict input to numbers only
        document.getElementById('phoneInput').addEventListener('input', function (e) {
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        // Attach form submission handler
        document.getElementById('discountForm').addEventListener('submit', validatePhoneNumber);

        // Get the modal
        const modal = document.getElementById('addModal');
        const closeBtn = document.querySelector('.close');
        const addButtons = document.querySelectorAll('.add-button');
        const quantityInput = document.getElementById('quantity');
        const addCartBtn = document.querySelector('.add-to-cart-btn');

        addCartBtn.addEventListener('click', () => {
            alert('Added to cart!');
            window.location.href = 'cart.php';
        });

        // Function to open modal
        function openModal(medicineItem) {
            const title = medicineItem.querySelector('.medtitle').textContent;
            const price = medicineItem.querySelector('.medprice').textContent;
            const image = medicineItem.querySelector('.frame-13').src;

            // Update modal content
            document.getElementById('modalTitle').textContent = title;
            document.getElementById('modalPrice').textContent = price;
            document.getElementById('modalImage').src = image;

            // Reset quantity
            quantityInput.value = 1;

            // Show modal
            modal.style.display = 'block';
        }

        // Add click event to all add buttons
        addButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                const medicineItem = e.target.closest('.medicine-list');
                openModal(medicineItem);
            });
        });

        // Close modal when clicking the close button
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });


        // Quantity controls
        function incrementQuantity() {
            quantityInput.value = parseInt(quantityInput.value) + 1;
        }

        function decrementQuantity() {
            if (parseInt(quantityInput.value) > 1) {
                quantityInput.value = parseInt(quantityInput.value) - 1;
            }
        }

        // Prevent manual input of negative numbers
        quantityInput.addEventListener('change', () => {
            if (parseInt(quantityInput.value) < 1) {
                quantityInput.value = 1;
            }
        });

        // Add to cart button
        document.querySelector('.add-to-cart-btn').addEventListener('click', () => {
            const title = document.getElementById('modalTitle').textContent;
            const quantity = parseInt(quantityInput.value);

            // Add your cart logic here
            console.log(`Added ${quantity} ${title} to cart`);

            // Close modal
            modal.style.display = 'none';
        });




    </script>
    <script src="script.js"></script>
</body>

</html>