{% extends 'backoffice/base.html' %}

{% block title %} Invoice - {{invoice.contract.customer.name}}  {% endblock  %}

{% block metaseo %} 

        <meta name="robots" content="index, follow, ">
        <meta name="title" content="">

        <meta name="description"
        content="">

        <meta property="og:title" content="" />

        <meta name="keywords" content=''>
        
{% endblock %}

{% block content %}

<script>

    document.getElementById('menu-invoices').classList.add('is-active');

    

    </script>
    <section class="section is-title-bar" >

        <div class="level">
          <div class="level-left">
            <div class="level-item">
              <ul >
                <li style="font-size: 15px !important; ">AZ</li>
                <li style="font-size: 15px !important; "><a href="{% url 'app:invoices' %}">Factures</a></li>
                <li style="font-size: 15px !important; "> {{invoice.contract.customer.name}} </li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              {% comment %} {% if invoice.state == "PENDING" or invoice.state == "ACCEPTED" and invoice.treatedBy != user.cuser %}

              <span> traitée par: {{invoice.treatedBy.user.first_name}} {{invoice.treatedBy.user.last_name}}</span> &nbsp;&nbsp;
              {% endif %} {% endcomment %}

              {% if invoice.state == "INITIAL"  %}
                {% if user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PROD"  %}
                  <button onclick="window.location.href=`{% url 'app:changeInvoiceStatus' %}?invoiceId={{invoice.id}}&status=PENDING&next=single`" class="button is-info is-dark is-small">Soumettre la facture</button>
                {% endif %}
              {% endif %}


              {% if invoice.state == "PENDING"   %}
                  {% if user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PROD"   %}
                    <button onclick="confirmLink(`{% url 'app:changeInvoiceStatus' %}?invoiceId={{invoice.id}}&status=PAID&next=single`)" class="button is-success is-dark is-small mr-3 ">Valider le paiement</button>
                  {% endif %}
                  
              {% endif %} 
              

              
{% comment %} 
              <button  type="button" class="button is-warning is-light is-small " onclick="printElement('invoice-print')">Imprimer</button>
                 {% endcomment %}
              
            </div>
          </div>
        </div>

    </section>

    <div class="container" style="min-height: 85vh;">

      <div id="invoice-print" class="card m-3 has-table">
        <header class="card-header">
          <p class="card-header-title">
            <span class="icon"><i class="mdi mdi-list-box-outline"></i></span>
             {{invoice.contract.customer.name}}
          </p>
          <a href="#" class="card-header-icon">
            
            {% comment %} States {% endcomment %}
            Etat de la facture: &nbsp;
            {% if invoice.state == "INITIAL" %}
              <span class="tag is-light is-small">Initial</span>
            {% endif %}
            {% if invoice.state == "PENDING" %}
              <span class="tag is-warning is-small">En attente de paiement</span>
            {% endif %}
            {% if invoice.state == "SUBMITTED" %}
              <span class="tag is-info is-small">Soumise</span>
            {% endif %}
            {% if invoice.state == "PAID" %}
              <span class="tag is-success is-small">Payée</span>
            {% endif %}

          </a>
        </header>
        <div class="card-content p-3 px-6" style="min-height: 80vh;">
            
            <form method="post" id="invoice-form" enctype="multipart/form-data">
              {% csrf_token %}
              <input type="hidden" name="action" value="update">
              <input type="hidden" name="invoiceId" value="{{ invoice.id }}">
              <input type="hidden" name="type" id="type" value="EMPLOYEE">
              
              

              {% for group in form  %}
                <div class="subtitle is-6 mb-2" style="font-size:10px">{{group.name}}</div>
                
                    {% for gf in group.fields  %}


                      <div class="field is-horizontal">
                        <div class="field-body">

                            
                        {% for field  in gf  %}
                        
                            {% if field.type == 'input' or field.type == 'text' or field.type == 'email' or field.type == "tel"  or field.type == "number" %}
                              <div class="field">
                                <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                                <p class="control is-expanded ">
                                  <input {% if field.disabled %} disabled {% endif %} class="input" type="{{field.type}}" name="{{field.name}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %} {% if field.type == 'number' %} value="{{field.value}}" min="{{field.min}}" max= "{{field.max}}" step="{{field.step}}" {% endif %}>
                                  {% comment %} <span class="icon is-small is-left"><i class="mdi mdi-account"></i></span> {% endcomment %}
                                </p>
                              </div>
                            {% endif %}
                            
                            {% if field.type == 'date' %}

                            <div class="field">
                              <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                              <p class="control is-expanded has-icons-left ">
                                <input {% if field.disabled %} disabled {% endif %} value="{{field.value}}" class="input" type="{{field.type}}" name="{{field.name}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %}  >
                                <span class="icon is-small is-left"><i class="mdi mdi-calendar-check"></i></span>
                              </p>
                            </div>
                            
                            {% endif %}


                            {% if field.type == 'select' %}
                              <div class="field">
                                <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                                <div class="control ">
                                  <div class="select is-fullwidth">
                                    <select name="{{field.name}}" {% if field.required %} required {% endif %} {% if field.disabled %} disabled {% endif %}>
                                      <option value="">Sélectionner {{field.label}}</option>
                                      {% for key, label in field.options %}
                                        <option {% if field.value == key %}selected{% endif %} value="{{ key }}">{{ label }}</option>
                                      {% endfor %}
                                    </select>
                                  </div>
                                  
                                </div>
                              </div>
                            {% endif %}

                            {% if field.type == "file" %}
                                <div class="field mb-2">
                                  <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}  {% if field.value %} &nbsp; <a target="_blank" href="{{field.value}}"><span class="mdi mdi-file"></span> voir document</a> {% endif %}</label>
                                  <p class="control is-expanded has-icons-left {% if field.disabled %} is-hidden {% endif %}">
                                    <input class="input" {% if field.disabled %} disabled {% endif %} accept="application/pdf" type="{{field.type}}" name="{{field.name}}" placeholder="{{field.placeholder}}" {% if field.required %} required {% endif %}  >
                                    <span class="icon is-small is-left"><i class="mdi mdi-file-account"></i></span>
                                  </p>
                                </div>
                            {% endif %}

                            {% if field.type == "textarea"  %}
                                  <div class="field mb-2">
                                  <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                                  <p class="control is-expanded has-icons-left">
                                    <textarea {% if field.disabled %} disabled {% endif %}  class="textarea" row="3" name="{{field.name}}" placeholder="{{field.placeholder}}" {% if field.required %} required {% endif %}>{{field.value}}</textarea>
                                     
                                  </p>
                                </div>
                            {% endif %}


                        {% endfor %}
                        </div>
                      </div>
                        
                    
                    {% endfor %}
                    
                <hr>
              
              {% endfor %}

              {% if  user.cuser.type == "CUSTOMER_DRH" or user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PROD"   %}
              
                {% if invoice.state != "PAID" %}
                
                  <div class="field is-grouped is-grouped-right noprint">
                    <p class="control">
                      <button type="submit" id="invoice-submit" class="button is-info is-small">
                        <span class="icon"><i class="mdi mdi-content-save"></i></span>
                        <span>Enregistrer</span>
                      </button>
                    </p>
                    <p class="control">
                      <button id="invoice-cancel" type="button" class="button is-light is-small " onclick="closePopup('invoice-modal')">
                        <span>Annuler</span>
                      </button>
                    </p>
                  </div>

              {% endif %}
            
              {% endif %}

              <input type="hidden" name="g-recaptcha-response" id='recaptcha'>
            <script src="https://www.google.com/recaptcha/api.js?render={{RECAPTCHA_PUBLIC_KEY}}"></script>
            
            </form>



          </div>
        </div>
      </div>
      



      
<script type="text/javascript">
  

  $(document).ready(function () {
    $("#invoice-form").submit(function (event) {
        event.preventDefault()
        var formData = new FormData(this);

        {% comment %} reCAPTCHA {% endcomment %}
       grecaptcha.execute('{{RECAPTCHA_PUBLIC_KEY}}').then(function (token) {
        
            
            formData.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value);
            formData.append('recap', token);

            $.ajax({
                type: "POST",
                url: "{% url 'app:createOrUpdateInvoice' %}",
                processData: false,
                contentType: false,
                complete: function () {
                },
                data: formData,

                error: function (data) {
                    $("#invoice-submit").removeClass("is-loading");
                    $("#invoice-submit").attr("disabled", false);
                    $("#invoice-cancel").attr("disabled", false);

                    Swal.fire({
                        title: "Erreur",
                        text: "Une erreur s'est produite lors de la soumission du formulaire.",
                        icon: "error",
                    });

                    console.log(data)

                },
                beforeSend: function () {

                    $("#invoice-submit").addClass("is-loading");
                    $("#invoice-submit").attr("disabled", true);
                    $("#invoice-cancel").attr("disabled", true);
                },
                success: function (data) {

                    $("#invoice-submit").removeClass("is-loading");
                    $("#invoice-submit").attr("disabled", false);
                    $("#invoice-cancel").attr("disabled", false);


                    if (data['status'] == "success") {
                        Swal.fire({
                            title: "Réussit",
                            text: data.message,
                            icon: "success",
                            timer: 1000,
                        });
                        document.getElementById("invoice-form").reset()
                        {% comment %} actualise {% endcomment %}
                        window.location.href = "{% url 'app:getInvoice' %}?invoiceId={{invoice.id}}";
                        {% comment %} actualise {% endcomment %}
                        
                    } else {
                        Swal.fire({
                            title: "Erreur",
                            text: data.message,
                            icon: "error",
                        });
                    }



                }
            });
        });
        return false;
   });
});





</script>
{% endblock content %}