<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>הזמנת מלונות באומן - קרוב לציון הקדוש</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
    <script src="https://unpkg.com/@hebcal/core@3.46.2/dist/bundle.js"></script>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&display=swap');

        :root {
            --primary-color: #1a4f8b;
            --secondary-color: #3a7bd5;
            --accent-color: #4a90e2;
            --text-color: #333;
            --background-color: #f8f9fa;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Heebo', sans-serif;
        }

        body {
            min-height: 100vh;
            color: var(--text-color);
            background-color: var(--background-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .main-header {
            background-color: var(--primary-color);
            padding: 1rem 0;
            box-shadow: var(--box-shadow);
        }

        .main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .main-header .logo {
            color: white;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .main-nav {
            display: flex;
            gap: 1rem;
        }

        .nav-item {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .auth-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn-register {
            background-color: white;
            color: var(--primary-color);
        }

        .btn-login {
            background-color: transparent;
            color: white;
            border: 1px solid white;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .header {
            background-image: url('https://i.ibb.co/7gbWb9J/Rebbe-Nachman-Tzion-1.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            padding: 100px 0;
            position: relative;
        }

        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .header-content {
            position: relative;
            z-index: 1;
        }

        .header h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.25rem;
            opacity: 0.9;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-container {
            margin: -50px auto 30px;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: var(--box-shadow);
            position: relative;
            z-index: 2;
        }

        .search-box {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
        }

        .input-group {
            background: var(--background-color);
            border-radius: 8px;
            flex: 1 1 200px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .input-group:hover, .input-group:focus-within {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .input-group i {
            color: var(--primary-color);
            font-size: 20px;
            padding: 0 16px;
        }

        .input-group input, .input-group select {
            border: none;
            outline: none;
            width: 100%;
            padding: 16px;
            font-size: 1rem;
            color: var(--text-color);
            background: transparent;
        }

        .input-group input::placeholder {
            color: #999;
        }

        .search-button {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: 16px 32px;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--box-shadow);
            flex: 1 1 100%;
        }

        .search-button:hover {
            background: #3a7bd5;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        .section {
            padding: 60px 0;
        }

        .section-title {
            font-size: 2.5rem;
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 40px;
        }

        .hotel-results {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .hotel-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: all 0.3s ease;
        }

        .hotel-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .hotel-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .hotel-info {
            padding: 20px;
        }

        .hotel-name {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .hotel-address {
            color: #666;
            margin-bottom: 15px;
        }

        .hotel-rating {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .rating-value {
            background-color: #FFD700;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
        }

        .hotel-features {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .feature {
            background: var(--background-color);
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .hotel-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--success-color);
        }

        .attractions {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
        }

        .attractions .section-title {
            color: white;
        }

        .attraction-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

        .attraction-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .attraction-item:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.2);
        }

        .attraction-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .attraction-name {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        .testimonials {
            background: var(--background-color);
        }

        .testimonial-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .testimonial-item {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: var(--box-shadow);
        }

        .testimonial-content {
            font-style: italic;
            margin-bottom: 20px;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .author-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .author-info {
            display: flex;
            flex-direction: column;
        }

        .author-name {
            font-weight: bold;
            color: var(--primary-color);
        }

        .author-title {
            font-size: 0.9rem;
            color: #666;
        }

        .faq {
            background: white;
        }

        .faq-list {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid #eee;
            padding: 20px 0;
        }

        .faq-question {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-color);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-answer {
            margin-top: 15px;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        .footer {
            background: var(--primary-color);
            color: white;
            padding: 60px 0 30px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
        }

        .footer-section h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: white;
        }

        .social-links {
            display: flex;
            gap: 15px;
        }

        .social-links a {
            color: white;
            font-size: 1.5rem;
            transition: opacity 0.3s ease;
        }

        .social-links a:hover {
            opacity: 0.8;
        }

        .footer-bottom {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2.5rem;
            }

            .header p {
                font-size: 1rem;
            }

            .search-container {
                padding: 20px;
            }

            .input-group {
                flex: 1 1 100%;
            }

            .section-title {
                font-size: 2rem;
            }

            .hotel-results {
                grid-template-columns: 1fr;
            }

            .attraction-list {
                grid-template-columns: 1fr;
            }

            .testimonial-list {
                grid-template-columns: 1fr;
            }
        }
        .flatpickr-calendar {
            background: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            padding: 16px;
            width: auto !important;
        }
        .flatpickr-months {
            background: white;
            color: #000;
            fill: #000;
        }
        .flatpickr-current-month {
            color: #000;
        }
        .flatpickr-monthDropdown-months {
            color: #000;
        }
        .flatpickr-weekdays {
            background: white;
        }
        .flatpickr-weekday {
            color: #000;
            font-weight: bold;
        }

        .flatpickr-calendar {
    font-family: "Arial Black", Arial, sans-serif; /* Added font style */
  }
  .flatpickr-months .flatpickr-month {
    background: transparent; /* Removed blue background from months */
  }

  span.flatpickr-weekday {
    background: transparent; /* Removed blue background from weekdays */
    color: #000; /* Ensured weekday text is visible */
  }

        .flatpickr-day {
            border-radius: 4px;
            max-width: none;
            height: auto !important;
            line-height: 1.3;
            padding: 8px 0;
            color: #000;
        }
        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange,
        .flatpickr-day.selected.inRange,
        .flatpickr-day.startRange.inRange,
        .flatpickr-day.endRange.inRange,
        .flatpickr-day.selected:focus,
        .flatpickr-day.startRange:focus,
        .flatpickr-day.endRange:focus,
        .flatpickr-day.selected:hover,
        .flatpickr-day.startRange:hover,
        .flatpickr-day.endRange:hover,
        .flatpickr-day.selected.prevMonthDay,
        .flatpickr-day.startRange.prevMonthDay,
        .flatpickr-day.endRange.prevMonthDay,
        .flatpickr-day.selected.nextMonthDay,
        .flatpickr-day.startRange.nextMonthDay,
        .flatpickr-day.endRange.nextMonthDay {
            background: #1e6fcf;
    color: white;
        }
        
        /*
        .flatpickr-day.inRange,
        .flatpickr-day.prevMonthDay.inRange,
        .flatpickr-day.nextMonthDay.inRange,
        .flatpickr-day.today.inRange,
        .flatpickr-day.prevMonthDay.today.inRange,
        .flatpickr-day.nextMonthDay.today.inRange,
        .flatpickr-day:hover,
        .flatpickr-day.prevMonthDay:hover,
        .flatpickr-day.nextMonthDay:hover,
        .flatpickr-day:focus,
        .flatpickr-day.prevMonthDay:focus,
        .flatpickr-day.nextMonthDay:focus {
            background: var(--background-color);
            border-color: var(--background-color);
        } */

        .flatpickr-calendar.open {
            display: block !important;
        }

        .gregorian-date {
            font-size: 1.2em;
            font-weight: bold;
        }

        .hebrew-date {
            font-size: 0.8em;
            color: #666;
        }

        .hebrew-month {
            font-size: 0.8em;
            color: #666;
            display: block;
            margin-top: 5px;
        } 

        .flatpickr-current-month {
            padding-bottom: 10px;
        }

        .cur-month, .cur-year {
            font-size: 0.8em;
            color: #666;
        }

        .guests-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
            padding: 20px;
            margin-top: 8px;
            z-index: 10;
        }

        .guests-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
        }

        .guests-row:not(:last-child) {
            border-bottom: 1px solid #e7e7e7;
            margin-bottom: 12px;
            padding-bottom: 20px;
        }

        .guests-label {
            font-size: 1rem;
            color: var(--text-color);
            font-weight: 500;
        }

        .guests-controls {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .guests-controls button {
            width: 36px;
            height: 36px;
            border: 1px solid var(--secondary-color);
            background: white;
            color: var(--secondary-color);
            border-radius: 50%;
            font-size: 1.25rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .guests-controls button:disabled {
            border-color: #ccc;
            color: #ccc;
            cursor: not-allowed;
        }

        .guests-controls button:not(:disabled):hover {
            background: var(--secondary-color);
            color: white;
        }

        .guests-count {
            min-width: 24px;
            text-align: center;
            font-size: 1rem;
            font-weight: 500;
        }

        .hotel-dropdown {
            position: relative;
        }

        .hotel-dropdown-header {
            background: white;
            padding: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hotel-dropdown-header:hover {
            background: #f8f8f8;
        }

        .hotel-dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
            z-index: 10;
            max-height: 300px;
            overflow-y: auto;
        }

        .hotel-option {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .hotel-option:hover {
            background-color: #f0f0f0;
        }

        .hotel-icon {
            color: var(--primary-color);
            font-size: 18px;
        }

        .hotel-details {
            flex-grow: 1;
        }

        .hotel-name {
            font-weight: 500;
            margin-bottom: 4px;
            color: var(--primary-color);
        }

        .hotel-address {
            font-size: 0.9rem;
            color: #666;
        }

        .hotel-rating {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-right: auto;
        }

        .rating-value {
            background-color: var(--accent-color);
            color: var(--primary-color);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
        }

        .rating-max {
            color: #666;
            font-size: 0.9rem;
        }

        .flatpickr-calendar {
            background: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            padding: 16px;
            width: auto !important;
        }
        .flatpickr-months {
            background: white;
            color: #000;
            fill: #000;
        }
        .flatpickr-current-month {
            color: #000;
        }
        .flatpickr-monthDropdown-months {
            color: #000;
        }
        .flatpickr-weekdays {
            background: white;
        }
        .flatpickr-weekday {
            color: #000;
            font-weight: bold;
        }
        .flatpickr-day {
            border-radius: 4px;
            max-width: none;
            height: auto !important;
            line-height: 1.3;
            padding: 8px 0;
            color: #000;
        }
        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange,
        .flatpickr-day.selected.inRange,
        .flatpickr-day.startRange.inRange,
        .flatpickr-day.endRange.inRange,
        .flatpickr-day.selected:focus,
        .flatpickr-day.startRange:focus,
        .flatpickr-day.endRange:focus,
        .flatpickr-day.selected:hover,
        .flatpickr-day.startRange:hover,
        .flatpickr-day.endRange:hover,
        .flatpickr-day.selected.prevMonthDay,
        .flatpickr-day.startRange.prevMonthDay,
        .flatpickr-day.endRange.prevMonthDay,
        .flatpickr-day.selected.nextMonthDay,
        .flatpickr-day.startRange.nextMonthDay,
        .flatpickr-day.endRange.nextMonthDay {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
       /* .flatpickr-day.inRange,
        .flatpickr-day.prevMonthDay.inRange,
        .flatpickr-day.nextMonthDay.inRange,
        .flatpickr-day.today.inRange,
        .flatpickr-day.prevMonthDay.today.inRange,
        .flatpickr-day.nextMonthDay.today.inRange,
        .flatpickr-day:hover,
        .flatpickr-day.prevMonthDay:hover,
        .flatpickr-day.nextMonthDay:hover,
        .flatpickr-day:focus,
        .flatpickr-day.prevMonthDay:focus,
        .flatpickr-day.nextMonthDay:focus {
            background: var(--background-color);
            border-color: var(--background-color);
        } */

        .flatpickr-calendar.open {
            display: block !important;
        }

        .gregorian-date {
            font-size: 1.2em;
            font-weight: bold;
        }

        .hebrew-date {
            font-size: 0.8em;
            color: #666;
        }

        .hebrew-month {
            font-size: 0.8em;
            color: #666;
            display: block;
            margin-top: 5px;
        }

        .flatpickr-current-month {
            padding-bottom: 10px;
        }

        .search-results {
            padding: 60px 0;
            background-color: var(--background-color);
        }

        .search-results .hotel-results {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .search-results .hotel-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: all 0.3s ease;
        }

        .search-results .hotel-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .search-results .hotel-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .search-results .hotel-info {
            padding: 20px;
        }

        .search-results .hotel-name {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .search-results .hotel-address {
            color: #666;
            margin-bottom: 15px;
        }

        .search-results .hotel-rating {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .search-results .rating-value {
            background-color: var(--accent-color);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
        }

        .search-results .hotel-features {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .search-results .feature {
            background: var(--background-color);
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .search-results .hotel-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--success-color);
        }

        .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

.btn-light {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-light:hover {
    background-color: var(--gray-100);
}

:root {
    --primary-color: #003580;
    --primary-light: #006ce4;
    --white: #ffffff;
    --gray-100: #f5f5f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-600: #6c757d;
    --gray-900: #212529;
    --yellow-border: #febb02;
    --booking-blue: #0071c2;
    --booking-blue-hover: #005999;
}

body {
    font-family: 'Heebo', sans-serif;
    line-height: 1.5;
    color: var(--gray-900);
    direction: rtl;
    background-color: var(--gray-100);
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.75rem;
    }
    
    .hotel-card {
        border-radius: 0;
    }

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-right {
        margin-top: 1rem;
        width: 100%;
        justify-content: space-between;
    }

    .main-nav {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .offer-card,
    .hotel-card {
        padding: 1rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
        gap: 8px;
        margin: 0 1rem;
    }
    
    .search-input {
        width: 100%;
    }
    
    .search-button {
        width: 100%;
        padding: 12px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .guests-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 12px 12px 0 0;
        min-width: 100%;
        margin: 0;
        border-bottom: 0;
    }
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        border-radius: 4px;
        margin-top: 0.5rem;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .search-box {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    .hotel-card,
    .offer-card {
        page-break-inside: avoid;
    }
}
    </style>
</head>
<body>
    <header class="main-header">
        <div class="container">
            <div class="logo">UmanBook</div>
            <nav class="main-nav">
                <a href="#" class="nav-item">
                    <i class="fas fa-bed"></i>
                    <span>מלונות</span>
                </a>
                <a href="#" class="nav-item">
                    <i class="fas fa-taxi"></i>
                    <span>הסעות משדה התעופה</span>
                </a>
            </nav>
            <div id="auth-buttons">
                <a href="/register" class="btn btn-light register-btn">הרשמה</a>
                <a href="/login" class="btn btn-light login-btn">כניסה</a>
            </div>
            <div id="user-menu" style="display: none;">
                <span id="username"></span>
                <a href="/dashboard" class="btn btn-light">אזור אישי</a>
                <button id="logout-btn" class="btn btn-light">התנתקות</button>
            </div>
        </div>
    </header>

    <header class="header">
        <div class="container header-content">
            <h1>הזמנת מלונות באומן</h1>
            <p>מצא את המקום המושלם לשהות בו קרוב לציון הקדוש של רבי נחמן</p>
        </div>
    </header>

    <div class="container">
        <div class="search-container">
            <div class="search-box">
                <div class="input-group hotel-dropdown">
                    <div class="hotel-dropdown-header" id="hotel-dropdown-header">
                        <i class="fas fa-map-marker-alt hotel-icon"></i>
                        <span id="selected-hotel">בחר מלון באומן</span>
                    </div>
                    <div class="hotel-dropdown-content" id="hotel-dropdown-content">
                        
                    </div>
                </div>
                
                <div class="input-group">
                    <i class="fas fa-calendar-alt"></i>
                    <input type="text" placeholder="תאריכי כניסה - יציאה" id="dates-input" readonly>
                </div>
                
                <div class="input-group" style="position: relative;">
                    <i class="fas fa-user-friends"></i>
                    <input type="text" placeholder="2 מבוגרים · 0 ילדים · 1 חדר" id="guests-input" readonly>
                    
                    <div class="guests-dropdown" id="guests-dropdown">
                        <div class="guests-row">
                            <span class="guests-label">מבוגרים</span>
                            <div class="guests-controls">
                                <button onclick="updateGuests('adults', -1)">-</button>
                                <span class="guests-count" id="adults-count">2</span>
                                <button onclick="updateGuests('adults', 1)">+</button>
                            </div>
                        </div>
                        
                        <div class="guests-row">
                            <span class="guests-label">ילדים</span>
                            <div class="guests-controls">
                                <button onclick="updateGuests('children', -1)">-</button>
                                <span class="guests-count" id="children-count">0</span>
                                <button onclick="updateGuests('children', 1)">+</button>
                            </div>
                        </div>
                        
                        <div class="guests-row">
                            <span class="guests-label">חדרים</span>
                            <div class="guests-controls">
                                <button onclick="updateGuests('rooms', -1)">-</button>
                                <span class="guests-count" id="rooms-count">1</span>
                                <button onclick="updateGuests('rooms', 1)">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="search-button" onclick="performSearch()">חפש מלונות באומן</button>
            </div>
        </div>
        
    </div>

    <section class="section">
        <div class="container">
            <h2 class="section-title">מלונות מומלצים באומן</h2>
            <div id="recommended-hotels" class="hotel-results">
                <!-- Recommended hotels will be dynamically inserted here -->
            </div>
        </div>
    </section>
    
    

    <section class="section attractions">
        <div class="container">
            <h2 class="section-title">אטרקציות פופולריות באומן</h2>
            <div class="attraction-list">
                <div class="attraction-item">
                    <i class="fas fa-synagogue attraction-icon"></i>
                    <h3 class="attraction-name">ציון רבי נחמן</h3>
                    <p>המקום הקדוש המרכזי באומן</p>
                </div>
                <div class="attraction-item">
                    <i class="fas fa-tree attraction-icon"></i>
                    <h3 class="attraction-name">פארק סופיבקה</h3>
                    <p>פארק יפהפה עם אגם ומזרקות</p>
                </div>
                <div class="attraction-item">
                    <i class="fas fa-landmark attraction-icon"></i>
                    <h3 class="attraction-name">מוזיאון אומן</h3>
                    <p>מוזיאון המציג את ההיסטוריה של העיר</p>
                </div>
                <div class="attraction-item">
                    <i class="fas fa-store attraction-icon"></i>
                    <h3 class="attraction-name">שוק המרכזי</h3>
                    <p>שוק ססגוני עם מוצרים מקומיים</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section testimonials">
        <div class="container">
            <h2 class="section-title">מה אומרים עלינו</h2>
            <div class="testimonial-list">
                <div class="testimonial-item">
                    <p class="testimonial-content">"השירות היה מעולה, המלון היה נקי ונוח, וקרוב מאוד לציון. ממליץ בחום!"</p>
                    <div class="testimonial-author">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="יוסי כהן" class="author-image">
                        <div class="author-info">
                            <span class="author-name">יוסי כהן</span>
                            <span class="author-title">מבקר קבוע באומן</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item">
                    <p class="testimonial-content">"הזמנת המלון דרך האתר הייתה פשוטה ומהירה. חסכתי זמן וכסף!"</p>
                    <div class="testimonial-author">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="רחל לוי" class="author-image">
                        <div class="author-info">
                            <span class="author-name">רחל לוי</span>
                            <span class="author-title">מטיילת מתחילה</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item">
                    <p class="testimonial-content">"המידע באתר עזר לי מאוד בתכנון הטיול. הכל היה מדויק ומעודכן."</p>
                    <div class="testimonial-author">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="דוד ישראלי" class="author-image">
                        <div class="author-info">
                            <span class="author-name">דוד ישראלי</span>
                            <span class="author-title">מארגן קבוצות</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section faq">
        <div class="container">
            <h2 class="section-title">שאלות נפוצות</h2>
            <div class="faq-list">
                <div class="faq-item">
                    <div class="faq-question">
                        <span>מתי הזמן הטוב ביותר לבקר באומן?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>הזמן הפופולרי ביותר לבקר באומן הוא בראש השנה, כאשר אלפי חסידים מגיעים לציון רבי נחמן. עם זאת, ניתן לבקר באומן לאורך כל השנה, כאשר האביב והסתיו מציעים מזג אוויר נעים במיוחד.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>האם נדרשת ויזה לביקור באומן?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>כן, אזרחי ישראל נדרשים לוויזה כדי להיכנס לאוקראינה. מומלץ לבדוק את הדרישות העדכניות ולהגיש בקשה לוויזה מבעוד מועד.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>כיצד מגיעים מנמל התעופה באומן למרכז העיר?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>ניתן להגיע ממנל התעופה למרכז העיר באמצעות מונית או שאטל. חלק מהמלונות מציעים שירותי הסעה מהשדה, כדאי לבדוק זאת בעת ההזמנה.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>קישורים מהירים</h3>
                    <ul class="footer-links">
                        <li><a href="#">דף הבית</a></li>
                        <li><a href="#">חיפוש מלונות</a></li>
                        <li><a href="#">אטרקציות</a></li>
                        <li><a href="#">שאלות נפוצות</a></li>
                        <li><a href="#">צור קשר</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>מידע שימושי</h3>
                    <ul class="footer-links">
                        <li><a href="#">מזג אוויר באומן</a></li>
                        <li><a href="#">המרת מטבעות</a></li>
                        <li><a href="#">מפת אומן</a></li>
                        <li><a href="#">טיפים למטייל</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>עקבו אחרינו</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 הזמנת מלונות באומן. כל הזכויות שמורות.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/he.js"></script>
    <script>
        // Initialize date picker
        const dateInput = document.getElementById('dates-input');
        const fp = flatpickr(dateInput, {
            mode: "range",
            minDate: "today",
            dateFormat: "d/m/Y",
            monthSelectorType: "static",
            locale: "he",
            showMonths: 2,
            position: "auto",
            disableMobile: "true",
            onReady: function(selectedDates, dateStr, instance) {
                instance.calendarContainer.classList.add('hebrew-calendar');
                addHebrewDates(instance);
            },
            onMonthChange: function(selectedDates, dateStr, instance) {
                addHebrewDates(instance);
            },
            onChange: function(selectedDates, dateStr, instance) {
                addHebrewDates(instance);
            }
        });

        // Hebrew Date Plugin
        function addHebrewDates(instance) {
            const days = instance.days.childNodes;
            days.forEach((day) => {
                if (!day.dateObj) return;
                const hebrewDate = new Hebcal.HDate(day.dateObj);
                day.innerHTML = `
                    <span class="gregorian-date">${day.dateObj.getDate()}</span>
                    <span class="hebrew-date">${hebrewDate.getDate()}</span>
                `;
            });

            // Add Hebrew month name
            const monthElement = instance.currentYearElement.parentNode.querySelector('.cur-month');
            if (monthElement) {
                const currentDate = instance.latestSelectedDateObj || new Date();
                const hebrewDate = new Hebcal.HDate(currentDate);
                const hebrewMonthName = hebrewDate.getMonthName('h');
                monthElement.innerHTML = `${monthElement.textContent}<span class="hebrew-month">${hebrewMonthName}</span>`;
            }
        }

        // Guests dropdown functionality
        const guestsInput = document.getElementById('guests-input');
        const guestsDropdown = document.getElementById('guests-dropdown');
        let guests = {
            adults: 2,
            children: 0,
            rooms: 1
        };

        guestsInput.addEventListener('click', (e) => {
            e.stopPropagation();
            guestsDropdown.style.display = guestsDropdown.style.display === 'block' ? 'none' : 'block';
        });

        document.addEventListener('click', (e) => {
            if (!guestsDropdown.contains(e.target) && e.target !== guestsInput) {
                guestsDropdown.style.display = 'none';
            }
        });

        function updateGuests(type, change) {
            const current = guests[type];
            const newValue = current + change;

            // Validation rules
            if (type === 'adults' && newValue < 1) return;
            if (type === 'children' && newValue < 0) return;
            if (type === 'rooms' && newValue < 1) return;
            if (type === 'rooms' && newValue > guests.adults) return;
            if (type === 'adults' && newValue > 30) return;
            if (type === 'children' && newValue > 10) return;

            guests[type] = newValue;
            document.getElementById(`${type}-count`).textContent = newValue;

            // Update input display
            guestsInput.value = `${guests.adults} מבוגרים · ${guests.children} ילדים · ${guests.rooms} חדר`;

            // Update button states
            updateButtonStates();
        }

        function updateButtonStates() {
            const controls = document.querySelectorAll('.guests-controls');
            controls.forEach(control => {
                const type = control.parentElement.querySelector('.guests-label').textContent.trim();
                const decreaseBtn = control.querySelector('button:first-child');
                const increaseBtn = control.querySelector('button:last-child');

                if (type === 'מבוגרים') {
                    decreaseBtn.disabled = guests.adults <= 1;
                    increaseBtn.disabled = guests.adults >= 30;
                } else if (type === 'ילדים') {
                    decreaseBtn.disabled = guests.children <= 0;
                    increaseBtn.disabled = guests.children >= 10;
                } else if (type === 'חדרים') {
                    decreaseBtn.disabled = guests.rooms <= 1;
                    increaseBtn.disabled = guests.rooms >= guests.adults;
                }
            });
        }

        // Initial button states
        updateButtonStates();

        // Hotel dropdown functionality
        const hotelDropdownHeader = document.getElementById('hotel-dropdown-header');
        const hotelDropdownContent = document.getElementById('hotel-dropdown-content');
        const selectedHotel = document.getElementById('selected-hotel');
        let selectedHotelValue = '';

        hotelDropdownHeader.addEventListener('click', (e) => {
            e.stopPropagation();
            hotelDropdownContent.style.display = hotelDropdownContent.style.display === 'block' ? 'none' : 'block';
        });

        document.addEventListener('click', (e) => {
            if (!hotelDropdownContent.contains(e.target) && e.target !== hotelDropdownHeader) {
                hotelDropdownContent.style.display = 'none';
            }
        });

        const hotelOptions = document.querySelectorAll('.hotel-option');
        hotelOptions.forEach(option => {
            option.addEventListener('click', () => {
                selectedHotelValue = option.getAttribute('data-value');
                selectedHotel.textContent = option.querySelector('.hotel-name').textContent;
                hotelDropdownContent.style.display = 'none';
            });
        });

        document.addEventListener('DOMContentLoaded', () => {
            const searchButton = document.getElementById('searchButton');
            searchButton.addEventListener('click', performSearch);
        });

        function performSearch() {
            const selectedHotel = document.getElementById('selected-hotel').textContent;
            const dates = document.getElementById('dates-input').value;
            const guests = document.getElementById('guests-input').value;

            // Encode the search parameters
            const params = new URLSearchParams({
                hotel: selectedHotel,
                dates: dates,
                guests: guests
            });

            // Redirect to the search results page with the search parameters
            window.location.href = `search-results.html?${params.toString()}`;
        }
    
        
    
        // Sample hotel data
        const sampleHotels = [];
            
        
    
        // FAQ functionality
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            question.addEventListener('click', () => {
                item.classList.toggle('active');
            });
        });
    
        function createElement(tag, className) {
            const element = document.createElement(tag);
            if (className) element.className = className;
            return element;
        }

        



        function checkLoginStatus() {
      fetch('/check-login')
        .then(response => response.json())
        .then(data => {
          const authButtons = document.getElementById('auth-buttons');
          const userMenu = document.getElementById('user-menu');
          const username = document.getElementById('username');
          
          if (data.loggedIn) {
            authButtons.style.display = 'none';
            userMenu.style.display = 'block';
            username.textContent = data.username;
          } else {
            authButtons.style.display = 'block';
            userMenu.style.display = 'none';
          }
        })
        .catch(error => {
          console.error('Error checking login status:', error);
        });
    }

    document.addEventListener('DOMContentLoaded', checkLoginStatus);

    document.getElementById('logout-btn').addEventListener('click', function() {
      fetch('/logout', { method: 'POST' })
        .then(response => {
          if (response.ok) {
            window.location.reload();
          } else {
            throw new Error('Logout failed');
          }
        })
        .catch(error => {
          console.error('Error during logout:', error);
          alert('אירעה שגיאה בתהליך ההתנתקות');
        });
    });


    let hotels = [];

async function fetchHotels() {
    try {
        const response = await fetch('/api/hotels');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        hotels = await response.json();
        hotels = hotels.map(hotel => ({
          ...hotel,
          primaryImage: {
            ...hotel.primaryImage,
            url: hotel.primaryImage?.url ? `http://localhost:5000/uploads/${hotel.primaryImage.url.split('/').pop()}` : 'http://localhost:5000/uploads/placeholder.svg'
          }
        }));
        displayHotels();
        populateHotelDropdown();
    } catch (error) {
        console.error('Error fetching hotels:', error);
        document.getElementById('recommended-hotels').innerHTML = '<p>אירעה שגיאה בטעינת המלונות. אנא נסה שוב מאוחר יותר.</p>';
    }
}

function displayHotels() {
    const container = document.getElementById('recommended-hotels');
    container.innerHTML = '';

    if (hotels.length === 0) {
        container.innerHTML = '<p>לא נמצאו מלונות.</p>';
        return;
    }

    hotels.forEach(hotel => {
        const card = createHotelCard(hotel);
        container.appendChild(card);
    });
}

function createHotelCard(hotel) {
    const card = document.createElement('div');
    card.className = 'hotel-card';
    card.innerHTML = `
        <img src="${hotel.primaryImage?.url || 'http://localhost:5000/uploads/placeholder.svg'}" alt="${hotel.name || 'Hotel'}" class="hotel-image" onerror="this.onerror=null; this.src='http://localhost:5000/uploads/placeholder.svg';">
        <div class="hotel-info">
            <h3 class="hotel-name">${hotel.name || 'Unknown Hotel'}</h3>
            <p class="hotel-address">${hotel.address?.street || ''}, ${hotel.address?.city || ''}, ${hotel.address?.country || 'Address not available'}</p>
            <div class="hotel-rating">
                <span class="rating-value">${(hotel.rating || 0).toFixed(1)}</span>
                <span>/5</span>
            </div>
            <div class="hotel-features">
                ${(hotel.amenities || []).slice(0, 3).map(amenity => `<span class="feature">${amenity}</span>`).join('')}
            </div>
            <p class="hotel-price">מ-₪${hotel.priceRange?.min || 0} ללילה</p>
        </div>
    `;
    return card;
}

function populateHotelDropdown() {
    const dropdownContent = document.getElementById('hotel-dropdown-content');
    dropdownContent.innerHTML = '';

    if (hotels.length === 0) {
        dropdownContent.innerHTML = '<div class="hotel-option">No hotels available</div>';
        return;
    }

    hotels.forEach(hotel => {
        const option = document.createElement('div');
        option.className = 'hotel-option';
        option.innerHTML = `
            <i class="fas fa-map-marker-alt hotel-icon"></i>
            <div class="hotel-details">
                <div class="hotel-name">${hotel.name || 'Unknown Hotel'}</div>
                <div class="hotel-address">${hotel.address?.street || ''}, ${hotel.address?.city || ''}, ${hotel.address?.country || 'Address not available'}</div>
            </div>
            <div class="hotel-rating">
                <span class="rating-value">${(hotel.rating || 0).toFixed(1)}</span>
                <span class="rating-max">/5</span>
            </div>
        `;
        option.addEventListener('click', () => selectHotel(hotel));
        dropdownContent.appendChild(option);
    });
}

function selectHotel(hotel) {
    //console.log('Selected hotel:', hotel);
    // Implement hotel selection logic here

    const selectedHotel = document.getElementById('selected-hotel');
    selectedHotel.textContent = hotel.name;
    document.getElementById('hotel-dropdown-content').style.display = 'none';

}

document.addEventListener('DOMContentLoaded', fetchHotels);




    </script>
</body>
</html>