<?php
/*
|--------------------------------------------------------------------------
| MODERN CAR RENTAL PORTAL HEADER
|--------------------------------------------------------------------------
| Existing PHP sessions, database structure and routes preserved.
|--------------------------------------------------------------------------
*/

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}


/*
|--------------------------------------------------------------------------
| CONTACT INFORMATION
|--------------------------------------------------------------------------
*/

$email = '';
$contactno = '';

try {

    $sql = "SELECT EmailId, ContactNo FROM tblcontactusinfo LIMIT 1";

    $query = $dbh->prepare($sql);
    $query->execute();

    $contactInfo = $query->fetch(PDO::FETCH_OBJ);

    if ($contactInfo) {
        $email = $contactInfo->EmailId;
        $contactno = $contactInfo->ContactNo;
    }

} catch (Exception $e) {

    $email = '';
    $contactno = '';

}


/*
|--------------------------------------------------------------------------
| LOGGED-IN USER
|--------------------------------------------------------------------------
*/

$loggedIn = !empty($_SESSION['login']);

$userName = '';

if ($loggedIn) {

    $userEmail = $_SESSION['login'];

    try {

        $sql = "SELECT FullName FROM tblusers WHERE EmailId = :email LIMIT 1";

        $query = $dbh->prepare($sql);

        $query->bindParam(
            ':email',
            $userEmail,
            PDO::PARAM_STR
        );

        $query->execute();

        $user = $query->fetch(PDO::FETCH_OBJ);

        if ($user) {
            $userName = $user->FullName;
        }

    } catch (Exception $e) {

        $userName = '';

    }

}


/*
|--------------------------------------------------------------------------
| USER INITIAL
|--------------------------------------------------------------------------
*/

$userInitial = 'U';

if (!empty($userName)) {

    $userInitial = strtoupper(
        substr(
            trim($userName),
            0,
            1
        )
    );

}

?>


<!-- =========================================================
     MODERN CAR RENTAL HEADER
========================================================= -->

