{% load countries %} {% get_countries as countries %} {% if cas_traite %}
<h1>Cas traite</h1>
{% else %} {% endif %}
<div
  class="d-flex flex-column justify-content-between  my-3 py-3"
>
  <form id="traiteFormStep" method="POST" onsubmit="return validateForm()">
    {% csrf_token %}

    <div class="container">
      <h3 class=" text-center text-dark-blue">Informations sur la traite</h3>
      <!-- Form ADD TRAITE-->
      <input type="hidden" name="cas_traite" value="-1" />
      <input type="hidden" id="url_request" value="{% url "traiteapp:save_traite" %}">
      <div class="row">
        {% if juridictions %}
        <div class="col-12 col-md-6 mb-2">
          <label for="juridiction">
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Juridiction</span> 
          </label>
          <select
          required
          class="form-select mt-n3 my-3 py-2"
          name="juridiction"
          id="juridiction"
        >
               <option selected disabled></option>
            {% for juridiction in juridictions %}
               <option value="{{juridiction.id}}">{{juridiction.libelle}}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}
        <div class="col-12 col-md-6 mb-2">
          <label for="date_traite">
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Date</span> 
          </label>
          <input
            required
            type="date"
            class="form-control mt-n3 py-2 rounded-2 date-field"
            id="date_traite"
            name="date_traite"
            required
          />
        </div>
      </div>
    <div class="row mb-3">
      <div class="form-group ">
        <label for="description">
          <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Description</span> 
        </label>
        
          <textarea
            required
            class="form-control mt-n3 pt-2 rounded-2"
            rows="4"
            id="description"
            name="description"
            required
          ></textarea>
       
      </div>
    </div>
    <div class="mb-3">
      
      <label for="zone_depart" >
        <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Zone de départ</span> 
      </label>
      <fieldset class="form-group border mt-n3  py-2">
        <div class="row p-2">
          <!-- <legend>
            <h6>Zone de depart</h6>
          </legend> -->
          <div class="col-12 col-md-6 ">
            <select
              class="form-select"
              name="type_zone_depart"
              id="type_zone_depart"
            >
              <option value="pays" selected>Pays</option>
              <option value="region">Région</option>
            </select>
          </div>
          <div class="col-12 col-md-6 mb-3">
            <select
              class="form-select"
              name="zone_depart"
              id="zone_depart"
            >
              {% for country in countries %}
              <option value="{{country.name}}">{{country.name}}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </fieldset>
    </div>
      <label for="zone_destination" >
        <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Zone de destination</span> 
      </label>
      <fieldset class="form-group border mt-n3 my-3 py-2">
        <div class="row p-2">
          <!-- <legend>
            <h6>Zone de destination</h6>
          </legend> -->
          <div class="col-12 col-md-6 mb-3">
            <select
              required
              class="form-select"
              name="type_zone_destination"
              id="type_zone_destination"
            >
              <option value="pays" selected>Pays</option>
              <option value="region">Région</option>
            </select>
          </div>
          <div class="col-12 col-md-6 mb-3">
            <select
              required
              class="form-select"
              name="zone_destination"
              id="zone_destination"
            >
              {% for country in countries %}
              <option value="{{country.name}}">{{country.name}}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </fieldset>
      <label for="zone_interpellation" >
        <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Zone d'interpellation</span> 
      </label>
      <fieldset class="form-group border  mt-n3 my-3 py-2">
        <div class="row p-2">
          <!-- <legend>
            <h6>Zone interpellation</h6>
          </legend> -->
          <div class="col-12 col-md-6 mb-3">
            <select
              required
              class="form-select"
              name="type_zone_interpellation"
              id="type_zone_interpellation"
            >
              <option value="pays" selected>Pays</option>
              <option value="region">Région</option>
            </select>
          </div>
          <div class="col-12 col-md-6 mb-3">
            <select
              required
              class="form-select "
              name="zone_interpellation"
              id="zone_interpellation"
            >
              {% for country in countries %}
              <option value="{{country.name}}">{{country.name}}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </fieldset>
      <div class="row mb-3">

        <div class="col ">
          <label for="phase_interpellation" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Identification</span> 
          </label>
          <select
            required
            class="form-select mt-n3 my-3 py-2"
            name="phase_interpellation"
          >
            <option value="Police">Police</option>
            <option value="Gendarmerie">Gendarmerie</option>
          </select>
        </div>
      </div>
      <div class="row ">
        <div class="col-12 col-md-6 mb-3">
          <label for="enquete" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Enquête effectuée</span> 
          </label>
          <!-- <label for="dateTraite" class="form-label"></label> -->
          <select required class="form-select mt-n3 my-3 py-2" name="enquete">
            <option value="True">Oui</option>
            <option value="False" selected>Non</option>
          </select>
        </div>
        <div class="col-12 col-md-6 mb-3">
       
          <label for="phase_interpellation" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Traite Interne ou Externe</span> 
          </label>
          <select
            required
            class="form-select mt-n3 my-3 py-2"
            name="type_traite"
          >
            <option value="Interne">Interne</option>
            <option value="Extene">Extene</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        
        <div class="col ">
          <!-- <label for="dateTraite" class="form-label"></label> -->
          <label for="promesses" >
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Moyens</span> 
          </label>
          <input type="text" class="form-control  mt-n3 my-3 py-2" name="promesses">
        </div>
      </div>
      <div class="row ">
        <div class="col-12 col-md-6 mb-3">
          <label for="poursuites">
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Poursuites engagées</span> 
          </label>
          <select class="form-select  mt-n3 my-3 py-2" name="poursuites">
            <option value="True">Oui</option>
            <option value="False" selected>Non</option>
          </select>
        </div>
        <div class="col-12 col-md-6 mb-3">
          <label for="decisions_judiciaires">
            <span class="h6 small bg-white text-muted ms-3 pt-1 ps-2 pe-2 ">Décisions judiciaires</span> 
          </label>
          <select
            class="form-select  mt-n3 my-3 py-2"
            name="decisions_judiciaires"
          >
            <option value="" > </option>
            <option value="Acquittement" > Acquittement</option>
            <option value="Condamnation" >Condamnation</option>
          </select>
        </div>
      </div >
      {% include "./infraction-form.html" %}
      
      <div class="text-end">

        <button
          type="submit"
          class="btn btn-dark px-5"
          id="traiteSubmitBtn"
          disabled
        >
          SUIVANT
        </button>
      </div>

      <!-- END ADD TRAITE-->
    </div>
  </form>
