<?php
include "config.php";  

$check = $conn->query("SELECT maintenance_mode FROM settings WHERE id=1");
$row = $check->fetch_assoc();

if ($row['maintenance_mode'] == 1) {
    header("Location: maintaince.php");
    exit;
}
?>

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


// 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'       => 'Checkpost v4 Tax Collection Online | Parivahan Border Tax Payment - All States | Etaxpay',
        'description' => 'Pay checkpost tax online via Parivahan checkpost v4 portal. Border tax payment for UP, Rajasthan, MP, Maharashtra, Haryana, Punjab, Bihar, Gujarat, Delhi NCR & all states. Download receipt, check pending transactions, print permits instantly.',
        'keywords'    => 'checkpost tax online payment, parivahan checkpost, parivahan checkpost tax, border tax online payment, state checkpost tax payment, parivahan tax payment online, vahan checkpost tax, pay vehicle tax online other state, how to pay border tax online, checkpost tax payment receipt download, parivahan checkpost receipt print, verify checkpost tax receipt, check pending checkpost transaction, online checkpost permit fee payment, checkpost parivahan login, parivahan checkpost v4, checkpostv4 parivahan gov in, services parivahan gov in checkpostv4, vahan checkpost v4 tax payment, parivahan checkpost version 4, new parivahan checkpost portal, checkpost v4 tax collection, vehicle tax collection other state v4, online checkpost tax payment v4, parivahan v4 border tax online, commercial vehicle border tax v4, pay state tax online checkpost v4, checkpostv4 tax collection online, up checkpost tax online payment, up checkpost tax payment v4, rajasthan border tax online payment, rajasthan border tax v4 online, mp checkpost tax online, mp checkpost v4 tax collection, maharashtra vehicle border tax online, haryana checkpost tax payment parivahan, haryana checkpostv4 entry tax, punjab entry tax online payment commercial vehicle, bihar border tax payment parivahan, bihar border checkpost v4 payment, gujarat border checkpost tax online, delhi ncr vehicle tax collection v4, commercial vehicle state tax online, tourist taxi border tax payment, goods vehicle border tax parivahan, temporary permit tax payment online, national permit fee payment parivahan, passenger bus state entry tax online, truck border tax payment online, parivahan checkpost tax calculation online, checkpost v4 check pending transaction, download receipt from checkpost v4 parivahan, parivahan checkpost v4 payment failed solution, how to calculate tax in checkpostv4, vehicle tax collection NCR permit v4, checkpost v4 print receipt online, bulk border tax payment parivahan v4, truck border tax collection v4, tourist taxi state tax online checkpost v4, goods vehicle entry tax collection v4, TP tax, permit vehicle permit, transport permit, pickup tax, taxi tax, bolero tax, traveler tax, checkpost tax, road tax, daily road tax, motor tax, truck tax',
        'canonical'   => 'https://etaxpay.in/taxform',
    ];
    include __DIR__ . '/includes/seo.php';
    ?>
    <!-- JSON-LD: Service Schema -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Service",
      "name": "Online Checkpost Tax Payment - Parivahan Border Tax",
      "provider": {
        "@type": "Organization",
        "name": "Etaxpay",
        "url": "https://etaxpay.in"
      },
      "url": "https://etaxpay.in/taxform",
      "description": "Pay checkpost tax online via Parivahan checkpost v4 portal. Border tax payment, state entry fees, and permit tax for commercial vehicles, trucks, taxis, buses across all Indian states including UP, Rajasthan, MP, Maharashtra, Haryana, Punjab, Bihar, Gujarat, Delhi NCR.",
      "areaServed": {
        "@type": "Country",
        "name": "India"
      },
      "serviceType": "Checkpost Tax Payment, Border Tax Payment, Parivahan Tax Collection"
    }
    </script>
    <!-- JSON-LD: FAQ Schema -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "How to pay checkpost tax online via Parivahan?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Visit etaxpay.in/taxform, enter your vehicle registration number, select the destination state for border tax, choose tax duration (daily or weekly), and pay securely via UPI, netbanking, or card. You will receive your checkpost tax receipt via WhatsApp instantly."
          }
        },
        {
          "@type": "Question",
          "name": "Which states are supported for checkpost tax payment?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Etaxpay supports checkpost tax and border tax payment for all major Indian states: Uttar Pradesh (UP), Rajasthan, Madhya Pradesh (MP), Maharashtra, Haryana, Punjab, Bihar, Gujarat, Delhi NCR, Himachal Pradesh, Uttarakhand, Jharkhand, Jammu & Kashmir, Chandigarh, Tripura, Chhattisgarh, Odisha, West Bengal, Andhra Pradesh, Telangana, Tamil Nadu, and Karnataka."
          }
        },
        {
          "@type": "Question",
          "name": "How to download checkpost tax payment receipt?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "After successful checkpost tax payment, your receipt is sent instantly via WhatsApp. You can also print the parivahan checkpost receipt directly from the payment confirmation page. The receipt serves as valid proof at all state border checkposts."
          }
        },
        {
          "@type": "Question",
          "name": "Can I pay checkpost tax via UPI or netbanking?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes, Etaxpay supports UPI (Google Pay, PhonePe, Paytm), netbanking, debit cards, and credit cards for checkpost tax payment. All payments are processed through secure verified payment gateways."
          }
        },
        {
          "@type": "Question",
          "name": "What is Parivahan Checkpost v4?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Parivahan Checkpost v4 is the upgraded version of the government's vehicle tax collection system for other state vehicles. It enables online payment of border tax, state entry fees, and temporary permits for commercial vehicles, trucks, taxis, and buses crossing state borders."
          }
        },
        {
          "@type": "Question",
          "name": "How to check pending checkpost transaction?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "If your checkpost tax payment is pending, you can check the status on Etaxpay. Failed transactions are automatically tracked and refunded within 3-5 business days. Contact our WhatsApp support for immediate assistance with pending parivahan checkpost transactions."
          }
        },
        {
          "@type": "Question",
          "name": "What happens if I don't pay border tax online?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "If you don't pay border tax before entering another state, you may face penalties at the state checkpost including fines, vehicle detention by transport authorities, and delays. It is recommended to pay checkpost tax online in advance to avoid extra charges and save time at border checkposts."
          }
        },
        {
          "@type": "Question",
          "name": "How is checkpost tax calculated for commercial vehicles?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Checkpost tax is calculated based on vehicle type (truck, bus, taxi, pickup, bolero, traveler), seating capacity or loading capacity, destination state, and duration (daily or weekly). On Etaxpay, select your vehicle details and the parivahan checkpost v4 system automatically calculates the applicable tax amount."
          }
        }
      ]
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://etaxpay.in/"},
        {"@type": "ListItem", "position": 2, "name": "Pay Road Tax Online", "item": "https://etaxpay.in/taxform"}
      ]
    }
    </script>
    <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>
    /* Add this new style for the end date */
    .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;
    }

    #end_date_container {
        display: none;
    }

    /* 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: #f3f4f6;
    }

    .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;
        }

        .bg-blue-800 {
            padding: 1rem;
        }

        .p-6 {
            padding: 1rem;
        }

        /* Footer */
        footer {
            padding: 1rem;
        }
    }
    </style>