<header class="modern-site-header">


    <!-- =====================================================
         TOP INFORMATION BAR
    ====================================================== -->

    <div class="modern-topbar">

        <div class="modern-container">

            <div class="topbar-left">

                <span>
                    <i class="fa fa-check-circle"></i>
                    Reliable car rental service
                </span>

            </div>


            <div class="topbar-right">

                <?php if (!empty($email)) { ?>

                    <a href="mailto:<?php echo htmlentities($email); ?>">

                        <i class="fa fa-envelope"></i>

                        <?php echo htmlentities($email); ?>

                    </a>

                <?php } ?>


                <?php if (!empty($contactno)) { ?>

                    <a href="tel:<?php echo htmlentities($contactno); ?>">

                        <i class="fa fa-phone"></i>

                        <?php echo htmlentities($contactno); ?>

                    </a>

                <?php } ?>

            </div>

        </div>

    </div>


    <!-- =====================================================
         MAIN NAVIGATION
    ====================================================== -->

    <div class="modern-navbar">

        <div class="modern-container">


            <!-- Logo -->

            <a
                href="index.php"
                class="modern-logo"
            >

                <img
                    src="assets/images/logo.png"
                    alt="Car Rental"
                >

            </a>


            <!-- Desktop Navigation -->

            <nav class="modern-navigation">

                <a
                    href="index.php"
                    class="<?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>"
                >
                    Home
                </a>


                <a href="car-listing.php">
                    Cars
                </a>


                <a href="page.php?type=aboutus">
                    About
                </a>


                <a href="page.php?type=faqs">
                    FAQs
                </a>


                <a href="contact-us.php">
                    Contact
                </a>

            </nav>


            <!-- Right Side -->

            <div class="modern-header-actions">


                <!-- Search -->

                <button
                    type="button"
                    class="modern-search-button"
                    id="modernSearchToggle"
                    aria-label="Search"
                >

                    <i class="fa fa-search"></i>

                </button>


                <?php if ($loggedIn) { ?>


                    <!-- Logged In User -->

                    <div class="modern-user-menu">

                        <button
                            type="button"
                            class="modern-user-button"
                            id="modernUserToggle"
                        >

                            <span class="modern-user-avatar">

                                <?php echo htmlentities($userInitial); ?>

                            </span>

                            <span class="modern-user-name">

                                <?php echo htmlentities($userName); ?>

                            </span>

                            <i class="fa fa-angle-down"></i>

                        </button>


                        <div
                            class="modern-user-dropdown"
                            id="modernUserDropdown"
                        >

                            <div class="user-dropdown-header">

                                <div class="modern-user-avatar large">

                                    <?php echo htmlentities($userInitial); ?>

                                </div>

                                <div>

                                    <strong>
                                        <?php echo htmlentities($userName); ?>
                                    </strong>

                                    <small>
                                        Customer Account
                                    </small>

                                </div>

                            </div>


                            <div class="user-dropdown-divider"></div>


                            <a href="profile.php">

                                <i class="fa fa-user"></i>

                                Profile Settings

                            </a>


                            <a href="my-booking.php">

                                <i class="fa fa-calendar-check-o"></i>

                                My Bookings

                            </a>


                            <a href="update-password.php">

                                <i class="fa fa-lock"></i>

                                Update Password

                            </a>


                            <a href="post-testimonial.php">

                                <i class="fa fa-star"></i>

                                Post a Testimonial

                            </a>


                            <a href="my-testimonials.php">

                                <i class="fa fa-comments"></i>

                                My Testimonials

                            </a>


                            <div class="user-dropdown-divider"></div>


                            <a
                                href="logout.php"
                                class="logout-link"
                            >

                                <i class="fa fa-sign-out"></i>

                                Sign Out

                            </a>

                        </div>

                    </div>


                <?php } else { ?>


                    <!-- Login -->

                    <a
                        href="#loginform"
                        class="modern-login"
                        data-toggle="modal"
                        data-dismiss="modal"
                    >

                        Login

                    </a>


                    <!-- Register -->

                    <a
                        href="#registration"
                        class="modern-register"
                        data-toggle="modal"
                        data-dismiss="modal"
                    >

                        Get Started

                        <i class="fa fa-arrow-right"></i>

                    </a>


                <?php } ?>


                <!-- Mobile Menu -->

                <button
                    type="button"
                    class="modern-mobile-toggle"
                    id="modernMobileToggle"
                    aria-label="Open menu"
                >

                    <span></span>
                    <span></span>
                    <span></span>

                </button>


            </div>

        </div>

    </div>


    <!-- =====================================================
         MOBILE NAVIGATION
    ====================================================== -->

    <div
        class="modern-mobile-navigation"
        id="modernMobileNavigation"
    >

        <a href="index.php">

            <i class="fa fa-home"></i>

            Home

        </a>


        <a href="car-listing.php">

            <i class="fa fa-car"></i>

            Cars

        </a>


        <a href="page.php?type=aboutus">

            <i class="fa fa-info-circle"></i>

            About

        </a>


        <a href="page.php?type=faqs">

            <i class="fa fa-question-circle"></i>

            FAQs

        </a>


        <a href="contact-us.php">

            <i class="fa fa-phone"></i>

            Contact

        </a>


        <?php if ($loggedIn) { ?>

            <div class="mobile-user-section">

                <div class="mobile-user-profile">

                    <span class="modern-user-avatar">

                        <?php echo htmlentities($userInitial); ?>

                    </span>

                    <strong>

                        <?php echo htmlentities($userName); ?>

                    </strong>

                </div>


                <a href="profile.php">

                    <i class="fa fa-user"></i>

                    Profile

                </a>


                <a href="my-booking.php">

                    <i class="fa fa-calendar"></i>

                    My Bookings

                </a>


                <a href="logout.php">

                    <i class="fa fa-sign-out"></i>

                    Sign Out

                </a>

            </div>

        <?php } else { ?>

            <div class="mobile-auth-buttons">

                <a
                    href="#loginform"
                    data-toggle="modal"
                    class="mobile-login"
                >

                    Login

                </a>


                <a
                    href="#registration"
                    data-toggle="modal"
                    class="mobile-register"
                >

                    Create Account

                </a>

            </div>

        <?php } ?>

    </div>


    <!-- =====================================================
         SEARCH PANEL
    ====================================================== -->

    <div
        class="modern-search-panel"
        id="modernSearchPanel"
    >

        <div class="modern-container">

            <form
                action="search.php"
                method="post"
                class="modern-search-form"
            >

                <div class="modern-search-input">

                    <i class="fa fa-search"></i>

                    <input
                        type="text"
                        name="searchdata"
                        placeholder="Search for a car, brand or model..."
                        required
                    >

                </div>


                <button type="submit">

                    Search

                </button>

            </form>

        </div>

    </div>

