@extends('models')
@section('titre-page', "Suivi des vm des produits")
@section('content-body')

<!-- 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-4 mt-2">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Ventes</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Suivi des vm des produits</li>
                    </ol>
                </nav>
            </div>

            <div class="col-xl-8">

            </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">
                <form id="formFiltre" class="w-100">
                    <div class="row w-100">
                        <div class="col-xl-3 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Site&nbsp;:</p>
                            <select name="IDAGENCE" id="selIDAGENCE" class="form-select" @disabled(checkIfDroit('DG_AccesMultiSite'))>
                                @if (session()->has('site'))
                                    @foreach (session('site') as $site)
                                        <option value="{{ $site->IDAGENCE }}">{{ $site->NomAgence }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-xl-3 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                            <input type="text" autocomplete="off" class="form-control text-center" name="datetimes" id="filtrePeriode" />
                        </div>
                        <div class="col-xl-3 col-md-3 mb-0 d-flex align-items-center">
                            <div class="d-flex align-items-center">
                                <input id="checkVenteSupVM" class="form-check-input me-2" type="checkbox"> Qté vendue supérieure à VM
                            </div>
                        </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" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary"
                                data-bs-placement="top" title="Filtrer">
                                <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 tablehover text-nowrap w-100" id="tableListeProduitEtVm">
                        <thead class="table-header-primary">
                            <tr>
                                <th data-column="action" data-orderable="false">
                                    Actions
                                </th>
                                <th class="text-center colTable" data-column="DesignationProduit" >Désignation</th>
                                <th class="text-center colTable" data-column="CodeCipProduit1">Code</th>
                                <th class="text-center colTable" data-column="Vm_Produit" data-class="text-center">VM</th>
                                <th class="text-center colTable" data-column="qtetTVendu" data-class="text-center">Qté vendue</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Section modal --}}
<div class="modal fade" id="modalDetailVenteProduit" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" aria-hidden="true" data-bs-focus="false">
    <!-- Scrollable modal -->
    <div class="modal-dialog  modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="titleModalinfoDetailVenteProduit"></h6>
                <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mt-0 table-responsive">
                    <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit" id="tableLigneVenteProduit">
                        <thead class="table-header-primary">
                            <tr>
                                <th class="text-center" data-column="NumeroFactureClient" data-class="text-center">N° Facture</th>
                                <th class="text-center" data-column="DateFactureClientFormat" data-class="text-center">Date</th>
                                <th class="text-center" data-column="NomClient">Client</th>
                                <th class="text-center" data-column="QteAffecteeTotaleFormat" data-class="text-center">Qté</th>
                                <th class="text-center" data-column="checkExclureVm" data-class="text-center">Exclure VM</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection
@section('script')

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

    var tableListeProduitEtVm

    $('#filtrePeriode').daterangepicker({
        "locale": {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Appliquer",
            "cancelLabel": "Annuler",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "weekLabel": "W",
            "daysOfWeek": [
                "Dim",
                "Lun",
                "Mar",
                "Mer",
                "Jeu",
                "Ven",
                "Sam"
            ],
            "firstDay": 1
        },
        opens: 'center',
        startDate: moment().subtract(1, 'days'),
        endDate: moment()
    });

    function chargerTableListeProduitEtVm() {

        $.ajax({

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

                if (response.success == 1) {

                    let obj = response.data
                    
                    tableListeProduitEtVm = remplissageDataTable({
                        IdentifiantDuTableau : '#tableListeProduitEtVm',
                        obj : obj,
                        paging : 25,
                        lengthChange : false,
                        // scrollY : '450px'
                    })

                    completeHandler()
                } else {

                    notifError(response.msg)
                    completeHandler()
                }
            },
            error: function(error) {
                notifError(error)
                completeHandler()
            }
        })
    }

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

        recupererValeurSession('filterMemory.filtreSessionSuiviVMProduit')
            .then((data) => {

                $('#selIDAGENCE').val(data.IDAGENCE).trigger('change')

                $('#filtrePeriode').daterangepicker({
                    "locale": {
                        "format": "DD/MM/YYYY",
                        "separator": " - ",
                        "applyLabel": "Appliquer",
                        "cancelLabel": "Annuler",
                        "fromLabel": "De",
                        "toLabel": "A",
                        "customRangeLabel": "Personnalisée",
                        "weekLabel": "S",
                        "daysOfWeek": [
                            "Dim",
                            "Lun",
                            "Mar",
                            "Mer",
                            "Jeu",
                            "Ven",
                            "Sam"
                        ],
                        "firstDay": 1
                    },
                    opens: 'center',
                    startDate: explodeDate(data.debutPeriode, '-'),
                    endDate: explodeDate(data.finPeriode, '-')
                    
                });

                _('checkVenteSupVM').checked = data.venteSupVm
            })
        
        chargerTableListeProduitEtVm()
    })

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

        let session = 'filterMemory.filtreSessionSuiviVMProduit'

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

        let valeurSession = {

            'IDAGENCE' : _('selIDAGENCE').value,
            'debutPeriode' : Periode[0],
            'finPeriode' : Periode[1],
            'venteSupVm' : _('checkVenteSupVM').checked
        }

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

                chargerTableListeProduitEtVm()
            })
    })

    _('formFiltre').addEventListener('submit', function(e){
        e.preventDefault()
        _('btnFiltreTable').click()
    })
