<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Δημιουργία Μυστηρίου - Piccolo House</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="bg-dark text-white py-4">
    <div class="container">
      <h1 class="text-center">Δημιουργία Μυστηρίου</h1>
      <nav class="text-center">
        <a href="index.html" class="btn btn-light me-2">Αρχική</a>
        <a href="wedding.html" class="btn btn-light me-2">Γάμος</a>
        <a href="baptism.html" class="btn btn-light">Βάφτιση</a>
      </nav>
    </div>
  </header>

  <main class="container my-5">
    <section>
      <h2 class="text-center mb-4">Επιλογή Μυστηρίου</h2>
      <div id="mysteryTypeOptions" class="text-center mb-4">
        <button class="btn btn-primary me-2" data-type="wedding">Γάμος</button>
        <button class="btn btn-primary" data-type="baptism">Βάφτιση</button>
      </div>

      <!-- Επιλογές Γάμου -->
      <div id="weddingOptions" class="hidden mb-4">
        <h3 class="text-center mb-3">Τύπος Γάμου</h3>
        <div id="weddingTypeOptions" class="text-center mb-3">
          <button class="btn btn-secondary me-2" data-type="civil">Πολιτικός</button>
          <button class="btn btn-secondary" data-type="religious">Θρησκευτικός</button>
        </div>

        <!-- Επιλογές Πολιτικού Γάμου -->
        <div id="civilOptions" class="hidden mb-4">
          <h4 class="text-center mb-3">Επιλέξτε Τοποθεσία</h4>
          <div class="text-center mb-3">
            <button class="btn btn-info me-2" data-location="poseidonia">Δημαρχείο Ποσειδωνίας</button>
            <button class="btn btn-info me-2" data-location="hermoupolis">Δημαρχείο Ερμούπολης</button>
            <button class="btn btn-info" data-location="other">Άλλο</button>
          </div>
          <div id="otherLocationInput" class="hidden mb-3">
            <label for="otherLocation" class="form-label">Συμπληρώστε την τοποθεσία:</label>
            <input type="text" id="otherLocation" class="form-control">
          </div>
        </div>

        <!-- Επιλογές Θρησκευτικού Γάμου -->
        <div id="religiousOptions" class="hidden mb-4">
          <h4 class="text-center mb-3">Επιλέξτε Εκκλησία</h4>
          <div class="text-center mb-3">
            <button class="btn btn-info me-2" data-church="agios-nikolaos">Άγιος Νικόλαος</button>
            <button class="btn btn-info me-2" data-church="agios-dimitrios">Άγιος Δημήτριος</button>
            <button class="btn btn-info me-2" data-church="agios-georgios">Άγιος Γεώργιος</button>
            <button class="btn btn-info me-2" data-church="panagia-faneromeni">Παναγία Φανερωμένη</button>
            <button class="btn btn-info me-2" data-church="agioi-apostoloi">Άγιοι Απόστολοι</button>
            <button class="btn btn-info me-2" data-church="agios-ioannis">Άγιος Ιωάννης</button>
            <button class="btn btn-info" data-church="other">Άλλο</button>
          </div>
          <div id="otherChurchInput" class="hidden mb-3">
            <label for="otherChurch" class="form-label">Συμπληρώστε την εκκλησία:</label>
            <input type="text" id="otherChurch" class="form-control">
          </div>
        </div>
      </div>

      <!-- Προσωπικά Στοιχεία -->
      <div id="personInfo" class="hidden">
        <h3 class="text-center mb-4">Στοιχεία Επικοινωνίας</h3>
        <div class="row g-3">
          <div class="col-md-6">
            <label for="firstName" class="form-label">Όνομα:</label>
            <input type="text" id="firstName" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label for="lastName" class="form-label">Επώνυμο:</label>
            <input type="text" id="lastName" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label for="phone" class="form-label">Τηλέφωνο:</label>
            <input type="tel" id="phone" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label for="email" class="form-label">Email:</label>
            <input type="email" id="email" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label for="guests" class="form-label">Αριθμός Προσκεκλημένων:</label>
            <input type="number" id="guests" class="form-control" required>
          </div>
        </div>
      </div>

      <!-- Επιπλέον Επιλογές -->
      <div id="extraOptions" class="hidden mt-4">
        <h4 class="text-center mb-3">Επιπλέον Επιλογές</h4>
        <p class="text-center text-muted mb-4">Τα πεδία αυτά μπορούν να διαμορφωθούν και μετά από συνενοήση. Δεν είναι υποχρεωτικά.</p>
        <div id="weddingExtraOptions" class="hidden">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="stefana" name="stefana">
            <label class="form-check-label" for="stefana">Στεφάνα</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="lampades" name="lampades">
            <label class="form-check-label" for="lampades">Λαμπάδες</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="juicyBarWedding" name="juicyBarWedding">
            <label class="form-check-label" for="juicyBarWedding">Juicy Bar</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="candyBarWedding" name="candyBarWedding">
            <label class="form-check-label" for="candyBarWedding">Candy Bar</label>
          </div>
        </div>
        <div id="baptismExtraOptions" class="hidden">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="lampada" name="lampada">
            <label class="form-check-label" for="lampada">Λαμπάδα</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="kolymbithra" name="kolymbithra">
            <label class="form-check-label" for="kolymbithra">Στολισμός Κολυμβήθρας</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="exterior" name="exterior">
            <label class="form-check-label" for="exterior">Εξωτερικός Στολισμός</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="clothes" name="clothes">
            <label class="form-check-label" for="clothes">Ρούχα</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="shoes" name="shoes">
            <label class="form-check-label" for="shoes">Παπούτσια</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="candyBarBaptism" name="candyBarBaptism">
            <label class="form-check-label" for="candyBarBaptism">Candy Bar</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="juicyBarBaptism" name="juicyBarBaptism">
            <label class="form-check-label" for="juicyBarBaptism">Juicy Bar</label>
          </div>
        </div>
      </div>

      <!-- Υποβολή -->
      <div id="submitButton" class="hidden text-center mt-4">
        <button type="submit" class="btn btn-success btn-lg">Υποβολή</button>
      </div>
    </section>
  </main>

  <footer class="bg-dark text-white text-center py-3">
    <p>Διοργάνωση μυστηρίων © 2025</p>
  </footer>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>