@extends('models')
@section('titre-page', 'Objectifs mensuels client')
@section('content-body')

<style>
    .br-red{
        border-right: 1px solid red;
    }
</style>

<!-- Page Header -->
<div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
    <!-- Start:: row-7 -->
    <div class="col-xl-12 col-12">
        <div class="row mb-3">
            <div class="col-xl-9 mt-2">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Client</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Objectifs mensuels client</li>
                    </ol>
                </nav>
            </div>

            <div class="col-xl-3 d-flex justify-content-end">
                <div class="col-xl-6 mt-md-0 mt-3 m-0 d-flex justify-content-end">
                    <button type="button" class="btn btn-success-light btn-wave d-flex" id="bntExportTableExcel">
                        <i class="ri-file-excel-2-line me-1"></i>Export Excel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page Header Close -->

<div class="row">
    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-header pe-0 pe-0">
                <form id="formFiltre" class="w-100">
                    <div class="row w-100">
                        <div class="col-xl-2 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Année&nbsp;:</p>
                            <select id="AnneeObjMensuel" name="AnneeObjMensuel" class="form-select">
                                    @php
                                        $annee = date('Y');

                                        for($i = $annee - 5; $i <= $annee; $i ++){
                                    @endphp

                                            <option value="{{ $i }}" {{ ($i == $annee) ? 'selected' : ''}}>{{ $i }}</option>
                                    @php
                                        }
                                    @endphp
                            </select>
                        </div>
                        <div class="col-xl-3 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Client&nbsp;:</p>
                            <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                            </select>
                        </div>
                        <div class="col-xl-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Groupement&nbsp;:</p>
                            <select class="form-select" id="IDGROUPEMENT_CLIENT" name="IDGROUPEMENT_CLIENT">
                            </select>
                        </div>
                        <div class="col-xl-2 mb-2">
                            <p for="input-label" class="mb-0 text-muted">Pos. Cmde : </p>
                            <select class="form-control p-input" id="IntentionCommande"
                            name="IntentionCommande" style="text-transform: uppercase;">
                                <option value="0">TOUS</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                            </select>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-0 pt-1">
                            <button type="button" class="btn btn-primary btn-wave mt-2  float-end" id="btnFiltreTable">
                                <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="tablehover table table-striped table-bordered tablehover text-nowrap w-100" id="tableObjectifsMensuelsClient">
                        <thead class="table-header-primary">
                            <tr>
                                <th rowspan="2" data-column="NomClient" >Client</th>
                                <th rowspan="2" class="text-center" data-column="CodeClient" >Code</th>
                                <th rowspan="2" class="text-center" data-column="NotationClient" data-class="text-center">Notation</th>
                                <th rowspan="2" data-class="br-red text-center" class="br-red text-center" data-column="IntentionCommande">Intention<br>commande</th>
                                <th colspan="3" class="br-red text-center">Janvier</th>
                                <th colspan="3" class="br-red text-center" >Fevrier</th>
                                <th colspan="3" class="br-red text-center" >Mars</th>
                                <th colspan="3" class="br-red text-center">Avril</th>
                                <th colspan="3" class="br-red text-center">Mai</th>
                                <th colspan="3" class="br-red text-center">Juin</th>
                                <th colspan="3" class="br-red text-center">Juillet</th>
                                <th colspan="3" class="br-red text-center">Août</th>
                                <th colspan="3" class="br-red text-center">Septembre</th>
                                <th colspan="3" class="br-red text-center">Octobre</th>
                                <th colspan="3" class="br-red text-center">Novembre</th>
                                <th colspan="3" class="br-red text-center">Décembre</th>
                                <th colspan="3" class="br-red text-center">Annuel</th>
                            </tr>
                            <tr>
                                <th data-class = "text-end" data-column="ObjJan" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAJan" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxJan" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjFev" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAFev" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxFev" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjMar" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAMar" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxMar" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjAvr" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAAvr" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxAvr" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjMai" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAMai" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxMai" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjJuin" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAJuin" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxJuin" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjJuil" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAJuil" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxJuil" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjAou" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAAou" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxAou" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjSep" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CASep" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxSep" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjOct" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CAOct" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxOct" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjNov" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CANov" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxNov" class="text-center">%</th>
                                <th data-class = "text-end" data-column="ObjDec" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="CADec" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="tauxDec" class="text-center">%</th>
                                <th data-class = "text-end" data-column="totalObj" class="text-center">Objectif</th>
                                <th data-class = "text-end" data-column="totalCA" class="text-center">CA</th>
                                <th data-class = "br-red text-center" data-column="totalPercentCAObj" class="text-center">%</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Section modal --}}

@endsection
@section('script')

