{% extends './stocks.html' %}
{% load static %}

{% block content %}
        {% if is_p == True %}
			  <h3 style="text-align:center;"><span class='btn btn-success'>Actuelement en Promo</span></h3>
              <div class="row">
                {% for pro in promo_products %}
                <div class="col-md-3">
                  <div class="card-body">
		              <div class="card card-stats" style="background-color:#fff;">
		                <div class="card-header card-header-success card-header-icon">
		                  <div class="card-icon">
		                    <i class="material-icons">star</i>
		                  </div>
		                  <p class="card-category" style="text-align:center;">{{pro.m_name}}</p>
		                  
		                </div>
		                <div class="card-footer">
		                  <div class="stats">
		                    <i class="material-icons">date_range</i> <small>Promu ce {{pro.promo_date}}</small>
		                  </div>
		                </div>
		              </div>

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

              {% if to_p == True %}
              <h3 style="text-align:center;"><span class='btn btn-warning'>Coneillés en Promotion</span></h3>
              <div class="row">
                {% for pro in promo_products %}
                <div class="col-md-3">
                  <div class="card-body">
                  <div class="card card-stats" style="background-color:#fff;">
                    <div class="card-header card-header-warning card-header-icon">
                      <div class="card-icon">
                        <i class="material-icons">store</i>
                      </div>
                      <p class="card-category" style="text-align:center;">{{pro.m_name}}</p>
                      <h4 class="card-title btn btn-warning"  style="text-align:center;"><small>Promouvoir</small></h4>
                    </div>
                    <div class="card-footer">
                      <div class="stats">
                        <i class="material-icons">date_range</i> Bénéfice de la Semaine : {{pro.mountant}} XAF
                      </div>
                    </div>
                  </div>

                  </div>
                </div>
                {% endfor %}
              </div>
              {% endif %}
         <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-primary">
                  <h4 class="card-title "> Choisissez le Produit à Promouvoir </h4>
                              <form class="navbar-form">
              <div class="input-group no-border">
                <input type="text" value="" class="form-control" style="color:#fff;" placeholder="Rechercher un Produit">
                <button type="submit" class="btn btn-white btn-round btn-just-icon">
                  <i class="material-icons">search</i>
                  <div class="ripple-container"></div>
                </button>
              </div>
            </form>

                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table">
                      <thead class=" text-primary">
                        <th>
                          Code
                        </th>
                        <th>
                          Nom
                        </th>
                        <th>
                          Prix
                        </th>
                        <th>
                          Bénéfice
                        </th>
                        <th>
                          Ventes
                        </th>
                        <th class="text-success">
                          Action
                        </th>
                      </thead>
                      <tbody>
                        {% for product in products %}
                        <tr>
                          <td>
                            {{product.m_code}}
                          </td>
                          <td>
                            {{product.m_name}}
                          </td>
                          <td>
                            {{product.m_price}} XAF
                          </td>
                          <td>
                            {{product.montant_products}} XAF
                          </td>
                          <td>
                            {{product.nb_ventes}}
                          </td>
                          <td>
                            <a data-toggle="modal" href="#giveLoveModal" data-promote="{{product.m_name}}" class="btn btn-success data-promote" data-id="{{product.id}}">Promouvoir</a>
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

            <!-- ========== Give a Like Modal ======= -->
            <div class="modal fade" id="giveLoveModal"  role="dialog" > 
                <div class="modal-dialog" role="document">
                     <div class="modal-content">
                      <div class="modal-header bg-white">
                        <center class='w-100'><h3 class="modal-title" style="font-family:Ubuntu;"></h3></center> 
                    <button type="button" class="text-danger close" data-dismiss="modal" aria-label="Close" id="giLoClose"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div id="connec-text" style="background:none;" class="modal-body">
                         <div style="text-align:center;">
                           <i style="font-size: 30px;" class="text-success material-icons">star</i>
                           <div><small>Promotion du Produit</small></div>
                         </div>
                         <div style="padding-top:20px;display:flex;justify-content:center;">
                        <div class="input-group mb-3">
                          <div style="display: flex;width: 100%; justify-content: center;">
                            <div style="text-align: center;">
                              <div>
                                <span style="font-size:40px;" class="text-warning material-icons">
                                  generating_tokens
                                </span>
                              </div>
                              <div>
                                 Nous allons lancer la Promotion du Produit <b id='modal_promote'> </b>
                                sut les plateformes en lignes.
                              </div>
                              <div>
                                <small class="text-success"> La Promotion se fera pendant une période particuliere </small>
                              </div>
                            </div>
                          </div>
                          </div>
             
                         </div>
                      </div>
                      <div class="log-description w-100 modal-footer d-block" style="text-align:center;">
                        <div style='text-align: center;'> <span id='enreg_trans' class="btn btn-success"> Promouvoir </span> </div>
                      </div>
                    </div>
                 </div>
              </div>
            </div>
            <!-- ========== Give a Like Modal ======= -->
{% endblock %}
{% block script %}
<script type="text/javascript">
  var id_promote = 1;
  $(".data-promote").click(function(){
    $("#modal_promote").html($(this).attr('data-promote'));
    $("#modal_promote").attr('data-id',$(this).attr('data-id'));
    id_promote = $(this).attr('data-id');
  });
  $("#enreg_trans").click(function(){
    $.ajax({
      url: '/ajax/to_promote/',
      data: {
          'id':id_promote, 
      },
      async:true,
      dataType: 'json',
      success: function (data) {
        window.location.href = '/stock/promo/';
      }
    });
  });
</script>
{% endblock %}