@extends('models')
@section('titre-page', 'Magasins de Stockage, RACKS & Emplacements')
@section('content-body')
    <style>
        .ellipsis {

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <!-- 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);">Parametrages</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Magasins de Stockage, RACKS & Emplacements
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row mt-xl-2">
        <div class="row">
            <div class="col-xl-12 d-flex">
                <div class="card custom-card flex-fill">
                    <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="newZoneStockage" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-success" data-bs-placement="top"
                                        title="Nouvelle zone de stckage">
                                        <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 la zone de stockage" id="btnEditZoneStockage" 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="annulerModifZoneStockage">
                                        <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                        Annuler
                                    </a>
                                </div>
                            </div>
                        </div>
                        <form id="formZoneStockage">
                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="row">
                                        <div class="col-xl-8">
                                            <p class="text-muted mb-0">Nom de la zone de stockage</p>
                                            <input type="text" class="form-control text-uppercase" id="NomZoneStockage"
                                                name="NomZoneStockage">
                                            <input type="text" class="form-control" id="inpIDZONESTOCKAGE" name="IDZONESTOCKAGE" style="display : none;">
                                        </div>
                                        <div class="col-xl-4">
                                            <p class="text-muted mb-0">Code</p>
                                            <input type="text" class="form-control text-uppercase" id="codeZone"
                                                name="codeZone">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2">
                                    <p class="text-muted mb-0">Type zone de stockage</p>
                                    <select class="form-select" name="typeZoneStockage" id="typeZoneStockage">

                                        <option value="1">NORMAL</option>
                                        <option value="2">FROID</option>
                                        <option value="3">SOUS CLE</option>
                                        <option value="4">LAIT ET FARINE</option>
                                    </select>
                                </div>
                                <div class="col-xl-2 pt-3">
                                    <div class="card pt-0" style="height:35px;">
                                        <div class="card-body d-flex pt-2">
                                            <div class="d-flex justify-content-center align-items-center flex-wrap">
                                                <div class="custom-toggle-switch toggle-sm mx-0 d-flex align-items-center">
                                                    <input id="GestionParColisage" name="GestionParColisage"
                                                        type="checkbox">
                                                    <label for="GestionParColisage" class="label-success mt-1"></label><span
                                                        class="mx-0 d-flex text-muted mb-0 ellipsis">G. colisage</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 pt-3">
                                    <div class="card pt-0" style="height:35px;">
                                        <div class="card-body d-flex pt-2">
                                            <div class="d-flex justify-content-center align-items-center flex-wrap">
                                                <div class="custom-toggle-switch toggle-sm mx-0 d-flex align-items-center">
                                                    <input id="checkReservePrincipale" name="ReservePrincipale"
                                                        type="checkbox">
                                                    <label for="checkReservePrincipale"
                                                        class="label-success mt-1"></label><span
                                                        class="mx-0 d-flex text-muted mb-0 ellipsis">Réserve
                                                        principale</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 pt-3">
                                    <div class="card pt-0" style="height:35px;">
                                        <div class="card-body d-flex pt-2">
                                            <div class="d-flex justify-content-center align-items-center flex-wrap">
                                                <div class="custom-toggle-switch toggle-sm mx-0 d-flex align-items-center">
                                                    <input id="checkDeballePrincipale" name="DeballePrincipal"
                                                        type="checkbox">
                                                    <label for="checkDeballePrincipale"
                                                        class="label-success mt-1"></label><span
                                                        class="mx-0 d-flex text-muted mb-0 ellipsis">Déballé
                                                        principal</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-2 pt-1">
                                    <div class="card pt-0" style="height:35px;">
                                        <div class="card-body d-flex pt-2">
                                            <div class="d-flex justify-content-center align-items-center flex-wrap">
                                                <div class="custom-toggle-switch toggle-sm mx-0 d-flex align-items-center">
                                                    <input id="checkZoneStockageQuarantaine" name="ZoneStockageQuarantaine" type="checkbox">
                                                    <label for="checkZoneStockageQuarantaine"
                                                        class="label-success mt-1"></label><span
                                                        class="mx-0 d-flex text-muted mb-0 ellipsis">Zone quarantaine</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="table-responsive">
                            <table id="tableZoneStockage" 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 ellipsis">Code Zone</th>
                                        <th class="text-center text-light ellipsis">Zone de stockage</th>
                                        <th class="text-center text-light ellipsis">Type</th>
                                        <th class="text-center text-light">G. colisage</th>
                                        <th class="text-center text-light" title="Deballe principal">Réserve principal</th>
                                        <th class="text-center text-light" title="Reserve principal">Déballé principal</th>
                                        <th class="text-center text-light">Quarantaine</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 d-flex">
                <div class="card custom-card flex-fill">
                    <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="newRACK" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-success" data-bs-placement="top"
                                        title="Nouvelle RACK">
                                        <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 RACK" id="btnEditRACK" 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="annulerModifRACK">
                                        <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                        Annuler
                                    </a>
                                </div>
                            </div>
                        </div>
                        <form id="formRACK">
                            <div class="row">
                                <div class="col-12 mb-1">
                                    <p class="text-muted mb-0">Reférence de la RACK ou de l'étagère</p>
                                    <input type="text" class="form-control text-uppercase" id="NomRack"
                                        name="NomRack">
                                    <input type="number" class="form-control" id="IDRACK" name="IDRACK"
                                        style="display:none;">
                                </div>
                            </div>
                        </form>
                        <div class="mt-3">
                            <table id="tableRack" 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 ellipsis" id="titleColRack">Racks et étagère
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 d-flex">
                <div class="card custom-card flex-fill">
                    <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="newEMPLACEMENT" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-success" data-bs-placement="top"
                                        title="Nouvel emplacement">
                                        <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 l'emplacement" id="btnEditEMPLACEMENT"
                                        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="annulerModifEMPLACEMENT">
                                        <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                        Annuler
                                    </a>
                                </div>
                            </div>
                        </div>
                        <form id="formEMPLACEMENT">
                            <div class="row">
                                <div class="col-12">
                                    <p class="text-muted mb-0">Nom emplacement</p>
                                    <input type="text" class="form-control text-uppercase" id="NomEmplacement"
                                        name="NomEmplacement">
                                    <input type="number" class="form-control" id="IDEMPLACEMENT" name="IDEMPLACEMENT"
                                        style="display:none;">
                                </div>
                            </div>
                        </form>
                        <div class="mt-4">
                            <table id="tableEMPLACEMENT" class="table table-striped w-100 tablehover">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center text-light">
                                            <input class="form-check-input me-4" type="checkbox" id="checkSelectAllEmpla">
                                            Action
                                        </th>
                                        <th class="text-center text-light ellipsis" id="titleEmplacement">Emplacement</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 d-flex">
                <div class="card custom-card flex-fill">
                    <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="newALLEE" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-success" data-bs-placement="top"
                                        title="Nouvelle allée">
                                        <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 l'allée" id="btnEditALLEE" style="display:none;">
                                        <i class="bx bxs-edit me-1" style="font-size:16px;"></i>Modifier
                                    </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="annulerModifALLEE">
                                        <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                        Annuler
                                    </a>
                                </div>
                            </div>
                        </div>
                        <form id="formALLEE">
                            <div class="row">
                                <div class="col-12">
                                    <p class="text-muted mb-0">Nom allée</p>
                                    <input type="text" class="form-control text-uppercase" id="NomAllee"
                                        name="NomAllee">
                                    <input type="number" class="form-control" id="IDALLEE" name="IDALLEE"
                                        style="display:none;">
                                </div>
                            </div>
                        </form>
                        <div class="mt-4">
                            <table id="tableALLEE" class="table table-striped w-100 tablehover">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th data-column="action" class="text-center text-light">Action</th>
                                        <th data-column="NomAllee" data-class="text-uppercase"
                                            class="text-center text-light ellipsis" id="titleAllee">Allée</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalFormatImpreEmpla" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" aria-hidden="true" data-bs-focus="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Format de l'impression</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>
                        <p class="text-muted mb-0">Format : </p>
                        <select class="form-select" name="formatEtiquetEmpla" id="selFormatEtiquetEmpla">
                            <option value="3">GRAND FORMAT</option>
                            <option value="2">MOYEN FORMAT</option>
                            <option value="1">PETIT FORMAT</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <button class="btn btn-warning-light w-100" id="btnImprimerListeEmplaSelect">
                        Imprimer
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')

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

        function chargerTableZoneStockage() {

            $.ajax({

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

                    let obj = response.data

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

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

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'CodeZoneStockage'
                            },
                            {
                                data: 'NomZoneStockageFormat'
                            },
                            {
                                data: 'TypeZoneStockage'
                            },

                            {
                                data: 'GestionParColisageCheck',
                                className: 'text-center'
                            },
                            {
                                data: 'checkReservePrincipal' 
                            },
                            {
                                data: 'checkDeballePrincipal'
                            },
                            {
                                data: 'checkZoneStockageQuarantaine'
                            }
                        ]
                    })
                }
            })
            completeHandler()
            chargerTableRack(0)
            generalIDZONESTOCKAGE = 0
            generalIDRACK = 0
        }
        window.addEventListener('load', function() {
            chargerTableZoneStockage()
        })

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

            confirmMdp('{{ csrf_token() }}', () => {
                var id = $(this).data('id')
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('zone_stockage.delete') }}",
                    data: {
                        id_zone_stockage: id,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler,
                    dataType: "JSON",
                    success: function(resp) {
                        if (resp.verifTrue) {
                            notif('danger', 'Erreur', resp.msg)
                            completeHandler()
                            return false
                        }
                        notif('success', 'Succès', resp.msg)
                        chargerTableZoneStockage()
                        completeHandler()
                    },
                    error: function(xhr, status, error) {
                        notif('danger', 'Erreur', 'Une erreur s\'est produite')
                        completeHandler()
                    }
                });
            }, null)


        })
    </script>

    <!-- Script -->
    <script>
        _('idSiteEnCours').addEventListener('change', function() {

            chargerTableZoneStockage()
        })

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

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

            $.ajax({

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

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

                    _('NomZoneStockage').value = response.data.NomZoneStockage
                    _('inpIDZONESTOCKAGE').value = response.data.IDZONESTOCKAGE
                    _('codeZone').value = response.data.CodeZoneStockage
                    _('GestionParColisage').checked = response.data.GestionParColisage
                    _('checkDeballePrincipale').checked = response.data.DeballePrincipal
                    _('checkReservePrincipale').checked = response.data.ReservePrincipale
                    _('checkZoneStockageQuarantaine').checked = response.data.ZoneStockageQuarantaine
                    $('#typeZoneStockage').val(response.data.TypeZoneStockage)
                    _('newZoneStockage').style.display = 'none'
                    _('btnEditZoneStockage').style.display = ''
                }
            })
        })

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

            _('NomZoneStockage').value = ''
            _('inpIDZONESTOCKAGE').value = ''
            _('codeZone').value = ''
            _('GestionParColisage').checked = false
            _('checkDeballePrincipale').checked = false
            _('checkReservePrincipale').checked = false
            _('checkZoneStockageQuarantaine').checked = false

            _('newZoneStockage').style.display = ''
            _('btnEditZoneStockage').style.display = 'none'
        })

        function editZoneStockage(){

            let formZoneStockage = new FormData(_('formZoneStockage'))
            formZoneStockage.append('IDAGENCE', _('idSiteEnCours').value)
            formZoneStockage.append('_token', '{{ csrf_token() }}')

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifZoneStockage').click()

                        chargerTableZoneStockage()
                        notif('success', 'Succès', 'Zone de stockage modifié !!')

                    } else {

                        notif('danger', 'Erreur', response.msg ||
                            'Ce libelle statut et/ou ce code a déjà été attribué !!')
                    }

                    completeHandler()
                },
                error : function(){

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

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

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

                notif('danger', 'Erreur', 'Veuillez sélectionner une zone de stockage !!')
                _('annulerModifZoneStockage').click()
                return 0
            }

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

                notif('danger', 'Erreur', 'Veuillez saisir une nom de zone de stockage !!')
                _('NomZoneStockage').focus()
                return 0
            }

            if (_('checkDeballePrincipale').checked == true && _('checkReservePrincipale').checked == true) {

                notif('danger', 'Erreur',
                    'Une zone de stockage ne peut être déballé principal et reserve principale')
                return 0
            }

            if ($('#typeZoneStockage').val() == 0) {

                notif('danger', 'Erreur', 'Veuillez selectionner un type de zone de stockage')
                return false
            }

            if (document.querySelector('[name="ZoneStockageQuarantaine"]').checked) {
                
                Swal.fire({

                    title : 'Attention !',
                    text: 'Tous les lots de cette zone seront bloqués',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                    }).then((result) => {

                    if (result.isConfirmed) {

                        editZoneStockage()
                    }
                })

                return 0
            }

            editZoneStockage()
        })

        function newZoneStockage(){

            let formZoneStockage = new FormData(_('formZoneStockage'))
            formZoneStockage.append('_token', '{{ csrf_token() }}')
            formZoneStockage.append('IDAGENCE', _('idSiteEnCours').value)

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifZoneStockage').click()

                        chargerTableZoneStockage()
                        notif('success', 'Succès', 'Zone de stockage ajoutée !!')
                    } else {

                        let msg = response.msg ?? 'Cette zone de stockage a déjà été enregistrée !!'
                        notif('danger', 'Erreur', msg)
                    }

                    completeHandler()
                },
                error : function(){

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

        // Script d'ajout de zone de stockage
        _('newZoneStockage').addEventListener('click', function() {

            if (viderLesEspaces(_('NomZoneStockage').value) == '') {

                notif('danger', 'Erreur', 'Veuillez saisir le nom de la zone de stockage')
                _('NomZoneStockage').focus()
                return 0
            }

            if (viderLesEspaces(_('codeZone').value) == '') {

                notif('danger', 'Erreur', 'Veuillez saisir le code de la zone de stockage')
                _('codeZone').focus()
                return 0
            }

            if (document.querySelector('[name="ZoneStockageQuarantaine"]').checked) {
                
                Swal.fire({

                    title : 'Attention !',
                    text: 'Tous les lots de cette zone seront bloqués',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                    }).then((result) => {

                    if (result.isConfirmed) {

                        newZoneStockage()
                    }
                })

                return 0
            }

            newZoneStockage()
        })

        // Script de sélection de ligne de zone de stockage
        function chargerTableRack(generalIDZONESTOCKAGE) {

            $.ajax({

                url: '{{ route('listingRACK') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    _token: "{{ csrf_token() }}",
                    IDZONESTOCKAGE: generalIDZONESTOCKAGE
                },
                dataType: 'json',
                success: function(response) {

                    let obj = response.data

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

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

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'NomRackFormat'
                            }
                        ]
                    })
                }
            })
            progressHandler()
            chargerTableEMPLACEMENT(0)
            generalIDRACK = 0
        }

        chargerTableRack(0)

        $(document).on('dblclick', '#tableZoneStockage tbody tr', function() {

            let ligne = $(this);

            if (ligne.css('background-color') !== 'rgb(194, 224, 233)') {

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

                $.each(lignes, function(key, value) {

                    value.style.background = ''
                })

                ligne.css({
                    'background-color': '#C2E0E9'
                })

                generalIDZONESTOCKAGE = ligne.find('#editZoneStockage').attr('data-id')
                let NomZoneStockage = ligne.find('.NomZoneStockage')

                _('titleColRack').innerHTML = afficherPremiersCaracteres('Rack(s) Zone : ' + NomZoneStockage.html(),
                    25)
            } else {

                ligne.css({
                    'background-color': ''
                })
                generalIDZONESTOCKAGE = 0
                _('titleColRack').innerHTML = 'Racks et étagère'
                _('titleEmplacement').innerHTML = 'Emplacements'
            }

            chargerTableRack(generalIDZONESTOCKAGE)
        })

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

            _('NomRack').value = ''
            _('IDRACK').value = ''
            _('btnEditRACK').style.display = 'none'
            _('newRACK').style.display = ''
        })

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

            if (generalIDZONESTOCKAGE == null || generalIDZONESTOCKAGE == 0) {

                notif('danger', 'Erreur', 'Veuillez séllectionner une zone de stockage !!')
                return 0
            }

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

                notif('danger', 'Erreur', 'Veuillez saisir un nom de rack !!')
                _('NomRack').focus()
                return 0
            }

            let formRACK = new FormData(_('formRACK'))
            formRACK.append('_token', '{{ csrf_token() }}')
            formRACK.append('IDZONESTOCKAGE', generalIDZONESTOCKAGE)

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifRACK').click()

                        chargerTableRack(generalIDZONESTOCKAGE)
                        notif('success', 'Succès', 'Rack ajouté !!')
                    } else {

                        notif('danger', 'Erreur', 'Ce rack a déjà été enregistré !!')
                    }
                }
            })
        })

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

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

            $.ajax({

                url: '{{ route('infoRACK') }}',
                type: 'POST',
                data: {
                    IDRACK: IDRACK,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        _('IDRACK').value = response.data.IDRACK
                        _('NomRack').value = response.data.NomRack

                        _('btnEditRACK').style.display = ''
                        _('newRACK').style.display = 'none'
                    }
                }
            })
        })

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

            let formRACK = new FormData(_('formRACK'))
            formRACK.append('IDZONESTOCKAGE', generalIDZONESTOCKAGE)
            formRACK.append('_token', '{{ csrf_token() }}')

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifRACK').click()
                        chargerTableRack(generalIDZONESTOCKAGE)

                        notif('success', 'Succès', 'Rack modifié !!')
                    }
                },
                error: function(error) {

                    console.log(error)
                }
            })
        })

        // Script de sélection de ligne de RACK
        function chargerTableEMPLACEMENT(generalIDRACK) {

            $.ajax({

                url: '{{ route('listingEMPLACEMENT') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    _token: "{{ csrf_token() }}",
                    IDRACK: generalIDRACK
                },
                dataType: 'json',
                success: function(response) {

                    let obj = response.data

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

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

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'NomEmplacement'
                            }
                        ]
                    })

                    divShowPer = $('#tableEMPLACEMENT_filter')
                    divShowPer.parent().removeClass('col-md-6')
                    divShowPer.parent().addClass('col-md-12')
                    divShowPer.prepend('<div class="d-flex"><i id="imprimerLesLignesCocheEmpla" class="bx bxs-printer text-warning me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelImprimerLesLignesCocheEmpla" class="fw-bold mt-2 me-1" style="cursor : pointer;">Imprimer les emplacements sélectionnés</span></div>')
                    divShowPer.addClass('d-flex justify-content-between')
                }
            })

            completeHandler()
        }

        chargerTableEMPLACEMENT(0)

        var tableALLEE

        chargerTableAllee(0)

        function chargerTableAllee(generalIDRACK) {

            $.ajax({

                url: '{{ route('listingAllee') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    _token: "{{ csrf_token() }}",
                    IDRACK: generalIDRACK
                },
                dataType: 'json',
                success: function(response) {

                    let data = response.data

                    tableALLEE = remplissageDataTable({
                        IdentifiantDuTableau: '#tableALLEE',
                        obj: data,
                        bFilter: false,
                        lengthChange: false,
                    })
                }
            })

            completeHandler()
        }

        $(document).on('dblclick', '#tableRack tbody tr', function() {

            let ligne = $(this);

            if (ligne.css('background-color') !== 'rgb(194, 224, 233)') {

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

                $.each(lignes, function(key, value) {

                    value.style.background = ''
                })

                ligne.css({
                    'background-color': '#C2E0E9'
                })

                generalIDRACK = ligne.find('#editRACK').attr('data-id')
                let NomRack = ligne.find('.NomRack').html()

                _('titleEmplacement').innerHTML = afficherPremiersCaracteres(('Emplt(s) Rack : ' + NomRack), 25)
                _('titleAllee').innerHTML = afficherPremiersCaracteres(('Allée(s) Rack : ' + NomRack), 25)
            } else {

                ligne.css({
                    'background-color': ''
                })
                generalIDRACK = 0

                _('titleEmplacement').innerHTML = 'Emplacements'
                _('titleAllee').innerHTML = 'Allée'
            }

            chargerTableEMPLACEMENT(generalIDRACK)
            chargerTableAllee(generalIDRACK)
        })

        //////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////   ALLEE   ////////////////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////

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

            _('NomAllee').value = ''
            _('IDALLEE').value = ''
            _('btnEditALLEE').style.display = 'none'
            _('newALLEE').style.display = ''
        })

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

            if (generalIDRACK == null || generalIDRACK == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner un rack !!')
                return 0
            }

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

                notif('danger', 'Erreur', 'Veuillez saisir un nom d\'allée !!')
                _('NomAllee').focus()
                return 0
            }

            let formALLEE = new FormData(_('formALLEE'))
            formALLEE.append('_token', '{{ csrf_token() }}')
            formALLEE.append('IDRACK', generalIDRACK)

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifALLEE').click()

                        chargerTableAllee(generalIDRACK)
                        notif('success', 'Succès', 'Allé ajoutée !!')
                    } else {

                        notif('danger', 'Erreur', 'Cette allé a déjà été enregistrée !!')
                    }
                }
            })
        })

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

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

            $.ajax({

                url: '{{ route('infoALLEE') }}',
                type: 'GET',
                data: {
                    IDALLEE: IDALLEE,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        _('IDALLEE').value = response.data.IDALLEE
                        _('NomAllee').value = response.data.NomAllee

                        _('btnEditALLEE').style.display = ''
                        _('newALLEE').style.display = 'none'
                    } else {

                        notif('danger', 'Erreur', response.msg || 'Échec de l\'opération !!')
                    }
                },
                error: function(error) {

                    notifError('Échec de l\'opération !!')
                }
            })
        })

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

            let formALLEE = new FormData(_('formALLEE'))
            formALLEE.append('IDRACK', generalIDRACK)
            formALLEE.append('_token', '{{ csrf_token() }}')

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifALLEE').click()
                        chargerTableAllee(generalIDRACK)

                        notif('success', 'Succès', 'Allée modifiée !!')
                    } else {

                        notif('danger', 'Erreur', response.msg || 'Échec de l\'opération !!')
                    }
                },
                error: function(error) {

                    notifError('Échec de l\'opération !!')
                }
            })
        })

        //////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////////   EMPLACEMENT   /////////////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////

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

            _('NomEmplacement').value = ''
            _('IDEMPLACEMENT').value = ''
            _('btnEditEMPLACEMENT').style.display = 'none'
            _('newEMPLACEMENT').style.display = ''
        })

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

            if (generalIDRACK == null || generalIDRACK == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner un rack !!')
                return 0
            }

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

                notif('danger', 'Erreur', 'Veuillez saisir un nom de rack !!')
                _('NomEmplacement').focus()
                return 0
            }

            let formEMPLACEMENT = new FormData(_('formEMPLACEMENT'))
            formEMPLACEMENT.append('_token', '{{ csrf_token() }}')
            formEMPLACEMENT.append('IDRACK', generalIDRACK)
            formEMPLACEMENT.append('IDZONESTOCKAGE', generalIDZONESTOCKAGE)
            formEMPLACEMENT.append('IDAGENCE', _('idSiteEnCours').value)

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifEMPLACEMENT').click()

                        chargerTableEMPLACEMENT(generalIDRACK)
                        notif('success', 'Succès', 'Emplacement ajouté !!')
                    } else {

                        notif('danger', 'Erreur', 'Cet emplacment a déjà été enregistrée !!')
                    }
                }
            })
        })

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

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

            $.ajax({

                url: '{{ route('infoEMPLACEMENT') }}',
                type: 'POST',
                data: {
                    IDEMPLACEMENT: IDEMPLACEMENT,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        _('IDEMPLACEMENT').value = response.data.IDEMPLACEMENT
                        _('NomEmplacement').value = response.data.NomEmplacement

                        _('btnEditEMPLACEMENT').style.display = ''
                        _('newEMPLACEMENT').style.display = 'none'
                    }
                }
            })
        })

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

            let formEMPLACEMENT = new FormData(_('formEMPLACEMENT'))
            formEMPLACEMENT.append('IDZONESTOCKAGE', generalIDZONESTOCKAGE)
            formEMPLACEMENT.append('IDRACK', generalIDRACK)
            formEMPLACEMENT.append('_token', '{{ csrf_token() }}')

            $.ajax({

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

                    if (response.success == 1) {

                        _('annulerModifEMPLACEMENT').click()
                        chargerTableEMPLACEMENT(generalIDRACK)

                        notif('success', 'Succès', 'Emplacement modifié !!')
                    }
                },
                error: function(error) {

                    console.log(error)
                }
            })
        })

        function imprimerEtiquetteEmplacement(data = {}) {

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: '{{ route('imprimerEtiquetteEmplacement') }}',
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success == 1) {

                            if (response.tablePDF.length > 0) {

                                response.tablePDF.forEach(function(value) {

                                    // Récupérez le PDF en base64 depuis la réponse
                                    var pdfBase64 = value;

                                    // Créez un objet blob à partir du PDF en base64
                                    var blob = b64toBlob(pdfBase64, 'application/pdf');

                                    // Créez un objet URL pour le blob
                                    var blobUrl = URL.createObjectURL(blob);

                                    // Créez une fenêtre d'impression avec l'URL du blob
                                    var printWindow = window.open(blobUrl);
                                    // printWindow.print();
                                })
                            }

                            resolve(response)

                        } else {

                            notifError(response.msg)
                        }

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

                        notifError(error.responseText);
                        completeHandler()
                    }
                })
            })
        }

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

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

            imprimerEtiquetteEmplacement({
                listeIDEMPLACEMENT: [IDEMPLACEMENT],
                format: 3,
                '_token': '{{ csrf_token() }}'
            })
        })

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

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

            imprimerEtiquetteEmplacement({
                listeIDEMPLACEMENT: [IDEMPLACEMENT],
                format: 2,
                '_token': '{{ csrf_token() }}'
            })
        })

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

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

            imprimerEtiquetteEmplacement({
                listeIDEMPLACEMENT: [IDEMPLACEMENT],
                format: 1,
                '_token': '{{ csrf_token() }}'
            })
        })

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

            let value = this.checked

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

            $(lignes).find('.checkSelectLigneEmpla').prop('checked', value)
        })

        function listeLigneEmplacementSelectionne() {

            let data = []

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

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

                if (value.checked == true) {
                    data.push(value.getAttribute('data-id'))
                }
            })
            return data
        }

        listeIDEMPLACEMENT = []

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

            $('#imprimerLesLignesCocheEmpla').click()
        })

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

            listeIDEMPLACEMENT = listeLigneEmplacementSelectionne()

            if(listeIDEMPLACEMENT.length == 0){

                notifDanger('Veuiller sélectionner les lignes à imprimer.')
                return 0
            }

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

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

            if(listeIDEMPLACEMENT.length == 0){

                notifDanger('Veuiller sélectionner les lignes à imprimer.')
                return 0
            }

            imprimerEtiquetteEmplacement({
                listeIDEMPLACEMENT: listeIDEMPLACEMENT,
                format: _('selFormatEtiquetEmpla').value,
                '_token': '{{ csrf_token() }}'
            })
        })

    </script>

    <!-- Script de modification de site -->
    <script>
        ignoreGlobalSessionUpdate = false

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

            modifierSessionSite()
                .then(() => {

                    location.reload()
                })
        })
    </script>
@endsection