<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Taşınma Teklif Formu</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body { font-family: Arial; background: #fff; margin: 0; padding: 0; }
    .form-step { display: none; }
    .form-step.active { display: block; }
    .step-bar { display: flex; justify-content: space-between; margin: 20px; }
    .step-bar div { width: 100%; text-align: center; padding: 10px; border-bottom: 2px solid #ccc; color: #999; }
    .step-bar .active { color: #00c6c6; border-color: #00c6c6; font-weight: bold; }
    .form-group { margin: 20px; }
    input, select, textarea { width: 100%; padding: 10px; margin-top: 5px; }
    button { margin: 20px; padding: 10px 20px; background: #00c6c6; border: none; color: white; cursor: pointer; }
    button[disabled] { background: #ccc; }
    .icons { display: flex; justify-content: space-around; margin: 20px; flex-wrap: wrap; }
    .icon-box { text-align: center; cursor: pointer; padding: 10px; border: 2px solid transparent; border-radius: 8px; margin: 10px; }
    .icon-box.active { border-color: #00c6c6; box-shadow: 0 0 10px rgba(0,198,198,0.4); }
    .icon-box img { width: 50px; height: 50px; }
    .input-error {
  border: 2px solid red !important;
}
  </style>
</head>
<body>

<form id="multiStepForm" method="post" action="teklif_gonder.php" enctype="multipart/form-data">
  <div class="step-bar">
    <div class="active">1 Hizmetler</div>
    <div>2 Mevcut Adres</div>
    <div>3 Yeni Adres</div>
    <div>4 Tarih</div>
    <div>5 Teklif Al</div>
  </div>

  <!-- Adım 1: Hizmet Seçimi -->
  <div class="form-step active">
    <div class="icons">
      <div class="icon-box" onclick="selectService(this, 'Evden Eve Nakliyat')">
        <img src="https://cdn-icons-png.flaticon.com/512/1046/1046849.png" alt="Evden Eve">
        <div>Evden Eve Nakliyat</div>
      </div>
      <div class="icon-box" onclick="selectService(this, 'Şehirler Arası Nakliyat')">
        <img src="https://cdn-icons-png.flaticon.com/512/2983/2983067.png" alt="Şehirler Arası">
        <div>Şehirler Arası Nakliyat</div>
      </div>
      <div class="icon-box" onclick="selectService(this, 'Eşya Depolama')">
        <img src="https://cdn-icons-png.flaticon.com/512/869/869636.png" alt="Depolama">
        <div>Eşya Depolama</div>
      </div>
      <div class="icon-box" onclick="selectService(this, 'Parça Eşya Taşıma')">
        <img src="https://cdn-icons-png.flaticon.com/512/3176/3176297.png" alt="Parça">
        <div>Parça Eşya Taşıma</div>
      </div>
      <div class="icon-box" onclick="selectService(this, 'Ofis ve Fabrika Taşıma')">
        <img src="https://cdn-icons-png.flaticon.com/512/1146/1146869.png" alt="Ofis">
        <div>Ofis ve Fabrika Taşıma</div>
      </div>
      <div class="icon-box" onclick="selectService(this, 'Tarihi Eşya Taşıma')">
        <img src="https://cdn-icons-png.flaticon.com/512/3774/3774299.png" alt="Tarihi">
        <div>Tarihi Eşya Taşıma</div>
      </div>
    </div>
    <input type="hidden" name="hizmet" id="selectedService" required>
    <button type="button" onclick="nextStep()">Devam Et</button>
  </div>

  <!-- Adım 2: Mevcut Adres -->
  <div class="form-step">
    <div class="form-group"><label>İl *</label><input type="text" name="mevcut_il" required></div>
    <div class="form-group"><label>İlçe *</label><input type="text" name="mevcut_ilce" required></div>
    <div class="form-group"><label>Asansör *</label><input type="text" name="mevcut_asansor" required></div>
    <div class="form-group"><label>Kat *</label><input type="number" name="mevcut_kat" required></div>
    <div class="form-group"><label>Oda Sayısı *</label><input type="text" name="mevcut_oda" required></div>
    <div class="form-group"><label>Metrekare</label><input type="number" name="mevcut_metre"></div>
    <button type="button" onclick="prevStep()">Geri Dön</button>
    <button type="button" onclick="nextStep()">Devam Et</button>
  </div>

  <!-- Adım 3: Yeni Adres (Revize Edildi) -->
  <div class="form-step">
    <div class="form-group"><label>İl *</label><input type="text" name="yeni_il" required></div>
    <div class="form-group"><label>Asansör *</label><input type="text" name="yeni_asansor" required></div>
    <div class="form-group"><label>Kat *</label><input type="number" name="yeni_kat" required></div>
    <button type="button" onclick="prevStep()">Geri Dön</button>
    <button type="button" onclick="nextStep()">Devam Et</button>
  </div>

  <!-- Adım 4: Taşınma Tarihi -->
  <div class="form-step">
    <div class="form-group"><label>Tarih *</label><input type="date" name="tarih" required></div>
    <div class="form-group"><label>Saat *</label><input type="number" name="saat" min="0" max="23" required></div>
    <div class="form-group"><label>Dakika *</label><input type="number" name="dakika" min="0" max="59" required></div>
    <button type="button" onclick="prevStep()">Geri Dön</button>
    <button type="button" onclick="nextStep()">Devam Et</button>
  </div>

  <!-- Adım 5: Teklif Al -->
  <div class="form-step">
    <div class="form-group"><label>İsim *</label><input type="text" name="isim" required></div>
    <div class="form-group"><label>Soyisim *</label><input type="text" name="soyisim" required></div>
    <div class="form-group"><label>Telefon *</label><input type="tel" name="telefon" required></div>
    <div class="form-group"><label>Eposta *</label><input type="email" name="email" required></div>
    <div class="form-group"><label>Not</label><textarea name="not" maxlength="180"></textarea></div>
    <div class="form-group"><label>Fotoğraf Yükleyin</label><input type="file" name="dosya[]" multiple></div>
    <button type="button" onclick="prevStep()">Geri Dön</button>
    <button type="submit">Teklifi Gönder</button>
  </div>
</form>

<script>
  let step = 0;
  const steps = document.querySelectorAll('.form-step');
  const barSteps = document.querySelectorAll('.step-bar div');

  function showStep() {
    steps.forEach((s, i) => s.classList.toggle('active', i === step));
    barSteps.forEach((b, i) => b.classList.toggle('active', i === step));
  }

  function validateStep(currentStep) {
    let valid = true;
    const inputs = steps[currentStep].querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
      input.classList.remove('input-error');
      if (input.hasAttribute('required') && !input.value.trim()) {
        input.classList.add('input-error');
        valid = false;
      }
    });
    return valid;
  }

  function nextStep() {
    if (validateStep(step)) {
      if (step < steps.length - 1) step++;
      showStep();
    }
  }

  function prevStep() {
    if (step > 0) step--;
    showStep();
  }

  function selectService(el, value) {
    document.querySelectorAll('.icon-box').forEach(box => box.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('selectedService').value = value;
  }

  showStep();
</script>



</body>
</html>
