<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Autoservis</title>
  <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
  <script src="{{url_for('static', filename='scripts/reservation.js')}}"></script>
</head>
<body>

<header>
  <div class="header">
    <div class="contact-info">
      <span>Kontakt: 123 123 123 | Otevírací doba: 9-18 hod | auto@servis.cz </span>
    </div>
    <h1 class="nazev">
      <a href="{{ url_for('home') }}" style="text-decoration: none;">
        <img src="{{url_for('static', filename='img/logo.webp')}}" alt="Logo" class="logo">
      </a>
      Autoservis
    </h1>
    <div class="buttons">
      {% if session.get('logged_in') %}
        <a href="{{ url_for('administrator') }}" class="button">Administrace</a>
        <a href="{{ url_for('logout') }}" class="button">Odhlásit se</a>
      {% else %}
        <a href="{{ url_for('login') }}" class="button">Administrace</a>
      {% endif %}
      <button class="button" onclick="openReservationForm()">Objednat se</button>
    </div>
  </div>
</header>

{% if session.get('logged_in') %}
<div class="user-info">
  <span>Logged in: {{ session.get('username') }}</span>
</div>
{% endif %}

<nav class="navbar">
  <button class="button" onclick="location.href='#about-header'">O nás</button>
  <button class="button" onclick="location.href='#directions'">K nám</button>
  <button class="button" onclick="location.href='#nabidka-sluzeb'">Služby</button>
  <button class="button" onclick="location.href='#recenze'">Recenze</button>
</nav>

<div class="container">
  <div class="content">
    <div class="about">
      <div class="about-content">
        <div class="about-text">
          <h2 id="about-header">O nás</h2>
          <p>Již po mnoho let se staráme o vaše automobily s maximální pečlivostí a odborností. Naše dlouhá historie sahá až do doby, kdy se auta stala nedílnou součástí každodenního života. Od té doby jsme ušli dlouhou cestu a vybudovali jsme si pevnou pověst spolehlivého partnera pro všechny motoristy.

            Proč si vybrat právě nás?
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, velit nec ultricies ultricies, nunc libero ultricies nunc, nec ultricies nunc libero nec libero. Sed auctor, velit nec ultricies ultricies, nunc libero ultricies nunc, nec ultricies nunc libero nec libero. Sed auctor, velit nec ultricies ultricies, nunc libero ultricies nunc, nec ultricies nunc libero nec libero.
          </p>
        </div>
        <div class="about-image">
          <img src="{{url_for('static', filename='img/autoservis.jpg')}}" alt="Car repair">
        </div>
      </div>
    </div>
  </div>
  <div id="directions" class="directions">
    <div class="directions-content">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2607.057050033818!2d16.625835399999996!3d49.19947729999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471294f40ffa3c2b%3A0x6ceee968235c0272!2sCejl%2036%2F64%2C%20602%2000%20Brno-st%C5%99ed!5e0!3m2!1scs!2scz!4v1731501763892!5m2!1scs!2scz" width="50%" height="450" style="border:0; border-radius: 0.5em;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      <div class="directions-text">
        <h2 class="directions-header">Jak se k nám dostanete?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Začněte na hlavním nádraží a pokračujte po ulici Masarykova. Na konci ulice odbočte doprava na ulici Benešova. Pokračujte rovně, dokud nedosáhnete křižovatky s ulicí Cejl. Zde odbočte doleva a pokračujte po ulici Cejl, dokud nedosáhnete našeho autoservisu, který se nachází na pravé straně ulice.</p>
      </div>
    </div>
  </div>
  <div class="services">
    <h2 id="nabidka-sluzeb" class="nabidka-sluzeb">Nabídka služeb</h2>
    <div class="service-list">
      <div class="service-item">
        <img src="{{url_for('static', filename='img/car-icon.png')}}" alt="Car">
        <p>Oprava osobních vozidel</p>
      </div>
      <div class="service-item">
        <img src="{{url_for('static', filename='img/atv-icon.png')}}" alt="ATV">
        <p>Oprava čtyřkolek</p>
      </div>
      <div class="service-item">
        <img src="{{url_for('static', filename='img/scooter-icon.png')}}" alt="Scooter">
        <p>Oprava skútrů</p>
      </div>
      <div class="service-item">
        <img src="{{url_for('static', filename='img/motorcycle-icon.png')}}" alt="Motorcycle">
        <p>Oprava motorek</p>
      </div>
    </div>
  </div>

  <div class="reviews" id="recenze">
    <div class="review-box">
      <p>Skvělý servis! Rychlá a profesionální oprava.</p>
      <p>⭐⭐⭐⭐</p>
      <p>- Jan Novák</p>
    </div>
    <div class="review-box">
      <p>Velmi přátelský personál a kvalitní služby.</p>
      <p>⭐⭐⭐⭐⭐</p>
      <p>- Petra Svobodová</p>
    </div>
    <div class="review-box">
      <p>Oprava byla hotová dříve, než jsem očekával.</p>
      <p>⭐⭐⭐</p>
      <p>- Martin Dvořák</p>
    </div>
    <div class="review-box">
      <p>Výborná komunikace a skvělé ceny. Určitě se vrátím.</p>
      <p>⭐⭐⭐⭐⭐</p>
      <p>- Eva Černá</p>
    </div>
  </div>
</div>
<footer class="footer" id="kontakt">
  <div>Made by Hrachovina and Kirsch</div>
</footer>

<!-- Reservation Form Popup -->
<div id="reservationForm" class="popup-form">
  <div class="form-container">
    <span class="close-button" onclick="closeReservationForm()">&times;</span>
    <h2>Rezervace</h2>
    <form>
      <label for="fullName">Celé jméno: <span class="required">*</span></label>
      <input type="text" id="fullName" name="fullName" required>
      <label for="email">Email: <span class="required">*</span></label>
      <input type="email" id="email" name="email" required>
      <label for="date">Datum: <span class="required">*</span></label>
      <input type="date" id="date" name="date" required>
      <label for="description">Popis: <span class="required">*</span></label>
      <textarea id="description" name="description" rows="4" required></textarea>
      <button type="submit" class="button">Odeslat</button>
    </form>
  </div>
</div>

</body>
</html>
