{% extends 'dashboard/admin_dashboard/main.html' %}
{% load static %}
{% block content %}
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Masters / Location /</span> Edit Location</h4>
<div style="padding: 10px;">
  {% if messages %}
    {% for message in messages %}
      <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% elif 'warning' in message.tags %}alert-warning{% elif 'info' in message.tags %}alert-info{% endif %} alert-dismissible" role="alert" id="success-alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
      </div>
    {% endfor %}
  {% endif %}
</div>
<div class="row">
    <div class="col-md-12">
      <div class="card mb-4">
        <form role="form" method="POST" enctype="multipart/form-data" action="">
            {% csrf_token %}
          <div class="card-body">
            <!-- Country Dropdown -->
            <div class="mb-3">
              <label for="country-dropdown" class="form-label">Country <span style="color:red">*</span></label>
              <select name="country_id" id="country-dropdown" class="form-control" required>
                <option value="">-- Select Country --</option>
                {% for country in all_country %}
                      <option value="{{ country.id }}" {% if country.id == all_location.country_id %} selected {% endif %}>{{ country.name }}</option>
                {% endfor %}
              </select>
            </div>
            <!-- State Dropdown -->
            <div class="mb-3">
              <label for="state-dropdown" class="form-label">State <span style="color:red">*</span></label>
              <select name="state_id" id="state-dropdown" class="form-control" required>
                <option value="{{state.id}}" selected>{{state.name}}</option>
              </select>
            </div>
            <!-- City Dropdown -->
            <div class="mb-3">
              <label for="city-dropdown" class="form-label">City <span style="color:red">*</span></label>
              <select name="city_id" id="city-dropdown" class="form-control" required>
                <option value="{{cities.id}}">{{cities.name}}</option>
              </select>
            </div>
            <!-- Location Name -->
            <div class="mb-3">
              <label  class="form-label">Location Name <span style="color:red">*</span></label>
              <input type="text" name="location_name" class="form-control" value={{all_location.location_name}} required="" >
            </div>
            <!-- Address -->
            <div class="mb-3">
              <label for="address" class="form-label">Address <span style="color:red">*</span></label>
              <textarea class="form-control" id="address" name="address" rows="4" required>{{all_location.address}}</textarea>
            </div>
            {% if is_gate_pass_active%}
            <div class="form-group">
                <label>Gate Pass Name</label>
                <select name="gate_pass_template_id"  class="form-control" required="">
                  <option value="">-- Select Gate Pass--</option>
                  {% for all_gate_pass_template in all_gate_pass_template %}
                        <option value="{{ all_gate_pass_template.id }}" {% if all_gate_pass_template.id == all_location.gate_pass_template_id %} selected {% endif %}>{{ all_gate_pass_template.gate_pass_name }}</option>
                  {% endfor %}
                </select>
            </div>
            {% endif %}
            <!-- Status Dropdown -->
            <div class="mb-3">
              <label for="status" class="form-label">Status <span style="color:red">*</span></label>
              <select name="status" id="status" class="form-control" required>
                <option value="1" {% if all_location.status %}selected{% endif %}>Active</option>
                <option value="0" {% if not all_location.status %}selected{% endif %}>Inactive</option>
              </select>
            </div>

            <!-- Submit Button -->
            <div class="mt-3 d-flex justify-content-end">
              <button type="submit" class="btn btn-primary" id="btn_submit">Update</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
<!-- JavaScript for dynamic dropdowns -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // Country dropdown change event
    $("#country-dropdown").change(function () {
      var url = "{% url 'admin_location_ajax_load_states' %}";
      var countryId = $(this).val();

      $.ajax({
        url: url,
        data: {
          'country_id': countryId
        },
        success: function (data) {
          $("#state-dropdown").html('<option value="">-- Select State --</option>');
          $("#city-dropdown").html('<option value="">-- Select City --</option>');
          $.each(data, function (key, value) {
            $("#state-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
          });
        }
      });
    });

    // State dropdown change event
    $("#state-dropdown").change(function () {
      var url = "{% url 'admin_location_ajax_load_cities' %}";
      var stateId = $(this).val();

      $.ajax({
        url: url,
        data: {
          'state_id': stateId
        },
        success: function (data) {
          $("#city-dropdown").html('<option value="">-- Select City --</option>');
          $.each(data, function (key, value) {
            $("#city-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
          });
        }
      });
    });
  });
</script>
{% endblock %}