@extends('model')

@section('content')
    <!-- 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);">
                            Accueil
                        </a>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-text bg-white border"> <i class="ri-calendar-line"></i> </div>
                    <input type="text" class="form-control breadcrumb-input flatpickr-input" name="filtrePeriode"
                        id="filtrePeriode" placeholder="Rechercher par plage de dates">
                </div>
                <!-- filtrePeriode -->
            </div>
            <div class="btn-list">
                <button class="btn btn-white btn-wave text-primary" id="btnFiltreAccueil">
                    <i class="ri-filter-3-line align-middle me-1 lh-1"></i> Filter
                </button>
            </div>
        </div>
    </div>
    <!-- End::page-header -->

    <!-- Start: row-1 -->
    <div class="row">
        <div class="col-xxl-9">
            <div class="row">
                <div class="col-xl-3">
                    <div class="card custom-card overflow-hidden main-content-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <div class="flex-fill fs-13 text-muted">Cdes totales</div>
                                    <div class="fs-23 fw-medium mb-0" id="libNbreCdeTotale">0</div>
                                    <div class="text-muted w-100 fs-13"><span class="text-success"
                                            id="libTotalCdeTotale">0</span></div>
                                </div>
                                <div class="avatar avatar-md bg-primary svg-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000"
                                        viewBox="0 0 256 256">
                                        <path
                                            d="M136,120v56a8,8,0,0,1-16,0V120a8,8,0,0,1,16,0ZM239.86,98.11,226,202.12A16,16,0,0,1,210.13,216H45.87A16,16,0,0,1,30,202.12l-13.87-104A16,16,0,0,1,32,80H68.37L122,18.73a8,8,0,0,1,12,0L187.63,80H224a16,16,0,0,1,15.85,18.11ZM89.63,80h76.74L128,36.15ZM224,96H32L45.87,200H210.13Zm-51.16,23.2-5.6,56A8,8,0,0,0,174.4,184a7.44,7.44,0,0,0,.81,0,8,8,0,0,0,7.95-7.2l5.6-56a8,8,0,0,0-15.92-1.6Zm-89.68,0a8,8,0,0,0-15.92,1.6l5.6,56a8,8,0,0,0,8,7.2,7.44,7.44,0,0,0,.81,0,8,8,0,0,0,7.16-8.76Z">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <div class="flex-fill fs-13 text-muted">Cdes en préparation</div>
                                    <div class="fs-23 fw-medium mb-0" id="libNbreCdeEnPrepa">0</div>
                                    <div class="text-muted fs-13"><span class="text-success"
                                            id="libTotalCdeEnPrepa">0</span></div>
                                </div>
                                <div class="avatar avatar-md bg-primary1 svg-white">
                                    <i class="bx bx-package fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <div class="flex-fill fs-13 text-muted">Cdes en livraison</div>
                                    <div class="fs-23 fw-medium mb-0" id="libNbreCdeEnLivrai">0</div>
                                    <div class="text-muted fs-13"><span class="text-danger"
                                            id="libTotalCdeEnLivrai">0</span></div>
                                </div>
                                <div class="avatar avatar-md bg-primary2 svg-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000"
                                        viewBox="0 0 256 256">
                                        <path
                                            d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <div class="flex-fill fs-13 text-muted">Cdes livrées</div>
                                    <div class="fs-23 fw-medium mb-0" id="libNbreCdeLivre">0</div>
                                    <div class="text-muted fs-13"><span class="text-success" id="libTotalCdeLivre">0</span>
                                    </div>
                                </div>
                                <div class="avatar avatar-md bg-success svg-white">
                                    <i class="bx bx-check-circle fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Commandes par mois</div>
                            {{-- <div class="d-flex gap-2">
                                <div class="btn btn-sm btn-outline-light">Today</div>
                                <div class="btn btn-sm btn-outline-light">Weakly</div>
                                <div class="btn btn-sm btn-light">Yearly</div>
                            </div> --}}
                        </div>
                        <div class="card-body pb-2" style="padding-top:50px;padding-bottom:50px">

                            <div id="chart"></div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="col-xxl-3">
            <div class="card custom-card border border-primary">
                <div class="card-body ">
                    <ul class="list-unstyled mb-0" id="product-list">
                        <li class="mt-1">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="me-1 lh-1">
                                    <div class="avatar avatar-md bg-primary1 svg-white">
                                        <i class="bx bx-package fs-18"></i>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <span class="fs-14 d-block mb-0 fw-medium flex-wrap">Cdes en attente</span>
                                </div>
                                <div class="text-end">
                                    <p class="mb-0 fs-14 fw-medium" id="libNbreCdeEnAtt"></p>
                                    <p class="mb-0 text-muted fs-14" id="libTotalCdeEnAtt"></p>
                                </div>
                            </div>
                        </li>
                        <li class="mt-4">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="me-1 lh-1">
                                    <div class="avatar avatar-md bg-primary1 svg-white">
                                        <i class="bx bx-package fs-18"></i>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <span class="fs-14 d-block mb-0 fw-medium flex-wrap">Cdes confirmées</span>
                                </div>
                                <div class="text-end">
                                    <p class="mb-0 fs-14 fw-medium" id="libNbreCdeConfirme"></p>
                                    <p class="mb-0 text-muted fs-14" id="libTotalCdeConfirme"></p>
                                </div>
                            </div>
                        </li>
                        <li class="mt-4">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="me-1 lh-1">
                                    <div class="avatar avatar-md bg-primary1 svg-white">
                                        <i class="bx bx-package fs-18"></i>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <span class="fs-14 d-block mb-0 fw-medium">Cdes prêtes</span>
                                </div>
                                <div class="text-end">
                                    <p class="mb-0 fs-14 fw-medium" id="libNbreCdePret"></p>
                                    <p class="mb-0 text-muted fs-14" id="libTotalCdePret"></p>
                                </div>
                            </div>
                        </li>
                        <li class="mt-4">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="me-1 lh-1">
                                    <div class="avatar avatar-md bg-primary1 svg-white">
                                        <i class="bx bx-package fs-18"></i>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <span class="fs-14 d-block mb-0 fw-medium">Cdes annulées</span>
                                </div>
                                <div class="text-end">
                                    <p class="mb-0 fs-14 fw-medium" id="libNbreCdeAnnule"></p>
                                    <p class="mb-0 text-muted fs-14" id="libTotalCdeAnnule"></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">Stats livraison</div>
                </div>
                <div class="card-body">
                    <ul class="d-flex flex-wrap mb-0 list-unstyled justify-content-around text-center gap-2">
                        <li>
                            <div>
                                <div class="lh-1 me-1 mb-2">
                                    <span
                                        class="avatar avatar-md bg-purple-transparent border border-info border-3 border-opacity-25 avatar-rounded">
                                        <i class="ri-time-line fs-17 lh-1"></i>
                                    </span>
                                </div>
                                <div>
                                    <span class="d-block mb-0 text-muted fs-12">En attente</span>
                                    <h5 class="fw-medium mb-0" id="libNbreLivraisonEnAttente">0</h5>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="lh-1 me-1 mb-2">
                                    <span
                                        class="avatar avatar-md bg-orange-transparent border border-orange border-3 border-opacity-25 avatar-rounded">
                                        <i class="ri-send-plane-fill fs-20 lh-1"></i>
                                    </span>
                                </div>
                                <div>
                                    <span class="d-block mb-0 text-muted fs-12">En cours</span>
                                    <h5 class="fw-medium mb-0" id="libNbreLivraisonEnCours">0</h5>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="lh-1 me-1 mb-2">
                                    <span
                                        class="avatar avatar-md bg-success-transparent border border-success border-3 border-opacity-25 avatar-rounded">
                                        <i class="bx bx-check-circle fs-17 lh-1"></i>
                                    </span>
                                </div>
                                <div>
                                    <span class="d-block mb-0 text-muted fs-12">Livré</span>
                                    <h5 class="fw-medium mb-0" id="libNbreLivraisonLivre">0</h5>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
    </div>

    <div class="row">

        <div class="col-xxl-7 col-xl-7 d-flex">
            <div class="card flex-fill custom-card overflow-hidden">
                <div class="card-header justify-content-between">
                    <div class="card-title">10 Dernières commandes</div>
                    <a href="javascript:void(0);"
                        class="btn btn-outline-light border d-flex align-items-center text-muted btn-sm">
                        Voir tous
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table text-nowrap table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Numéro Cde</th>
                                    <th scope="col">Client</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Montant</th>
                                    <th scope="col">Statut</th>
                                </tr>
                            </thead>
                            <tbody id="tableCommande">


                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-2 col-xl-2 d-flex">
            <div class="card flex-fill custom-card border-primary">
                <div class="card-header justify-content-between">
                    <div class="card-title">Meilleurs société
                    </div>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0" id="listeMeilleurSociete">
                        <!-- <li class="mt-4">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <div class="me-3 lh-1">
                                                    <span class="avatar avatar-lg bg-gray-200">
                                                        <img src="../assets/images/ecommerce/png/7.png" alt="">
                                                    </span>
                                                </div>
                                                <div class="flex-fill">
                                                    <span class="fs-14 d-block mb-0 fw-medium">Hand Bag</span>
                                                    <span class="text-muted fs-12">Accessories</span>
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-0 fs-14 fw-medium">$564</p>
                                                    <p class="mb-0 text-muted fs-14">181 Sales</p>
                                                </div>
                                            </div>
                                        </li> -->
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-xxl-3 col-xl-3 d-flex">

            <div class="card custom-card flex-fill">
                <div class="card-header justify-content-between">
                    <div class="card-title">Meilleurs produit</div>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0" id="listeMeilleurProduit">
      
                    </ul>
                </div>
            </div>

        </div>

    </div>
    <!-- End:: row-1 -->

    <!-- Start:: row-2 -->

    <!-- End:: row-2 -->
