@extends('model')
@section('title_page', 'Tableau de bord')
@section('content')

    <div class="row">
        <div class="col-xl-12 respo col-xxl-12 col-lg-12">
            <div class="row">
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div
                                    class="icon-box icon-box-md bg-success-light rounded-circle me-2 d-flex justify-content-center align-items-center">
                                    <i class="bx bx-package text-success fs-18"></i>
                                </div>
                                <h5 class="text-success">Équipements en service</h5>
                            </div>
                            <div class="row task">
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-primary text-center fs-18 fw-semibold mb-2" id="libNbreEquipBonEtat">
                                        </p>
                                        <p class="mb-1 text-center">Nombre</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-purple text-center fs-18 fw-semibold mb-2"
                                            id="libValAchatEquipBonEtat"></p>
                                        <p class="mb-1 text-center">Val. achat</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-orange text-center fs-18 fw-semibold mb-2"
                                            id="libValVenteEquipBonEtat"></p>
                                        <p class="mb-1 text-center">Val. résiduelle</p>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div
                                    class="icon-box icon-box-md bg-info-light rounded-circle me-2 d-flex justify-content-center align-items-center">
                                    <i class="bx bx-package text-info fs-18"></i>
                                </div>
                                <h5 class="text-info">Équipements en stocks</h5>
                            </div>
                            <div class="row task">
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-primary text-center fs-18 fw-semibold mb-2" id="libNbreEquipStock">
                                        </p>
                                        <p class="mb-1 text-center">Nombre</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-purple text-center fs-18 fw-semibold mb-2"
                                            id="libValAchatEquipStock"></p>
                                        <p class="mb-1 text-center">Val. achat</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-orange text-center fs-18 fw-semibold mb-2"
                                            id="libValVenteEquipStock"></p>
                                        <p class="mb-1 text-center">Val. résiduelle</p>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div
                                    class="icon-box icon-box-md bg-danger-light rounded-circle me-2 d-flex justify-content-center align-items-center">
                                    <i class="bx bx-package text-orange fs-18"></i>
                                </div>
                                <h5 class="text-orange">Équipements en réparation</h5>
                            </div>
                            <div class="row task">
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-primary text-center fs-18 fw-semibold mb-2" id="libNbreEquipRepa">
                                        </p>
                                        <p class="mb-1 text-center">Nombre</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-purple text-center fs-18 fw-semibold mb-2" id="libValAchatEquipRepa">
                                        </p>
                                        <p class="mb-1 text-center">Val. achat</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-orange text-center fs-18 fw-semibold mb-2" id="libValVenteEquipRepa">
                                        </p>
                                        <p class="mb-1 text-center">Val. résiduelle</p>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div
                                    class="icon-box icon-box-md bg-danger-light rounded-circle me-2 d-flex justify-content-center align-items-center">
                                    <i class="bx bx-package text-danger fs-18"></i>
                                </div>
                                <h5 class="text-danger">Équipements hors service</h5>
                            </div>
                            <div class="row task">
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-primary text-center fs-18 fw-semibold mb-2" id="libNbreEquipHS">
                                        </p>
                                        <p class="mb-1 text-center">Nombre</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-purple text-center fs-18 fw-semibold mb-2"
                                            id="libValAchatEquipHS"></p>
                                        <p class="mb-1 text-center">Val. achat</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-orange text-center fs-18 fw-semibold mb-2"
                                            id="libValVenteEquipHS"></p>
                                        <p class="mb-1 text-center">Val. résiduelle</p>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <div
                                    class="icon-box icon-box-md bg-success-light rounded-circle me-2 d-flex justify-content-center align-items-center">
                                    <i class="bx bx-package text-teal fs-18"></i>
                                </div>
                                <h5 class="text-teal">Total équipements</h5>
                            </div>
                            <div class="row task">
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-primary text-center fs-18 fw-semibold mb-2" id="libNbreEquipTotal">
                                        </p>
                                        <p class="mb-1 text-center">Nombre</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-purple text-center fs-18 fw-semibold mb-2"
                                            id="libValAchatEquipTotal"></p>
                                        <p class="mb-1 text-center">Val. achat</p>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-sm-4 col-4 px-0">
                                    <div class="task-summary px-0 mx-0">
                                        <p class="text-orange text-center fs-18 fw-semibold mb-2"
                                            id="libValVenteEquipTotal"></p>
                                        <p class="mb-1 text-center">Val. résiduelle</p>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
               
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="table-responsive active-projects">
                                <div class="tbl-caption d-flex justify-content-between align-items-center">
                                    <h4 class="heading mb-0">Liste des équipements en réparation </h4>
                                    <!-- <a href="{{ url('/Attestation') }}" class="btn btn-light btn-xs">Voir plus <span class="btn-icon-end"><i
                                            class="fa fa-eye"></i></span>
                                        </a> -->
                                </div>
                                <!-- <div class="table-responsive"> -->
                                <table id="tableListeEquipment" class="display table" style="min-width: 845px">
                                    <thead>
                                        <tr>
                                            <th data-column="code_equipement" data-class="text-center" orderable="false"
                                                searchable="false" class="text-center">Code</th>
                                            <th data-column="libelle_equipement" data-class="text-start"
                                                class="text-center">Désignation équipement</th>
                                            <th data-column="nom_type_equipement" data-class="text-center"
                                                class="text-center">Type</th>
                                            <th data-column="nom_bureau" data-class="text-center" class="text-center">
                                                Bureau</th>
                                            <th data-column="nom_fournisseur" data-class="text-center"
                                                class="text-center">Fournisseur</th>
                                            <th data-column="valeur_achatFormat" data-class="text-end"
                                                class="text-center">Valeur d'achat</th>
                                            <th data-column="valeur_residuelleFormat" data-class="text-end"
                                                class="text-center">Valeur résiduelle</th>
                                        </tr>
                                    </thead>
                                </table>
                                <!-- </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

    <!-- Script exécuté au chargement de la page -->
    <script>
        var tableListeEquipment

        function chargerStatsAcueil(avecTable = 1) {

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

                $.ajax({

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

                        if (response.success != 1) {

                            notifDanger(response.msg || 'Échec de l\'opération. Veuillez réessayer.')
                        }

                        resolve(response)

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

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

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

                if (response.success == 1) {

                    let infoEquipEnService = response.infoEquipEnService
                    let infoEquipEnStock = response.infoEquipEnStock
                    let infoEquipEnRepparation = response.infoEquipEnRepparation
                    let infoEquipEnHorsService = response.infoEquipEnHorsService
                    let infoEquipTotal = response.infoEquipTotal
                    let data = response.data

                    // Equipement en bon etat
                    _('#libNbreEquipBonEtat').innerHTML = formatNumber(infoEquipEnService.nbreLigne)
                    _('#libValAchatEquipBonEtat').innerHTML = formatNumber(infoEquipEnService.totalValeurAchat)
                    _('#libValVenteEquipBonEtat').innerHTML = formatNumber(infoEquipEnService.totalValeurVente)

                    // Eqipement en stock
                    _('#libNbreEquipStock').innerHTML = formatNumber(infoEquipEnStock.nbreLigne)
                    _('#libValAchatEquipStock').innerHTML = formatNumber(infoEquipEnStock.totalValeurAchat)
                    _('#libValVenteEquipStock').innerHTML = formatNumber(infoEquipEnStock.totalValeurVente)

                    // Equipement réparation
                    _('#libNbreEquipRepa').innerHTML = formatNumber(infoEquipEnRepparation.nbreLigne)
                    _('#libValAchatEquipRepa').innerHTML = formatNumber(infoEquipEnRepparation.totalValeurAchat)
                    _('#libValVenteEquipRepa').innerHTML = formatNumber(infoEquipEnRepparation.totalValeurVente)

                    // Equipement hors service
                    _('#libNbreEquipHS').innerHTML = formatNumber(infoEquipEnHorsService.nbreLigne)
                    _('#libValAchatEquipHS').innerHTML = formatNumber(infoEquipEnHorsService.totalValeurAchat)
                    _('#libValVenteEquipHS').innerHTML = formatNumber(infoEquipEnHorsService.totalValeurVente)

                    // Total Equipement
                    _('#libNbreEquipTotal').innerHTML = formatNumber(infoEquipTotal.nbreLigne)
                    _('#libValAchatEquipTotal').innerHTML = formatNumber(infoEquipTotal.totalValeurAchat)
                    _('#libValVenteEquipTotal').innerHTML = formatNumber(infoEquipTotal.totalValeurVente)

                    tableListeEquipment = remplissageDataTable({
                        IdentifiantDuTableau: '#tableListeEquipment',
                        obj: data,
                        pageLength: 10,
                        lengthChange: false,
                        scrollY: '250px'
                    })
                }
            })
    </script>
@endsection