{% load staticfiles %}
{% load i18n %}
{% load fontawesome %}
{% load dashboard_tags %}

<!--
Jinja2 partial to render a form

{ % include 'sharedapp/partials/full_width_form.html' with usecase=usecase spec=spec widget=widget % }

  -->
<div class="block-widget-box width-all mb-3" id="{{widget.id}}">
  <div class="block-filter-container d-flex flex-wrap align-items-center">
    <div class="crc-head-inside d-flex align-items-center">
      <div class="crc-head-icon"  data-bs-toggle="collapse" data-bs-target="#collapseresults" aria-expanded="true">
        <img class="expand-open" src={% static 'gui2/appstore2/images/new-caret-icon-1.svg' %} alt="" />
        <img class="expand-add" src={% static 'gui2/appstore2/images/expand-add.svg' %} alt="" />
      </div>
      <div class="accor-right">
        <div class="block-filter-left">
          <ul class="cp-text-list d-flex align-items-center">
            <li><b>{% translate widget.name|safe %}</b></li>
          </ul>
            <p>{% translate widget.description|safe %}</p>
        </div>
      </div>
    </div>
    <div class="block-filter-option ms-auto d-flex align-items-center justify-content-end">
        {% for k,values in widget.header_components.items %}
        {% for v in  values %}
        {% include 'sharedapp/components/'|add:v.template|add:'.html' with content=v widget=widget %}
        {% endfor %}
        {% endfor %}
    </div>
  </div>
  <div id="collapseresults" class="crc-body accordion-collapse collapse show">
    <div class="cp-body">
      <div class="row mb-30">
	{% if "text" in widget %}
	<div>{{widget.text|safe}}</div>
	{% endif %}
	{% if widget.method %}
	    {% if widget.method.lower == "post" %}
           <form class="uniForm" id="form{{widget.id}}" method="{{widget.method}}">
	        {% csrf_token %}
        {%  else %}
            <form class="uniForm"  method="{{widget.method}}" id="form{{widget.id}}" action="{{ widget.action }}">
	  {% endif %}
      {% endif %}
	  {% for name, value in widget.hidden_vars.items %}
	  <input name="{{name}}" value="{{value}}" type="hidden"></input>
	  {% endfor %}
          {% for k,values in widget.body_components.items %}
              {% if k == 'dropdown' %}
                    {% for v in values %}
                          <div class="v-box p-2">
                            {% include 'sharedapp/components/'|add:v.template|add:'.html' with dropdown=v %}
                          </div>
                    {% endfor %}
              {% else %}
                {% for v in  values %}
                    {% include 'sharedapp/components/'|add:v.template|add:'.html' with widget=v content=v %}
                {% endfor %}
              {% endif %}
          {% endfor %}
          <ul class="v-line-text-list d-flex flex-wrap">
	    {% for element in widget.elements %}
	    {% if element.type == "select" %}
            <div class="v-box p-2">
              <h4>{{element.label}}</h4>
              <div class="column">
	        <div class="form-group">

                  <span class="multiselect-native-select">
                    <select class="selectpicker form-control" id="{{element.id}}" name="{{element.id}}" data-live-search-placeholder="Search" data-live-search="true" data-container="body" data-size="5" autocomplete="off">
		      {% if element.choices|get_class == "dict" %}
                      {% for label,value in element.choices.items %}
                      <option value="{{value}}" title="{{value}}" {% if element.selected_choice == value %}selected{% endif%}>{{label|safe}}</option>
                      {% endfor %}
		      {% else %}
                      {% for choice in element.choices %}
                      <option value="{{choice}}" title="{{choice}}" {% if element.selected_choice == choice %}selected{% endif%}>{{choice}}</option>
                      {% endfor %}
		      {% endif %}
                    </select>
                  </span>
	        </div>
              </div>
            </div>
	    {% elif element.type == "input" %}
            <div class="v-box p-2">
              <h4>{{element.label}}</h4>
              <div class="column">
                <div class="form-group" id="single-text-{{widget.id}}">
                  <input type="text" class="form-control" id="{{element.name}}" name="{{element.name}}" value="{{element.value}}" placeholder="{{element.placeholder}}" required >
                </div>
              </div>
            </div>
	    {% elif element.type == "textarea" %}
            <div class="v-box p-2">
              <h4>{{element.label}}</h4>
	      <div class="column">
		<div class="form-group d-flex">
		  <textarea class="{{element.class}}"
			    id="{{ element.id }}"
			    name="{{ element.id }}"
			    rows="{{ element.rows }}"
			    cols="{{ element.cols }}"
			    placeholder="{{ element.placeholder }}" required>{{element.value}}</textarea>
		</div>
	      </div>
	    </div>
	    {% elif element.type == "donothing" %}
            <div class="v-box p-2">
	      <div class="column">
	      </div>
	    </div>
	    {% endif %}
	    {% endfor %}
          </ul>
          <div class="v-box p-2">
            <div class="column">
	      <div class="form-group d-flex" id="formsubmitdiv">
		    <button name="submit_{{widget.id}}" data-bs-toggle="tooltip" data-bs-title={% if 'tooltip' in widget %} {{ widget.tooltip }} {% endif %} data-bs-custom-class="custom-tooltip" data-bs-placement="top" id="submit_{{widget.id}}" value="{% if 'submit' in widget %}{{widget.submit}}{% else %}Show{% endif %}" type="submit" class="btn btn-default {{widget.submit_class}} {% if 'button_status' in widget and widget.button_status == True %} disabled {% endif %}"><img src="{% static 'gui2/appstore2/images/play.svg' %}" alt="" />{% if 'submit' in widget %}{{widget.submit}}{% else %}Show{% endif %}</button>
               <div id="full-width-dot-flashing" class="full-width-dot-flashing d-none"></div>
	      </div>
            </div>
	  </div>
	</form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade sd-modal" style="z-index: 9999;" id="confirm_dialog_{{widget.id}}">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="sd-content-box">
        <div class="sd-modal-header" style="height: 100px !important;">
          <div class="d-flex flex-wrap">
            <div class="sd-modal-header-left-sm d-flex flex-wrap">
              <strong>{{widget.submit_header}}</strong>
            </div>
            <div class="sd-modal-header-right ms-auto text-end">
              <div class="sd-mhr-icon-group d-flex align-items-center justify-content-end">
                <div id="sd-mhr-icon_{{widget.id}}" class="sd-mhr-icon" data-bs-dismiss="modal">
                  <img src="{% static 'gui2/appstore2/images/modal-close-icon.svg' %}" alt="" /></div>
              </div>
            </div>
          </div>
        </div>
        <div class="sd-modal-body">
          <p>{{widget.submit_body}}</p>
          <button type="button" class="btn btn-default" id="modal-btn-no_{{widget.id}}">No</button>
          <button type="button" class="btn btn-primary" id="modal-btn-yes_{{widget.id}}">Yes</button>
        </div>
      </div>
    </div>
  </div>
