{% set totalpaye = 0 %}
{% if vente.ventePaiements|length > 0 %}
  <table id="mytable" class="table table-bordered table-striped table-hover sonata-ba-list">
    <thead>
      <tr>
        <th>Référence</th>
        <th>Utilisateur</th>
        <th>Mode paiement</th>
        <th>Date</th>
        <th>Montant payer</th>
        <th>N° Transaction</th>
        <th>Code Promo</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
        {% for item in vente.ventePaiements %}
          <tr>
              <td>{{item.reference}}</td>
              <td>{{item.utilisateur.username}}</td>
              <td>{{item.intitule ? item.intitule : item.modePaiement }}</td>
              <td>{{item.datePaiement|date('d-m-Y')}}</td>
              <td>{{item.montantPaye}}DHs</td>
              <td>{{item.numeroTransaction}}</td>
              <td>{{item.codepromo}}</td>
              <td class="btnlist"> 
                  <a class='btn btn-sm btn-default exportTicket' pdf='yes' data="{{item.id}}" title='PDF' href='javascript:void(0)'>
                    <i class='fas fa-file-pdf' aria-hidden='true'></i>
                  </a>
                  {% if is_granted('ROLE_ADMIN') %}
                    <a class='btn btn-sm btn-info editTicket' 
                      data="{{item.id}}" 
                      data-m="{{item.modePaiement}}"
                      data-t="{{item.numeroTransaction}}"
                      data-d="{{item.datePaiement|date('d-m-Y H:i') }}"
                      data-p="{{item.montantPaye}}" 
                      title='Modifier' href='javascript:void(0)'>
                      <i class='fas fa-pencil-alt' aria-hidden='true'></i>
                    </a>

                    <a class='btn btn-sm btn-danger deleteTicket' data="{{item.id}}" 
                      title='Supprimer' href='javascript:void(0)'>
                      <i class='fas fa-trash-alt' aria-hidden='true'></i>
                    </a>
                  {% endif %}
              </td>
              {% set totalpaye = totalpaye +  item.montantPaye %}
          </tr>
        {% endfor %}
    </tbody>
  </table>
{% endif %}

{% set restpaiment = vente.montantToal - totalpaye %}

<form id="paiementpage">
  <div id="msg_error"></div>
  <div class="form-group">
    <label for="totalapayer">Total à payer</label>
    <div class="input-group">
      <input type="number" min="0.00" step="1" readonly value="{{ vente.montantToal }}" class="form-control" placeholder="Montant total">
      <div class="input-group-addon">MAD</div>
    </div>
  </div>
  <div class="inline-form-group tohide">
    <div class="form-group">
      <label for="montantpaye">Montant payé</label>
      <div class="input-group">
        <input type="number" min="0.00" step="1" readonly value="{{ totalpaye }}" id="totalpaye" class="form-control" placeholder="Montant payé">
        <div class="input-group-addon">MAD</div>
      </div>
    </div>

    <div class="form-group tohide">
      <label for="resteapayer">Reste à payer</label>
      <div class="input-group">
        <input type="number" min="0.00" step="1" readonly value="{{ restpaiment }}" class="form-control resetapayer" placeholder="Montant restant">
        <div class="input-group-addon">MAD</div>
      </div>
    </div>
  </div>
  {% if restpaiment > 0 or is_granted('ROLE_ADMIN') %}
  <div class="form-group">
    <label for="modepaiement">Date paiement *</label>
    <input type="text" class="form-control datepaiement" readonly id="datepaiement" name="datepaiement">
  </div>
  <div class="form-group">
    <label for="modepaiement">Mode de paiement *</label>
    <select class="form-control" name="modepaiement" id="modepaiement" required>
      <option value="">Choisir</option>
      <option value="espece">Espèces</option>
      <option value="tpe">TPE</option>
      <option value="cheque">Chèque</option>
      <option value="chequecadeaux">Code promo (Chèque , Abonnement)</option>
      {% if vente.reservant and vente.reservant.fidelite >= minfidelite %}
        <option value="pointfidelite">Point Fidélité</option>
      {% endif %}
      <option value="differe">Paiement différé</option>
      <option value="payzone">PayZone</option>
    </select>
  </div>
  {% if vente.reservant and vente.reservant.fidelite >= minfidelite %}
    <div class="form-group mespointsfidelite" style="display:none">
      <label for="mespoints">Client points de fidélité</label>
      <div class="input-group">
        <input type="text" class="form-control" value="{{vente.reservant.fidelite}}" readonly name="mespoints">
        <div class="input-group-addon">MAD</div>
      </div>
    </div>
  {% endif %}
  <div class="form-group codepromo" style="display:none">
    <label for="codepromo">Code Promo </label>
    <input type="text" class="form-control" data="{{restpaiment}}" id="codepromo" name="codepromo" placeholder="Code chèque cadeaux">
    <input type="hidden" name="checkcadeaux" id="checkcadeaux" value="1"/>
    <small id="couponMessage"></small>
  </div>
  <div class="form-group codeprommonatnt" style="display:none">
    <label for="codepromomontant">Valeur de la Remise
    </label>
    <div class="input-group">
      <input type="text" class="form-control codepromomontant" readonly id="codepromomontant" name="codepromomontant">
      <div class="input-group-addon">MAD</div>
    </div>
  </div>
  <div class="form-group">
    <label for="montant">Montant *</label>
    <div class="input-group">
      <input type="number" 
       min="0.00" 
       step="1" 
       value="{{ restpaiment }}"
       max="{{ restpaiment }}" 
       name="montant" 
       required 
       class="form-control montanttopay" 
       placeholder="Montant">
      <div class="input-group-addon">MAD</div>
    </div>
  </div>
  <div class="form-group transaction" style="display:none">
    <label for="transaction">N° de transaction</label>
    <input type="text" class="form-control" name="numero_transaction" placeholder="Numéro de transaction">
    <input type="hidden" name="transaction_id" id="transaction_id"/>
  </div>
  <input type="hidden" name="vente_id" value="{{vente.id}}"/>
  <button type="submit" class="btn btn-success btn-block proceder">Procéder au paiement</button>
  {% endif %}
</form>
<script>
$(document).ready(function () {

    var isAdmin = {{ is_granted('ROLE_ADMIN') ? 'true' : 'false' }};

    // Initialize datetimepicker with common options
    $("#datepaiement").datetimepicker({
      language: "fr",
      useSeconds: false,
      sideBySide: true,
      defaultDate: new Date(),
      format: "DD-MM-YYYY HH:mm",
      pickTime: true,
      minDate: !isAdmin ? new Date() : false, // Apply minDate if not admin
      maxDate: !isAdmin ? new Date() : false, // Apply maxDate if not admin
    });

});
</script>