{% extends parentTemplate %}

{% block head %}
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script type="text/javascript">
  function dbeditAddMore(colName) {
    var inputCol = $(`[name="${colName}"]`).not('[type="hidden"]')[0];
    var oCopy = $(inputCol).clone();
    oCopy.val("");
    
    $(inputCol).parent().parent().append($('<div class="mb-3"></div>').append(oCopy));
  }

  function onChangeSelectAll(selectAllCtrl) {
    var jSelectAll = $(selectAllCtrl);

    var inputName = jSelectAll.prop('id').split('_')[2];
    $('input[name="' + inputName + '"]').prop('checked', jSelectAll.prop('checked'))
  }

  function onChangeCheckNonSelectAll(selectAllCtrl) {
    var jSelectAll = $(selectAllCtrl);

    var inputName = jSelectAll.prop('id').split('_')[2];

    var allChecked = true;
    $('input:checkbox[name="' + inputName + '"]').each(function(index) {
      if (!$(this).prop('checked')) {
        allChecked = false;
        return false;
      }
    })
    jSelectAll.prop('checked', allChecked);
  }

  $(document).ready(function() {
    $('.c-selectall').each(function() {
      var self = this;
      var jSelectAll = $(self);
      jSelectAll.change(function() {
        onChangeSelectAll(self)
      });

      var inputName = jSelectAll.prop('id').split('_')[2];

      $('input[name="' + inputName + '"]').change(function() {
        onChangeCheckNonSelectAll(self)
      });

      onChangeCheckNonSelectAll(self);
    });
  })
</script>
{% endblock %}

{% block content %}
{{super()}}

<div class="row">
<div class="col"{%if style%} style="{{style}}"{%endif%}>

<form method="post">
  <input type="hidden" name="_csrf" value="{{_csrf}}" />
  <input type="hidden" name="_id" value="{{rec._id}}" />
{%if queryModelName%}
  <input type="hidden" name="modelName" value="{{queryModelName}}" />
{%endif%}
  <input type="hidden" name="_backUrl" value="{{redirectAfter}}" />

{%set unclosedRowDiv = false%}
{%for colName in filterCols%}

  {%set dbCol = modelAttr.schema[colName]%}
  {%set attrName = colMap[colName].inputName%}

  {%set colLabel = colMap[colName].label%}
  {%set inputType = colMap[colName].inputType%}
  {%set isColReadOnly = colMap[colName].readOnlyComputed %}
  {%set isColRequired = colMap[colName].required%}
  {%set isColVisible = colMap[colName].visibleComputed%}

  {%set copies = colMap[colName]._copies%}
  {%set isMultiple = colMap[colName].multiple%}

  {%set isSectionStart = colMap[colName].section == 'start'%}
  {%set isSectionEnd = colMap[colName].section == 'end'%}
  {%set isSectionVisible = colMap[colName].sectionVisible%}

  {%set header = colMap[colName].headerComputed%}
  {%set headerFor = colMap[colName].for%}

{%if isColVisible%}

{%if colMap[colName].section%}
  {%if unclosedRowDiv%}
    </div>
  {%endif%}
  
  {%if isSectionStart%}
    <div id="{{attrName}}" {%if not sectionVisible%}style="visibility: hidden; position: absolute"{%endif%}>
  {%elif isSectionEnd%}
    </div>
  {%endif%}

  {%set unclosedRowDiv = false%}
{%else%}

{%if colMap[colName].attachToPrevious%}
 
