talabatuk_plus_1/join.js

/* ============================================
   join.js - طلباتك بلس - صفحة تسجيل السائق
   ============================================ */

const API_URL = `/api/join`;

const form = document.getElementById("driverForm");
const btn = document.getElementById("submitBtn");
const photoInput = document.getElementById("photoInput");

function compressImage(file, maxWidth = 1280, quality = 0.7) {
  return new Promise((resolve) => {
    if (file.size <= 1024 * 1024) {
      return resolve(file);
    }

    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(url);

      let width = img.width;
      let height = img.height;

      if (width > maxWidth) {
        height = Math.round((height * maxWidth) / width);
        width = maxWidth;
      }

      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;

      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(
        (blob) => {
          const compressed = new File([blob], file.name, {
            type: "image/jpeg",
            lastModified: Date.now(),
          });
          resolve(compressed);
        },
        "image/jpeg",
        quality,
      );
    };

    img.onerror = () => {
      URL.revokeObjectURL(url);
      resolve(file);
    };

    img.src = url;
  });
}

// --- عرض معاينة الصورة الشخصية عند اختيارها ---
photoInput.addEventListener("change", () => {
  const preview = document.getElementById("fileNamePreview");
  const previewContainer = document.getElementById("imagePreviewContainer");
  const imagePreview = document.getElementById("imagePreview");

  const file = photoInput.files[0];
  if (file) {
    preview.innerText = file.name;
    const reader = new FileReader();
    reader.onload = (e) => {
      imagePreview.src = e.target.result;
      previewContainer.classList.remove("hidden");
    };
    reader.readAsDataURL(file);
  } else {
    preview.innerText = "";
    previewContainer.classList.add("hidden");
  }
});

// --- إرسال النموذج ---
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  btn.disabled = true;
  btn.innerText = "جاري إرسال طلبك...";

  const formData = new FormData(form);
  const photoFile = photoInput.files[0];
  const idFrontFile = document.getElementById("idFrontInput").files[0];
  const idBackFile = document.getElementById("idBackInput").files[0];

  const message =
    `🚀 *طلب انضمام جديد (طلباتك بلس)* \n\n` +
    `👤 *الاسم:* ${formData.get("name")}\n` +
    `📱 *الجوال:* ${formData.get("phone")}\n` +
    `🎂 *العمر:* ${formData.get("age")}\n` +
    `🆔 *الرقم الوطني:* ${formData.get("nationalId")}\n` +
    `📍 *العنوان:* ${formData.get("address")}\n` +
    `🛵 *نوع المركبة:* ${formData.get("vehicleType")}\n` +
    `🔢 *هل منمرة:* ${formData.get("isNumbered")}\n` +
    `📄 *رقم اللوحة:* ${formData.get("plateNumber") || "لا يوجد"}\n` +
    `💡 *عمل سابقاً في التوصيل:* ${formData.get("previousExperience")}\n` +
    `🗺️ *خبرة بمناطق حلب:* ${formData.get("aleppKnowledge")}\n\n` +
    `✅ *موافق على الشروط والتأمين*`;

  try {
    const [compressedPhoto, compressedFront, compressedBack] =
      await Promise.all([
        compressImage(photoFile),
        compressImage(idFrontFile),
        compressImage(idBackFile),
      ]);

    const backendFormData = new FormData();
    backendFormData.append("photo", compressedPhoto);
    backendFormData.append("idFront", compressedFront);
    backendFormData.append("idBack", compressedBack);
    backendFormData.append("message", message);

    const response = await fetch(API_URL, {
      method: "POST",
      body: backendFormData,
    });

    const result = await response.json();

    if (result.ok) {
      window.location.href = "success.html";
    } else {
      alert(
        "حدث خطأ في الإرسال: " + (result.description || "فشل إرسال الطلب."),
      );
    }
  } catch (error) {
    alert("فشل الاتصال بالخادم.");
  } finally {
    btn.disabled = false;
    btn.innerText = "إرسال طلب الانضمام";
  }
});