<%- header %>
<!-- pre-rendered navbar inserted -->
<main class="dashboard-main">
  <%- navbar %>
 
  <style>
    @media (max-width: 576px) {
      #c_code {
        max-width: 100px !important;
      }
    }

    .select2,
    .select2-selection,
    .selection {
      width: auto !important;
    }

    .select2-selection__rendered {
      width: 80px !important;
    }

    .select2-container .select2-selection--single {
      height: 47px !important;
      border-bottom-right-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }

    .select2-dropdown {
      min-width: 320px !important;
      width: 100% !important;
    }

    .select2-container {
      max-width: 100px !important;
    }

    #d_phone {
      border-top-left-radius: 0px !important;
      border-bottom-left-radius: 0px !important;
    }

    .rl {
      --bs-gutter-x: -0.75rem !important;
    }

    .is-invalid {
      border-color: #dc3545 !important;
    }
    
    .text-danger {
      color: #dc3545;
      font-size: 0.875em;
    }
  </style>

  <div class="container flex-1 pt-20 w-full my-4">
    <%- include('../../partials/utils/title.ejs', {title: "Edit Owner"}) %>

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Edit Owner" }
      ];
    %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <div class="mt-4">
      <div class="bg-white shadow-md rounded-lg" style="padding: 20px;">
        <form id="editOwnerForm" enctype="multipart/form-data">

           <div class="row">
             <div class="col-md-6">
              <div class="mb-3">
                <label for="d_fname" class="form-label">First Name</label>
                <input type="text" class="form-control" id="d_fname" name="d_fname" value="<%= owner.d_fname %>" oninput="this.value = this.value.replace(/^\s+/, '')">
                <div class="text-danger" id="d_fname-error"></div>
              </div>
              <div class="mb-3">
                <label for="d_lname" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="d_lname" name="d_lname" value="<%= owner.d_lname || '' %>" oninput="this.value = this.value.replace(/^\s+/, '')">
                <div class="text-danger" id="d_lname-error"></div>
              </div>
              
              <div class="mb-3">
                <label for="d_email" class="form-label">Email ID</label>
                <input type="email" class="form-control" id="d_email" name="d_email" value="<%= owner.d_email %>" pattern="^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$">
                <div class="text-danger" id="d_email-error"></div>
              </div>
            </div>

            <!-- Second Column -->
            <div class="col-md-6">
              <div class="mb-1">
                <label for="d_phone" class="form-label">Contact Phone</label>
                <div class="row rl">
                  <div class="col-auto" style="padding-right: 0;">
                    <select class="form-select" id="c_code" name="c_code" style="min-width: 90px;"></select>
                  </div>
                  <div class="col">
                    <input type="text" class="form-control" id="d_phone" name="d_phone" value="<%= owner.d_phone %>" oninput="this.value = this.value.replace(/[^0-9]/g, '')" placeholder="Enter phone number">
                  </div>
                </div>
                <div class="text-danger" id="d_phone-error"></div>
              </div>

      <div class="mb-3">
  <label for="d_gender" class="form-label">Gender</label>
  <select class="form-select" id="d_gender" name="d_gender">
    <option value="">Please select gender</option>
    <option value="male" <%= owner.d_gender === 'male' ? 'selected' : '' %>>Male</option>
    <option value="female" <%= owner.d_gender === 'female' ? 'selected' : '' %>>Female</option>
  </select>
  <div class="text-danger" id="d_gender-error"></div>
</div>


              <div class="mb-3">
                <label for="city_id" class="form-label">Location</label>
                <select class="form-select" id="city_id" name="city_id">
                  <option value="">Loading cities...</option>
                </select>
                <div class="text-danger" id="city_id-error"></div>
              </div>

              <!-- Profile Photo -->
              <div class="mb-3">
                <label for="image_id" class="form-label">Profile Photo</label>
                <input type="file" class="form-control validate-image" id="image_id" name="image_id" accept=".jpg, .jpeg" data-preview="profilePreview" data-error="profilePicError">
                <img src="" class="img-thumbnail mt-2" width="100" style="display: none;" alt="Profile Photo" id="profilePreview">
                <small id="profilePicError" class="text-danger mt-1"></small>
              </div>
            </div>
          </div>

          <!-- Submit button (full width) -->
          <div style="display: flex; justify-content: end; gap: 10px;">
            <button type="button" class="btn btn-secondary" onclick="window.location.href='/admin/owner'">Cancel</button>
            <button type="submit" class="btn btn-primary">Update Owner</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>

