{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="min-h-screen flex items-center justify-center bg-cover bg-center" style="background-image: url('{% static 'backr.jpg' %}');">
<div class="max-w-4xl mx-auto py-10">
  <h2 class="text-2xl font-semibold mb-6">Complete Customer Profile</h2>
<div class="bg-white border border-gray-300 text-sm text-gray-700 p-3 rounded shadow mb-4">
  Fields marked with <span class="text-red-600 font-semibold">*</span> are mandatory.
</div>
  <form method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-white p-6 rounded-lg shadow">
    {% csrf_token %}

    <!-- Company Name -->
    <div>
      <label for="id_company_name" class="block mb-1 font-medium">Company Name <span class="text-red-500">*</span></label>
      <input type="text" name="company_name" id="id_company_name" value="{{ form.company_name.value|default_if_none:'' }}"
             class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:border-blue-500" required>
	  {% if form.company_name.errors %}
		  {% for error in form.company_name.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>
	<div>
	  <label for="id_company_url" class="block mb-1 font-medium">
		Company URL <span class="text-red-500">*</span>
	  </label>
	  <input type="url" name="company_url" id="id_company_url" 
			 value="{{ form.company_url.value|default_if_none:'' }}"
			 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:border-blue-500" 
			 required>
	   {% if form.company_url.errors %}
		  {% for error in form.company_url.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
	</div>
    <!-- Role Type (Select) -->
    <div>
      <label for="id_role_type" class="block mb-1 font-medium">Role Type <span class="text-red-500">*</span></label>
      <select name="role_type" id="id_role_type"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring focus:border-blue-500" required>
        {% for val, label in form.role_type.field.choices %}
          <option value="{{ val }}" {% if form.role_type.value == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
	  {% if form.role_type.errors %}
		  {% for error in form.role_type.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>

    <!-- Base Country (Select) -->
    <div>
      <label for="id_base_country" class="block mb-1 font-medium">Base Country <span class="text-red-500">*</span></label>
      <select name="base_country" id="id_base_country"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring focus:border-blue-500" required>
        {% for val, label in form.base_country.field.choices %}
          <option value="{{ val }}" {% if form.base_country.value == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
	    {% if form.base_country.errors %}
		  {% for error in form.base_country.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>

    <!-- Base State (Select) -->
    <div>
      <label for="id_base_state" class="block mb-1 font-medium">Base State <span class="text-red-500">*</span></label>
      <select name="base_state" id="id_base_state"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring focus:border-blue-500" required>
		<option value="">Select State</option>
		{% if form.initial.base_state %}		
        {% for val, label in form.base_state.field.choices %}
          <option value="{{ val }}" {% if form.base_state.value == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
		{% endif %}
      </select>
	    {% if form.base_state.errors %}
		  {% for error in form.base_state.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>

    <!-- Base City (Select) -->
    <div>
      <label for="id_base_city" class="block mb-1 font-medium">Base City <span class="text-red-500">*</span></label>
      <select name="base_city" id="id_base_city"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring focus:border-blue-500" required>
		<option value="">Select City</option>
		{% if form.initial.base_city %}			
        {% for val, label in form.base_city.field.choices %}
          <option value="{{ val }}" {% if form.base_city.value == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
		{% endif %}
      </select>
	   {% if form.base_city.errors %}
		  {% for error in form.base_city.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>

    <!-- Designation -->
    <div>
      <label for="id_designation" class="block mb-1 font-medium">Designation <span class="text-red-500">*</span></label>
      <input type="text" name="designation" id="id_designation" value="{{ form.designation.value|default_if_none:'' }}"
             class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:border-blue-500" required>
	  {% if form.designation.errors %}
		  {% for error in form.designation.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>

    <!-- Department -->
   <div>
  <label for="id_department" class="block mb-1 font-medium">Department <span class="text-red-500">*</span></label>
  <select name="department" id="id_department"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring focus:border-blue-500" required>
    {% for val, label in form.department.field.choices %}
      <option value="{{ val }}" {% if form.department.value == val %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
   {% if form.department.errors %}
		  {% for error in form.company_name.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
</div>
<div>
  <label for="id_photo" class="block mb-1 font-medium">
    Upload Photo
  </label>
  <input type="file" name="photo" id="id_photo"
         class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0
             file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
  
  {% if form.photo.value %}
    <div class="mt-2">
      <p class="text-sm text-gray-600">Current Photo:</p>
      <img src="{{ form.photo.value.url }}" alt="Uploaded Photo" class="mt-1 h-24 rounded shadow">
    </div>
  {% endif %}
  {% if form.photo.errors %}
		  {% for error in form.photo.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
</div>

    <!-- Submit Button -->
    <div class="md:col-span-2 text-right">
	 {% if form.instance.department %}
	 <button type="submit"
              class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
        Dashboard
      </button>
	  {% endif %}
      <button type="submit"
              class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
        Update
      </button>
    </div>
  </form>
</div>
<script>
document.getElementById('id_base_country').addEventListener('change', function () {
  const countryId = this.value;
  fetch(`/get-states/?country_id=${countryId}`)
    .then(res => res.json())
    .then(data => {
      const stateSelect = document.getElementById('id_base_state');
      const citySelect = document.getElementById('id_base_city');
      stateSelect.innerHTML = '<option value="">Select State</option>';
      citySelect.innerHTML = '<option value="">Select City</option>';
      data.forEach(state => {
        stateSelect.innerHTML += `<option value="${state.id}">${state.name}</option>`;
      });
    });
});
</script>
<script>
document.getElementById('id_base_state').addEventListener('change', function () {
  const stateId = this.value;
  fetch(`/get-cities/?state_id=${stateId}`)
    .then(res => res.json())
    .then(data => {
      const citySelect = document.getElementById('id_base_city');
      citySelect.innerHTML = '<option value="">Select City</option>';
      data.forEach(city => {
        citySelect.innerHTML += `<option value="${city.id}">${city.name}</option>`;
      });
    });
});
</script>
{% endblock %}