@extends('layouts.master', ['hide_sidebar' => 'ok'])
@section('title', 'title')
@section('titlePageHeading', '')
@section('content')
    <style>
        ._top-bar {
            display: none !important;
        }

        ._content {
            padding: 10px 10px 10px 10px;
        }

        #wrapper #content-wrapper {
            background-color: #ffffff;
        }
    </style>
    <link rel='stylesheet' href='/assets/hamza/styles.css?v=44'>
    <div class="partigau">
        <div class="part2">
            <div class="infocl" style="width: 10%;">
                <div class="codecl">Code client</div>
                <div class="codecl1">&nbsp;{{ $client->code??'----' }}</div>
            </div>

            <div class="infocl"  style="width: 40%;">
                <div class="codecl">Client</div>
                <div class="codecl1">{{ $client->denomination }}</div>
            </div>
            <div class="infocl" style="width: 10%;">
                <div class="codecl">Canal</div>
                <div class="codecl1"> {{ $canal->libelle }}</div>
            </div>
            <div class="infocl" style="width: 15%;">
                <div class="codecl">Ville</div>
                <div class="codecl1">{{ $client->livraisonZone ? $client->livraisonZone->libelle : '------' }}</div>
            </div>

            <div class="infocl" style="width: 13%;">
                <div class="codecl">Situation</div>
                <div class="codecl1" style="color: red;">{{ number_format($client->situation(), 2, ',', ' ') }} Dh</div>
            </div>

            <div class="infocl" style="width: 10%;">
                <div class="codecl">Statut</div>
                <div class="codecl1">{{ $client->statuts_id == 3 ? 'Bloqué' : 'Active' }}</div>
            </div>
            <div class="clr"></div>
        </div>

        <div class="clr"></div>

        <div class="parts2">

            <div class="menu1 filtre_categorie" data-filter="1">
                <div class="imagemenu">
                    <img src="/assets/hamza/r1.png" class="r1">
                </div>
                <div class="r1txt">Boulangerie</div>
            </div>

            <div class="menu2 filtre_categorie" data-filter="2">
                <div class="imagemenu">
                    <img src="/assets/hamza/r2.png" class="r1">
                </div>
                <div class="r2txt">Viennoiserie</div>
            </div>

            <div class="menu2 filtre_categorie" data-filter="3">
                <div class="imagemenu">
                    <img src="/assets/hamza/r3.png" class="r1">
                </div>
                <div class="r2txt">Pâtisserie</div>
            </div>

            <div class="menu2 filtre_categorie" data-filter="4">
                <div class="imagemenu">
                    <img src="/assets/hamza/r4.png" class="r1">
                </div>
                <div class="r2txt">Snaking</div>
            </div>

            <div class="xotak5">
                <input class="datelil2i" type="text" id="rech_name_product" name="rech_name_product"
                    placeholder="ex : Flûte semoule, Macron, ..." onchange="filtre_produits_liste()">
            </div>

            <div class="menu9 filtre_mode_liste" data-filter="2">
                <div class="imagexmenu">
                    <img src="/assets/hamza/liste-a-puces.png" class="r1">
                </div>
            </div>
            <div class="menu9 filtre_mode_liste" data-filter="3">
                <div class="imagexmenu">
                    <img src="/assets/hamza/menu.png" class="r1">
                </div>
            </div>
            <div class="menu9 filtre_mode_liste" data-filter="1">
                <div class="imagexmenu">
                    <img src="/assets/hamza/tile.png" class="r1">
                </div>
            </div>

            <div class="clr"></div>
            <div class="menay001 filtre_dn"  data-filter="3">
                <img src="/assets/hamza/c0heck_9778606.png" class="menayimg">
                <div class="menaytxt">Obligatoire</div>
            </div>
            
            <div class="menay002 filtre_dn"  data-filter="4">
            <img src="/assets/hamza/m0ission_1628441.png" class="menayimg">
                <div class="menayt2xt">Challenge</div>
            </div>
            
            
            <div class="menay002 filtre_dn"  data-filter="2">
            <img src="/assets/hamza/h0eart_1077035.png" class="menayimg">
                <div class="menayt2xt">Recommandée</div>
            </div>
            
            
            <div class="menay002 filtre_dn"  data-filter="1">
            <img src="/assets/hamza/c0hoice_5271350.png" class="menayimg">
                <div class="menayt2xt">Optionnelle</div>
            </div>
            
            
            <div class="menay002 filtre_dn"  data-filter="0">
            <img src="/assets/hamza/m0ozy_873236.png" class="menayimg">
                <div class="menayt2xt">Tout</div>
            </div>

            <div class="clr"></div>

            <div id="div_produits" style="min-height: 600px;"></div>
            <div class="clr"></div>
            <a style="margin-top: 30px;" href='{{ URL::previous() }}' class='btn btn-primary btn-icon-split btn-sm'><span
                    class='icon text-white-50'><i class='fas fa-arrow-left'></i></span><span
                    class='text'>Retour</span></a>
                    
        </div>
    </div>

    <div class="partidro">
        <div class="clr"></div>
        <div class="parts1">
            <div class="titpanie">Panier</div>
            <button class="men1"  id='button_import_dern_cmd'   title="Importer la dernière commande">
                <img src="/assets/hamza/v4.png" class="pics20"  style="margin-top: -7px;">
            </button>
            <button class="men1"  id='button_cmd_ideal'   title="Importer la commande idéale">
                <img src="/assets/hamza/v5.png" class="pics20"  style="margin-top: -7px;">
            </button>
            <button class="men1"  id='button_vider_panier'   title="Vider le panier">
                <img src="/assets/hamza/v6.png" class="pics20"  style="margin-top: -7px;">
            </button>
            <div class="men1day2"></div>
            <button class="men1day"     title="Plan promo">
                <img src="/assets/hamza/v1.png" class="pics20"  style="margin-top: -7px;">
            </button>
            <button class="men1day"     title="Note">
                <img src="/assets/hamza/v2.png" class="pics20"  style="margin-top: -7px;">
            </button>

            {{-- <button class="men1day" id='button_calculatrice'>
                <img src="/assets/hamza/v3.png" class="pics20" style="    margin-top: -7px;">
            </button> --}}

            <button class="men1day" id='button_objectif' title="Objectifs">
                <img src="/assets/hamza/v7.png" class="pics20" style="margin-top: -7px;">
            </button>

            <div class="clr"></div>
        </div>

        <div class="clr"></div>
        <div class="parts3 calculator-container" id="div_calculatrice">
            <div class="display" id="display">0</div>
            <div class="buttons">
                <button onclick="clearDisplay()">C</button>
                <button onclick="appendDigit(7)">7</button>
                <button onclick="appendDigit(8)">8</button>
                <button onclick="appendDigit(9)">9</button>
                <button onclick="appendOperator('+')">+</button>
                <button onclick="appendDigit(4)">4</button>
                <button onclick="appendDigit(5)">5</button>
                <button onclick="appendDigit(6)">6</button>
                <button onclick="appendOperator('-')">-</button>
                <button onclick="appendDigit(1)">1</button>
                <button onclick="appendDigit(2)">2</button>
                <button onclick="appendDigit(3)">3</button>
                <button onclick="appendOperator('*')">*</button>
                <button onclick="appendDigit(0)">0</button>
                <button onclick="appendOperator('/')">/</button>
                <button onclick="calculate()">=</button>
            </div>
        </div>
        {{-- <div class="parts3" id="cmd_interpretation">
        </div> --}}
        <div class="parts3" id="div_panier">
        </div>

        <div class="clr"></div>

        <div class="box">
            <dl class="dlist-align">
                <dt class="tax1">Total: </dt>
                <dd class="text-right">
                    <div id="panier_total">0 DH</div>
                </dd>
            </dl>
            <dl class="dlist-align">
                <dt class="tax1">Tva:</dt>
                <dd class="text-right">
                    <div id="panier_total_tva">0 %</div>
                </dd>
            </dl>
            <dl class="dlist-align">
                <dt class="tax1"><b>Total à payer (Obj :  {{ number_format($objectif_ca, 2, ',', ' ') }} DH ) :</b></dt>
                <dd class="text-right" style="font-size: 18px;"><b>
                        <div id="panier_total_ttc">0 DH</div>
                    </b></dd>
                <input type="hidden" id="cmd_is_valide" name="cmd_is_valide" value="0">
            </dl>
        </div>

        <form id="formConfirmCommande" action="{{ url('commandes/commandes_save/') }}" method="post">
            <div class="boxl1 row" style="padding: 10px 0 0px 0;margin: 7px 0 0 0;border-top: 1px dashed #fff;">
                <div class="totak5">
                    <div class="textlili">Infos livraison </div>                    
                    <input class="datelili" type="date" id="livraison_date_demande" name="livraison_date_demande"
                        required minlength="4" maxlength="8" size="10" value="{{ $prochaine_date_livraison }}" />

                    <input readonly type="hidden" id="livraison_heure_demande" name="livraison_heure_demande" required
                        value="00:00">
                    <input readonly type="hidden" id="clients_id" name="clients_id" required
                        value="{{ $clients_id }}">
                </div>
                @if (1 == 1 || session('action_editable'))
                    <input type="submit" class="Batati" id="validerButton" formaction="{{ url('commandes/commandes_save/2/' . $canals_id) }}" value="Valider">
                @endif
            </div>


            <div class="modal fade" id="basicModal"  >
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body" id="modalContent">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Retour</button>
                            
                            <input type="submit" class="valider btn btn-primary"  formaction="{{ url('commandes/commandes_save/2/' . $canals_id) }}" value="Valider">
                            
                          </div>
                    </div>
                </div>
            </div>
        </form>

    </div>

    
    
  
    
    <script>  