<!-- Script exécuté au chargement -->
<script>

    var tableObjectifsMensuelsClient

    tableObjectifsMensuelsClient = remplissageDataTable({
                                IdentifiantDuTableau : '#tableObjectifsMensuelsClient',
                                bFilter : true,
                                obj : [],
                                lengthChange : true,
                                pageLength : 20
                            })

    function chargerSelectClient(valeur) {

        // Combo client en select2 AJAX (recherche à la frappe)
        initSelect2ClientAjax('#IDCLIENT', { labelFirst: 'TOUS LES CLIENTS' })
        preselectClientSelect2('#IDCLIENT', valeur)
    }

    function chargerSelectGroupement(valeur){

        listingComboGroupementClient('#IDGROUPEMENT_CLIENT', labelFirstOption = 'TOUS LES GROUPEMENTS')

        $('#IDGROUPEMENT_CLIENT').val(valeur).trigger('change')

        $('#IDGROUPEMENT_CLIENT').select2()
    }

    function chargerTableObjectifsMensuelsClient(){

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

            $.ajax({

                url : "{{ route('tableObjCAMensuelClient') }}",
                type : 'GET',
                data : {
                    AnneeObjMensuel : _('AnneeObjMensuel').value,
                    IDCLIENT : _('IDCLIENT').value,
                    IDGROUPEMENT_CLIENT : _('IDGROUPEMENT_CLIENT').value,
                    IntentionCommande : _('IntentionCommande').value
                },
                dataType : 'json',
                beforeSend : progressHandler(),
                success : function(response){

                    if (response.success != 1) {

                        notifError(response.msg)
                    }

                    resolve(response)

                    completeHandler()
                },
                error : function(){

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

    window.addEventListener('load', function() {

        // recupereValeurSession()
        // recupererValeurSession('filterMemory.ListeCdeClient')
            // .then((data) => {

                chargerSelectClient(0)
                chargerSelectGroupement(0)
                // chargerTableObjectifsMensuelsClient()
            // })
        
        // chargerTableCdeClient()
    })

    // Click sur le boutton de refresh
    _('btnFiltreTable').addEventListener('click', function() {

        // let session = 'filterMemory.ListeCdeClient'

        // let Periode = convertirFormatDate2(_('filtrePeriode').value)

        // let valeurSession = {

        //     'IDAGENCE' : _('IDAGENCE').value,
        //     'debutPeriode' : Periode[0],
        //     'finPeriode' : Periode[1],
        //     'IDCLIENT' : _('IDCLIENT').value,
        //     'IDPRODUIT' : _('IDPRODUIT').value,
        //     'etapeTraitement' : _('etapeTraitement').value,
        //     'type' : _('type').value,
        //     'mode' : _('mode').value,
        //     'IDTOURNEE' : _('IDTOURNEE').value,
        //     'uniquementCmu' : (_('uniquementCmu').checked == true) ? 1 : 0,
        //     'IDGROUPEMENT_CLIENT' : _('IDGROUPEMENT_CLIENT').value
        // }

        // modifierValeurSession('{{ csrf_token() }}', session, valeurSession)
        //     .then(function(data){

        //         chargerTableCdeClient()
        //     })

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

                if (response.success == 1) {

                    let obj = response.data

                    tableObjectifsMensuelsClient = remplissageDataTable({
                                IdentifiantDuTableau : '#tableObjectifsMensuelsClient',
                                bFilter : true,
                                obj : obj,
                                lengthChange : true,
                                pageLength : 20
                            })
                }
            })
    })

    _('formFiltre').addEventListener('submit', function(e){

        e.preventDefault()
        _('btnFiltreTable').click()
    })
</script>

<!-- Script export Excel -->
<script>

    _('bntExportTableExcel').addEventListener('click', function(){

        // exportExcel('tableObjectifsMensuelsClient','tableObjectifsMensuelsClient')
        exportToExcelFormatted('tableObjectifsMensuelsClient', [
            'NomClient',
            'CodeClient',
            'NotationClient',
            'IntentionCommande',
            'ObjJan',
            'CAJan',
            'tauxJan',
            'ObjFev',
            'CAFev',
            'tauxFev',
            'ObjMar',
            'CAMar',
            'tauxMar',
            'ObjAvr',
            'CAAvr',
            'tauxAvr',
            'ObjMai',
            'CAMai',
            'tauxMai',
            'ObjJuin',
            'CAJuin',
            'tauxJuin',
            'ObjJuil',
            'CAJuil',
            'tauxJuil',
            'ObjAou',
            'CAAou',
            'tauxAou',
            'ObjSep',
            'CASep',
            'tauxSep',
            'ObjOct',
            'CAOct',
            'tauxOct',
            'ObjNov',
            'CANov',
            'tauxNov',
            'ObjDec',
            'CADec',
            'tauxDec',
            'totalObj',
            'totalCA',
            'totalPercentCAObj',
        ], 'ExcelSuiviDelegue')
    })
</script>

@endsection