@extends('layouts.app')

@section('content')
<div class="page-wrapper">
  <div class="page-content">

    <div class="card shadow-lg p-4 rounded-4">
      <h4 class="mb-4 text-primary fw-bold">🚗 Yeni İş Atama</h4>

      <form id="assignJobForm">
        @csrf

        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label fw-semibold">Müşteri Adı</label>
            <input type="text" class="form-control" name="musteri_ad" placeholder="Müşteri adını giriniz" required>
          </div>

          <div class="col-md-6">
            <label class="form-label fw-semibold">Telefon</label>
            <input type="text" class="form-control" name="telefon" placeholder="05XXXXXXXXX" required>
          </div>

          <div class="col-md-12">
            <label class="form-label fw-semibold">Adres</label>
            <textarea class="form-control" name="adres" rows="2" placeholder="Olay adresini yazınız" required></textarea>
          </div>

          <div class="col-md-6">
            <label class="form-label fw-semibold">Hizmet Tipi</label>
            <select name="hizmet_tipi" class="form-select" required>
              <option value="">Seçiniz...</option>
              <option value="çekici">Çekici</option>
              <option value="akü">Akü Takviyesi</option>
              <option value="lastik">Lastik Değişimi</option>
              <option value="yakıt">Yakıt Yardımı</option>
              <option value="diğer">Diğer</option>
            </select>
          </div>

          <div class="col-md-6">
            <label class="form-label fw-semibold">Sürücü Seç</label>
            <select name="surucu_id" id="surucu_id" class="form-select" required>
              <option value="">Sürücü yükleniyor...</option>
            </select>
          </div>
        </div>

        <div class="mt-4 text-end">
          <button type="submit" class="btn btn-success px-4 py-2 fw-semibold">✅ İş Ata</button>
        </div>
      </form>

      <div id="assignJobMessage" class="mt-3"></div>
    </div>

  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", async () => {
  const select = document.getElementById("surucu_id");
  const messageBox = document.getElementById("assignJobMessage");

  // 🔹 Sürücüleri yükle
  try {
    const response = await fetch("/get-user-drivers");
    const drivers = await response.json();

    select.innerHTML = "";
    if (drivers.length === 0) {
      select.innerHTML = `<option value="">Sürücü bulunamadı</option>`;
    } else {
      select.innerHTML = `<option value="">Sürücü seçiniz...</option>`;
      drivers.forEach(d => {
        const option = document.createElement("option");
        option.value = d.id;
        option.textContent = `${d.prenom} ${d.nom} (${d.plaka || 'Plaka yok'})`;
        select.appendChild(option);
      });
    }
  } catch (error) {
    console.error("Sürücü listesi alınamadı:", error);
    select.innerHTML = `<option value="">Sürücü listesi yüklenemedi</option>`;
  }

  // 🔹 Form gönderimi
  document.getElementById("assignJobForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    messageBox.innerHTML = "";

    const formData = new FormData(e.target);
    try {
      const response = await fetch("/assign-job", {
        method: "POST",
        body: formData,
        headers: { "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value }
      });

      const data = await response.json();
      if (data.success) {
        messageBox.innerHTML = `<div class="alert alert-success mt-3">✅ ${data.message || "İş başarıyla atandı."}</div>`;
        e.target.reset();
      } else {
        messageBox.innerHTML = `<div class="alert alert-danger mt-3">❌ ${data.message || "Bir hata oluştu."}</div>`;
      }
    } catch (err) {
      console.error(err);
      messageBox.innerHTML = `<div class="alert alert-danger mt-3">❌ Sunucu hatası oluştu.</div>`;
    }
  });
});
</script>
@endsection