motorbike/app/Views/orders/index.php

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Gérer les
      <small>Commandes</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">Commandes</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-md-12 col-xs-12">

        <div id="messages"></div>

        <?php if (session()->getFlashdata('success')): ?>
          <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <?php echo session()->getFlashdata('success'); ?>
          </div>
        <?php elseif (session()->getFlashdata('error')): ?>
          <div class="alert alert-error alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <?php echo session()->getFlashdata('error'); ?>
          </div>
        <?php endif; ?>

        <?php if (in_array('createOrder', $user_permission)): ?>
          <a href="<?php echo base_url('orders/create') ?>" class="btn btn-primary">Ajouter un commande</a>
          <br /> <br />
        <?php endif; ?>

        <div class="box">
          <div class="box-header">
            <h3 class="box-title">Gérer les Commandes</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="manageTable" class="table table-bordered table-striped">
              <thead>
              <tr>
                
                  <?php 
                  $session = session();
                  $users = $session->get('user');
                  if ($users['group_name'] === 'Conseil' || $users['group_name'] === "Direction") {
                ?>
                    <th>Facture n°</th>
                    <th>Nom du client</th>
                    <th>Téléphone du client</th>
                    <th>Date et Heure</th>
                    <th>Produits totaux</th>
                    <th>Prix de vente</th>
                    <th>Statut payant</th>

                    <?php if (
                      in_array('updateOrder', $user_permission)
                      || in_array('viewOrder',   $user_permission)
                      || in_array('deleteOrder', $user_permission)
                    ) { ?>
                      <th>Action</th>
                    <?php } ?>
                <?php } ?>
                
                <?php 
                  $session = session();
                  $users = $session->get('user');
                  if ($users['group_name'] === 'COMMERCIALE' || $users['group_name'] === 'Caissière' || $users['group_name'] === "Cheffe d'Agence") {
                ?>
                    <th>Nom du produit</th>
                    <th>Commerciale</th>
                    <th>Date et Heure</th>
                    <th>Produits totaux</th>
                    <th>Prix de vente</th>
                    <th>Statut payant</th>
                    <?php if (
                      in_array('viewOrder', $user_permission)
                    ) { ?>
                      <th>Action</th>
                    <?php } ?>
                <?php } ?>
              </tr>


              </thead>

            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- col-md-12 -->
    </div>
    <!-- /.row -->


  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<?php if (in_array('deleteOrder', $user_permission)): ?>
  <!-- remove brand modal -->
  <div class="modal fade" tabindex="-1" role="dialog" id="removeModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Supprimer une commande</h4>
        </div>

        <form role="form" action="<?php echo base_url('orders/remove') ?>" method="post" id="removeForm">
          <div class="modal-body">
            <p>Voulez-vous vraiment supprimer ?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            <button type="submit" class="btn btn-primary">Oui</button>
          </div>
        </form>


      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
<?php endif; ?>


<!-- Modal -->
<div class="modal fade" id="viewOrderModal" tabindex="-1" role="dialog" aria-labelledby="viewOrderModalLabel">
  <div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title">Détails de la commande</h4>
      </div>
      <div class="modal-body">

        <!-- Ligne Date / Heure -->
        <div class="row">
          <div class="col-md-6 form-group">
            <label>Date :</label>
            <span class="form-control-static" id="order_date"></span>
          </div>
        </div>

        <!-- Infos client -->
        <div class="row">
          <div class="col-md-6 form-group">
            <label>Nom client :</label>
            <span class="form-control-static" id="customer_name"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 form-group">
            <label>Adresse :</label>
            <span class="form-control-static" id="customer_address"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 form-group">
            <label>Téléphone :</label> <span class="form-control-static" id="customer_phone"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 form-group">
            <label>CIN :</label>
            <span class="form-control-static" id="customer_cin"></span>
          </div>
        </div>

        <!-- Tableau produits -->
        <h4>Produits</h4>
        <table class="table table-bordered table-striped" id="view_products_table">
          <thead>
            <tr><th>Produit</th><th>Quantité</th><th>Prix unitaire</th><th>Montant</th></tr>
          </thead>
          <tbody></tbody>
        </table>

        <!-- Totaux -->
        
            <table class="table table-bordered table-striped" id="view_totals">
              <tr><th>Montant brut</th><th>Rabais</th><th>Montant net</th><th>Statut</th>
              <tr><td id="gross_amount"></td><td id="discount"></td><td id="net_amount"></td><td id="paid_status"></td><tr>
            </table>
       

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>



