<?php
// Initialize variables for announcements
$announcement_1 = "";
$announcement_2 = "";
$announcement_3 = "";

require_once __DIR__ . '/includes/database.php';

// Fetch the three most recent announcements from the 'headers' table
$result = $conn->query("SELECT message FROM headers ORDER BY id DESC LIMIT 3");

if ($result) {
    $i = 0;
    while ($row = $result->fetch_assoc()) {
        if ($i == 0) {
            $announcement_1 = $row['message'];
        } elseif ($i == 1) {
            $announcement_2 = $row['message'];
        } elseif ($i == 2) {
            $announcement_3 = $row['message'];
        }
        $i++;
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
    $seo = [
        'title'       => 'Customer Feedback | Etaxpay.in',
        'description' => 'Share your experience with Etaxpay vehicle road tax payment and insurance services. Your feedback helps us serve you better.',
        'keywords'    => 'etaxpay feedback, review etaxpay, vehicle tax service review India',
        'canonical'   => 'https://etaxpay.in/feedback',
        'noindex'     => true,
    ];
    include __DIR__ . '/includes/seo.php';
    ?>
    <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
    <?=$page['css'] ?>
    
    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Show the dropdown content when hovering over the menu */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Style the dropdown links */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}
    /* Custom dropdown styles (unchanged) */
    .custom-dropdown {
        position: relative;
        margin-bottom: 1rem;
    }

    #dropdown-btn {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        background-color: white;
        text-align: left;
        cursor: pointer;
    }

    #dropdown-menu {
        display: none;
        position: absolute;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        background-color: white;
        z-index: 10;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    #dropdown-menu li {
        padding: 0.75rem;
        cursor: pointer;
        border-bottom: 1px solid #e5e7eb;
    }

    #dropdown-menu li:hover {
        background-color: #e5e7eb;
    }

    .hindi-name {
        display: block;
        font-size: 0.875rem;
        color: #6b7280;
    }

    /* Phone input styles (unchanged) */
    .phone-input {
        display: flex;
        align-items: center;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .phone-input span {
        padding: 0 0.75rem;
        background-color: #f3f4f6;
        border-right: 1px solid #d1d5db;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .phone-input input {
        flex: 1;
        border: none;
        padding: 0.75rem;
        outline: none;
    }

    /* Scrolling text (unchanged) */
    .scrolling-text2 {
        animation: scroll 10s linear infinite;
    }

    .scrolling-text {
        animation: scroll 30s linear infinite;
    }

    @keyframes scroll {
        0% {
            transform: translateX(1%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    /* Dropdown menu (unchanged) */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Mobile-specific styles */
    @media (max-width: 768px) {

        /* Top notification bar */
        .top-notification {
            flex-direction: column;
            padding: 0.5rem;
            text-align: center;
        }

        .scrolling-text {
            width: 100%;
            animation: scroll 3s linear infinite;
            padding-left: 100%;
        }

        .scrolling-text2 {
            width: 100%;
            animation: scroll 2s linear infinite;
            padding-left: 100%;
        }

        .top-links {
            display: none;
        }

        h1 {
            position: static;
            transform: none;
            margin: 0.5rem 0;
            font-size: 1.5rem;
            width: 100%;
            text-align: center;
        }

        .text-right {
            text-align: center;
            margin-top: 0.5rem;
        }

        /* Navigation */
        nav .container {
            padding: 0;
            overflow-x: auto;
            white-space: nowrap;
        }

        nav .flex {
            display: inline-flex;
            padding: 0.5rem 0;
        }

        nav a,
        .dropdown>a {
            padding: 0.5rem 1rem;
        }

        .dropdown-content {
            position: absolute;
            width: auto;
        }

        /* Form adjustments */
        main {
            padding: 0;
        }

        main .max-w-2xl {
            border-radius: 0;
            margin: 0;
        }
    }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Website Name in the Top Left Corner -->
    <div class="bg-[#1c366b] text-white text-sm py-1 px-4 flex justify-between items-center">
        <div class="overflow-hidden whitespace-nowrap w-[50%]">
            <div class="scrolling-text inline-block pl-[100%]">
                Please pay tax in advance to avoid any last-minute hassle.
            </div>
        </div>
        <div class="flex items-center space-x-3 ml-4">
            <a href="index.php" class="hover:text-blue-200 transition">Home</a>
            <span>|</span>
            <a href="https://api.whatsapp.com/send/?phone=9417178593" class="hover:text-blue-200 transition">Contact
                us</a>
            <span>|</span>
            <a href="#" class="hover:text-blue-200 transition">Skip main content</a>
            <span>|</span>
            <span class="flex space-x-1">
                <a href="#" class="hover:text-blue-200 transition">A+</a>
                <a href="#" class="hover:text-blue-200 transition">A</a>
                <a href="#" class="hover:text-blue-200 transition">A-</a>
            </span>
        </div>
    </div>

    <!-- Header Section -->
    <header class="bg-[#4A9DD0] shadow-md">
        <div class="container mx-auto px-4 flex items-center justify-between">
            <div class="flex items-center w-full relative">
                <!-- Logo on the left -->
                <div class="h-[5rem] flex justify-center items-center">
                    <a href="index.php">
                        <img src="mainlogo.png" alt="Etaxpay Logo" class="" width="130px">
                    </a>
                </div>

                <!-- Site name absolutely centered in the container -->
                <h1 class="hidden md:block text-2xl font-bold text-white absolute left-1/2 transform -translate-x-1/2">
                    Etaxpay
                </h1>
            </div>
            <div class="text-right">
                <div class="text-sm font-semibold text-white">AssistPortal</div>
                <div class="text-xs text-gray-200">By Etaxpay.in</div>
            </div>
        </div>
    </header>

 <!-- Navigation Bar -->
    <nav class="text-white shadow-lg" style="background-color: rgb(41, 88, 159);">
        <div class="container mx-auto px-4">
            <div class="flex items-center space-x-3">
                <a href="index.php" class="flex items-center px-2 py-2 rounded hover:bg-blue-600 transition">
                    <i class="fas fa-home mr-2"></i> Home
                </a>

                <!-- Static Services Dropdown - UPDATED -->
                <div class="dropdown relative">
                    <a href="#"
                        class="dropdown-toggle flex items-center px-3 py-2 rounded hover:bg-blue-600 transition">
                        <i class="fas fa-user mr-2"></i> Services <i class="fas fa-caret-down ml-1"></i>
                    </a>
                    <div
                        class="dropdown-content hidden absolute left-0 mt-1 w-48 bg-white text-gray-800 rounded-md shadow-lg z-10">
                        <a href="taxform.php"
                            class="block px-4 py-2 hover:bg-[#d1d5db] hover:text-white rounded-t-md">Tax Payment</a>

                        <?php
        include('config.php');
        $query = "SELECT * FROM services ORDER BY id ASC";
        $result = mysqli_query($conn, $query);
        while ($row = mysqli_fetch_assoc($result)) {
            echo "<a href='{$row['service_link']}' class='block px-4 py-2 hover:bg-[#d1d5db] hover:text-white'>{$row['service_name']}</a>";
        }
        ?>
                    </div>
                </div>

                <!-- Add mobile menu toggle button here -->
                <div class="mobile-menu-toggle lg:hidden ml-auto">
                    <i class="fas fa-bars"></i>
                </div>

                <!-- Dynamic Menus & Submenus (Loaded Here) -->
                <div id="menu-list" class="flex items-center space-x-5"></div>
            </div>
        </div>
    </nav>
    <div class="border-t border-gray-800"></div>

    <!-- Scrolling Announcement Section -->
    <div class="bg-[#29589F] px-4 py-1">
        <div class="flex items-center overflow-hidden whitespace-nowrap">
            <div class="scrolling-text inline-block pl-[100%] text-[#FFFFFF] font-bold text-sm">
                <?= htmlspecialchars($announcement_3) ?>
            </div>
        </div>
    </div>
    <hr>
    <!-- Alert Box -->
    <!-- Scrolling Announcement Section for Announcement 2 -->
    <div class="bg-[#ADD8E6] px-4 mb-5  py-1">
        <div class="flex items-center overflow-hidden whitespace-nowrap">
            <div class="scrolling-text inline-block pl-[100%] text-[#ed1010] font-semibold text-sm">
                <?= htmlspecialchars($announcement_2) ?>
            </div>
        </div>
    </div>


    
    <div class="py-1 flex items-center justify-center px-4 mb-8">
        <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
            <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">Submit Your Feedback</h2>
            <form action="process_feedback.php" method="POST" class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name:</label>
                    <input type="text" id="name" name="name" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number:</label>
                    <input type="text" id="phone" name="phone" maxlength="10" pattern="\d{10}" 
                           title="Enter exactly 10 digits" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="feedback" class="block text-sm font-medium text-gray-700 mb-1">Your Feedback:</label>
                    <textarea id="feedback" name="feedback" rows="3" required
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <button type="submit" 
                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    Submit
                </button>
            </form>
        </div>
    </div>
    
    <!-- Scrolling Announcement Section for Announcement 3 -->
 <div class="bg-[#1c366b] px-4">
        <div class="flex items-center overflow-hidden whitespace-nowrap">
            <div class="scrolling-text inline-block pl-[100%] text-[#FFFFFF] font-bold text-sm">
                <?= htmlspecialchars($announcement_1) ?>
            </div>
        </div>
    </div>
</div>
<?php include __DIR__ . '/includes/footer.php'; ?>

    <script>
        document.getElementById('phone').addEventListener('input', function (e) {
            this.value = this.value.replace(/[^0-9]/g, ''); // Only allow numbers
        });
    </script>
     <script>
    document.addEventListener("DOMContentLoaded", function() {
        console.log("📌 Page Loaded. Fetching menus...");
        loadMenus();
        loadButtons();
    });

    function loadMenus() {
        fetch("fetch_menus.php?t=" + new Date().getTime())
            .then(response => response.text())
            .then(data => {
                console.log("📌 Fetched Menu Data:", data);

                let menuList = document.getElementById("menu-list");
                if (!menuList) {
                    console.error("❌ Element #menu-list not found in index.html");
                    return;
                }

                menuList.innerHTML = data;

                // Hide all dropdowns by default
                document.querySelectorAll('.dropdown-content').forEach(dropdown => {
                    dropdown.classList.add('hidden');
                });

                // After loading the menus, ensure the dropdown functionality works
                setupDropdowns();
            })
            .catch(error => console.error('❌ Error fetching menus:', error));
    }

    function loadButtons() {
        fetch("fetch_buttons.php?t=" + new Date().getTime())
            .then(response => response.text())
            .then(data => {
                console.log("📌 Fetched Button Data:", data);

                let dynamicButtons = document.getElementById("dynamic-buttons");
                if (!dynamicButtons) {
                    console.error("❌ Element #dynamic-buttons not found");
                    return;
                }

                dynamicButtons.innerHTML = data;
            })
            .catch(error => console.error('❌ Error fetching buttons:', error));
    }
    </script>
</body>
</html>