</div>

<script>
 

  function validateForm() {
    var description = document.getElementsByName("description").value;
    var dateTraite = document.getElementsByName("date_traite").value;
    var typeZoneDepart = document.getElementsByName("type_zone_depart").value;
    var zoneDepart = document.getElementsByName("zone_depart").value;
    var typeZoneDest = document.getElementsByName(
      "type_zone_destination"
    ).value;
    var zoneDest = document.getElementsByName("zone_destination").value;
    var typeZoneInter = document.getElementsByName(
      "type_zone_interpellation"
    ).value;
    var zoneInter = document.getElementsByName("zone_interpellation").value;
    var phaseInter = document.getElementsByName("phase_interpellation").value;
    var enquete = document.getElementsByName("enquete").value;
    var typeTraite = document.getElementsByName("type_traite").value;
    var promesses = document.getElementsByName("promesses").value;
    var poursuites = document.getElementsByName("poursuites").value;
    var decisionsJudic = document.getElementsByName(
      "decisions_judiciaires"
    ).value;
    var typeInfraction = document.getElementsByName("type_infractions[]").value;
    var moyenTransport = document.getElementsByName("moyen_transports[]").value;
    // Add similar lines for other fields

    if (
      !description ||
      !dateTraite ||
      !typeZoneDepart ||
      !zoneDepart ||
      !typeZoneDest ||
      !zoneDepart ||
      !phaseInter ||
      !enquete ||
      !typeTraite ||
      !promesses ||
      !poursuites ||
      !decisionsJudic ||
      !moyenTransport ||
      !typeInfraction /* Add conditions for other fields */
    ) {
      return false; // Prevent form submission
    }

    return true; // Allow form submission
  }
</script>