</header>


<!-- =========================================================
     HEADER STYLES
========================================================= -->

<style>

/* =========================================================
   VARIABLES
========================================================= */

:root {

    --header-dark: #071A33;

    --header-primary: #0B5ED7;

    --header-blue: #3B82F6;

    --header-text: #344054;

    --header-muted: #667085;

    --header-border: #EAECF0;

    --header-light: #F8FAFC;

    --header-white: #FFFFFF;

}


/* =========================================================
   HEADER RESET
========================================================= */

.modern-site-header {

    position: relative;

    z-index: 1000;

    width: 100%;

    background: #fff;

}


/* =========================================================
   CONTAINER
========================================================= */

.modern-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding-left: 20px;

    padding-right: 20px;

}


/* =========================================================
   TOP BAR
========================================================= */

.modern-topbar {

    height: 38px;

    background: var(--header-dark);

    color: rgba(255,255,255,.75);

    font-size: 11px;

}


.modern-topbar .modern-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.topbar-left span {

    display: flex;

    align-items: center;

    gap: 6px;

}


.topbar-left i {

    color: #4ade80;

}


.topbar-right {

    display: flex;

    align-items: center;

    gap: 22px;

}


.topbar-right a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: rgba(255,255,255,.75);

    text-decoration: none;

}


.topbar-right a:hover {

    color: #fff;

}


.topbar-right i {

    color: #5EA5FF;

}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.modern-navbar {

    height: 78px;

    background: #fff;

    border-bottom: 1px solid var(--header-border);

}


.modern-navbar .modern-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   LOGO
========================================================= */

.modern-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.modern-logo img {

    display: block;

    max-width: 150px;

    max-height: 48px;

    width: auto;

    height: auto;

}


/* =========================================================
   NAVIGATION
========================================================= */

.modern-navigation {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-left: auto;

    margin-right: 30px;

}


.modern-navigation a {

    position: relative;

    display: flex;

    align-items: center;

    height: 78px;

    padding: 0 15px;

    color: #475467;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

}


.modern-navigation a:hover {

    color: var(--header-primary);

}


.modern-navigation a.active {

    color: var(--header-primary);

}


.modern-navigation a.active:after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 0;

    height: 3px;

    border-radius: 5px 5px 0 0;

    background: var(--header-primary);

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.modern-header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.modern-search-button {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--header-border);

    border-radius: 9px;

    background: #fff;

    color: #475467;

    cursor: pointer;

    transition: .2s ease;

}


.modern-search-button:hover {

    color: var(--header-primary);

    border-color: #B2CCFF;

    background: #F5F8FF;

}


/* =========================================================
   LOGIN
========================================================= */

.modern-login {

    color: #344054 !important;

    font-size: 13px;

    font-weight: 800;

    padding: 10px 12px;

    text-decoration: none !important;

}


.modern-login:hover {

    color: var(--header-primary) !important;

}


/* =========================================================
   REGISTER BUTTON
========================================================= */

.modern-register {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 8px;

    background: var(--header-primary);

    color: #fff !important;

    font-size: 13px;

    font-weight: 900;

    text-decoration: none !important;

    transition: .2s ease;

}


.modern-register:hover {

    background: #084298;

    transform: translateY(-1px);

}


