<?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'       => 'Careers at Etaxpay - Job Openings in Fintech & Insurance',
        'description' => 'Join Etaxpay.in, India\'s growing vehicle tax and insurance platform. Explore job openings in sales, technology, operations and customer support.',
        'keywords'    => 'etaxpay careers, jobs in fintech India, insurance company jobs, vehicle tax portal jobs',
        'canonical'   => 'https://etaxpay.in/career',
    ];
    include __DIR__ . '/includes/seo.php';
    ?>
    <!-- JSON-LD: BreadcrumbList -->
    <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": "Careers", "item": "https://etaxpay.in/career"}
      ]
    }
    </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>
    <?=$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="flex items-center justify-center px-4 py-1 mb-7">
        <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-2xl">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <i class="fas fa-briefcase mr-2 text-blue-600"></i> Apply for a Job
            </h2>
            
            <form action="career_process.php" method="POST" enctype="multipart/form-data" class="space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <i class="fas fa-user mr-2 text-blue-600"></i> First Name
                        </label>
                        <input type="text" id="first_name" name="first_name" placeholder="Enter First Name" required
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <i class="fas fa-user mr-2 text-blue-600"></i> Last Name
                        </label>
                        <input type="text" id="last_name" name="last_name" placeholder="Enter Last Name" required
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                        <i class="fas fa-envelope mr-2 text-blue-600"></i> Email
                    </label>
                    <input type="email" id="email" name="email" placeholder="Enter Email" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label for="mobileNumber" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                        <i class="fas fa-phone mr-2 text-blue-600"></i> Phone Number
                    </label>
                    <input type="number" id="mobileNumber" name="phone_number" placeholder="Enter Phone Number" 
                           maxlength="10" pattern="[0-9]{10}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label for="experience" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                        <i class="fas fa-briefcase mr-2 text-blue-600"></i> Years of Experience
                    </label>
                    <input type="number" id="experience" name="experience" placeholder="Enter Years of Experience" 
                           min="0" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label for="resume" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                        <i class="fas fa-file-upload mr-2 text-blue-600"></i> Upload Resume (PDF/DOC)
                    </label>
                    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required
                           class="block w-full text-sm text-gray-500
                                  file:mr-4 file:py-2 file:px-4
                                  file:rounded-md file:border-0
                                  file:text-sm file:font-semibold
                                  file:bg-blue-50 file:text-blue-700
                                  hover:file:bg-blue-100">
                </div>

                <button type="submit" 
                        class="w-full bg-blue-600 text-white py-3 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 flex items-center justify-center">
                    <i class="fas fa-paper-plane mr-2"></i> Submit Application
                </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>
<?php include __DIR__ . '/includes/footer.php'; ?>

    <script>
        // Phone number validation to ensure only numbers are entered
        document.getElementById('mobileNumber').addEventListener('input', function(e) {
            this.value = this.value.replace(/[^0-9]/g, '');
            if (this.value.length > 10) {
                this.value = this.value.slice(0, 10);
            }
        });
    </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>