@endsection


@section('script')
    <!-- Script exécuté au chargement de la page -->
    <script>
        flatpickr("input[name='filtrePeriode']", {
            locale: "fr", // Mettre en français
            mode: "range",
            dateFormat: "d/m/Y",
            defaultDate: ["{{ date('d/m/Y', strtotime('-1 week')) }}",
                "{{ date('d/m/Y') }}"
            ] // Assurez-vous que ces valeurs sont dynamiques et correctes
        })

        var Periode = convertirFormatDate(_('#filtrePeriode').value)

        function chargerStatAccueil(dataFiltreAccueil) {

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

                let form = new FormData()

                for (let key in dataFiltreAccueil) {
                    if (dataFiltreAccueil.hasOwnProperty(key)) {
                        form.append(key, dataFiltreAccueil[key]);
                    }
                }

                form.append('_token', '{{ csrf_token() }}')

                $.ajax({

                    url: "{{ route('chargerStatAccueil') }}",
                    type: 'POST',
                    data: form,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    // 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 listeMeilleursProduits(data) {

            const $list = $('#listeMeilleurProduit');
            $list.html('');

            if (!data || data.length === 0) {
                $list.html('<li class="text-center text-muted py-3">Aucune donnée</li>');
                return;
            }

            $.each(data, function(key, value) {
                $list.append(`
                <li class="mt-1 py-1" style="border-top: 0.1px solid #f0f0f0;">
                    <div class="row align-items-center">
                        <div class="col-md-3 lh-1">
                            <span class="avatar avatar-lg bg-gray-200">
                                <img src="{{ config('app.logi_base_host') }}/${value.urlDoc}" style="width:50px;height:50px;object-fit:cover;" alt="${value.libelleProduit}">
                            </span>
                        </div>
                        <div class="col-md-5">
                            <p class="fs-13 mb-0 fw-medium text-truncate" title="${value.libelleProduit}">${value.libelleProduit}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <p class="mb-0 fs-13 fw-semibold">${formatNumber(value.totalTTC, 0, true)}</p>
                            <p class="mb-0 text-muted fs-12">${formatNumber(value.qteTotale, 0)} ventes</p>
                        </div>
                    </div>
                </li>`);
            });
        }

        function listeMeilleursSociete(data) {

            const $list = $('#listeMeilleurSociete');
            $list.html('');

            if (!data || data.length === 0) {
                $list.html('<li class="text-center text-muted py-3">Aucune donnée</li>');
                return;
            }

            $.each(data, function(key, value) {
                $list.append(`
                <li class="mt-1 py-1" style="border-top: 0.1px solid #f0f0f0;">
                    <div class="row align-items-center">
                        <div class="col-md-7">
                            <p class="fs-13 mb-0 fw-medium text-truncate" title="${value.raisonSocial}">${value.raisonSocial}</p>
                        </div>
                        <div class="col-md-5 text-end">
                            <p class="mb-0 fs-13 fw-semibold">${formatNumber(value.totalTTC, 0, true)}</p>
                            <p class="mb-0 text-muted fs-12">${formatNumber(value.nbreCde, 0)} Cdes</p>
                        </div>
                    </div>
                </li>`);
            });
        }

        function formatNumberAbbreviation(number) {
            // Convertit une chaîne contenant un entier en nombre
            if (typeof number === "string" && /^[+-]?\d+$/.test(number)) {
                number = parseInt(number, 10);
            }

            if (typeof number !== "number" || isNaN(number)) {
                return number; // Retourne la valeur telle quelle si ce n'est pas un nombre valide
            }

            const abbreviations = {
                12: "T", // Trillions
                9: "B",  // Milliards (Billions)
                6: "M",  // Millions
                3: "k",  // Milliers
            };

            for (const [power, suffix] of Object.entries(abbreviations)) {
                if (Math.abs(number) >= Math.pow(10, power)) {
                    const formatted = (number / Math.pow(10, power)).toFixed(1); // Garde 1 décimale
                    return formatted.replace(/\.0$/, "") + suffix; // Supprime les décimales inutiles
                }
            }

            return number; // Retourne le nombre tel quel si aucune abréviation ne s'applique
        }

        var dashboardChart = null;

        function setLoadingState(loading) {
            const btn = _('#btnFiltreAccueil');
            if (loading) {
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span> Chargement...';
            } else {
                btn.disabled = false;
                btn.innerHTML = '<i class="ri-filter-3-line align-middle me-1 lh-1"></i> Filter';
            }
        }

        function remplirStat(id, valeur) {
            const el = _(id);
            if (el) el.innerHTML = valeur;
        }

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

            const notrePeriode = convertirFormatDate(_('#filtrePeriode').value);

            const dataFiltreAccueil = {
                dateDebut: notrePeriode[0],
                dateFin: notrePeriode[1],
                statsCdeParStatut: 1,
                statsMeilleurProduit: 1,
                statsMeilleurSociete: 1,
                statsLivraison: 1,
            };

            setLoadingState(true);

            chargerStatAccueil(dataFiltreAccueil)
                .then((response) => {

                    if (response.success != 1) return;

                    // --- KPI commandes ---
                    const s = response.dataStatsCdeParStatut;
                    remplirStat('#libNbreCdeTotale',  formatNumber(s.statCdeTotal.nbreLigne));
                    remplirStat('#libTotalCdeTotale', formatNumber(s.statCdeTotal.totalTtc, 0, true));
                    remplirStat('#libNbreCdeEnPrepa',  formatNumber(s.statCdeEnPrepa.nbreLigne));
                    remplirStat('#libTotalCdeEnPrepa', formatNumber(s.statCdeEnPrepa.totalTtc, 0, true));
                    remplirStat('#libNbreCdeEnLivrai',  formatNumber(s.statCdeEnLivrai.nbreLigne));
                    remplirStat('#libTotalCdeEnLivrai', formatNumber(s.statCdeEnLivrai.totalTtc, 0, true));
                    remplirStat('#libNbreCdeLivre',  formatNumber(s.statCdeLivree.nbreLigne));
                    remplirStat('#libTotalCdeLivre', formatNumber(s.statCdeLivree.totalTtc, 0, true));
                    remplirStat('#libNbreCdeEnAtt',    formatNumber(s.statCdeEnAttente.nbreLigne));
                    remplirStat('#libTotalCdeEnAtt',   formatNumber(s.statCdeEnAttente.totalTtc, 0, true));
                    remplirStat('#libNbreCdeConfirme',  formatNumber(s.statCdeConfirme.nbreLigne));
                    remplirStat('#libTotalCdeConfirme', formatNumber(s.statCdeConfirme.totalTtc, 0, true));
                    remplirStat('#libNbreCdePret',  formatNumber(s.statCdePret.nbreLigne));
                    remplirStat('#libTotalCdePret', formatNumber(s.statCdePret.totalTtc, 0, true));
                    remplirStat('#libNbreCdeAnnule',  formatNumber(s.statCdeAnnulee.nbreLigne));
                    remplirStat('#libTotalCdeAnnule', formatNumber(s.statCdeAnnulee.totalTtc, 0, true));

                    // --- Listes ---
                    listeMeilleursProduits(response.dataStatsMeilleursProduits);
                    listeMeilleursSociete(response.dataStatsMeilleursSociete);

                    // --- Livraisons ---
                    const liv = response.dataStatsLivraison;
                    remplirStat('#libNbreLivraisonEnAttente', liv.enAttente);
                    remplirStat('#libNbreLivraisonEnCours',   liv.enCours);
                    remplirStat('#libNbreLivraisonLivre',     liv.livre);

                    // --- 10 dernières commandes ---
                    const $tbody = $('#tableCommande').empty();
                    $.each(response.dataDixderniereCde, function(key, value) {
                        const badge = `<span class="badge" style="background:${value.codeCouleur};min-width:90px;">${value.libelleStatutCommande}</span>`;
                        $tbody.append(`
                            <tr>
                                <td><a href="javascript:void(0);" class="text-primary fw-medium">${value.numeroCommande}</a></td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="avatar avatar-sm avatar-rounded bg-primary-transparent text-primary fw-bold">
                                            ${(value.nom || '?').charAt(0).toUpperCase()}
                                        </span>
                                        <a href="javascript:void(0)" class="fs-13 fw-medium">${value.nom} ${value.prenoms}</a>
                                    </div>
                                </td>
                                <td><span class="text-muted fs-12">${value.dateCommande}</span></td>
                                <td class="text-end fw-medium">${formatNumber(value.totalHt, 0, true)}</td>
                                <td>${badge}</td>
                            </tr>`);
                    });

                    // --- Graphique mensuel (destroy avant re-render) ---
                    const nombreCommande = [], totalCommande = [], moisCommande = [];
                    $.each(response.dataStatistique, function(key, value) {
                        nombreCommande.push(value.nombreCommande);
                        totalCommande.push(value.totalCommande);
                        moisCommande.push(value.moisCommande);
                    });

                    if (dashboardChart) {
                        dashboardChart.destroy();
                        dashboardChart = null;
                    }

                    dashboardChart = new ApexCharts(document.querySelector('#chart'), {
                        series: [
                            { name: 'Nombre de commandes', data: nombreCommande, yaxisIndex: 0 },
                            { name: 'Total commandes',     data: totalCommande,  yaxisIndex: 1 },
                        ],
                        chart: { height: 320, type: 'area', toolbar: { show: false } },
                        dataLabels: { enabled: false },
                        stroke: { curve: 'smooth', width: 2 },
                        fill: { type: 'gradient', gradient: { opacityFrom: 0.4, opacityTo: 0.05 } },
                        yaxis: [
                            {
                                min: 0,
                                title: { text: 'Nombre' },
                                labels: { formatter: v => parseInt(v) },
                            },
                            {
                                min: 0,
                                opposite: true,
                                title: { text: 'Montant' },
                                labels: { formatter: v => formatNumberAbbreviation(parseInt(v)) },
                            },
                        ],
                        xaxis: { categories: moisCommande },
                        tooltip: { shared: true, intersect: false },
                        grid: { borderColor: '#f1f1f1' },
                    });
                    dashboardChart.render();
                })
                .finally(() => setLoadingState(false));
        });

        _('#btnFiltreAccueil').click();
    </script>
@endsection