@extends('model')
@section('commande', 'open')
@section('listing', 'active')
@section('content')
    <style>
        .monbg {
            background: rgb(98, 60, 43) !important;
        }
    </style>

    <!-- Start::page-header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">
                            Commandes
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Listing commandes</li>
                </ol>
            </nav>
        </div>
        <div class="btn-list">
            <button class="btn btn-info btn-wave me-0" id="btnLivreur">
                <i class="bx bx-plus-circle me-1"></i> Générer une livraison
            </button>
            <button class="btn btn-primary btn-wave me-0" id="btnModalAffecterCdeAUneLivraison">
                <i class="bx bx-plus-circle me-1"></i> Affecter Cde à une livraison
            </button>
            {{-- <button class="btn btn-primary btn-wave me-0" id="btnModalCommande">
                <i class="bx bx-plus-circle me-1"></i> Nouvelle commande
            </button> --}}
        </div>
    </div>
    <!-- End::page-header -->

    <!-- Start::row-2 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card overflow-hidden">
                <div class="card-header justify-content-center">
                    <div class="col-md-3 mb-2">
                        <p class="text-muted mb-0">Période</p>
                        <input type="text" class="form-control breadcrumb-input flatpickr-input text-center"
                            id="filtrePeriode" placeholder="Rechercher par plage de dates">

                    </div>
                    <div class="col-md-3 mb-2">
                        <p class="text-muted mb-0">Statut</p>
                        <select name="statut" id="statut" class="form-select">
                            <option value="0">TOUS</option>
                            @foreach ($statut_commandes as $item)
                                <option value="{{ $item->idstatut_commande }}">{{ $item->libelleStatutCommande }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 mb-2">
                        <p class="text-muted mb-0">Société</p>
                        <select name="societe" id="societe" class="form-select">
                            <option value="0">TOUTES</option>
                            @foreach ($societes as $item)
                                <option value="{{ $item->idsociete }}">{{ $item->raisonSocial }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-1 mb-2 mt-3">
                        <button class="btn btn-primary" id="btnSearch"><i class='bx bx-search-alt'></i></button>
                    </div>
                </div>
                <!-- Récap plats -->
                <div id="recapPlatsWrapper" class="px-3 pt-2 pb-1" style="display:none;">
                    <div class="d-flex align-items-center gap-2 flex-wrap border-top pt-2">
                        <span class="text-muted fw-semibold" style="font-size:12px; white-space:nowrap;">
                            <i class='bx bx-bowl-hot me-1'></i> Récap plats :
                        </span>
                        <div id="recapPlatsList" class="d-flex flex-wrap gap-2"></div>
                        <span id="recapTotalBadge" class="ms-auto badge bg-dark" style="font-size:12px; white-space:nowrap;"></span>
                    </div>
                </div>

                <div class="card-body p-2 px-3">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap w-100" id="tableListeCmde">
                            <thead>
                                <tr>
                                    <th data-class="text-center" data-column="action" class="text-center">
                                        <input class="form-check-input" type="checkbox" id="checkAll"> &nbsp;
                                        #
                                    </th>
                                    <th data-class="text-center" data-column="dateCommande" class="text-center">Date
                                        commande</th>
                                    <th data-class="text-center" data-column="numeroCommande" class="text-center">Numéro
                                        commande</th>
                                    <th data-class="text-center" data-column="statutCommande" class="text-center">
                                        Statut
                                    </th>
                                    <th data-class="text-center" data-column="totalTtc" class="text-center">
                                        Total TTC
                                    </th>
                                    <th data-class="text-start" data-column="nomPrenoms" class="text-center">
                                        Nom client
                                    </th>
                                    <th data-class="text-start" data-column="raisonSocial" class="text-center">
                                        Société
                                    </th>
                                    <th data-class="text-center" data-column="adresse" class="text-center">
                                        Adresse livraison
                                    </th>
                                    <th data-class="text-center" data-column="numeroLivraison" class="text-start">
                                        Numéro livraison
                                    </th>
                                    <th data-class="text-center" data-column="nomPrenomsLivreur" class="text-start">
                                        Nom du livreur
                                    </th>
                                    <th data-class="text-center" data-column="telephone" class="text-center">
                                        Numéro téléphone
                                    </th>

                                    <th data-class="text-center" data-column="totalHt" class="text-center">Total HT</th>
                                    <th data-class="text-center" data-column="totalTaxe" class="text-center">Total Taxe</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-2 -->

    {{-- - Section des modals - --}}
    <!-- Modal d'utilisateur-->
    <div id="modalCommande" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <svg xmlns="http://www.w3.org/2000/svg" style="height : 20px!important;"
                        class="iconeHeader w-6 h-6 me-2 side-menu__icon" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body iconFond">
                    <svg xmlns="http://www.w3.org/2000/svg" style="height : 70%!important;"
                        class="w-6 h-6 side-menu__icon iconFondBody" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                    <form id="formProduit" class="w-100">

                        <div class="row" id="row-0">

                            <div class="col-md-3 mb-2">
                                <p class="text-muted mb-0 d-flex justify-content-between">
                                    <span>Produit</span>
                                    <span id="showProduit-0"> <i class="ri-information-2-fill"></i></span>
                                </p>
                                <select name="id_produit[]" id="id_produit-0" class="form-select">

                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <p class="text-muted mb-0">client</p>
                                <select name="id_client[]" id="id_client-0" class="form-select">

                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <p class="text-muted mb-0">Adresse</p>
                                <select name="adresse[]" id="adresse-0" class="form-select">

                                </select>
                            </div>

                            <div class="col-md-2 mb-2 pt-xl-3 px-0">
                                <div class="d-flex align-items-center flex-wrap rounded py-1 border mt-1">
                                    <div class="toggle toggle-primary on mb-0" id="produitEnVeille">
                                        <span></span>
                                    </div>
                                    <div class="ms-2">
                                        <p class="text-muted m-0">Avec couvert</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1 mb-2 pt-xl-3">
                                <button class="btn btn-primary btn-add" id="btnAdd-0"><i
                                        class="ri-add-circle-fill"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer pt-4 pb-2 mb-0">
                    <button type="button" class="btn btn-warning" id="btnEditProduit">
                        <i class="bx bx-edit me-1"></i>
                        Modifier
                    </button>
                    <button type="button" class="btn btn-primary" id="btnNewProduit">
                        <i class="bx bx-plus-circle me-1"></i>
                        Ajouter
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <div id="modalLivreur" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog  modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <svg xmlns="http://www.w3.org/2000/svg" style="height : 20px!important;"
                        class="iconeHeader w-6 h-6 me-2 side-menu__icon" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body iconFond">
                    <svg xmlns="http://www.w3.org/2000/svg" style="height : 70%!important;"
                        class="w-6 h-6 side-menu__icon iconFondBody" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                    <form id="formProduit" class="w-100">

                        <div class="row" id="row-0">


                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Liste livreur</p>
                                <select name="livreur" id="livreur" class="form-select">
                                    @foreach ($livreur as $item)
                                        <option value="{{ $item->idusers }}">{{ $item->nom }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer pt-4 pb-2 mb-0">

                    <button type="button" class="btn btn-primary" id="btnAddLivreur">
                        <i class="bx bx-plus-circle me-1"></i>
                        Valider
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <!-- Modal attribution de commande à une livraison -->
    <div id="modalAffecterCdeAUneLivraison" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <i class='bx bx-transfer iconeHeader fs-22 me-2 '></i>
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body iconFond">
                    <i class='bx bx-transfer iconFondBody'></i>
                    <form id="formProduit" class="w-100">
                        <div class="row" id="row-0">
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Liste des livraisons</p>
                                <select name="idlivraison" id="selidlivraison" class="form-select">
                                    
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <button type="button" class="btn btn-primary w-100" id="btnAffecterCdeAUneLivraison">
                        <i class="bx bx-check-circle me-1"></i>
                        Valider
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection


@section('script')
    <script>
        function getRecapPlats(filtrePeriode, statut, societe) {
            $.ajax({
                type: 'GET',
                url: "{{ route('commande.recapPlats') }}",
                data: { filtrePeriode: filtrePeriode, statut: statut, societe: societe },
                dataType: 'json',
                success: function(response) {
                    if (response.success == 1 && response.data.length > 0) {

                        var colors = ['primary','success','warning','danger','info','secondary','dark']
                        var html = ''
                        $.each(response.data, function(i, item) {
                            var color = colors[i % colors.length]
                            html += '<span class="badge bg-' + color + '-transparent border border-' + color + ' text-' + color + '" style="font-size:12px; padding:5px 10px;">'
                                  + '<strong>' + item.totalQte + '</strong> × ' + item.libelleProduit
                                  + '</span>'
                        })

                        $('#recapPlatsList').html(html)
                        $('#recapTotalBadge').text('Total : ' + response.totalPlats + ' plat(s)')
                        $('#recapPlatsWrapper').show()
                    } else {
                        $('#recapPlatsWrapper').hide()
                    }
                }
            })
        }

        function getData(filtrePeriode, statut, societe) {
            $.ajax({
                type: "get",
                url: "{{ route('commande.afficheListeCommande') }}",
                data: {
                    filtrePeriode: filtrePeriode,
                    statut: statut,
                    societe: societe,
                },
                dataType: "json",
                success: function(response) {

                //console.log(response.data)
                    tableListeProduits = remplissageDataTable({
                        IdentifiantDuTableau: '#tableListeCmde',
                        obj: response.data,
                        lengthChange: true,
                        pageLength: 25
                    })
                }
            });
        }

        $(function() {

            getData($("#filtrePeriode").val(), $("#statut").val(), $("#societe").val())
            getRecapPlats($("#filtrePeriode").val(), $("#statut").val(), $("#societe").val())

            let nbreLigne = 0
            $("#btnModalCommande").click(function() {
                $("#modalCommande").modal("show");
            });

            document.getElementById('checkAll').addEventListener('click', function() {
                let value = this.checked
                let tableListeCmde = $("#tableListeCmde").DataTable()
                let lignes = tableListeCmde.rows().nodes()
                $(lignes).find('#checkLigne').prop('checked', value)
            })

        })

        $(function() {
            $("#btnLivreur").click(function() {
                let liste = listeLigneSelectionne("#tableListeCmde", "#checkLigne")
                if (liste.length <= 0) {
                    SwitAlert("Selectionner une/pluiseurs lignes svp !!", "warning")
                    return false
                }
                $("#modalLivreur").modal("show")
            })

            $("#btnAddLivreur").click(function() {

                if ($("#livreur").val() == "" || $("#livreur").val() == null) {
                    SwitAlert("Selectionner un livreur svp !!", "warning")
                    return false
                }
                let liste = listeLigneSelectionne("#tableListeCmde", "#checkLigne")
                if (liste.length <= 0) {
                    SwitAlert("Selectionner une/pluiseurs lignes svp !!", "warning")
                    return false
                }
                $.ajax({
                    type: "post",
                    url: "{{ route('commande.addLivreur') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        livreur: $("#livreur").val(),
                        listeIdCmde: liste
                    },
                    dataType: "json",
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {
                            getData($("#filtrePeriode").val(),
                                $("#statut").val(),
                                $("#societe").val())
                            $("#modalLivreur").modal("hide")
                            notifSuccess(response.messages)
                            return
                        }
                    },
                    error: function(response) {
                        notifDanger(response.responseJson.messages)
                        console.log(response)
                    }
                });
            })

            $("#btnSearch").click(function(e) {
                e.preventDefault();
                var p = $("#filtrePeriode").val(), s = $("#statut").val(), soc = $("#societe").val()
                getData(p, s, soc)
                getRecapPlats(p, s, soc)
            });
        })

        // $(function() {

        //     $(document).on("click", ".btn-add", function(evt) {
        //         evt.preventDefault();

        //         let id = parseInt(evt.target.id.split("-")[1])

        //         var clone = $('#row-' + id).clone();

        //         // Modifier les ID dans le clone
        //         clone.attr('id', 'row-' + id + 1); // Changer l'ID du conteneur principal

        //         clone.find('#showProduit-' + id).attr("id", "showProduit-" + id + 1)
        //         clone.find('#id_produit-' + id).attr("id", "id_produit-" + id + 1)
        //         clone.find('#id_client-' + id).attr("id", "id_client-" + id + 1)
        //         clone.find('#adresse-' + id).attr("id", "adresse-" + id + 1)
        //         clone.find('#btnAdd-' + id).attr("id", "btnAdd-" + id + 1)

        //         // Ajouter le clone avec les nouveaux IDs dans #destination
        //         $('#formProduit').append(clone);

        //         $(this).removeClass("btnAdd")
        //         $(this).addClass("btnClear")
        //         $(this).html('<i class="ri-delete-bin-fill"></i>')
        //     });

        //     $(document).click("click", ".btnClear", function(evt) {
        //         e.preventDefault();
        //         let id = evt.target.id.split("-")[1]
        //         $("#row-" + id).remove()
        //     });

        // })
    </script>

    <!-- Script affecter une commande à une livraison -->
    <script>

        function listeLivraisonSimple(){

            return new Promise((resolve, reject) => {

                $.ajax({

                    url : "{{ route('listeLivraisonSimple') }}",
                    type : 'GET',
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 1) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error : function(error){

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        function affecterCdeAUneLivraison(){

            let listeLigne = listeLigneSelectionne("#tableListeCmde", "#checkLigne")

            if (listeLigne.length <= 0) {
                
                notifDanger('Aucune ligne de commande sélectionnée.')
                return 0
            }

            return new Promise((resolve, reject) => {

                $.ajax({

                    url : "{{ route('affecterCdeAUneLivraison') }}",
                    type : 'POST',
                    data : {

                        data : listeLigne,
                        idlivraison : _('#selidlivraison').value,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 1) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error : function(error){

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        _('#btnModalAffecterCdeAUneLivraison').addEventListener('click', function(){

            let lignesSelectionnee = listeLigneSelectionne("#tableListeCmde", "#checkLigne")

            if (lignesSelectionnee.length <= 0) {
                
                notifDanger('Veuillez sélectionner les commandes à affecter')
                return 0
            }

            listeLivraisonSimple()
                .then((response) => {

                    if (response.success == 1) {

                        let data = response.data

                        data.unshift({
                            idlivraison : 0,
                            numeroLivraison : ' '
                        })
                        
                        populateSelect('#selidlivraison', {

                            data : data,
                            valueKey : 'idlivraison',
                            textKey : 'numeroLivraison'
                        })

                        $('#selidlivraison').select2({
                            dropdownParent : $('#modalAffecterCdeAUneLivraison')
                        })

                        typerModal("#modalAffecterCdeAUneLivraison", 'Affecter à la livraison', 'primary', true);
                        $('#modalAffecterCdeAUneLivraison').modal('show')
                    }
                })
            
        })

        _('#btnAffecterCdeAUneLivraison').addEventListener('click', function(){

            if (_('#selidlivraison').value == 0) {
                
                notifDanger('Veuillez sélectionner la livraison.')
                return 0
            }

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-warning ms-2',
                    cancelButton: 'btn btn-dark'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Confirmez-vous ?',
                text: "Seules les commande sans numero de livraison seront affectées",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Je confirme !',
                cancelButtonText: 'Non !',
                reverseButtons: true
            }).then((result) => {

                if (result.isConfirmed) {

                    affecterCdeAUneLivraison()
                        .then((response) => {

                            if (response.success == 2) {

                                notifSuccess('Opération éffectuée avec succès.')
                                getData( $("#filtrePeriode").val(), $("#statut").val(), $("#societe").val() )
                                $('#modalAffecterCdeAUneLivraison').modal('hide')
                            }else{

                                SwitAlert( response.msg, 'error', 'center')
                            }
                        })
                }
            })
        })
    </script>
@endsection