@extends('models')
@section('titre-page', 'Tournée')
@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-6 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">Tournée</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-6 col-md-8">
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-success-light btn-wave d-flex me-1" id="btn-export-tournee-excel">
                            <i  class=" ri ri-file-excel-2-line me-1"></i>Exporter
                        </button>
                        <button type="button" class="btn btn-secondary-light btn-wave d-flex" id="bntModalNewTournee">
                            <i class=" ri ri-add-circle-line me-1"></i>Nouvelle tournée
                        </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 tablehover text-nowrap w-100" id="tableTournee">
                            <thead class="table-header-primary">
                                <tr>
                                    <td colspan="2" class="bg-white"></td>
                                    <td colspan="3" class="text-center text-light bg-success">MATIN</td>
                                    <td colspan="3" class="text-center text-light bg-info">SOIR</td>
                                    <td colspan="3" class="text-center text-light bg-danger">NUIT</td>
                                </tr>
                                <tr>
                                    <th data-orderable="false">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">Tournée</th>
                                    <th class="text-center colTable">Heure d'appel</th>
                                    <th class="text-center colTable">Heure de départ</th>
                                    <th class="text-center colTable">Ordre</th>
                                    <th class="text-center colTable">Heure d'appel</th>
                                    <th class="text-center colTable">Heure de départ</th>
                                    <th class="text-center colTable">Ordre</th>
                                    <th class="text-center colTable">Heure d'appel</th>
                                    <th class="text-center colTable">Heure de départ</th>
                                    <th class="text-center colTable">Ordre</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <div class="modal fade" id="modalFicheTournee" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalTournee">Nouvelle tournee</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formTournee">
                        <div class="row">
                            <div class="col-xl-3 d-flex">
                                <div class="card custom-card flex-fill">
                                    <div class="card-body">
                                        <input type="number" style="display:none" id="IDTOURNEE" name="IDTOURNEE">
                                        <div class="mb-2 mt-4 pt-1">
                                            <p class="mb-0 text-muted">Site :</p>
                                            <select name="IDAGENCE" id="IDAGENCE" class="form-select"></select>
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Nom de la tournée :</p>
                                            <input type="text" class="form-control text-uppercase" id="LibelleTournee" name="LibelleTournee">
                                        </div>
                                        <div>
                                            <p class="text-muted mb-0">Type tournée</p>
                                            <select name="TypeTournee" id="selTypeTournee" class="form-select">
                                                <option value="1">NORMALE</option>
                                                <option value="2">GARDE</option>
                                                <option value="3">SAS</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 d-flex">
                                <div class="card custom-card flex-fill">
                                    <div class="bg-success text-center py-1 text-light">
                                        MATIN
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Heure d'appel :</p>
                                            <input type="time" class="form-control text-center" id="HeureAppelTournee1" name="HeureAppelTournee1">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Heure de départ :</p>
                                            <input type="time" class="form-control text-center" id="HeureDepartTournee1" name="HeureDepartTournee1">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Ordre :</p>
                                            <input type="number" class="form-control text-center" id="OrdreTourneeMatin" name="OrdreTourneeMatin">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 d-flex">
                                <div class="card custom-card flex-fill">
                                    <div class="bg-info text-center py-1 text-light">
                                        SOIR
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Heure d'appel :</p>
                                            <input type="time" class="form-control text-center" id="HeureAppelTournee2" name="HeureAppelTournee2">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Heure de départ :</p>
                                            <input type="time" class="form-control text-center" id="HeureDepartTournee2" name="HeureDepartTournee2">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Ordre :</p>
                                            <input type="number" class="form-control text-center" id="OrdreTourneeSoir" name="OrdreTourneeSoir">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 d-flex">
                                <div class="card custom-card flex-fill">
                                    <div class="bg-danger text-center py-1 text-light">
                                        NUIT
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Heure d'appel :</p>
                                            <input type="time" class="form-control text-center" id="HeureAppelTournee3" name="HeureAppelTournee3">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Heure de départ :</p>
                                            <input type="time" class="form-control text-center" id="HeureDepartTournee3" name="HeureDepartTournee3">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Ordre :</p>
                                            <input type="number" class="form-control text-center" id="OrdreTourneeNuit" name="OrdreTourneeNuit">
                                        </div>
                                    </div>
                                </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="btnNewTournee"><i class="bx bx-plus fs-6 me-1"></i>Ajouter</button>
                    <button type="button" class="btn btn-warning" id="btnEditTournee"><i class="bx bx-edit fs-6 me-1"></i>Modifier</button>
                </div>
            </div>
        </div>
    </div>

    
    <div class="modal fade" id="modalClientAndOrder" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalTournee">Liste des clients de la tournée</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="number" id="inpIDTOURNEEModalClientAndOrder" style="display : none;">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100" id="tableClientAndOrder">
                            <thead class="table-header-primary">
                                <tr>
                                    <!-- <th data-orderable="false" data-column="checkOption">#</th> -->
                                    <th data-width="40" class="text-center colTable" data-column="inpNumeroTourne">Ordre</th>
                                    <th class="text-center colTable" data-column="NomClient">Client</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        ignoreGlobalSessionUpdate = true

        function chargerSelectAgence() {

            $.ajax({

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

                    $('#IDAGENCE').html('')

                    $.each(response.data, function(key, value) {

                        $('#IDAGENCE').append('<option value="'+value["IDAGENCE"]+'">'+value["NomAgence"]+'</option>')
                    })
                }
            })
        }

        function chargerTableTournee(){

            $.ajax({

                url: '{{ route("listingTournee") }}',
                type: 'GET',
                data : {
                    IDAGENCE : _('idSiteEnCours').value,
                    TypeTournee : $('[name="checkTypeTournee"]:checked').val() ?? 1
                },
                beforeSend : progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success != 1) {
                        
                        notif('danger', 'Erreur', response.msg || 'Échec de l\'opération.')
                        completeHandler()
                        return 0
                    }

                    let obj = response.data

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

                        bFilter: true,
                        language: languageTable,
                        pageLength: 25,
                        lengthChange: false,
                        "data": obj,
                        'columns': [

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'LibelleTournee'
                            },
                            {
                                data: 'HeureAppelTournee1Format',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureDepartTournee1Format',
                                className: 'text-center'
                            },
                            {
                                data: 'OrdreTourneeMatin',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureAppelTournee2Format',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureDepartTournee2Format',
                                className: 'text-center'
                            },
                            {
                                data: 'OrdreTourneeSoir',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureAppelTournee3Format',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureDepartTournee3Format',
                                className: 'text-center'
                            },
                            {
                                data: 'OrdreTourneeNuit',
                                className: 'text-center'
                            }
                        ]
                    })

                    divShowPer = $('#tableTournee_filter').parent()
                    divShowPer.removeClass('col-md-6')
                    divShowPer.addClass('col-md-3')

                    // Division des valeur totales
                    BroDivShowPer = divShowPer.prev()
                    BroDivShowPer.removeClass('col-md-6')
                    BroDivShowPer.addClass('d-flex col-md-9 pt-2')
                    BroDivShowPer.prepend('<div class="form-check me-3">\
                                                <input class="form-check-input" type="radio" value="1" name="checkTypeTournee"\
                                                    id="checkTypeTournee1">\
                                                <label class="form-check-label" for="checkTypeTournee1">\
                                                    Normale\
                                                </label>\
                                            </div>\
                                        ')
                    BroDivShowPer.append('<div class="form-check me-3">\
                                                <input class="form-check-input" type="radio" value="2" name="checkTypeTournee"\
                                                    id="checkTypeTournee2">\
                                                <label class="form-check-label" for="checkTypeTournee2">\
                                                    Garde\
                                                </label>\
                                            </div>\
                                        ')
                    BroDivShowPer.append('<div class="form-check">\
                                                <input class="form-check-input" type="radio" value="3" name="checkTypeTournee"\
                                                    id="checkTypeTournee3">\
                                                <label class="form-check-label" for="checkTypeTournee3">\
                                                    SAS\
                                                </label>\
                                            </div>\
                                        ')

                  

                    _('checkTypeTournee'+response.TypeTournee).checked = true
                    completeHandler()

                },
                error : function(){

                    notif('danger', 'Erreur', 'Échec de l\'opération.')
                    completeHandler()
                }
            })
        }

        chargerTableTournee()
        chargerSelectAgence()

        $(document).on('change', '[name="checkTypeTournee"]', function(){

            chargerTableTournee()            
        })
    </script>

    <!-- Script de changement de site -->
    <script>

        _('idSiteEnCours').addEventListener('change', function(){

            $.ajax({

                url: '{{ route('modifierSessionSite') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    IDAGENCE: _('idSiteEnCours').value,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(response) {

                    chargerTableTournee()
                    completeHandler()
                }
            })    
        })
    </script>

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

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

            // _('IDTOURNEE').value = ''
            // _('IDAGENCE').value = 1
            // _('LibelleTournee').value = ''
            // _('HeureAppelTournee1').value = ''
            // _('HeureDepartTournee1').value = ''
            // _('OrdreTourneeMatin').value = ''
            // _('HeureAppelTournee2').value = ''
            // _('HeureDepartTournee2').value = ''
            // _('OrdreTourneeSoir').value = ''
            // _('HeureAppelTournee3').value = ''
            // _('HeureDepartTournee3').value = ''
            // _('OrdreTourneeNuit').value = ''

            _('formTournee').reset()
            _('IDAGENCE').value = 1

            _('btnNewTournee').style.display = ''
            _('btnEditTournee').style.display = 'none'
            _('titleModalTournee').innerHTML = 'Nouvelle tournée'
            
            $('#modalFicheTournee').modal('show')
        })

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

            if(_('IDAGENCE').value == 1){

                notif('danger', 'Erreur', 'Veuillez sélectionner une agence valide')
                return 0
            }

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

            $.ajax({

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

                    if (response.success == 0) {

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

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

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

                        chargerSelectAgence()
                        chargerTableTournee()
                        $('#modalFicheTournee').modal('hide')
                    }
                }
                ,error : function(error) {

                    console.log(error)
                }
            })
        })

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

            $('#selTypeTournee').val($('[name="checkTypeTournee"]:checked').val()).trigger('change')
        })

    </script>

    <!-- Script de modification de tournee -->
    <script>

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

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

            $.ajax({

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

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

                    if (response.success == 0) {

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

                        _('IDTOURNEE').value = response.data.IDTOURNEE
                        _('IDAGENCE').value = response.data.IDAGENCE
                        _('LibelleTournee').value = response.data.LibelleTournee
                        _('HeureAppelTournee1').value = response.data.HeureAppelTournee1
                        _('HeureDepartTournee1').value = response.data.HeureDepartTournee1
                        _('OrdreTourneeMatin').value = response.data.OrdreTourneeMatin
                        _('HeureAppelTournee2').value = response.data.HeureAppelTournee2
                        _('HeureDepartTournee2').value = response.data.HeureDepartTournee2
                        _('OrdreTourneeSoir').value = response.data.OrdreTourneeSoir
                        _('HeureAppelTournee3').value = response.data.HeureAppelTournee3
                        _('HeureDepartTournee3').value = response.data.HeureDepartTournee3
                        _('OrdreTourneeNuit').value = response.data.OrdreTourneeNuit

                        _('btnNewTournee').style .display = 'none'
                        _('btnEditTournee').style .display = ''
                        _('titleModalTournee').innerHTML = 'Modifier la tournée'

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

                    console.log(error)
                }
            })
        })

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

            if(_('IDAGENCE').value == 1){

                notif('danger', 'Erreur', 'Veuillez sélectionner un site valide')
                return 0
            }

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

            $.ajax({

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

                    if (response.success == 0) {

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

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

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

                        chargerTableTournee()
                        $('#modalFicheTournee').modal('hide')
                    }
                }
                ,error : function(error) {

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

    <!-- Modifier l'ordre des tournées -->
    <script>

        var dataTableClientAndOrder = []

        function listeClientAndOrder(IDTOURNEE){

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

                $.ajax({

                    url : "{{ route('listeClientAndOrder') }}",
                    type : 'GET',
                    data : {
                        IDTOURNEE : IDTOURNEE
                    },
                    dataType : 'json',
                    success : function(response){

                        if (response.success != 1) {
                            
                            notif('danger', 'Erreur', response.msg || 'Échec de l\'opération.')
                        }

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

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

        function chargerTableClientAndOrder(){
            
            tableClientAndOrder = remplissageDataTable({
                                                        IdentifiantDuTableau : '#tableClientAndOrder',
                                                        obj : dataTableClientAndOrder,
                                                        scrollY : '350px'
                                                    })
        }

        function editNumeroOrdreTournee(IDCLIENT, NumeOrdreTourne){

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

                $.ajax({

                    url : "{{ route('editNumeroOrdreTournee') }}",
                    type : 'POST',
                    data : {
                        IDCLIENT : IDCLIENT,
                        NumeOrdreTourne : NumeOrdreTourne,
                        IDTOURNEE : _('inpIDTOURNEEModalClientAndOrder').value,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    success : function(response){

                        if (response.success == 0) {
                            
                            notif('danger', 'Erreur', response.msg || 'Échec de l\'opération.')
                        }

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

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

        $(document).on('focus', '.inpNumeroTourne', function(){

            this.select()
        })

        $(document).on('blur', '.inpNumeroTourne', function(){

            let IDCLIENT = $(this).attr('data-id')
            let NumeOrdreTourne = this.value

            editNumeroOrdreTournee(IDCLIENT, NumeOrdreTourne)
                .then((response) => {

                    if (response.success == 1) {
                        
                        listeClientAndOrder(_('inpIDTOURNEEModalClientAndOrder').value)
                            .then((response) => {

                                dataTableClientAndOrder = []

                                if (response.success == 1) {
                                    
                                    dataTableClientAndOrder = response.data
                                }

                                chargerTableClientAndOrder()
                            })
                    }
                })
        })

        // _('inpNumeroTourne').addEventListener('focus', function(){


        // })

        // Ouverture de la modal des ordres de tournée
        $(document).on('click', '#btnOrderTournee', function(){

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

            _('inpIDTOURNEEModalClientAndOrder').value = IDTOURNEE

            listeClientAndOrder(IDTOURNEE)
                .then((response) => {

                    dataTableClientAndOrder = []

                    if (response.success == 1) {
                        
                        dataTableClientAndOrder = response.data
                    }
                })

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

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

            progressHandler()
            await chargerTableClientAndOrder()
            completeHandler()
        })

        $(document).on('click', '.checkNumeroTourne', function(e){

            elmt = this.checked
            let NumeOrdreTourne = this.value

            if (elmt == true) {

                _('inpNumeOrdreTourne').value = NumeOrdreTourne

                let lignes = tableClientAndOrder.rows().nodes()

                $.each($(lignes).find('.checkNumeroTourne'), function(key, value){

                    value.checked = false
                })
            }

            this.checked = elmt
        })
    </script>

    <!-- Script de suppression de tournee -->
    <script>

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

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

            Swal.fire({

                title : 'Attention !',
                text: 'Êtes-vous sûrs De vouloir supprimer cette tournée ?',
                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("suppTournee")}}',
                        type : 'POST',
                        data : {

                            IDTOURNEE : IDTOURNEE,
                            _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, la tournée sélectionnée a des relations dans le système')
                            }else if(response.success == 2) {

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

                            console.log(error)
                        }
                    })
                }
            })
        })
          
        $(document).on('click','#btn-export-tournee-excel',function(){
            const filename = file_name("TOURNEE");
            const targetHeaders = [];
            const excludedHeaders = ['Actions'];
            exportTableToExcelAVec_JS('tableTournee',excludedHeaders,targetHeaders,filename);
        })
        
    </script>
@endsection