motorbike/app/Views/recouvrement/recouvrement.php

<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/js/all.min.js"></script>
    <style>
        .card { box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); }
        .table th { background-color: #343a40; color: white; }
        .action-icons i { cursor: pointer; padding: 5px; }
        .action-icons i:hover { opacity: 0.7; }
    </style>

<div class="container py-4">

    <!-- Barre d'actions -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <button class="btn btn-success"  data-toggle="modal" data-target="#createModal">
            <i class="fas fa-plus"></i> Ajouter un recouvrement
        </button>
        <div class="col-md-4">
            <input type="date" id="searchDate" class="form-control" placeholder="Rechercher par date">
        </div>
    </div>

    <!-- Tableau des recouvrements -->
    <div class="table-responsive">
        <table id="recouvrement_table" class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Montant</th>
                    <th>Actions</th>
                    <?php if (in_array('updateRecouvrement', $user_permission) || in_array('deleteRecouvrement', $user_permission)): ?>
                    <th>Action</th>
                  <?php endif; ?>
                </tr>
            </thead>
        </table>
    </div>

    <!-- Résumé des paiements -->
    <div class="row text-center mt-4">
        <div class="col-md-4">
            <div class="card border-success">
                <div class="card-body">
                    <h5 class="text-success">Total en caisse</h5>
                    <h3 id="totalCaisse">160 000 MGA</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-primary">
                <div class="card-body">
                    <h5 class="text-primary">Total MVola</h5>
                    <h3 id="totalMvola">80 000 MGA</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-warning">
                <div class="card-body">
                    <h5 class="text-warning">Total Espèce</h5>
                    <h3 id="totalEspece">80 000 MGA</h3>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal pour la Création -->
<?php if (in_array('createRecouvrement', $user_permission)): ?>
  <!-- remove brand modal -->
  <div class="modal fade" tabindex="-1" role="dialog" id="createModal">
    <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">Ajouter un recouvrement</h4>
        </div>

        <form role="form" action="<?php echo base_url('recouvrement/remove') ?>" method="post" id="create_form">
          <div class="modal-body"> <!-- Correction ici -->
            <div class="form-group">
              <label for="recouvrement_montant" class="col-sm-5 control-label">Montant du recouvrement</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" id="recouvrement_montant" name="recouvrement_montant" autocomplete="off">
              </div>
            </div>
            <div class="form-group">
              <label for="gross_amount" class="col-sm-12 control-label">Date : <?php echo date('Y-m-d'); ?> Date du recouvrement</label>
              <div class="col-sm-7">
                <input type="date" class="form-control" id="recouvrement_date" name="recouvrement_date" autocomplete="off">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
            <button type="submit" class="btn btn-primary">Enregistrer</button>
          </div>
        </form>

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

<!-- Modal for updatting a recouvrement -->
<?php if (in_array('updateRecouvrement', $user_permission)): ?>
  <!-- update brand modal -->
  <div class="modal fade" tabindex="-1" role="dialog" id="updateModal">
    <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">Modifier un recouvrement</h4>
        </div>

        <form role="form" action="<?php echo base_url('recouvrement/update') ?>" method="post" id="update_form">
          <div class="modal-body"> <!-- Correction ici -->
            <div class="form-group">
              <label for="recouvrement_montant" class="col-sm-5 control-label">Montant du recouvrement</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" id="recouvrement_montant" name="recouvrement_montant" autocomplete="off">
              </div>
            </div>
            <div class="form-group">
              <label for="gross_amount" class="col-sm-12 control-label">Date : <?php echo date('Y-m-d'); ?> Date du recouvrement</label>
              <div class="col-sm-7">
                <input type="date" class="form-control" id="recouvrement_date" name="recouvrement_date" autocomplete="off">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
            <button type="submit" class="btn btn-primary">Enregistrer</button>
          </div>
        </form>

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


<!-- Modal pour la suppression -->
<?php if (in_array('deleteRecouvrement', $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('recouvrement/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">Farmer</button>
            <button type="submit" class="btn btn-primary">Oui</button>
          </div>
        </form>


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



    <!-- Script pour filtrer par date -->
    <script>
        var manageTable;
        var base_url = "<?php echo base_url(); ?>";

        $(document).ready(function () {
            $("#searchDate").on("input", function () {
                var searchValue = $(this).val();
                $("#recouvrementTable tr").each(function () {
                    var date = $(this).find("td:first").text();
                    $(this).toggle(date.includes(searchValue) || searchValue === "");
                });
            
            // list of recouvrement
             // 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 = $('#recouvrement_table').DataTable({
                'ajax': base_url + 'recouvrement/loadData',
                'recouvrement': []
                });
            });

    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;
            });
            }
        }

        // function for update recouvrement
        
    function updateFunc(id) {
            if (id) {
            $("#update_form").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
                    $("#updateModal").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;
            });
            }
        }
        });
    </script>