// Assuming you have jQuery included in your HTML
$(document).ready(function () {
    $('#validerButton').on('click', function (e) {        
        // Check if cmdIdValide is equal to 1
        if ($('#cmd_is_valide').val() === '0') {
            e.preventDefault(); // Prevent the form submission
            filtre_suivi_objectif(1);
            // Open the modal            
            $('#basicModal').modal('show');
            // $('#basicModal').modal({
            //             backdrop: 'true', // 'static' for a black backdrop, 'true' for a dimmed backdrop
            //             keyboard: false // Prevent closing the modal with the keyboard
            //         });
        }
    });
});


        // var button_calculatrice = document.getElementById('button_calculatrice');
        // button_calculatrice.onclick = function() {
        //     var div = document.getElementById('div_calculatrice');
        //     if (div.style.display !== 'none') {
        //         div.style.display = 'none';
        //         document.getElementById("div_suivi_objectif").style.display = 'block';
        //         document.getElementById("div_panier").style.display = 'block';
        //     } else {
        //         div.style.display = 'block';
        //         document.getElementById("div_suivi_objectif").style.display = 'none';
        //         document.getElementById("div_panier").style.display = 'none';
        //     }
        // };

        var button_objectif = document.getElementById('button_objectif');
        var nombreDeClics = 0;
        var couleurFond = "#ccedff";
        button_objectif.onclick = function() {            
            if (nombreDeClics == 0) {
                filtre_suivi_objectif();
                nombreDeClics++;
                couleurFond = "#ffe100";
            } else if (nombreDeClics == 1) {
                filtre_panier();
                nombreDeClics = 0; // Réinitialise le compteur après le deuxième clic
                couleurFond = "#ccedff";
            }     
            button_objectif.style.backgroundColor = couleurFond;       
        };
        //button_objectif.click();

        var button_vider_panier = document.getElementById('button_vider_panier');
        button_vider_panier.onclick = function() {
            reloadWithNewParameter('vider_panier');
        };

        var button_import_dern_cmd = document.getElementById('button_import_dern_cmd');
        button_import_dern_cmd.onclick = function() {
            reloadWithNewParameter('import_dern_cmd');
        };

        var button_cmd_ideal = document.getElementById('button_cmd_ideal');
        button_cmd_ideal.onclick = function() {
            reloadWithNewParameter('import_cmd_ideal');
        };

        // Fonction pour ajouter ou mettre à jour une variable dans l'URL
        function addOrUpdateURLParameter(url, param, value) {
            var re = new RegExp("([?&])" + param + "=.*?(&|$)", "i");
            var separator = url.indexOf('?') !== -1 ? "&" : "?";

            if (url.match(re)) {
                return url.replace(re, '$1' + param + "=" + value + '$2');
            } else {
                return url + separator + param + "=" + value;
            }
        }
        // Fonction pour recharger la page avec la nouvelle URL
        function reloadWithNewParameter(param_value,param_id=0) {
            /*var currentURL = window.location.href;
            var newURL = addOrUpdateURLParameter(currentURL, param_name, param_value);
            window.location.href = newURL;*/
            $.ajax({
                url: '/televente/reloadWithNewParameter', // Update the route based on your Laravel setup
                method: 'GET',
                data: {
                    clients_id: "{{ $clients_id }}"
                    ,canals_id: "{{ $canals_id }}"
                    ,action : param_value
                    ,param_id : param_id
                },
                success: function(data) {
                    refresh_all_panier();
                    filtre_produits_liste();
                    
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }
    </script>
    <script>
        // Event listener for filter buttons
        var $loadingSpinner = $('<div class="loading-spinner"></div>');

        $(document).ready(function() {
            
            $('.filtre_dn').on('click', function() {

                // Reset styles for all elements with class 'filtre_dn'
                $('.filtre_dn').removeClass('menay001').addClass('menay002');

                // Apply specific style to the clicked element
                $(this).removeClass('menay002').addClass('menay001');

                //var id_categorie = $(this).data('filter'); // Get the filter value from data-filter
                filtre_produits_liste();

            });
 

            $('.filtre_mode_liste').on('click', function() {
                // Reset styles for all elements with class 'filtre_mode_liste'
                $('.filtre_mode_liste').removeClass('activeb');

                // Apply specific style to the clicked element
                $(this).addClass('activeb');
                filtre_produits_liste();
            });

            $('.filtre_categorie').on('click', function() {

                // Reset styles for all elements with class 'filtre_categorie'
                $('.filtre_categorie').removeClass('menu1').addClass('menu2');

                // Apply specific style to the clicked element
                $(this).removeClass('menu2').addClass('menu1');

                //var id_categorie = $(this).data('filter'); // Get the filter value from data-filter
                filtre_produits_liste();

            });

            // Reference to the first menu item
            var $firstModeListe = $('.filtre_mode_liste:last');
            // Trigger a click on the first menu item
            $firstModeListe.click();

            // Reference to the first menu item
            var $firstMenuItem = $('.filtre_categorie:first');
            // Trigger a click on the first menu item
            $firstMenuItem.click();

            // Reference to the first menu item
            var $FisrtFiltreDn = $('.filtre_dn:first');
            // Trigger a click on the first menu item
            $FisrtFiltreDn.click();
            
        });
        function filtre_produits_liste(dn = 0) {
            var rech_name_product = $('#rech_name_product').val();
            var mode_liste = $('.filtre_mode_liste.activeb').data('filter');
            var id_categorie = $('.filtre_categorie.menu1').data('filter');
            var id_dn = $('.filtre_dn.menay001').data('filter');

            // Show loading spinner while waiting for the AJAX request to complete
            $('#div_produits').html($loadingSpinner);

            // AJAX request to fetch products based on the filter
            $.ajax({
                url: '/televente/filtre_produits_liste', // Update the route based on your Laravel setup
                method: 'GET',
                data: {
                    id_categorie: id_categorie,
                    mode_liste: mode_liste,
                    clients_id: "{{ $clients_id }}",
                    canals_id: "{{ $canals_id }}",
                    dn: dn,
                    rech_name_product: rech_name_product,
                    id_dn: id_dn
                },
                success: function(data) {
                    // Replace the content of div_produits with the fetched products
                    $('#div_produits').html(data);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        function filtre_suivi_objectif(type=0) {
            // Show loading spinner while waiting for the AJAX request to complete
            //$('#div_suivi_objectif').html($loadingSpinner);
            // AJAX request to fetch products based on the filter
            $.ajax({
                url: '/televente/filtre_suivi_objectif', // Update the route based on your Laravel setup
                method: 'GET',
                data: {
                    clients_id: "{{ $clients_id }}",
                    canals_id: "{{ $canals_id }}"
                },
                success: function(data) {
                    // Replace the content of div_suivi_objectif with the fetched products
                    if(type==1) $('#modalContent').html(data);
                    else $('#div_panier').html(data);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        function filtre_panier() {
            // Show loading spinner while waiting for the AJAX request to complete
            //$('#div_panier').html($loadingSpinner);
            // AJAX request to fetch products based on the filter
            $.ajax({
                url: '/televente/filtre_panier', // Update the route based on your Laravel setup
                method: 'GET',
                data: {
                    clients_id: "{{ $clients_id }}",
                    canals_id: "{{ $canals_id }}"
                },
                success: function(data) {
                    // Replace the content of div_panier with the fetched products
                    $('#div_panier').html(data);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }
        filtre_panier();

        function filtre_total_panier() {
            $.ajax({
                url: '/televente/filtre_total_panier', // Update the route based on your Laravel setup
                method: 'GET',
                data: {
                    clients_id: "{{ $clients_id }}",
                    canals_id: "{{ $canals_id }}"
                },
                success: function(data) {

                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        function refresh_all_panier() {
            //filtre_suivi_objectif();
            filtre_panier();
            //filtre_total_panier();
        }
        function do_onselect_produits(ids, qte_max, colisage) {
            var carton = 1; //$('#sel_cmd_carton').val();
            var qte = 1; //$('#sel_cmd_total').val();
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'POST',
                url: "/commandes/add_produits_details/" + ids + "?qte=" + qte,
                data: {
                    _token: CSRF_TOKEN,
                    qte: qte + "",
                    carton: carton + ""
                },
                dataType: 'JSON',
                success: function(results) {
                    var grid_produits = jQuery("#liste_produits");
                    grid_produits.trigger("reloadGrid", [{
                        jqgrid_page: 1,
                        current: true
                    }]);
                    refresh_all_panier();
                }
            });
        }

        function _do_onselect_produits_old(ids, qte_max, colisage) {
            Swal.fire({
                title: 'Quantité commandée',
                type: 'question',
                html: '<div class="form-group row">' +
                    '<label for="colFormLabelSm" class="col-sm-4 col-form-label col-form-label-sm font-weight-bold">Carton (' +
                    colisage + ' Unités )</label>' +
                    '<input min="0" onkeypress="change_qte()" onchange="change_qte()" type="number" placeholder="Carton" id="sel_cmd_carton" value="" class="col-sm-4 form-control" >' +
                    '<input type="hidden" placeholder="colisage" id="sel_cmd_colisage" value="' + colisage +
                    '" class="col-sm-4 form-control" >' +
                    '<div class="col-md-4"></div>' +
                    '</div>' +
                    '<div class="form-group row">' +
                    '<label for="colFormLabelSm" class="col-sm-4 col-form-label col-form-label-sm font-weight-bold">Unité</label>' +
                    '<input min="0" onkeypress="change_qte()" onchange="change_qte()" type="number" placeholder="Unité" id="sel_cmd_qte" value="0" class="col-sm-4 form-control" >' +
                    '<div class="col-md-4"></div>' +
                    '</div>' +
                    '<div class="form-group row">' +
                    '<label for="colFormLabelSm" class="col-sm-4 col-form-label col-form-label-sm font-weight-bold">Total unité</label>' +
                    '<input disabled type="number" placeholder="Total Unité" id="sel_cmd_total" value="0" class="col-sm-4 form-control" >' +
                    '<div class="col-md-4"></div>' +
                    '</div>',
                customClass: 'swal2-overflow',
                onOpen: function() {
                    $("#sel_cmd_carton").focus();
                },
                confirmButtonText: 'Valider',
                cancelButtonText: 'Cancel',
                showCancelButton: true,
                showCloseButton: true,
                focusConfirm: false,
                preConfirm: () => {
                    change_qte();
                    var carton = $('#sel_cmd_carton').val();
                    var qte = $('#sel_cmd_qte').val();
                    var total = $('#sel_cmd_total').val();
                    if (!(total > 0)) {
                        Swal.showValidationMessage('Quantité non valide');
                    }
                    if (!(carton >= 0)) {
                        Swal.showValidationMessage('Nombre carton non valide');
                    }
                    if (total > qte_max) {
                        Swal.showValidationMessage(
                            'vous avez dépassé la quantité maximum pour ce produit ! (Qte Max =' + qte_max +
                            ')');
                    }
                }
            }).then(function(result) {
                if (result.value) {
                    var carton = $('#sel_cmd_carton').val();
                    var qte = $('#sel_cmd_total').val();
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: "/commandes/add_produits_details/" + ids + "?qte=" + qte,
                        data: {
                            _token: CSRF_TOKEN,
                            qte: qte + "",
                            carton: carton + ""
                        },
                        dataType: 'JSON',
                        success: function(results) {
                            var grid_produits = jQuery("#liste_produits");
                            grid_produits.trigger("reloadGrid", [{
                                jqgrid_page: 1,
                                current: true
                            }]);
                            refresh_all_panier();
                        }
                    });
                }
            });

        }
    </script>
    

    <style>
        .filtre_mode_liste {
            cursor: pointer;
        }

        .filtre_dn {
            cursor: pointer;
        }

        .filtre_categorie {
            cursor: pointer;
        }

        #div_produits {
            position: relative;
        }

        .loading-spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            /* Half of the spinner height */
            margin-left: -10px;
            /* Half of the spinner width */
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <style>
        .calculator-container {
            text-align: center;
            /* Centre la calculatrice horizontalement */
            margin: 0 auto;
            /* Centre la calculatrice horizontalement */
            width: 30%;
            /* Largeur de la calculatrice */
            /* Ajoutez d'autres styles spécifiques à la calculatrice ici */
        }

        .calculator {
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            background-color: #f0f0f0;

        }

        .display {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 10px;
            padding: 5px;
            text-align: right;
            font-size: 24px;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
        }

        button {
            font-size: 20px;
            padding: 10px;
            border: none;
            cursor: pointer;
            background-color: #0083ca;
            color: white;
            border-radius: 5px;
            outline: none;
        }

        button:hover {
            background-color: #ffe100;
        }
    </style>

    <script>
        let currentInput = '';
        let operator = '';
        let result = 0;

        function updateDisplay() {
            document.getElementById('display').innerText = currentInput || '0';
        }

        function clearDisplay() {
            currentInput = '';
            operator = '';
            result = 0;
            updateDisplay();
        }

        function appendToDisplay(value) {
            currentInput += value;
            updateDisplay();
        }

        function appendOperator(op) {
            if (currentInput !== '') {
                operator = op;
                result = parseFloat(currentInput);
                currentInput = '';
                updateDisplay();
            }
        }

        function calculate() {
            if (currentInput !== '') {
                const operand = parseFloat(currentInput);

                switch (operator) {
                    case '+':
                        result += operand;
                        break;
                    case '-':
                        result -= operand;
                        break;
                    case '*':
                        result *= operand;
                        break;
                    case '/':
                        if (operand !== 0) {
                            result /= operand;
                        } else {
                            alert('Division by zero is not allowed');
                            clearDisplay();
                            return;
                        }
                        break;
                }

                currentInput = result.toString();
                updateDisplay();
                operator = '';
            }
        }

        // Gestionnaire d'événements pour les boutons numériques et d'opération
        document.querySelectorAll('.buttons button').forEach(button => {
            button.addEventListener('click', () => {
                const value = button.textContent;
                if (!isNaN(value) || value === '.') {
                    appendToDisplay(value);
                } else if (value === 'C') {
                    clearDisplay();
                } else if (value === '=') {
                    calculate();
                } else {
                    appendOperator(value);
                }
            });
        });

        // Gestionnaire d'événements pour la saisie au clavier
        document.addEventListener('keydown', (event) => {
            const key = event.key;
            if (!isNaN(key) || key === '.' || key === '+' || key === '-' || key === '*' || key === '/') {
                appendToDisplay(key);
            } else if (key === 'Enter') {
                calculate();
            } else if (key === 'Escape') {
                clearDisplay();
            }
        });

        updateDisplay();
    </script>

@endsection