@extends('models')
@section('titre-page', 'Sites')
@section('content-body')
    <!-- Start::app-content -->

    <style>
        .height-input {
            height: 2.5rem !important;
        }
    </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-8 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Administration</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Sites</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-4 col-md-8">
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary-light btn-wave d-flex" id="bntModalNewAgence">
                            <i class=" ri ri-add-circle-line me-1"></i>Nouveau site
                        </button>

                          <button type="button" class="btn btn-success-light btn-wave d-flex ms-1" id="btn-export-excel-agence">
                            <i class="ri ri-file-excel-2-line me-1"></i>Exporter en 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-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap" id="tableAgence">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">Site</th>
                                    <th class="text-center colTable">Code site</th>
                                    <!-- <th class="text-center colTable">Coefficient PrixCessionHT</th> -->
                                    <th class="text-center colTable">Nbre Jr Mini.</th>
                                    <th class="text-center colTable">Nbre Jrs Trans.</th>
                                    <th class="text-center colTable">Délai Réassort</th>
                                    <th class="text-center colTable">Nbre Jrs Mini. Déballé</th>
                                    <th class="text-center colTable">Nbre Jrs transf. Déballé</th>
                                    <th class="text-center colTable">Nbre VM nivellement Transf.</th>
                                    <th class="text-center colTable">Clé de Répartition Mise en place</th>
                                    <th class="text-center colTable">Délai Transfert Réception</th>
                                    <th class="text-center colTable">Nbre Jr Mini Stock Transf. Réception BL</th>
                                    <th class="text-center colTable">Nbre Jrs Transférés Réception BL</th>
                                    <th class="text-center colTable">Nb. Jour Délai Transfert</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <div class="modal fade" id="modalFicheAgence" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalAgence">Nouveau site</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formAgence">
                        <div class="row">
                            <div class="row">
                                <input type="IDAGENCE" style="display:none" id="IDAGENCE" name="IDAGENCE">
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nom site</p>
                                    <input type="text" class="text-uppercase form-control" name="NomAgence" id="NomAgence">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Code site</p>
                                    <input type="text" class="text-uppercase form-control" name="CodeAgence" id="CodeAgence" maxlength="5">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nbre jrs mini. déballé</p>
                                    <input type="number" class="text-center form-control" name="NomBreJourSeuilDeballe" id="NomBreJourSeuilDeballe">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nbre jrs trans. déballé</p>
                                    <input type="number" class="text-center form-control" name="NomBreJourTransfertDeballe" id="NomBreJourTransfertDeballe">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nbre jrs mini.</p>
                                    <input type="number" class="text-center form-control" name="NombreJourMini" id="NombreJourMini">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nbre jrs transféré</p>
                                    <input type="number" class="text-center form-control" name="NombreJoursTransfert" id="NombreJoursTransfert">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Clé repart mise en place</p>
                                    <input type="number" class="text-center form-control" name="CleRepartitionMiseEnPlace" id="CleRepartitionMiseEnPlace">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nbre jrs mini. trans. recep. BL</p>
                                    <input type="number" class="text-center form-control" name="NbreJourMiniStockTReception" id="NbreJourMiniStockTReception">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nb. VM nivellement trans</p>
                                    <input type="number" class="text-center form-control" name="NbreVMminiNvelle" id="NbreVMminiNvelle">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Délai reassort</p>
                                    <input type="number" class="text-center form-control" name="DelaiDeRessort" id="DelaiDeRessort">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Délai transfert réception</p>
                                    <input type="number" class="text-center form-control" name="NbreDelaiTransfertReception" id="NbreDelaiTransfertReception">
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Nbre jrs trans. recep BL</p>
                                    <input type="number" class="text-center form-control" name="NbreJourTransfererReception" id="NbreJourTransfererReception">
                                </div>
                                <!-- <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Coefficient prix cessionHT</p>
                                    <input type="number" class="text-center form-control" name="CoefficientPrixCessionHT" id="CoefficientPrixCessionHT">
                                </div> -->
                                <div class="col-xl-6 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Addresse</p>
                                    <textarea class="form-control" name="AdresseAgence" id="inpAdresseAgence" cols="30" rows="5"></textarea>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-2">
                                    <p class="mb-0 text-muted">Contact</p>
                                    <input type="text" class="form-control" name="ContactAgence" id="inpContactAgence">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="ri-close-circle-line"></i> Fermer</button>
                    <button type="button" class="btn btn-success" id="btnNewSite"><i class="bx bx-plus fs-6 me-1"></i>Ajouter</button>
                    <button type="button" class="btn btn-warning" id="btnEditSite"><i class="bx bx-edit fs-6 me-1"></i>Modifier</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <!-- Script exécuté au chargement de la page -->
    <script>

        function chargerTableAgence(){

            $.ajax({

                url: "{{ route('listingAgence') }}",
                type: 'GET',
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {

                    let obj = response.data

                    $("#tableAgence").DataTable().destroy()
                    tableAgence = $("#tableAgence").DataTable({

                        bFilter: true,
                        language: {
                            // dom: 'Bfrtip',
                            processing: false,
                            lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                            info: "Ligne _START_ à _END_ sur _TOTAL_",
                            infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                            infoPostFix: "",
                            loadingRecords: "Chargement en cours...",
                            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                            emptyTable: "Aucune donnée disponible dans le tableau",

                            paginate: {
                                first: "",
                                previous: "Pr&eacute;c&eacute;dent",
                                next: "Suivant",
                                last: ""
                            },
                            aria: {
                                sortAscending: ": activer pour trier la colonne par ordre croissant",
                                sortDescending: ": activer pour trier la colonne par ordre décroissant"
                            },
                            search: "Rechercher&nbsp;:",
                        },
                        pageLength: 25,
                        lengthChange: false,
                        "data": obj,
                        'columns': [

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'NomAgence',
                                className: 'text-center'
                            },
                            {
                                data: 'CodeAgence',
                                className: 'text-center'
                            },
                            // {
                            //     data: 'CoefficientPrixCessionHT',
                            //     className: 'text-center'
                            // },
                            {
                                data: 'NombreJourMiniFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NombreJoursTransfertFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'DelaiDeRessortFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NomBreJourSeuilDeballeFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NomBreJourTransfertDeballeFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NbreVMminiNvelle',
                                className: 'text-center'
                            },
                            {
                                data: 'CleRepartitionMiseEnPlaceFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NbreDelaiTransfertReceptionFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NbreJourMiniStockTReceptionFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NbreJourTransfererReceptionFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NbreDelaiTransfertReception',
                                className: 'text-center'
                            }
                        ]
                    })
                    placeboutonPreferenceColonne('tableAgence', 'tableAgenceShowColonne', 2)
                }
            })
        }

        chargerTableAgence()

