@extends('models')
@section('titre-page', 'Laboratoire')
@section('content-body')

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

<div class="row mt-xl-2">
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row">
                        <div class="row p-0 m-0 d-flex align-items-center my-2">
                            <div class="offset-xl-4 offset-lg-6 col-xl-8 col-lg-6 pe-0 d-flex justify-content-end align-items-center">

                                <a class="btn btn-success " id="newLaboratoire" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-success"
                                    data-bs-placement="top" title="Nouveau laboratoire">
                                    <i class='bx bxs-check-circle'></i>
                                    Valider
                                </a>
                                <a class="btn btn-warning" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-warning"
                                    data-bs-placement="top" title="Modifier le laboratoire" id="btnEditLaboratoire" style="display:none;">
                                    <span class="bx bxs-edit" style="font-size:16px;">
                                        Modifier
                                    </span>
                                </a>
                                <a class="btn btn-danger ms-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-dark"
                                    data-bs-placement="bottom" title="Annuler l'opération" id="annulerModifLaboratoire">
                                    <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                    Annuler
                                </a>
                            </div>
                        </div>
                    </div>
                    <form id="formLaboratoire">
                        <div class="row mb-2">
                            <div class="">
                                <p class="text-muted mb-0">Nom du laboratoire</p>
                                <input type="text" class="form-control text-uppercase" id="NomLaboratoire" name="NomLaboratoire">
                                <input type="number" class="form-control" id="IDLABORATOIRE" name="IDLABORATOIRE" style="display:none;">
                            </div>
                        </div>
                    </form>
                    <div class="table responsive">
                        <table id="tableLaboratoire" class="table table-striped w-100 tablehover">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-light">Action</th>
                                    <th class="text-center text-light">Laboratoire</th>
                                    <th class="text-center text-light">Modifié le</th>
                                    <th class="text-center text-light">Créé le</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-xl-6 d-flex">
            <div class="card custom-card">
                <div class="card-body">

                </div>
            </div>
        </div> --}}
    </div>
</div>
@endsection
@section('script')

    <!-- Script exécuté au chargement de la page -->
    <script>


        function chargerTableLaboratoire(){

            $.ajax({

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

                    let obj = response.data

                    $("#tableLaboratoire").DataTable().destroy()
                    tableLaboratoire = $("#tableLaboratoire").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: 15,
                        lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                        lengthChange: true,
                        "data": obj,
                        'columns': [

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'NomLaboratoire'
                            },
                             {
                                data: 'CreeLe',
                                className: 'text-center'
                            },
                             {
                                data: 'ModifieLe',
                                className: 'text-center'
                            }
                        ]
                    })

                    completeHandler()
                }
            })
        }

        window.addEventListener('load', function() {
            chargerTableLaboratoire()
        })
    </script>

    <!-- Script -->
    <script>

        // // Script de modification
        $(document).on('click', '#editLaboratoire', function(){

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

            $.ajax({

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

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

                    _('NomLaboratoire').value = response.data.NomLaboratoire
                    _('IDLABORATOIRE').value = response.data.IDLABORATOIRE

                    _('newLaboratoire').style.display = 'none'
                    _('btnEditLaboratoire').style.display = ''
                }
            })
        })

        // Annuler les opération
        _('annulerModifLaboratoire').addEventListener('click', function(){

            _('NomLaboratoire').value = ''
            _('IDLABORATOIRE').value = ''

            _('newLaboratoire').style.display = ''
            _('btnEditLaboratoire').style.display = 'none'
        })

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

            if (_('IDLABORATOIRE').value == 0) {

                notif('danger', 'Erreur', 'VEUILLEZ SÉLECTIONNER UN LABORATOIRE')
                _('annulerModifLaboratoire').click()
                return 0
            }

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

                notif('danger', 'Erreur', 'SAISIR UN NOM DE LABORATOIRE')
                _('NomLaboratoire').focus()
                return 0
            }

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

            $.ajax({

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

                    if (response.success == 2) {

                        _('annulerModifLaboratoire').click()
                        chargerTableLaboratoire()
                        notif('success', 'Succès', 'LABORATOIRE MODIFIÉE')
                    } else if(response.success == 1){

                        notif('danger', 'Erreur', 'CE NOM DE LABORATOIRE EST DEJA ATTRIBUÉ')
                    } else {

                        notifError(response.msg)
                    }

                    completeHandler()
                }
            })
        })

        // Script d'ajout de laboratoire
        _('newLaboratoire').addEventListener('click', function(){

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

                notif('danger', 'Erreur', 'SAISIR UN NOM DE ZONE DE STOCKAGE')
                _('NomLaboratoire').focus()
                return 0
            }

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

            $.ajax({

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

                    if (response.success == 2) {

                        _('annulerModifLaboratoire').click()

                        chargerTableLaboratoire()
                        notif('success', 'Succès', 'LABORATOIRE AJOUTÉE')
                    } else if(response.success == 1){

                        notif('danger', 'Erreur', 'CE NOM DE LABORATOIRE EST DEJA ATTRIBUÉ')
                    } else {

                        notifError(response.msg)
                    }

                    completeHandler()
                }
            })
        })

        // Script de suppréssion
        $(document).on('click', '#supLaboratoire', function(){

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

        Swal.fire({

            title: 'Êtes-vous sûrs ?',
            text: "De vouloir supprimer ce laboratoire !",
            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('suppLaboratoire') }}',
                        type: 'POST',
                        data: {

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

                            if (response.success == 2) {

                                _('annulerModifLaboratoire').click()

                                chargerTableLaboratoire()
                                notif('success', 'Succès', 'SUPPRESSION ÉFFECTUÉE')
                            } else if(response.success == 1) {

                                notif('danger', 'Erreur', 'SUPPRESSION IMPOSSIBLE, LE LABORATOIRE SÉLECTIONNÉ A DES RELATIONS DANS LE SYSTEME')
                            }else{

                                notifError(response.msg)
                            }
                        }
                    })
                }
            })
        })
    </script>
@endsection