{% 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-6xl w-full mx-auto py-10 px-4">
  <h2 class="text-2xl font-semibold mb-6">Complete Consultant 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 %}

    <!-- Passport No -->
    <div>
      <label for="id_passport_no" class="block mb-1 font-medium">Passport No<span class="text-red-600">*</span></label>
      <input type="text" name="passport_no" id="id_passport_no" value="{{ form.passport_no.value|default_if_none:'' }}"
             class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-500" required>
	  {% if form.passport_no.errors %}
		  {% for error in form.passport_no.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>
	<div>
	  <label for="id_date_of_birth" class="block mb-1 font-medium">Date of Birth <span class="text-red-600">*</span></label>
	  <input type="date" name="date_of_birth" id="id_date_of_birth" value="{{ form.date_of_birth.value|date:'Y-m-d' }}"
			 class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-500" required>
	  {% if form.date_of_birth.errors %}
		  {% for error in form.date_of_birth.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
	</div>
    <!-- Seaman Book Number -->
    <div>
      <label for="id_seaman_book_number" class="block mb-1 font-medium">Seaman Book Number</label>
      <input type="text" name="seaman_book_number" id="id_seaman_book_number" value="{{ form.seaman_book_number.value|default_if_none:'' }}"
             class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-500">
    </div>

    <!-- Experience Type -->
    <div>
      <label for="id_experience_type" class="block mb-1 font-medium">Experience Type</label>
      {{ form.experience_type }}
    </div>

    <!-- Vessel Type -->
   <div class="mb-4">
	  <label for="id_vessel_type" class="block mb-1 font-medium">Vessel Type</label>
	  {{ form.vessel_type }}
	</div>

	<div class="mb-4">
	  <label for="id_vessel_sub_type" class="block mb-1 font-medium">Vessel Sub Type</label>
	  <select id="id_vessel_sub_type" name="vessel_sub_type" class="border p-2 w-full mb-4">
		  <option value="">Select Sub Type</option>
		   {% if form.initial.vessel_sub_type %}
		  {% for subtype in form.fields.vessel_sub_type.queryset %}
			<option value="{{ subtype.id }}"
			  {% if form.initial.vessel_sub_type == subtype.id %} selected {% endif %}>
			  {{ subtype.name }}
			</option>
		  {% endfor %}
		  {% endif %}
		</select>
	</div>

	<div class="mb-4">
	  <label for="id_last_rank_sailed" class="block mb-1 font-medium">Last Rank Sailed</label>
	 {{ form.last_rank_sailed }}
	</div>

	<div class="mb-4">
	  <label for="id_last_rank_sub_type" class="block mb-1 font-medium">Last Rank Sub Type</label>
	   <select id="id_last_rank_sub_type" name="last_rank_sub_type" class="border p-2 w-full">
		  <option value="">Select Sub Type</option>
		   {% if form.initial.last_rank_sub_type %}
		  {% for subtype in form.fields.last_rank_sub_type.queryset %}
			<option value="{{ subtype.id }}"
			  {% if form.initial.last_rank_sub_type == subtype.id %} selected {% endif %}>
			  {{ subtype.name }}
			</option>
		  {% endfor %}
		  {% endif %}
		</select>
	</div>

	<div class="mb-4">
	  <label for="id_nationality" class="block mb-1 font-medium">Nationality<span class="text-red-600">*</span></label>
	  {{ form.nationality }}
	  {% if form.nationality.errors %}
		  {% for error in form.nationality.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
	</div>

	<div class="mb-4">
	  <label for="id_base_location_country" class="block mb-1 font-medium">Base Location Country<span class="text-red-600">*</span></label>
	  {{ form.base_location_country }}
	   {% if form.base_location_country.errors %}
		  {% for error in form.base_location_country.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
	</div>

	<div class="mb-4">
	  <label for="id_base_location_state" class="block mb-1 font-medium">Base Location State<span class="text-red-600">*</span></label>
	 <select id="id_base_location_state" name="base_location_state" class="border p-2 w-full mb-4" required>
		<option value="">Select State</option>
		 {% if form.initial.base_location_state %}
		 {% for subtype in form.fields.base_location_state.queryset %}
			<option value="{{ subtype.id }}"
			  {% if form.initial.base_location_state == subtype.id %} selected {% endif %}>
			  {{ subtype.name }}
			</option>
		  {% endfor %}
		  {% endif %}
	</select>
	{% if form.base_location_state.errors %}
		  {% for error in form.base_location_state.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
	</div>

	<div class="mb-4">
	  <label for="id_base_location_city" class="block mb-1 font-medium">Base Location City<span class="text-red-600">*</span></label>
	  <select id="id_base_location_city" name="base_location_city" class="border p-2 w-full" required>
		  <option value="">Select City</option>
		   {% if form.initial.base_location_city %}
		   {% for subtype in form.fields.base_location_city.queryset %}
			<option value="{{ subtype.id }}"
			  {% if form.initial.base_location_city == subtype.id %} selected {% endif %}>
			  {{ subtype.name }}
			</option>
		  {% endfor %}
		  {% endif %}
		</select>
		{% if form.base_location_city.errors %}
		  {% for error in form.base_location_city.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
	</div>	
	
    <!-- Photo -->
    <div>
      <label for="id_photo" class="block mb-1 font-medium">Photo<span class="text-red-600">*</span></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.instance.photo %}
	  <img src="{{ form.instance.photo.url }}" alt="Uploaded Photo" class="mt-1 h-24 rounded shadow">		
	  {% 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>

    <!-- 
    <div>
      <label for="id_audit_certificate" class="block mb-1 font-medium">Relevant Certificate</label>
      <input type="file" name="audit_certificate" id="id_audit_certificate"
             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.instance.audit_certificate %}
		<a href="{{ form.instance.audit_certificate.url }}" target="_blank" class="text-blue-600 underline mt-2 block">Download Audit Certificate</a>
	  {% endif %}
    </div>

    -->
    <div>
      <label for="id_curriculum_vitae" class="block mb-1 font-medium">Curriculum Vitae<span class="text-red-600">*</span></label>
      <input type="file" name="curriculum_vitae" id="id_curriculum_vitae"
             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.instance.curriculum_vitae %}
		<a href="{{ form.instance.curriculum_vitae.url }}" target="_blank" class="text-blue-600 underline mt-2 block">Download CV</a>
	  {% endif %}
	  {% if form.curriculum_vitae.errors %}
		  {% for error in form.curriculum_vitae.errors %}
			<p class="text-red-600 text-sm mt-1">{{ error }}</p>
		  {% endfor %}
	  {% endif %}
    </div>
	<div>
		<label for="id_certificates" class="block mb-1 font-medium">Upload Certificates</label>
		<input type="file" name="certificates" id="id_certificates" multiple
			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">

		{% for cert in certificates %}
			<a href="{{ cert.file.url }}" target="_blank" class="text-blue-600 underline block mt-1">
				Download Certificate {{ forloop.counter }}
			</a>
		{% endfor %}
	</div>
    <!-- Submit -->
    <div class="md:col-span-2 text-right">
	  {% if form.instance.photo %}
		<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">
        Save Profile
      </button>
    </div>
	
  </form>
</div>
<script>
document.getElementById('id_vessel_type').addEventListener('change', function() {
    const typeId = this.value;
    fetch(`/get-subtypes/?type_id=${typeId}`)
        .then(res => res.json())
        .then(data => {
            const subTypeSelect = document.getElementById('id_vessel_sub_type');
            subTypeSelect.innerHTML = '<option value="">Select Sub Type</option>';
            data.forEach(subtype => {
                subTypeSelect.innerHTML += `<option value="${subtype.id}">${subtype.name}</option>`;
            });
        });
});


</script>
<script>
document.getElementById('id_last_rank_sailed').addEventListener('change', function () {
    const rankId = this.value;
    fetch(`/get-rank-subtypes/?rank_id=${rankId}`)
        .then(response => response.json())
        .then(data => {
            const subSelect = document.getElementById('id_last_rank_sub_type');
            subSelect.innerHTML = '<option value="">Select Sub Type</option>';
            data.forEach(sub => {
                subSelect.innerHTML += `<option value="${sub.id}">${sub.name}</option>`;
            });
        });
});
</script>

<script>
document.getElementById('id_base_location_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_location_state');
      const citySelect = document.getElementById('id_base_location_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_location_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_location_city');
      citySelect.innerHTML = '<option value="">Select City</option>';
      data.forEach(city => {
        citySelect.innerHTML += `<option value="${city.id}">${city.name}</option>`;
      });
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const selects = document.querySelectorAll('select');

  selects.forEach(select => {
    select.addEventListener('change', function () {
      const otherInput = document.getElementById(`${this.id}_other`);
      if (otherInput) {
        if (this.value === 'OTHER') {
          otherInput.classList.remove('hidden');
        } else {
          otherInput.classList.add('hidden');
        }
      }
    });
  });
});
</script>


{% endblock %}