{%else%}
  {%if unclosedRowDiv%}
    </div>
  {%endif%}

  <div class="row">
    {%set unclosedRowDiv = true%}
{%endif%}

    
  <div class="col-sm{{colMap[colName].colSpanStr}}">


  <div class="form-group">
    {%if colLabel and not colMap[colName]._hideLabel%}
      <label>{{colLabel | safe}} {%if isColRequired and not isColReadOnly and colLabel != ' '%}<super class="text-danger">*</super>{%endif%}</label>
    {%endif%}

  {%set colVal = rec[colName]%}
  {%set htmlValue = colMap[colName].htmlValue%}
  {%set propsHtml = colMap[colName]._propsHtml%}
  {%set hasHiddenFile = false %}
  
    {%if inputType == 'file'%}

      {%set itemNo = 1%}

      {%set files = rec[colName]%}

      {%if files and not files.length and files.length != 0%} {%set files = [files]%} {%endif%}

      {%for file in files%}

        {%set displayName = file.name or 'Uploaded file ' + itemNo %}
        {%set hasHiddenFile = true %}

        <div class="mb-2">
          <a href="/shared/a/delete-file-buff?_id={{file._id}}&_backUrl={{fileBackUrl}}" class="text-danger" onclick="return confirm('Are you sure you want to delete {{displayName}}?')"><i class="fa fa-trash"></i></a>
          <input type="hidden" name="{{attrName}}" value="{{file._id}}">
          &nbsp;&nbsp;<a href="/serve-image-buff?_id={{file._id}}" target="_blank">{{displayName}}</a> 
        </div>

        {%set itemNo = itemNo + 1 %}

      {%endfor%}

    {%endif%}

  {% for i in range(0, copies) -%}
    <div class="mb-3">

    
    {%if isMultiple%}
      {%set colVal = rec[colName][i]%}
      {%if not colVal and loop.index == 1%}
        {%set colVal = colMap[colName].default%}
      {%endif%}
    {%endif%}

    {%if header%}
      <h3>{%if headerFor%}<button id="{{headerFor}}-btn" class="btn btn-link p-0 pb-2" type="button" style="text-decoration: none;"><i id="{{headerFor}}-caret" class="fa fa-caret-right" style="position: relative; width: 10px; text-align: left;"></i></button> {%endif%}{{header | safe}}</h3>
      <script>
        $("#{{headerFor}}-btn").on('click', function() {
          const isShown = $("#{{headerFor}}").css('visibility') === 'visible';

          // (display: none) will not send value
          // but (visibility: hidden + position: absolute) will
          $("#{{headerFor}}").css('visibility', isShown ? 'hidden' : 'visible');
          $("#{{headerFor}}").css('position', isShown ? 'absolute' : 'static');

          if (isShown) {
            $("#{{headerFor}}-caret").removeClass('fa-caret-down');
            $("#{{headerFor}}-caret").addClass('fa-caret-right');
          } else {
            $("#{{headerFor}}-caret").removeClass('fa-caret-right');
            $("#{{headerFor}}-caret").addClass('fa-caret-down');
          }
        })
      </script>
    {%elif htmlValue%}
      {{htmlValue | safe}}
    {%elif isColReadOnly %}

      {% marked %}{% if colMap[colName].lookup %}{{ colMap[colName].lookup[colVal] }}{% elif colMap[colName].inputValues %}{{ colMap[colName].inputValues.get(colVal) }}{% else %}{{ colVal }}{% endif %}{% endmarked %}

    {%elif inputType == 'textarea'%}
      <textarea name="{{attrName}}" class="form-control" id="{{attrName}}"{%if colMap[colName].required%} required{%endif%} {{propsHtml | safe}}>{{colVal}}</textarea>

    {%elif inputType == 'select'%}

      <select class="form-control" name="{{attrName}}" id={{attrName}} {%if colMap[colName].required%} required{%endif%} {{propsHtml | safe}}>
        {%for key, val in colMap[colName].inputValues%}

        <option value="{{key}}"{%if (colVal.equals and colVal.equals(key) or (colVal == key))%} selected{%endif%}>{{val}}</option>

        {%endfor%}
      </select>

    {%elif inputType == 'date'%}

      <input class="flatpickr-date form-control" name="{{attrName}}" id={{attrName}} value="{{colVal | date('MM/DD/YYYY')}}" placeholder="MM/DD/YYYY" autocomplete="off"{%if colMap[colName].required%} required{%endif%} {{propsHtml | safe}}>

    {%elif inputType == 'datetime'%}

      <input class="flatpickr-datetime form-control" name="{{attrName}}" id={{attrName}} value="{{colVal | date('MM/DD/YYYY hh:mm A', 'Asia/Manila')}}" placeholder="MM/DD/YYYY hh:mm A" autocomplete="off"{%if colMap[colName].required%} required{%endif%} {{propsHtml | safe}}>
    
    {%elif inputType == 'file'%}

      <input placeholder="{{colMap[colName].placeholder}}" class="form-control" id="{{attrName}}" name="{{attrName}}" type="file"{%if colMap[colName].required and not hasHiddenFile%} required{%endif%}{%if colMap[colName].multiple%} multiple{%endif%} {{propsHtml | safe}}>

    {%elif inputType == 'radio'%}

    {%for key, val in colMap[colName].inputValues%}
      <div class="form-check{{colMap[colName].inlineStr}}" id="{{attrName}}">
        <input value="{{key}}" name="{{attrName}}" id="{{attrName}}_{{key}}" type="radio" class="form-check-input"{%if colMap[colName].required%} required{%endif%}{%if (colVal.equals and colVal.equals(key) or (colVal == key))%} checked{%endif%}>
        <label class="form-check-label" for="{{attrName}}_{{key}}">
          {{val | safe}}
        </label>
      </div>
      {%endfor%}


    {%elif inputType == 'checkbox'%}

      {%if colMap[colName].inputValues%}

        {%if colMap[colName].showSelectAll%}
        <div class="form-check">
            <input class="c-selectall form-check-input" type="checkbox" value="" id="c_SELECTALL_{{attrName}}">
            <label class="form-check-label" for="c_SELECTALL_{{attrName}}" {{propsHtml | safe}}>
              Select All
            </label>
          </div>
        {%endif%}
          
        {# Need to do this because selecting none won't save it#}
        <input type="hidden" value="" name="{{attrName}}" {{propsHtml | safe}}>

        {%for key, val in colMap[colName].inputValues%}
          <div class="form-check" id="{{attrName}}">
            <input name="{{attrName}}" class="form-check-input" type="checkbox" value="{{key}}" id="c_{{attrName}}_{{key}}"{%if colMap[colName].required%} required{%endif%}{%if rec[colName] and rec[colName].indexOf(key) != -1%} checked{%endif%}>
            <label class="form-check-label" for="c_{{attrName}}_{{key}}">
              {{val | safe}}
            </label>
          </div>

        {%endfor%}

        {%if colMap[colName]._addOthers%}
          <div class="mt-1">
            <input type="text" name="{{colMap[colName]._addOthers.id}}" id="{{colMap[colName]._addOthers.id}}" value="{{colMap[colName]._addOthers.value}}" placeholder="{{colMap[colName]._addOthers.placeholder}}" class="form-control" >
          </div>
          <script>
            $(function() {
              clearFormFields.addOnChangeEvent('input[name="{{attrName}}"]', '#c_{{attrName}}_OTH', 
                ["#{{colMap[colName]._addOthers.id}}"]);
            })
          </script>
        {%endif%}

      {%else%}

          <div class="form-check{{colMap[colName].inlineStr}}">
            <input type="checkbox" class="form-check-input" id="{{attrName}}" name="{{attrName}}"{%if rec[colName]%} checked{%endif%}{%if colMap[colName].required%} required{%endif%} {{propsHtml | safe}}>
            <label style="margin-left: 20px" class="form-check-label" for="{{attrName}}">{{colMap[colName].label | safe}}</label>
          </div>

      {%endif%}

    {%else%}
      <input class="form-control" name="{{attrName}}" id="{{attrName}}" value="{{colVal}}"{%if colMap[colName].required%} required{%endif%}{%if colMap[colName].placeholder%} placeholder="{{colMap[colName].placeholder}}"{%endif%} {{propsHtml | safe}}>
    {%endif%}


     
    {%if colMap[colName].hint%}
    <small class="form-text text-muted">
        {{colMap[colName].hint}}
    </small>
    {%endif%}
     </div>
    {%endfor%}

  </div>

  {%if isMultiple and inputType != 'checkbox' %}
    <div class="form-row">
      <div class="col-md mt-0">
        <button type="button" class="btn btn-secondary pull-right" onclick="dbeditAddMore('{{attrName}}'); return false;">Add More</button>
      </div>
    </div>
  {%endif%}

  {# closing of col div#}
  </div>

{%endif%}
{%endif%}
{%endfor%}

{%if unclosedRowDiv%}
 {#for closing the row of unattached#}
 </div>
 {%set unclosedRowDiv = false%}
{%endif%}

  {%if shouldShowSaveButton%}
  <div class="row">
    <div class="col mb-3">
      <button type="submit" class="btn btn-primary" name="_ACTION_SAVE">Save</button>
    </div>
  </div>
  {%endif%}

   
   {%for submitBtnObj in additionalSubmitButtons%}
   {%if submitBtnObj.visibleComputed%}
   <div class="row">
     <div class="col mb-3">
       <button type="submit" class="{{submitBtnObj.class}}" name="{{submitBtnObj.actionName}}"{%if submitBtnObj.confirm%} onclick="return confirm('{{submitBtnObj.confirm}}')"{%endif%}>{{submitBtnObj.title}}</button>
      </div>
   </div>
   {%endif%}
   {%endfor%}
  

  

</form>

{%if isUpdateMode and shouldShowDeleteAction%}
  <form class="form-inline" method="POST" action="list" style="float: right; position: absolute; right: 15px; bottom: 0px;">
    <input type="hidden" name="_csrf" value="{{_csrf}}" />
    <input type="hidden" name="_id" value="{{rec._id}}" />
    <input type="hidden" name="_backUrl" value="{{redirectAfter}}" />
    {%if queryModelName%}
    <input type="hidden" name="model" value="{{queryModelName}}" />
    {%endif%}
    <button type="submit" name="ACTION_DELETE" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this record?')" >Delete</button>
  </form>
  
{%endif%}

</div>
</div>

{% endblock %}

{% block beforeEndBody %}


<script src="//cdn.jsdelivr.net/npm/flatpickr"></script>

<script src="/dbe/public/js/setup-datepicker.js"></script>

<script src="/dbe/public/js/unsaved-changes-prompt.js"></script>
<script src="/dbe/public/js/unsaved-changes-prompt-all.js"></script>

{% endblock %}