<script type="text/javascript">
  var manageTable;
  var base_url = "<?php echo base_url(); ?>";

  $(document).ready(function() {

    $("#mainOrdersNav").addClass('active');
    $("#manageOrdersNav").addClass('active');

    // initialize the datatable 

      // datatable-fr.js
      $.extend(true, $.fn.dataTable.defaults, {
          language: {
              sProcessing:   "Traitement en cours...",
              sSearch:       "Rechercher&nbsp;:",
              sLengthMenu:   "Afficher _MENU_ &eacute;l&eacute;ments",
              sInfo:         "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
              sInfoEmpty:    "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
              sInfoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
              sLoadingRecords: "Chargement en cours...",
              sZeroRecords:  "Aucun &eacute;l&eacute;ment &agrave; afficher",
              sEmptyTable:   "Aucune donn&eacute;e disponible dans le tableau",
              oPaginate: {
                  sFirst:    "Premier",
                  sPrevious: "Pr&eacute;c&eacute;dent",
                  sNext:     "Suivant",
                  sLast:     "Dernier"
              },
              oAria: {
                  sSortAscending:  ": activer pour trier la colonne par ordre croissant",
                  sSortDescending: ": activer pour trier la colonne par ordre d&eacute;croissant"
              }
          }
      });

    manageTable = $('#manageTable').DataTable({
      'ajax': base_url + 'orders/fetchOrdersData',
      'order': [],
      'columnDefs': [{
          targets: 6,
          className: 'text-right'
        } // Column index 3 corresponds to "Prix"
      ]
    });

  });

  // remove functions 
  function removeFunc(id) {
    if (id) {
      $("#removeForm").on('submit', function() {

        var form = $(this);

        // remove the text-danger
        $(".text-danger").remove();

        $.ajax({
          url: form.attr('action'),
          type: form.attr('method'),
          data: {
            order_id: id
          },
          dataType: 'json',
          success: function(response) {

            manageTable.ajax.reload(null, false);

            if (response.success === true) {
              $("#messages").html('<div class="alert alert-success alert-dismissible" role="alert">' +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>' + response.messages +
                '</div>');

              // hide the modal
              $("#removeModal").modal('hide');

            } else {

              $("#messages").html('<div class="alert alert-warning alert-dismissible" role="alert">' +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>' + response.messages +
                '</div>');
            }
          }
        });

        return false;
      });
    }
  }

  $(document).on('click', '.btn-view', function(e) {
  e.preventDefault();
  var orderId = $(this).data('order-id');
  var url = base_url + 'orders/lookOrder/' + orderId;

  // Requête AJAX pour récupérer les données JSON
  $.getJSON(url, function(response) {
    var d = response.order_data.order;
    var sum_order_data = response.order_data.sum_order_data;

    // Remplir les champs de la modal
    $('#order_date').text(d.date_time || '');
    $('#customer_name').text(d.customer_name);
    $('#customer_address').text(d.customer_address);
    $('#customer_phone').text(d.customer_phone);
    $('#customer_cin').text(d.customer_cin);

    // Produits
    var $tb = $('#view_products_table tbody');
    $tb.empty();
    $.each(response.order_data.order_item, function(_, item) {
      // Trouver le nom du produit
      var prodName = '';
      $.each(response.products, function(_, p) {
        if (p.id == item.product_id) { 
          prodName = p.name; 
          return false; 
        }
      });

      // Ajouter une ligne au tableau des produits
      $tb.append(
        '<tr><td>' + prodName + '</td>' +
        '<td>' + sum_order_data + '</td>' +
        '<td>' + parseInt(item.rate).toLocaleString('fr-MG', { minimumFractionDigits: 0, maximumFractionDigits:0 }) + ' Ar</td>' +
        '<td>' + parseInt(item.amount).toLocaleString('fr-MG', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' Ar</td></tr>'
      );
    });

    // Totaux
    $('#gross_amount').text(parseInt(d.gross_amount).toLocaleString('fr-MG', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' Ar');
    $('#discount').text(parseInt(d.discount).toLocaleString('fr-MG', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' Ar');
    $('#net_amount').text(parseInt(d.net_amount).toLocaleString('fr-MG', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' Ar');

    // Statut de paiement
    var statut = (d.paid_status == 2) ? "non payé" : "payé";
    $('#paid_status').text(statut);

    // Afficher la modal
    $('#viewOrderModal').modal('show');
  });
});
</script>