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

                <div class="col-xl-3 col-md-8">
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary-light btn-wave d-flex" id="bntModalNewTourneeGarde">
                            <i class=" ri ri-add-circle-line me-1"></i>Nouvelle tournée garde
                        </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 w-100" id="tableTourneeGarde">
                            <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="modalFicheTourneeGarde" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalTourneeGarde">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="formTourneeGarde">
                        <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_GARDE" name="IDTOURNEE_GARDE">
                                        <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="LibelleTourneeGarde" name="LibelleTourneeGarde">
                                        </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="HeureAppelTourneeGarde1" name="HeureAppelTourneeGarde1">
                                        </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="HeureDepartTourneeGarde1" name="HeureDepartTourneeGarde1">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Ordre :</p>
                                            <input type="number" class="form-control text-center" id="OrdreTourneeMatinGarde" name="OrdreTourneeMatinGarde">
                                        </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="HeureAppelTourneeGarde2" name="HeureAppelTourneeGarde2">
                                        </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="HeureDepartTourneeGarde2" name="HeureDepartTourneeGarde2">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Ordre :</p>
                                            <input type="number" class="form-control text-center" id="OrdreTourneeSoirGarde" name="OrdreTourneeSoirGarde">
                                        </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="HeureAppelTourneeGarde3" name="HeureAppelTourneeGarde3">
                                        </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="HeureDepartTourneeGarde3" name="HeureDepartTourneeGarde3">
                                        </div>
                                        <div class="mb-2">
                                            <p class="mb-0 text-muted">Ordre :</p>
                                            <input type="number" class="form-control text-center" id="OrdreTourneeNuitGarde" name="OrdreTourneeNuitGarde">
                                        </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="btnNewTourneeGarde"><i class="bx bx-plus fs-6 me-1"></i>Ajouter</button>
                    <button type="button" class="btn btn-warning" id="btnEditTourneeGarde"><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 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 chargertableTourneeGarde(){

            $.ajax({

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

                    let obj = response.data

                    $("#tableTourneeGarde").DataTable().destroy()
                    tableTourneeGarde = $("#tableTourneeGarde").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: tableVide,

                            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: 'LibelleTourneeGarde'
                            },
                            {
                                data: 'HeureAppelTourneeGarde1Format',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureDepartTourneeGarde1Format',
                                className: 'text-center'
                            },
                            {
                                data: 'OrdreTourneeMatinGarde',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureAppelTourneeGarde2Format',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureDepartTourneeGarde2Format',
                                className: 'text-center'
                            },
                            {
                                data: 'OrdreTourneeSoirGarde',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureAppelTourneeGarde3Format',
                                className: 'text-center'
                            },
                            {
                                data: 'HeureDepartTourneeGarde3Format',
                                className: 'text-center'
                            },
                            {
                                data: 'OrdreTourneeNuitGarde',
                                className: 'text-center'
                            }
                        ]
                    })
                }
            })
        }

        chargertableTourneeGarde()
        chargerSelectAgence()
    </script>

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

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

            _('IDTOURNEE_GARDE').value = ''
            _('IDAGENCE').value = 1
            _('LibelleTourneeGarde').value = ''
            _('HeureAppelTourneeGarde1').value = ''
            _('HeureDepartTourneeGarde1').value = ''
            _('OrdreTourneeMatinGarde').value = ''
            _('HeureAppelTourneeGarde2').value = ''
            _('HeureDepartTourneeGarde2').value = ''
            _('OrdreTourneeSoirGarde').value = ''
            _('HeureAppelTourneeGarde3').value = ''
            _('HeureDepartTourneeGarde3').value = ''
            _('OrdreTourneeNuitGarde').value = ''
            _('btnNewTourneeGarde').style .display = ''
            _('btnEditTourneeGarde').style .display = 'none'
            _('titleModalTourneeGarde').innerHTML = 'Nouvelle tournée garde'

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

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

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

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

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

            $.ajax({

                url : '{{ route("ajouterTourneeGarde")}}',
                type : 'POST',
                data : formulaire,
                beforeSend : progressHandler(),
                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()
                        chargertableTourneeGarde()
                        $('#modalFicheTourneeGarde').modal('hide')
                    }

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

                    notifError(error)
                    completeHandler()
                }
            })
        })

    </script>

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

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

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

            $.ajax({

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

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

                    if (response.success == 0) {

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

                        _('IDTOURNEE_GARDE').value = response.data.IDTOURNEE_GARDE
                        _('IDAGENCE').value = response.data.IDAGENCE
                        _('LibelleTourneeGarde').value = response.data.LibelleTourneeGarde
                        _('HeureAppelTourneeGarde1').value = response.data.HeureAppelTourneeGarde1
                        _('HeureDepartTourneeGarde1').value = response.data.HeureDepartTourneeGarde1
                        _('OrdreTourneeMatinGarde').value = response.data.OrdreTourneeMatinGarde
                        _('HeureAppelTourneeGarde2').value = response.data.HeureAppelTourneeGarde2
                        _('HeureDepartTourneeGarde2').value = response.data.HeureDepartTourneeGarde2
                        _('OrdreTourneeSoirGarde').value = response.data.OrdreTourneeSoirGarde
                        _('HeureAppelTourneeGarde3').value = response.data.HeureAppelTourneeGarde3
                        _('HeureDepartTourneeGarde3').value = response.data.HeureDepartTourneeGarde3
                        _('OrdreTourneeNuitGarde').value = response.data.OrdreTourneeNuitGarde

                        _('btnNewTourneeGarde').style .display = 'none'
                        _('btnEditTourneeGarde').style .display = ''
                        _('titleModalTourneeGarde').innerHTML = 'Modifier la tournée garde'

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

                    console.log(error)
                }
            })
        })

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

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

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

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

            $.ajax({

                url : '{{ route("editTourneeGarde")}}',
                type : 'POST',
                data : formulaire,
                beforeSend : progressHandler(),
                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"
                        )

                        chargertableTourneeGarde()
                        $('#modalFicheTourneeGarde').modal('hide')
                    }
                    completeHandler()
                }
                ,error : function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        })
    </script>

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

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

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

            Swal.fire({

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

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

                                notif('success', 'Succès', 'Suppression éffectuée')
                                chargertableTourneeGarde()
                            }

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

                            notifError(error)
                            completeHandler()
                        }
                    })
                }
            })
        })
    </script>
@endsection