</head>

<body class="bg-gray-50 font-sans">
    <!-- Top Notification Bar (unchanged) -->
    <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>
    <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>

    <!-- Main Content (unchanged) -->
    <main class="container mx-auto px-4 pt-2 pb-4">
        <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-[#29589f] text-white py-4 px-6">
                <h2 class="text-xl font-semibold">Border Tax Payment</h2>
                <p class="text-blue-100 text-sm mt-1">Fill in the details below to proceed with the tax payment.</p>
            </div>

            <div class="p-6">
                <form action="process_form.php" method="POST" class="space-y-4">
                    <!-- State Selection -->
                    <div>
                        <label for="state" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-map-marker-alt mr-1 text-blue-600"></i> Select Visiting State
                        </label>
                        <div class="custom-dropdown">
                            <button type="button" id="dropdown-btn"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm">
                                Select a state
                            </button>
                            <ul id="dropdown-menu" class="hidden">
                                <li onclick="selectState('AP')">
                                    <span>Andhra Pradesh</span>
                                    <span class="hindi-name">आंध्र प्रदेश</span>
                                </li>
                                <li onclick="selectState('AS')">
                                    <span>Assam</span>
                                    <span class="hindi-name">असम</span>
                                </li>
                                <li onclick="selectState('BR')">
                                    <span>Bihar</span>
                                    <span class="hindi-name">बिहार</span>
                                </li>
                                <li onclick="selectState('CG')">
                                    <span>Chhattisgarh</span>
                                    <span class="hindi-name">छत्तीसगढ़</span>
                                </li>
                                <li onclick="selectState('DNHDD')">
                                    <span>Dadra & Nagar Haveli</span>
                                    <span class="hindi-name">दादरा और नगर हवेली</span>
                                </li>
                                <li onclick="selectState('GJ')">
                                    <span>Gujarat</span>
                                    <span class="hindi-name">गुजरात</span>
                                </li>
                                <li onclick="selectState('HR')">
                                    <span>Haryana</span>
                                    <span class="hindi-name">हरियाणा</span>
                                </li>
                                <li onclick="selectState('HP')">
                                    <span>Himachal Pradesh</span>
                                    <span class="hindi-name">हिमाचल प्रदेश</span>
                                </li>
                                <li onclick="selectState('JK')">
                                    <span>Jammu & Kashmir</span>
                                    <span class="hindi-name">जम्मू और कश्मीर</span>
                                </li>
                                <li onclick="selectState('JH')">
                                    <span>Jharkhand</span>
                                    <span class="hindi-name">झारखंड</span>
                                </li>
                                <li onclick="selectState('KA')">
                                    <span>Karnataka</span>
                                    <span class="hindi-name">कर्नाटक</span>
                                </li>
                                <li onclick="selectState('KL')">
                                    <span>Kerala</span>
                                    <span class="hindi-name">केरल</span>
                                </li>
                                <li onclick="selectState('MP')">
                                    <span>Madhya Pradesh</span>
                                    <span class="hindi-name">मध्य प्रदेश</span>
                                </li>
                                <li onclick="selectState('MH')">
                                    <span>Maharashtra</span>
                                    <span class="hindi-name">महाराष्ट्र</span>
                                </li>
                                <li onclick="selectState('OD')">
                                    <span>Odisha</span>
                                    <span class="hindi-name">ओडिशा</span>
                                </li>
                                <li onclick="selectState('PB')">
                                    <span>Punjab</span>
                                    <span class="hindi-name">पंजाब</span>
                                </li>
                                <li onclick="selectState('RJ')">
                                    <span>Rajasthan</span>
                                    <span class="hindi-name">राजस्थान</span>
                                </li>
                                <li onclick="selectState('SK')">
                                    <span>Sikkim</span>
                                    <span class="hindi-name">सिक्किम</span>
                                </li>
                                <li onclick="selectState('TN')">
                                    <span>Tamil Nadu</span>
                                    <span class="hindi-name">तमिलनाडु</span>
                                </li>
                                <li onclick="selectState('TR')">
                                    <span>Tripura</span>
                                    <span class="hindi-name">त्रिपुरा</span>
                                </li>
                                <li onclick="selectState('UP')">
                                    <span>Uttar Pradesh</span>
                                    <span class="hindi-name">उत्तर प्रदेश</span>
                                </li>
                                <li onclick="selectState('UK')">
                                    <span>Uttarakhand</span>
                                    <span class="hindi-name">उत्तराखंड</span>
                                </li>
                            </ul>
                        </div>
                        <input type="hidden" name="state" id="selectedState">
                    </div>

                    <!-- Vehicle Number -->
                    <div>
                        <label for="vehicle" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-car mr-1 text-blue-600"></i> Vehicle Number
                        </label>
                        <input type="text" id="vehicle" name="vehicle" placeholder="XX12AB1234" required maxlength="10"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                             oninput="this.value = this.value.toUpperCase();">
                    </div>

                    <!-- Mobile Number -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-mobile-alt mr-1 text-blue-600"></i> Mobile Number
                        </label>
                        <div class="phone-input">
                            <span>+91</span>
                            <input type="tel" id="mobile" name="mobile" placeholder="Enter mobile number" required
                                maxlength="10" class="w-full focus:outline-none">
                        </div>
                    </div>

                    <!-- Seating Capacity -->
                    <div>
                        <label for="seating" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-users mr-1 text-blue-600"></i> Seating Capacity (Including Driver)
                        </label>
                        <select id="seatingCapacity" name="seating"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="" disabled selected>Select Seating Capacity</option>
                        </select>
                    </div>
                    <!-- Border Selection -->
                    <div>
                        <label for="border" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-road mr-1 text-blue-600"></i> Select Border/Barrier
                        </label>
                        <select id="border" name="border" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="" disabled selected>Select a checkpoint</option>
                        </select>
                    </div>

                    <!-- Tax Mode -->
                    <div>
                        <label for="tax_mode" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-money-bill-wave mr-1 text-blue-600"></i> Tax Mode
                        </label>
                        <select id="tax_mode" name="tax_mode" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="" disabled selected>Select tax mode</option>
                        </select>
                    </div>

                    <!-- Tax Date -->
                    <div>
                        <label for="tax_date" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="far fa-calendar-alt mr-1 text-blue-600"></i> Tax Start Date
                        </label>
                        <input type="date" id="tax_date" name="tax_date" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <div id="end_date_container">
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="far fa-calendar-alt mr-1 text-blue-600"></i> Tax End Date
                        </label>
                        <input type="date" id="end_date" name="end_date"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    </div>


                    <!-- Tax Summary -->
                    <div id="taxSummary" class="border border-gray-200 rounded-md p-4 hidden">
                        <h3 class="font-medium text-lg text-blue-800 mb-2">Tax Summary</h3>
                        <div class="space-y-1">
                            <p class="flex justify-between">
                                <span>Tax Amount:</span>
                                <span id="taxAmount" class="font-medium">₹0.00</span>
                            </p>
                            <p class="flex justify-between">
                                <span>Service Charge (Incl. of all taxes):</span>
                                <span id="serviceCharge" class="font-medium">₹25.00</span>
                            </p>
                            <p class="flex justify-between border-t border-gray-200 pt-2 mt-2">
                                <span class="font-semibold">Total:</span>
                                <span id="totalAmount" class="font-semibold text-blue-800">₹0.00</span>
                            </p>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-4">
                        <button type="submit"
                            class="w-full bg-[#29589f] hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md shadow-sm transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Proceed to Pay
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- Scrolling Announcement Section for Announcement 3 -->
    <div class="bg-[#1c366b] 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_1) ?>
            </div>
        </div>
    </div>
<?php include __DIR__ . '/includes/footer.php'; ?>
    <script src="logic.js"></script>
    <script>
    // Mobile dropdown support
    document.querySelectorAll('.dropdown > a').forEach(item => {
        item.addEventListener('click', function(e) {
            if (window.innerWidth <= 768) {
                e.preventDefault();
                const dropdown = this.parentElement;
                const content = dropdown.querySelector('.dropdown-content');
                content.style.display = content.style.display === 'block' ? 'none' : 'block';
            }
        });
    });

    // Show/hide end_date field based on tax mode
    document.getElementById('tax_mode').addEventListener('change', function() {
        const endDateContainer = document.getElementById('end_date_container');
        if (this.value === 'Daily' || this.value === 'Weekly') {
            endDateContainer.style.display = 'block';
            document.getElementById('end_date').required = true;
        } else {
            endDateContainer.style.display = 'none';
            document.getElementById('end_date').required = false;
        }
    });

    document.querySelectorAll('.dropdown-toggle').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            let dropdown = item.closest('.dropdown');
            let dropdownContent = dropdown.querySelector('.dropdown-content');
            dropdownContent.classList.toggle('hidden');
            document.querySelectorAll('.dropdown-content').forEach(otherDropdown => {
                if (otherDropdown !== dropdownContent) {
                    otherDropdown.classList.add('hidden');
                }
            });
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        const dropdown = document.querySelector('.dropdown');
        if (dropdown) {
            const dropdownContent = dropdown.querySelector('.dropdown-content');
            let hideTimeout;
            dropdown.addEventListener('mouseenter', function() {
                clearTimeout(hideTimeout);
                dropdownContent.classList.remove('hidden');
            });
            dropdown.addEventListener('mouseleave', function() {
                hideTimeout = setTimeout(() => {
                    dropdownContent.classList.add('hidden');
                }, 300);
            });
            document.addEventListener('click', function(e) {
                if (!dropdown.contains(e.target)) {
                    dropdownContent.classList.add('hidden');
                }
            });
            dropdownContent.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }
        loadMenus();
        loadButtons();
    });

    function loadMenus() {
        fetch("fetch_menus.php?t=" + new Date().getTime())
            .then(response => response.text())
            .then(data => {
                let menuList = document.getElementById("menu-list");
                if (!menuList) return;
                menuList.innerHTML = data;
                document.querySelectorAll('.dropdown-content').forEach(dropdown => {
                    dropdown.classList.add('hidden');
                });
                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 => {
                let dynamicButtons = document.getElementById("dynamic-buttons");
                if (!dynamicButtons) return;
                dynamicButtons.innerHTML = data;
            })
            .catch(error => console.error('Error fetching buttons:', error));
    }
    </script>
</body>

</html>