</script>

<!-- Script info vente produit -->
<script>

    function infoDetailVenteProduit(IDPRODUIT){

        return new Promise((resolve, reject) => {
                
            $.ajax({

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

                    if (response.success != 1) {

                        notif('danger', 'Erreur', response.msg)
                    }

                    resolve(response)
                    completeHandler()
                },
                error: function(error) {

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

                    completeHandler()
                }
            })
        })
    }

    var dataTableLigneVenteProduit = []
    var etapeCde
    var IDCOMMANDECLIENT

    $(document).on('click', '#infoDetailVenteProduit', function() {

        IDSTOCKAGENCE = $(this).attr('data-id')

        let ligne = $(this).closest('tr')

        let info = tableListeProduitEtVm.row(ligne).data()

        infoDetailVenteProduit(IDSTOCKAGENCE)
            .then(function(response){

                if (response.success == 1) {

                    dataTableLigneVenteProduit = response.data

                    _('titleModalinfoDetailVenteProduit').innerHTML = 'Détail vente du produit : ' + info.DesignationProduit + ' -> VM : ' + info.Vm_Produit + ' -> Qté vendue : ' + info.qtetTVendu

                    $('#modalDetailVenteProduit').modal('show')
                }
            })
    })

    function chargertableLigneVenteProduit(){

        remplissageDataTable({
                        IdentifiantDuTableau : '#tableLigneVenteProduit',
                        obj : dataTableLigneVenteProduit,
                        scrollY : '350px'
                    })
    }

    $('#modalDetailVenteProduit').on('shown.bs.modal', async function() {

        progressHandler()
        await chargertableLigneVenteProduit()
        completeHandler()
    })

</script>

<!-- Script marquer la ligne comme exceptionnelle -->
<script>

    $(document).on('click', '#tableLigneVenteProduit .checkFACTURECLIENT_LIGNE_EXE', function(e){

        e.preventDefault()

        let elmt = this
        let check = this.checked
        let IDFACTURECLIENT_LIGNE = elmt.getAttribute('data-id')

        // let ligne = $(this).closest('tr')

        Swal.fire({

            title : 'Attention !',
            text: 'Êtes-vous sûrs de vouloir éffectuer cette action ?',
            icon: 'warning',
            showCancelButton: true,
            customClass: {
                confirmButton: 'btn btn-danger ms-2'
            },
            cancelButtonColor: '#d33',
            confirmButtonText: 'Oui',
            cancelButtonText: 'Non'

            }).then((result) => {

            if (result.isConfirmed) {

                elmt.checked = check

                $.ajax({

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

                        IDFACTURECLIENT_LIGNE : IDFACTURECLIENT_LIGNE,
                        checked : check ? 1 : 0,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    success : function(response){

                        if (response.success != 1) {

                            // ligne.style.background = '#ddd'
                            elmt.checked = !check
                            notifError(response.msg)
                            return 0
                        }
                    }
                    ,error : function(error) {

                        elmt.checked = !check
                        notifError('Échec de l\'opération.')
                    }
                })
            }
        })
    })
</script>

@endsection