recuperationPreferenceColonneUtilisateur('tableAgence','tableAgenceShowColonne')
$(document).on('click', '.tableAgenceShowColonne', function() {
   appliquerPreferenceColonne('tableAgence', 'tableAgence', $(this),'tableAgenceShowColonne')
})

    </script>

    <!-- Script de nouvelle agence -->
    <script>

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

            _('titleModalAgence').innerHTML = 'Ajouter agence'
            _('btnNewSite').style.display = ''
            _('btnEditSite').style.display = 'none'
            _('NomAgence').value = ''
            _('CodeAgence').value = ''
            _('NomBreJourSeuilDeballe').value = 0
            _('NomBreJourTransfertDeballe').value = 0
            _('NombreJourMini').value = 0
            _('NombreJoursTransfert').value = 0
            _('CleRepartitionMiseEnPlace').value = 0
            _('NbreJourMiniStockTReception').value = 0
            _('NbreVMminiNvelle').value = 0
            _('DelaiDeRessort').value = 0
            _('NbreDelaiTransfertReception').value = 0
            _('NbreJourTransfererReception').value = 0
            // _('CoefficientPrixCessionHT').value = 0
            _('inpAdresseAgence').value = ''
            _('inpContactAgence').value = ''

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

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

            if (_('NomAgence').value.replace(/\s/g,'') == '') {

                notif('danger', 'Erreur', 'Veuillez saisir un nom de site')
                return 0
            }

            if (_('CodeAgence').value.replace(/\s/g,'') == '') {

                notif('danger', 'Erreur', 'Veuillez saisir un code de site')
                return 0
            }

            if(_('NomBreJourSeuilDeballe').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NomBreJourTransfertDeballe').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NombreJourMini').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NombreJoursTransfert').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('CleRepartitionMiseEnPlace').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NbreJourMiniStockTReception').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NbreVMminiNvelle').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('DelaiDeRessort').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NbreDelaiTransfertReception').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            if(_('NbreJourTransfererReception').value.replace(/\s/g,'') == ''){

                this.value = 0
            }

            let formulaire = new FormData(_('formAgence'))
            formulaire.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url : "{{ route('ajouterAgence')}}",
                type : 'POST',
                data : formulaire,
                processData: false,
                contentType: false,
                dataType : 'json',
                 beforeSend: progressHandler(),
                success : function(response){

                    completeHandler()
                    if (response.success == 0) {

                        notifError(response.msg)
                    }else if(response.success == 1) {

                        notif(
                            "danger",
                            "Erreur",
                            "Ce nom d'agence est déjà enregistré"
                        )
                    }else if(response.success == 2) {

                        notif(
                            "danger",
                            "Erreur",
                            "Ce code d'agence est déjà enregistré"
                        )
                    }else if(response.success == 3) {

                        notif(
                            "success",
                            "Succès",
                            "Nouvelle agence enregistrée"
                        )

                        chargerTableAgence()
                        $('#modalFicheAgence').modal('hide')
                    }
                }
                ,error : function(error) {

                    console.log(error)
                }
            })
        })

    </script>

    <!-- Script de modification d'agence -->
    <script>

        // Ouverture de la modal en modification
        $(document).on('click', '#editAgence', function(){

            let IDAGENCE = $(this).attr('data-id')

            $.ajax({

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

                    IDAGENCE : IDAGENCE,
                    _token : '{{ csrf_token() }}'
                },
                dataType : 'json',
                success : function(response){

                    if (response.success == 0) {

                        notifError(response.msg)
                    }else if(response.success == 1) {

                        _('titleModalAgence').innerHTML = 'Modifier agence'
                        _('btnNewSite').style.display = 'none'
                        _('btnEditSite').style.display = ''
                        _('NomAgence').value = response.data.NomAgence
                        _('CodeAgence').value = response.data.CodeAgence
                        _('NomBreJourSeuilDeballe').value = response.data.NomBreJourSeuilDeballe
                        _('NomBreJourTransfertDeballe').value = response.data.NomBreJourTransfertDeballe
                        _('NombreJourMini').value = response.data.NombreJourMini
                        _('NombreJoursTransfert').value = response.data.NombreJoursTransfert
                        _('CleRepartitionMiseEnPlace').value = response.data.CleRepartitionMiseEnPlace
                        _('NbreJourMiniStockTReception').value = response.data.NbreJourMiniStockTReception
                        _('NbreVMminiNvelle').value = response.data.NbreVMminiNvelle
                        _('DelaiDeRessort').value = response.data.DelaiDeRessort
                        _('NbreDelaiTransfertReception').value = response.data.NbreDelaiTransfertReception
                        _('NbreJourTransfererReception').value = response.data.NbreJourTransfererReception
                        // _('CoefficientPrixCessionHT').value = response.data.CoefficientPrixCessionHT
                        _('IDAGENCE').value = IDAGENCE
                        _('inpAdresseAgence').value = response.data.AdresseAgence
                        _('inpContactAgence').value = response.data.ContactAgence

                        $('#modalFicheAgence').modal('show')
                    }
                }
                ,error : function(error) {

                    console.log(error)
                }
            })
        })

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

            let formulaire = new FormData(_('formAgence'))
            formulaire.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url : "{{ route('editAgence')}}",
                type : 'POST',
                data : formulaire,
                processData: false,
                contentType: false,
                dataType : 'json',
                beforeSend: progressHandler(),
                success : function(response){
                    completeHandler()
                    if (response.success == 0) {

                        notifError(response.msg)
                    }else if(response.success == 1) {

                        notif(
                            "danger",
                            "Erreur",
                            "Ce nom d'agence est déjà attribué"
                        )
                    }else if(response.success == 2) {

                        notif(
                            "danger",
                            "Erreur",
                            "Ce code d'agence est déjà attribué"
                        )
                    }else if(response.success == 3) {

                        notif(
                            "success",
                            "Succès",
                            "Agence modifiée"
                        )

                        chargerTableAgence()
                        $('#modalFicheAgence').modal('hide')
                    }
                }
                ,error : function(error) {

                    console.log(error)
                }
            })
        })
    </script>

    <!-- Script de suppression d'agence -->
    <script>

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

            let IDAGENCE = $(this).attr('data-id')

            Swal.fire({

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

                }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

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

                            IDAGENCE : IDAGENCE,
                            _token : '{{ csrf_token() }}'
                        },
                        dataType : 'json',
                        success : function(response){

                            if (response.success == 0) {

                                notifError(response.msg)
                            }else if(response.success == 1) {

                                notif('danger', 'Erreur', 'Suppression impossible, l\'agence sélectionnée a des relations dans le système')
                            }else if(response.success == 2) {

                                notif('success', 'Succès', 'Suppression éffectuée')
                                chargerTableAgence()
                            }
                        }
                        ,error : function(error) {

                            console.log(error)
                        }
                    })
                }
            })
        })

       
        $(document).on('click','#btn-export-excel-agence',function(){
            var data =  remplissage_avec_data_columns_DataTable('tableAgence')
            const filename =file_name("AGENCE");
            download_excel_file('/export_global_excel', data, filename,['Actions'])
        })
    </script>
@endsection