</div>


{#{% if widget.spinner_on_submit %}#}
  <script>
      const method = "{{widget.method}}";
      $("#full-width-dot-flashing").removeClass("d-none");

      if (method === 'POST') {
          $(document).on('submit', '#form{{widget.id}}', function (e) {

           $("#full-width-dot-flashing").removeClass("d-none");
           $("body").toggleClass("open-nav");

	      e.preventDefault();
	      e.stopPropagation();

              var post_data = [];
              var generate_gac = true;

              const process_table = "{{widget.process_table}}";
              if (process_table) {
                  $("#{{widget.process_table}}").find("tbody").find('tr').each(function (i, el) {
                      generate_gac = true;
                      var row = $(this);
                      var clause_val = row.find('td:eq(1)').text()
                      var agree_val = row.find(".form-check-input").is(":checked");
                      var comments_val = row.find('textarea').val();
                      if (clause_val && agree_val === false ) {
                          generate_gac = false;
                      }
                      if (clause_val && comments_val !== undefined && comments_val.length > 0) {
                          generate_gac = false;
                      }

                      if (generate_gac === false) {
                          post_data.push({
                              'clause': clause_val,
                              'agree': agree_val,
                              'comments': comments_val,
                          });
                      }
                  });
              }

              var buttonHtml = $("#submit").html();
              $("#submit").html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>...`);

              const action_url = "{{ widget.action }}"
              if (action_url) {
                  const action_type = "{{widget.method}}";
                  if (action_type === 'POST') {
                      var cookie = '{{csrf_token}}';
                      const hidden_vars = "{{widget.hidden_vars}}";
                      const all_data = {'invalid_values': post_data};

                      const all_vars = hidden_vars.split(";")
                      if (all_vars) {
                          all_vars.forEach(v => {
                              const keyVal = v.split(":");
                              all_data[keyVal[0]] = keyVal[1];
                          })
                      }

                      $.ajax({
                          url: action_url,
                          type: 'POST',
                          headers: {'X-CSRFToken': cookie},
                          contentType: "application/json; charset=utf-8",
                          data: JSON.stringify(all_data),
                          success: function (response) {
                              toastr.success("Data Saved!");
                              window.location.href = response.redirect;
                              $("#submit").html(buttonHtml);
                          },
                          error: function (XMLHttpRequest, textStatus, errorThrown) {
                              console.log("Error: " + errorThrown);
                          }
                      });
                  }
              }
	      return false;
	  });
      }

      $("#full-width-dot-flashing").addClass("d-none");
</script>
{#{% endif %}#}

<script>
  $("#{{widget.id}} .confirmbtn").click(function (e) {
      $('#confirm_dialog_{{widget.id}}').modal('show');
      e.preventDefault();
      e.stopPropagation();
  });

  $('#modal-btn-no_{{widget.id}}').click(function(e){
      $('#sd-mhr-icon_{{widget.id}}').click();
  });

  $('#modal-btn-yes_{{widget.id}}').click(function(e){
      $("#form{{widget.id}}").submit();
  });

</script>