<script src="/js/validator/validation.js"></script>

<script>
  // Define form configuration
  const formConfig = {
    formId: "editOwnerForm",
    fields: [
      {
        name: "d_fname",
        type: "text",
        required: true,
        messages: {
          required: "First name is required"
        }
      },
      {
        name: "d_lname",
        type: "text",
        required: false,
        messages: {}
      },
      {
        name: "d_email",
        type: "email",
        required: true,
        messages: {
          required: "Email is required",
          invalid: "Please enter a valid email address"
        }
      },
      {
        name: "c_code",
        type: "select",
        required: true,
        messages: {
          required: "Please select country code"
        }
      },
      {
        name: "d_phone",
        type: "phone",
        required: true,
        messages: {
          required: "Phone number is required",
          invalid: "Phone number must be 6-15 digits"
        }
      },
      {
        name: "city_id",
        type: "select",
        required: true,
        messages: {
          required: "Please select location"
        }
      },
   {
  name: "d_gender",
  type: "select",
  required: true,
  messages: {
    required: "Please select gender"
  }
},
      {
        name: "image_id",
        type: "file",
        required: false,
        messages: {}
      }

    ]
  };

  // Initialize when DOM is ready
  document.addEventListener('DOMContentLoaded', () => {
    // Initialize form validation
    const formValidator = setupFormValidation(formConfig.formId, formConfig.fields);

    // Profile picture validation
    const profilePicInput = document.getElementById('image_id');
    if (profilePicInput) {
      const profilePicError = document.getElementById('profilePicError');
      const preview = document.getElementById('profilePreview');

      // Show current profile image if exists
      <% if (owner.image && owner.image.img_path) { %>
        preview.src = "<%= IMAGE_FOLDER_PATH %><%= owner.image.img_path %>";
        preview.style.display = "block";
      <% } %>

      profilePicInput.addEventListener('change', function() {
        const file = this.files[0];
        profilePicError.textContent = '';

        if (file) {
          const validTypes = ['image/jpeg', 'image/jpg'];
          if (!validTypes.includes(file.type)) {
            profilePicError.textContent = 'Only JPG/JPEG images are allowed';
            this.value = '';
            preview.style.display = 'block'; // Keep showing current image
          } else if (file.size > 2 * 1024 * 1024) { // 2MB
            profilePicError.textContent = 'Image size must be less than 2MB';
            this.value = '';
            preview.style.display = 'block'; // Keep showing current image
          } else {
            // Show preview of new image
            const reader = new FileReader();
            reader.onload = function(e) {
              preview.src = e.target.result;
              preview.style.display = 'block';
            };
            reader.readAsDataURL(file);
          }
        } else {
          // If no new file selected, keep showing current image
          <% if (owner.image && owner.image.img_path) { %>
            preview.src = "<%= IMAGE_FOLDER_PATH %><%= owner.image.img_path %>";
            preview.style.display = "block";
          <% } else { %>
            preview.style.display = "none";
          <% } %>
        }
      });
    }

    // Helper function to convert file to base64
    function getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const base64 = reader.result.split(',')[1];
          const type = file.type.split('/')[1];
          resolve({ base64, type });
        };
        reader.onerror = error => reject(error);
      });
    }

    // Form submission handler
    const form = document.getElementById('editOwnerForm');
    if (form) {
      form.addEventListener('submit', async function(e) {
        e.preventDefault();

        // Validate form before proceeding
        if (!formValidator.validateForm()) {
          return; // Stop if validation fails
        }

        // Get form data
        const formData = new FormData(this);
        const ccode = document.getElementById("c_code").value.trim().replace(/\D/g, '');
        const phone = document.getElementById("d_phone").value.trim();
        const email = document.getElementById("d_email").value.trim();

        try {
          // Show loading
          document.getElementById("loaderOverlay").style.display = "flex";

          // Handle profile image as base64 (like driver profile)
          const profilePicInput = document.getElementById('image_id');
          if (profilePicInput && profilePicInput.files[0]) {
            const { base64, type } = await getBase64(profilePicInput.files[0]);
            formData.append('driver_image', base64);
            formData.append('image_type', type);
            // Remove the file input from formData
            formData.delete('image_id');
          }

          // Submit the form data directly
          const submitResponse = await fetch('/admin/owner/edit/<%= owner.driver_id %>', {
            method: 'POST',
            body: formData
          });

          const result = await submitResponse.json();

          document.getElementById("loaderOverlay").style.display = "none";

          if (result.success) {
            await Swal.fire({
              icon: "success",
              title: "Success!",
              text: result.message || "Owner updated successfully",
              timer: 1500,
              showConfirmButton: false
            });
            
            // Redirect based on owner status
            const redirectUrl = result.d_active === 1 ? '/admin/owner/active' : '/admin/owner/inactive';
            window.location.href = redirectUrl;
          } else {
            Swal.fire({
              icon: "error",
              title: "Failed!",
              text: result.message || "Error updating owner",
            });
          }
        } catch (error) {
          document.getElementById("loaderOverlay").style.display = "none";
          console.error("Error:", error);
          Swal.fire({
            icon: "error",
            title: "Request Failed",
            text: error.message || "Unknown error occurred",
          });
        }
      });
    }

    // Initialize cities dropdown
    fetch('/admin/getcities')
      .then(res => res.json())
      .then(cities => {
        initCityDropdown(cities);
      });

    function initCityDropdown(cities) {
      const cityDropdown = document.getElementById('city_id');
      cityDropdown.innerHTML = '<option value="">Select Location</option>';

      // Populate dropdown
      cities.data.forEach(city => {
        const option = document.createElement('option');
        option.value = city.city_id;
        option.textContent = city.city_name;
        if (city.city_id == '<%= owner.city_id %>') {
          option.selected = true;
        }
        cityDropdown.appendChild(option);
      });

      // If only one city, auto-select and lock it visually
      if (cities.data.length === 1) {
        cityDropdown.setAttribute("readonly", true);
        cityDropdown.style.pointerEvents = "none";
        cityDropdown.style.opacity = "0.7";
        cityDropdown.style.background = "#f3f4f6";
      } else {
        cityDropdown.removeAttribute("readonly");
        cityDropdown.style.pointerEvents = "auto";
        cityDropdown.style.opacity = "1";
      }
    }
  });

  // Utility: Get emoji flag from country code
  function getFlagEmoji(code) {
    return code.toUpperCase().replace(/./g, char =>
      String.fromCodePoint(127397 + char.charCodeAt())
    );
  }

  // Country code select2 initialization
document.addEventListener('DOMContentLoaded', () => {

  fetch("/countryCode.json")
    .then(res => res.json())
    .then(data => {

      const $select = $('#c_code');

      // normalize owner country code
      let ownerCountryCode = '<%= owner.c_code || "" %>';

      if (ownerCountryCode) {
        ownerCountryCode = ownerCountryCode.replace(/\D/g,''); // remove + or spaces
        ownerCountryCode = '+' + ownerCountryCode;
      } else {
        ownerCountryCode = '+254'; // default kenya (change if needed)
      }

      // clear before append
      $select.empty();

      data.forEach(country => {
        const code = '+' + country.id;
        const isSelected = code === ownerCountryCode;

        const option = new Option(
          `${getFlagEmoji(country.code)} ${code} (${country.name})`,
          code,
          isSelected,
          isSelected
        );

        $select.append(option);
      });

      // init select2
      $select.select2({
        placeholder: "Code",
        width: 'resolve',
        templateSelection: function (data) {
          return data.id || "Code";
        }
      });

      // force selected value AFTER init
      setTimeout(() => {
        $select.val(ownerCountryCode).trigger('change.select2');
      }, 50);

    })
    .catch(err => console.error("Country code load error:", err));

});
</script>

<%- footer %>