.modern-register i {

    font-size: 11px;

}


/* =========================================================
   USER BUTTON
========================================================= */

.modern-user-menu {

    position: relative;

}


.modern-user-button {

    display: flex;

    align-items: center;

    gap: 8px;

    height: 44px;

    padding: 3px 10px 3px 4px;

    border: 1px solid var(--header-border);

    border-radius: 50px;

    background: #fff;

    color: #344054;

    cursor: pointer;

}


.modern-user-button:hover {

    border-color: #B2CCFF;

}


.modern-user-name {

    max-width: 110px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 12px;

    font-weight: 800;

}


.modern-user-button > i {

    color: #98A2B3;

    font-size: 11px;

}


.modern-user-avatar {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #EAF2FF;

    color: var(--header-primary);

    font-size: 13px;

    font-weight: 900;

}


.modern-user-avatar.large {

    width: 42px;

    height: 42px;

}


/* =========================================================
   USER DROPDOWN
========================================================= */

.modern-user-dropdown {

    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    width: 255px;

    padding: 10px;

    background: #fff;

    border: 1px solid var(--header-border);

    border-radius: 12px;

    box-shadow: 0 18px 45px rgba(16,24,40,.15);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-5px);

    transition: all .2s ease;

}


.modern-user-dropdown.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.user-dropdown-header {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px;

}


.user-dropdown-header strong {

    display: block;

    color: #101828;

    font-size: 13px;

    font-weight: 900;

}


.user-dropdown-header small {

    display: block;

    color: #98A2B3;

    font-size: 10px;

    margin-top: 2px;

}


.user-dropdown-divider {

    height: 1px;

    background: #F2F4F7;

    margin: 6px 0;

}


.modern-user-dropdown > a {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 10px;

    border-radius: 7px;

    color: #475467;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

}


.modern-user-dropdown > a:hover {

    color: var(--header-primary);

    background: #F5F8FF;

}


.modern-user-dropdown > a i {

    width: 17px;

    color: #667085;

    text-align: center;

}


.modern-user-dropdown > a:hover i {

    color: var(--header-primary);

}


.modern-user-dropdown .logout-link {

    color: #D92D20;

}


.modern-user-dropdown .logout-link:hover {

    color: #B42318;

    background: #FEF3F2;

}


/* =========================================================
   SEARCH PANEL
========================================================= */

.modern-search-panel {

    display: none;

    background: #F8FAFC;

    border-bottom: 1px solid var(--header-border);

    padding: 15px 0;

}


.modern-search-panel.show {

    display: block;

}


.modern-search-form {

    display: flex;

    gap: 10px;

    max-width: 800px;

    margin: 0 auto;

}


.modern-search-input {

    position: relative;

    flex: 1;

}


.modern-search-input i {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #98A2B3;

}


.modern-search-input input {

    width: 100%;

    height: 48px;

    padding: 0 15px 0 43px;

    border: 1px solid var(--header-border);

    border-radius: 8px;

    background: #fff;

    color: #101828;

    outline: none;

}


.modern-search-input input:focus {

    border-color: var(--header-primary);

    box-shadow: 0 0 0 3px rgba(11,94,215,.08);

}


.modern-search-form button {

    height: 48px;

    padding: 0 25px;

    border: none;

    border-radius: 8px;

    background: var(--header-primary);

    color: #fff;

    font-weight: 900;

    cursor: pointer;

}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.modern-mobile-toggle {

    display: none;

    width: 42px;

    height: 42px;

    padding: 9px;

    border: 1px solid var(--header-border);

    border-radius: 8px;

    background: #fff;

    cursor: pointer;

}


.modern-mobile-toggle span {

    display: block;

    height: 2px;

    margin: 4px 0;

    background: #344054;

    border-radius: 3px;

    transition: .2s ease;

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.modern-mobile-navigation {

    display: none;

    background: #fff;

    border-bottom: 1px solid var(--header-border);

    box-shadow: 0 12px 30px rgba(16,24,40,.08);

}


.modern-mobile-navigation.show {

    display: block;

}


.modern-mobile-navigation > a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 20px;

    color: #344054;

    font-size: 14px;

    font-weight: 800;

    border-bottom: 1px solid #F2F4F7;

    text-decoration: none;

}


