{% extends "layouts/base.html" %}
{% load static %}

{% block title %} Facture d'avoir{% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
        .vertical {
            border-left: 6px solid orange;
            height: 140px;

            
        }
    </style>
    <style media="all" type="text/css">
    

  @font-face {
    font-family: 'WebFont-Open Sans';
    src: local(Open Sans), url(https://fonts.gstatic.com/s/opensans/v14/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2);
  }

  .pcs-template {
    font-family: Open Sans, 'WebFont-Open Sans';
    font-size: 9pt;
    color: #333333;
      background:  #ffffff ;
  }

  .pcs-header-content {
    font-size: 9pt;
    color: #333333;
    background-color: #ffffff;
  }
  .pcs-template-body {
    padding: 0 0.400000in 0 0.550000in;
  }
  .pcs-template-footer {
    height: 0.700000in;
    font-size: 6pt;
    color: #aaaaaa;
    padding: 0 0.400000in 0 0.550000in;
    background-color: #ffffff;
  }
  .pcs-footer-content {
  word-wrap: break-word;
  color: #aaaaaa;
      border-top: 1px solid #adadad;
  }

  .pcs-label {
    color: #333333;
  }
  .pcs-entity-title {
    font-size: 28pt;
    color: #000000;
  }
  .pcs-orgname {
    font-size: 10pt;
    color: #333333;
  }
  .pcs-customer-name {
    font-size: 9pt;
    color: #333333;
  }
  .pcs-eori-number {
    color: #333;
    margin: 0;
    padding-top: 10px;
  }
 .pcs-itemtable-header {
    font-size: 9pt;
    color: #ffffff;
    background-color: #3c3d3a;
  }
  .pcs-itemtable-breakword {
    word-wrap: break-word;
  }
  .pcs-taxtable-header {
    font-size: 9pt;
    color: #ffffff;
    background-color: #3c3d3a;
  }
  .breakrow-inside {
    page-break-inside: avoid;
  }
  .breakrow-after {
    page-break-after:auto;
  }
  .pcs-item-row {
    font-size: 9pt;
    border-bottom: 1px solid #adadad;
    background-color: #ffffff;
    color: #000000;
  }
  .pcs-item-sku {
    margin-top: 2px;
    font-size: 10px;
    color: #444444;
  }
  .pcs-item-desc {
      color: #727272;
      font-size: 9pt;
   }
  .pcs-balance {
    background-color: #f5f4f3;
    font-size: 9pt;
    color: #000000;
  }
  .pcs-savings {
  font-size: 0pt;
  color: ;
  background-color: ;
  }
  .pcs-totals {
    font-size: 9pt;
    color: #000000;
    background-color: #ffffff;
  }
  .pcs-notes {
    font-size: 8pt;
  }
  .pcs-terms {
    font-size: 8pt;
  }
  .pcs-header-first {
    background-color: #ffffff;
    font-size: 9pt;
    color: #333333;
      height: auto;
    }

 .pcs-status {
    color: ;
    font-size: 15pt;
    border: 3px solid ;
    padding: 3px 8px;
 }
 .billto-section {
     padding-top: 0mm;
     padding-left: 0mm;
   }
   .shipto-section {
     padding-top: 0mm;
     padding-left: 0mm;
   }

 @page :first {
    @top-center {
        content: element(header);
    }
    margin-top: 0.700000in;
  }

  .pcs-template-header {
    padding: 0 0.400000in 0 0.550000in;
    height: 0.700000in;
  }

  .pcs-template-fill-emptydiv {
    display: table-cell;
    content: " ";
    width: 100%;
  }


/* Additional styles for RTL compat */

/* Helper Classes */

.inline {
  display: inline-block;
}
.v-top {
  vertical-align: top;
}
.text-align-right {
  text-align: right;
}
.rtl .text-align-right {
  text-align: left;
}
.text-align-left {
  text-align: left;
}
.rtl .text-align-left {
  text-align: right;
}
.float-section-right {
  float: right;
}
.rtl .float-section-right{
  float: left;
}
.float-section-left {
  float: left;
}
.rtl .float-section-left{
  float: right;
}

/* Helper Classes End */

.item-details-inline {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
  max-width: 70%;
}

.total-in-words-container {
  width: 100%;
  margin-top: 10px;
}
.total-in-words-label {
  vertical-align: top;
  padding: 0 10px;
}
.total-in-words-value {
  width: 170px;
}
.total-section-label {
  padding: 5px 10px 5px 0;
  vertical-align: middle;
}
.total-section-value {
  width: 120px;
  vertical-align: middle;
  padding: 10px 10px 10px 5px;
}
.rtl .total-section-value {
  padding: 10px 5px 10px 10px;
}

.tax-summary-description {
  color: #727272;
  font-size: 8pt;
}

.bharatqr-bg {
  background-color: #f4f3f8;
}

/* Overrides/Patches for RTL compat */
  .rtl th {
    text-align: inherit; /* Specifically setting th as inherit for supporting RTL */
  }
/* Overrides/Patches End */


/* Subject field styles */
.subject-block {
    margin-top: 20px;
}
.subject-block-value {
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 14pt;
    margin-top:5px;
}
/* Subject field styles End*/



  .total-item-section {
    width: 45%;
    padding: 3px 10px 3px 3px;
    font-size: 9pt;
    float: left;
  }
  .rtl .total-item-section {
    float: right;
  }
  .total-section {
    width: 50%;
    float:right;
  }
  .rtl .total-section {
    float: left;
  }
  .lineitem-column {
    padding: 10px 10px 5px 10px;
    word-wrap: break-word;
  }
</style>


{% endblock stylesheets %}

{% block content %}

    <main class="content">

        {% include 'includes/navigation.html' %}

        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
            <div>
                <h1 class="h4">Facture d'Avoir-{{ facture.num_facture_avoir|default:facture.id }}</h1>
            
            </div>
            <div>

                 
              {% if retour.staut_reception == "Complettement reçu" %}
              <form action="{% url 'formulaire_ajouter_facture_avoir' %}" method="POST">
                        {% csrf_token %}
                         <input type="hidden" name="id_retour" value="{{retour.id}}">
                            <button  class="btn btn-info mr-2" type="submit">Créer une note de crédit</button>
              </form>
              {% else %}
              <form action="{% url 'formulaire_avis_reception' %}" method="POST">
                         {% csrf_token %}
                         <input type="hidden" name="id_retour" value="{{retour.id}}">
    <button  class="btn btn-info mr-2" type="submit" {% if retour.statut == "refuse" %} disabled {%endif%} >Avis de Réception</button>
              </form>

              {% endif %} 
               
            </div>
            <div>
                
                 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                  Action
                    <span class="icon icon-small ml-1"><span class="fas fa-chevron-down"></span></span>
                </button>
                <div class="dropdown-menu dashboard-dropdown dropdown-menu-left mt-2">
                    {% if retour.statut == "approuve"  %}
                 <form action="{% url 'refuser_retour' %}" method="POST">
                         {% csrf_token %}
                 <input type="hidden" name="id_retour" value="{{retour.id}}">
                    
            <button class="dropdown-item font-weight-bold" type="submit">Marquer comme Réfuser</button>
        </form>
        {% endif %}

        {% if retour.statut == "refuse"  %}
        <form action="{% url 'approuver_retour' %}" method="POST">
                {% csrf_token %}
            <input type="hidden" name="id_retour" value="{{retour.id}}">
            <button class="dropdown-item font-weight-bold" type="submit">Marquer comme Approuvé</button>
        </form>
         {% endif %}

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


        <div class="row">

    <div class="col-12 col-xl-8">
        <!-- Tab -->
        <nav>

             <ul class="nav nav-tabs flex-column flex-md-row" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Commentaires</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Historiques de remboursement</a>
  </li>
  
</ul>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            
               <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">

                   <div class="col-12 col-xl-12">
                    <div class="card card-body bg-white border-light shadow-sm mb-4">
                      <!--   <h2 class="h5 mb-4 text-info">Informations principales</h2> -->
                           <div class="list-group list-group-flush list-group-timeline">
                        <div class="list-group-item">
                            <div class="row">
                                <div class="col-auto">
                                    <div class="icon icon-shape icon-sm bg-tertiary text-white rounded-circle"><span class="fas fa-comment-dots"></span></div>
                                </div>
                                <div class="col ms-n2">
                                    <h3 class="h6 text-gray fw-normal mb-1">
                                        Par {{retour.user}}
                                    </h3>
                                    <p class="text-dark fw-bold mb-0">
     Création: Facture d'avoir {{ facture.num_facture_avoir|default:facture.id }}.
                                    </p>
                                    <!-- Time -->
                                    <small class="text-gray">
                                        <span class="fas fa-clock me-2"></span>{{facture.created_at}}
                                    </small>
                                </div>
                            </div>
                            <!-- / .row -->
                        </div>
                       <!--  <div class="list-group-item">
                            <div class="row">
                                <div class="col-auto">
                                    <div class="icon icon-shape icon-sm bg-danger text-white rounded-circle"><span class="fas fa-exclamation"></span></div>
                                </div>
                                <div class="col ms-n2">
                                    <h3 class="h6 text-gray fw-normal mb-1">
                                        Product issue
                                    </h3>
                                    <p class="text-dark fw-bold mb-0">
                                        A new issue has been reported for Pixel Pro.
                                    </p>
                                   
                                    <small class="text-gray">
                                        <span class="fas fa-clock me-2"></span>3 hrs ago
                                    </small>
                                </div>
                            </div>
                            
                        </div> -->
                        <!-- <div class="list-group-item">
                            <div class="row">
                                <div class="col-auto">
                                    <div class="icon icon-shape icon-sm bg-info text-white rounded-circle"><span class="fas fa-history"></span></div>
                                </div>
                                <div class="col ms-n2">
                                    <h3 class="h6 text-gray fw-normal mb-1">
                                        Product update
                                    </h3>
                                    <p class="text-dark fw-bold mb-0">
                                        Spaces - Listings Template has been updated
                                    </p>
                                    
                                    <small class="text-gray">
                                        <span class="fas fa-clock me-2"></span>3 hrs ago
                                    </small>
                                </div>
                            </div>
                            
                        </div> -->
                    </div>
                       
                       
                      
                         
                        
                           
                        
                          



                       
                        
                    </div>
                </div>
    
  </div>
 <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
     <div class="card border-light shadow-sm mb-4">
          <div class="card-body">
            {% if avis_receptions.all %}
              <div class="table-responsive">
                  <table class="table table-centered table-nowrap mb-0 rounded">
                      <thead class="thead-light">
                          <tr>
                              <th class="border-0">Numéro de Réception</th>
                              
                              <th class="border-0">Réçu le</th>
                             
                            
                          </tr>
                      </thead>
                      <tbody>
                          <!-- Item -->
                          {% for avis_reception in avis_receptions %}
                          <tr>
                              <td class="border-0"><a href="#" class="text-primary font-weight-bold">{{avis_reception.id}}</a> </td>
                              
                              <td class="border-0">
                                  {{avis_reception.date_reception}} 
                              </td>
                           <td  class="border-0"> 
                                        <form action="{% url 'detail_avis_reception' %}" method="POST">
                                    {% csrf_token %}

                                    <input type="hidden" name="id_avis_reception" value="{{avis_reception.id}}">
                                           <button class="btn btn-pill btn-outline-info" type="submit">Voir detail</button>
                                       </form>
                               
                                      
                                    </td> 
                           
                             
                          </tr>
                          {% endfor %}
                        
                          <!-- End of Item -->
                      </tbody>
                  </table>
              </div>
              {% else %}
              <p class="text-dark fw-bold mb-0">
                                    Aucun remboursement n'est effectué..
                                    </p>

              {% endif %}
          </div>
      </div>
      


  </div>
        
    
        </div>
        <!-- End of tab -->
      
        
        
    </div>

<div class="details-page"> <!----> <!----> <!---->  <!----><!----><!----> <!----> 



    <div class="details-container clearfix " style="max-width: 8.27in;margin-left:auto;margin-right:auto;"> 

         <div id="ember1868" class="ember-view"> 





<div class="pcs-template ">
      <div class="pcs-template-header pcs-header-content" id="header">
    

    
    <div class="pcs-template-fill-emptydiv"></div>

  </div>

    <div class="pcs-template-body">
    <table style="width:100%;table-layout: fixed;">
      <tbody>
        <tr>
          <td style="vertical-align: top; width:50%;">
              <div>
             </div>
             <span class="pcs-orgname"><b>{{facture.entrepot.agence.nom}}</b></span><br>
             <span class="pcs-label">
             <span style="white-space: pre-wrap;word-wrap: break-word;" id="tmp_org_address">{{facture.entrepot.agence.address}} {{facture.entrepot.agence.ville}} </span>
             </span>
          </td>
          <td style="vertical-align: top; width:50%;" class="text-align-right">
             <span class="pcs-entity-title">FACTURE D’AVOIR</span><br>
            <span id="tmp_entity_number" style="font-size: 10pt;" class="pcs-label"><b># {{ facture.num_facture_avoir|default:facture.id }}</b></span>
             <div style="clear:both;margin-top:20px;">
                 <span style="font-size:8pt;"><b>Restant des crédits</b></span><br>
                 <span style="font-size:12pt;"><b>{{facture.reste}} DA</b></span>
             </div>
    </td>
        </tr>
      </tbody>
     </table>

     <table style="width:100%;margin-top:30px;table-layout:fixed;">
        <tbody><tr>
        <td style="width:60%;vertical-align:bottom;word-wrap: break-word;">
<div><label style="font-size: 10pt;" id="tmp_billing_address_label" class="pcs-label">Facturer à</label>
            <br>
            <span style="white-space: pre-wrap;" id="tmp_billing_address"><strong><span class="pcs-customer-name" id="zb-pdf-customer-detail"><a href="#/contacts/2934800000000078001">{{facture.client.nom}} {{facture.client.prenom}}</a></span></strong></span>
            </div>
        </td>
        <td align="right" style="vertical-align:bottom;width: 40%;">
            <table style="float:right;width: 100%;table-layout: fixed;word-wrap: break-word;" border="0" cellspacing="0" cellpadding="0">
                 <tbody>
                     <tr>
                         <td style="padding:5px 10px 5px 0px;font-size:10pt;" class="text-align-right">
                            <span class="pcs-label">Date :</span>
                        </td>
                        <td class="text-align-right">
                            <span id="tmp_entity_date">{{facture.date_facture_avoir}}</span>
                        </td>
                    </tr>


                 </tbody>
              </table>
        </td>
        </tr>
     </tbody></table>
    

  <table style="width:100%;margin-top:20px;table-layout:fixed;" class="pcs-itemtable" border="0" cellspacing="0" cellpadding="0">
    <thead>
        <tr style="height:32px;">
              <td style="padding: 5px 0px 5px 5px;width: 5%;text-align: center;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      #
    </td>
    <td style="padding: 5px 10px 5px 20px;width: ;text-align: left;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      Article &amp; Description
    </td>
    <td style="padding: 5px 10px 5px 5px;width: 11%;text-align: right;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      Quantité
    </td>
    <td style="padding: 5px 10px 5px 5px;width: 11%;text-align: right;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      Taux
    </td>
     
    <td style="padding: 5px 10px 5px 5px;width: 11%;text-align: right;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      Remise
    </td>
    <td style="padding: 5px 10px 5px 5px;width: 11%;text-align: right;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      Taxe
    </td>
    <td style="padding: 5px 10px 5px 5px;width: 15%;text-align: right;" id="" class="pcs-itemtable-header pcs-itemtable-breakword">
      Montant
    </td>

        </tr>
     </thead>
     <tbody class="itemBody">
            <tr class="breakrow-inside breakrow-after">
            <td valign="top" style="padding: 10px 0 10px 5px;text-align: center;word-wrap: break-word;" class="pcs-item-row">
              {{   facture.num_facture_avoir|default:facture.id}}
            </td>
            <td valign="top" style="padding: 10px 0px 10px 20px;" class="pcs-item-row">
                            <div>
                            <div>
                <span style="word-wrap: break-word;" id="tmp_item_name">
                {{detail_retour_facture.detail_retour.article_commandee.article.medicament.nom_de_marque}}</span><br>
               
                <span style="white-space: pre-wrap;word-wrap: break-word;" class="pcs-item-desc" id="tmp_item_description"></span>
                 
                                </div>
                             </div>
            </td>









                <td valign="top" style="padding: 10px 10px 5px 10px;word-wrap: break-word;" class="pcs-item-row text-align-right">
                  <span id="tmp_item_qty">{{detail_retour_facture.detail_retour.quantitee_renvoyee}}</span>
                  <div class="pcs-item-desc">  {{detail_retour_facture.detail_retour.article_commandee.article.unitee}}</div>
                </td>

            <td valign="top" style="padding: 10px 10px 5px 10px;word-wrap: break-word;" class="pcs-item-row text-align-right">
                  <span id="tmp_item_rate">{{detail_retour_facture.taux}}</span>
            </td>
            <td valign="top" style="padding: 10px 10px 5px 10px;word-wrap: break-word;" class="pcs-item-row text-align-right" id="tmp_item_discount">
                  {{detail_retour_facture.remise}}%
            </td>
              <td valign="top" style="padding: 10px 10px 5px 10px;word-wrap: break-word;" class="pcs-item-row text-align-right" id="tmp_item_discount">
                  {{detail_retour_facture.taxe}}%
            </td>
            <td valign="top" style="padding: 10px 10px 10px 5px;word-wrap: break-word;" class="pcs-item-row text-align-right">
              <span id="tmp_item_amount">{{detail_retour_facture.montant}}</span>
            </td>
          </tr>
        
      
    </tbody>
    </table>
   <div style="width: 100%;margin-top: 1px;">
    <div class="total-item-section">
      <div style="white-space: pre-wrap;"></div>
    </div>
    <div class="total-section">
      <table class="pcs-totals" cellspacing="0" border="0" width="100%">
        <tbody>
          <tr>
                <td valign="middle" style="padding: 5px 10px 5px 0;" class="text-align-right">Sous-total</td>
                <td id="tmp_subtotal" valign="middle" style="width:120px;padding: 10px 10px 10px 5px;" class="text-align-right">{{facture.sous_total}}</td>
          </tr>
          <tr style="height:10px;">
            <td valign="middle" style="padding: 5px 10px 5px 0;" class="text-align-right">Frais d’expédition</td>
            <td valign="middle" style="width:120px;padding: 10px 10px 10px 5px;" class="text-align-right">{{facture.frai_expedition}}</td>
          </tr>
          <tr style="height:10px;">
            <td valign="middle" style="padding: 5px 10px 5px 0;" class="text-align-right">Ajustement</td>
            <td valign="middle" style="width:120px;padding: 10px 10px 10px 5px;" class="text-align-right">{{facture.ajustement}}</td>
          </tr>

          <tr>
            <td valign="middle" style="padding: 5px 10px 5px 0;" class="text-align-right"><b>Total</b></td>
            <td id="tmp_total" valign="middle" style="width:120px;;padding: 10px 10px 10px 5px;" class="text-align-right"><b>{{facture.total}}DA</b></td>
          </tr>


          <tr style="height:40px;" class="pcs-balance">
            <td valign="middle" style="padding:5px 10px 5px 0;" class="text-align-right"><b>Restant des crédits</b></td>
            <td id="tmp_balance_due" valign="middle" style="width:120px;padding: 10px 10px 10px 5px;" class="text-align-right"><b>{{facture.reste}}DA</b></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="clear: both;"></div>
  </div>


  

<div style="clear:both;margin-top:50px;width:100%;">
  <label style="font-size: 10pt;" id="tmp_notes_label" class="pcs-label">Remarques</label><br>
  <p style="margin-top:7px;white-space: pre-wrap;word-wrap: break-word;" class="pcs-notes">{{facture.information_client}}</p>
</div>
  <div style="clear:both;margin-top:30px;width:100%;">
  <label style="font-size: 10pt;" id="tmp_terms_label" class="pcs-label">Conditions d’utilisation</label><br>
  <p style="margin-top:7px;white-space: pre-wrap;word-wrap: break-word;" class="pcs-terms">{{facture.condition_general}}</p>
  </div>
    <div style="page-break-inside: avoid;">
</div>

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



</div>

 

        {% include 'includes/footer.html' %}

    </main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script type="text/javascript">
    

    const targetDiv = document.getElementById("facture");
const btn = document.getElementById("toggle");
btn.onclick = function () {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
     $('#toggle').find("span").toggleClass("fa-angle-down fa-angle-right");

  } else {
    targetDiv.style.display = "block";
    $('#toggle').find("span").toggleClass("fa-angle-down fa-angle-right");
  }
};



    const targetDiv2 = document.getElementById("commande");
const btn2 = document.getElementById("toggle2");
btn2.onclick = function () {
  if (targetDiv2.style.display !== "none") {
    targetDiv2.style.display = "none";
     $('#toggle2').find("span").toggleClass("fa-angle-down fa-angle-right");
  } else {
    targetDiv2.style.display = "block";
    $('#toggle2').find("span").toggleClass("fa-angle-down fa-angle-right");
  }
};


</script>



{% endblock javascripts %}