.modern-mobile-navigation > a:hover {

    color: var(--header-primary);

    background: #F8FAFC;

}


.modern-mobile-navigation > a i {

    width: 18px;

    color: var(--header-primary);

    text-align: center;

}


.mobile-user-section {

    padding: 10px 0;

}


.mobile-user-profile {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 20px;

    background: #F8FAFC;

    color: #101828;

}


.mobile-user-profile strong {

    font-size: 13px;

}


.mobile-auth-buttons {

    display: flex;

    gap: 10px;

    padding: 15px 20px;

}


.mobile-login,
.mobile-register {

    flex: 1;

    text-align: center;

    padding: 12px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 900;

    text-decoration: none !important;

}


.mobile-login {

    border: 1px solid var(--header-border);

    color: #344054 !important;

}


.mobile-register {

    background: var(--header-primary);

    color: #fff !important;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 1050px) {

    .modern-navigation {

        margin-right: 10px;

    }


    .modern-navigation a {

        padding-left: 10px;

        padding-right: 10px;

    }


    .modern-navigation a.active:after {

        left: 10px;

        right: 10px;

    }


    .modern-user-name {

        display: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 850px) {

    .modern-topbar {

        display: none;

    }


    .modern-navbar {

        height: 70px;

    }


    .modern-navbar .modern-container {

        padding-left: 15px;

        padding-right: 15px;

    }


    .modern-logo img {

        max-width: 130px;

        max-height: 43px;

    }


    .modern-navigation {

        display: none;

    }


    .modern-search-button {

        display: none;

    }


    .modern-mobile-toggle {

        display: block;

    }


    .modern-header-actions {

        gap: 6px;

    }


    .modern-login {

        display: none;

    }


    .modern-register {

        padding: 10px 13px;

        font-size: 12px;

    }

}


@media(max-width: 480px) {

    .modern-register {

        display: none;

    }


    .modern-mobile-toggle {

        display: block;

    }


    .modern-logo img {

        max-width: 120px;

    }


    .modern-search-form {

        flex-direction: column;

    }


    .modern-search-form button {

        width: 100%;

    }

}

</style>


<!-- =========================================================
     HEADER JAVASCRIPT
========================================================= -->

<script>

(function($) {

    'use strict';


    /*
    |--------------------------------------------------------------------------
    | Search Toggle
    |--------------------------------------------------------------------------
    */

    $(document).on('click', '#modernSearchToggle', function(e) {

        e.preventDefault();

        $('#modernSearchPanel').toggleClass('show');

        if ($('#modernSearchPanel').hasClass('show')) {

            $('#modernSearchPanel input').focus();

        }

    });


    /*
    |--------------------------------------------------------------------------
    | User Dropdown
    |--------------------------------------------------------------------------
    */

    $(document).on('click', '#modernUserToggle', function(e) {

        e.preventDefault();

        e.stopPropagation();

        $('#modernUserDropdown').toggleClass('show');

    });


    /*
    |--------------------------------------------------------------------------
    | Close User Dropdown
    |--------------------------------------------------------------------------
    */

    $(document).on('click', function(e) {

        if (
            !$(e.target).closest('.modern-user-menu').length
        ) {

            $('#modernUserDropdown').removeClass('show');

        }

    });


    /*
    |--------------------------------------------------------------------------
    | Mobile Menu
    |--------------------------------------------------------------------------
    */

    $(document).on('click', '#modernMobileToggle', function(e) {

        e.preventDefault();

        $('#modernMobileNavigation').toggleClass('show');

    });


    /*
    |--------------------------------------------------------------------------
    | Close Mobile Menu When Link Is Clicked
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '#modernMobileNavigation a',
        function() {

            $('#modernMobileNavigation').removeClass('show');

        }
    );


})(jQuery);

</script>
