@extends('models')
@section('titre-page', 'Message sur BL')
@section('content-body')


    <!-- 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-4 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Prestation & outils</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Message sur BL</li>
                        </ol>
                    </nav>
                </div>

             
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row g-1">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0 pe-0">
                    <form id="form" class="w-100">
                        <div class="row g-1 w-100">                    
                            <div class="col-xl-2 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                 <select class="form-select Pselect2 AgenceListSelect" id="IDAGENCE" name="IDAGENCE" @disabled(checkIfDroit('DG_AccesMultiSite'))>
                                 </select>
                            </div>
                          
                            <div class="col-xl-3 col-md-3 mb-0">
                                <p class="mb-0 text-muted">Tournée&nbsp;:</p>
                                 <select class="Pselect2 form-select" id="tournee" name="">
                                </select>
                            </div>

                              <div class="col-xl-4 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Contenu&nbsp;:</p>
                                <textarea type="text" class="form-control text-center" name="contenuMessage" id="contenuMessage" rows="1.5"></textarea>
                                 <input type="hidden" class="form-control text-center"  id="hiddenIDMessage" value="0"/>
                            </div>

                            <div class="col-xl-3 col-md-12 mb-0 pt-1">
                                <button type="button" class="btn btn-primary-light btn-wave mt-2 float-end" id="btnSearchTable">
                                    <i class="ri-search-line" title="rechercher" style="font-size:13px; cursor:pointer;"></i>
                                </button>

                                 <button type="button" class="btn btn-danger-light btn-wave mt-2 me-2 float-end" id="btnSupprimerLigneCoche">
                                    <i class="bi bi-trash"  title="Supprimer les lignes sélectionnées" style="font-size:13px; cursor:pointer;"></i>
                                </button>

                                 <button type="button" class="btn btn-primary-light btn-wave mt-2 me-2 float-end" id="btnAnnuler">
                                    <i class="bi bi-x-circle" style="font-size:13px; cursor:pointer;"></i> Annuler
                                </button>
                                
                                 <button type="button" class="btn btn-secondary-light btn-wave mt-2 me-2 float-end" id="btnAjouter">
                                    <i class="bx bx-plus-circle" style="font-size:13px; cursor:pointer;"></i> Ajouter
                                </button>
                            </div>
                          
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto" id="tableModificationMessageBL" style="width:100%">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false" data-column="action">
                                        <input class="form-check-input me-4" style="width:15px;height:15px" type="checkbox" id="checkSelectAll">
                                    </th>
                                    <th class="colTable">Site</th>
                                    <th class="colTable">Tournée</th>
                                    <th class="colTable">Message</th>
                
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->


@endsection

@section('script')

<script>

$(document).ready(function () {
  
   $('#tableModificationMessageBL').DataTable({
        language:languageTable,
        columnDefs: [
                      { target: 3, className:'w-50' }
                    ]
    }); 

    listeAgence();
    listingComboTourneeClient('#tournee');
    chargerDonnees();

    var dataTournee = [];

    listingTournee().then(data => {
     dataTournee.push(data);
    }).catch(error => {
        console.error('Erreur :', error);
    });

    $('#btnAjouter').on('click', function (e) {
        e.preventDefault();
        let contenuMessage = $('#contenuMessage').val();
        let IDAGENCE = $('#IDAGENCE').val();
        let tournee = $('#tournee').val();
        let idMessage = $('#hiddenIDMessage').val();
        if (IDAGENCE == 1) {
            notif('danger','Erreur','Veuillez sélectionner une agence autre que "CENTRALE".')
            return;
        }

        if (tournee == 0) {
            notif('danger','Erreur','Veuillez sélectionner une tournée.')
            return;
        }

        $.ajax({
            url: '{{route("modification_message_bl.add")}}',
            method: 'POST',
            dataType: 'json',
            data: {
                contenuMessage,
                IDAGENCE,
                tournee,
                idMessage,
                _token: '{{ csrf_token() }}'
            },
            success: function (resp) {

                if (resp.succes == false) {
                    notif('danger','Erreur',resp.msg_error)
                    return;
                }
                chargerDonnees(null, 1);
                $('#contenuMessage').val('');
                $('#IDAGENCE').val(1).trigger('change');
                $('#tournee').val(0).trigger('change');
                $('#hiddenIDMessage').val(0);
                 notif('success','Succès',resp.msg)

                $('#btnAjouter').text('Ajouter');
                $('#btnAjouter').removeClass('btn-warning-light');
                $('#btnAjouter').addClass('btn-primary-light');
                $('#btnAjouter').html('<i class="bx bx-plus-circle" style="font-size:13px; cursor:pointer;"></i> Ajouter');
              
            },
            error: function () {
               afficherMessageTemporaire("tableModificationMessageBL",'error', true,chargerDonnees);
            }
        });
    });
     let idsToDelete = [];
    $('#checkSelectAll').on('click', function () {
        idsToDelete=[];
         //var table = $('#datatable-basic').DataTable()
        let rows = table.rows({ 'search': 'applied' }).nodes();
       // $('input[type="checkbox"]', rows).prop('checked', this.checked);
        $('input[type="checkbox"]', rows).each(function () {
            $(this).prop('checked', $('#checkSelectAll').prop('checked'));
            if (this.checked) {
                let id = $(this).data('id');
                if (id !== undefined) idsToDelete.push(id);
            }
        });

    });

    $('#btnSupprimerLigneCoche').on('click', function (e) {
        e.preventDefault();
            let selectedRows = table.rows().nodes().to$().find('input[type="checkbox"]:checked');
           
            selectedRows.each(function () {
                        let id = $(this).closest('tr').find('a#supprimerMessage').data('id');
                        idsToDelete.push(id);
            });

            if (idsToDelete.length === 0) {
                notif('danger','Erreur','Veuillez cocher au moins une ligne à supprimer.')
                return;
            }

            Swal.fire({
                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer ce ou ces message(s) !",
                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("modification_message_bl.delete")}}',
                            method: 'POST',
                            dataType: 'json',
                            data: {
                                ids: idsToDelete,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function () {
                                chargerDonnees(null,1);
                            },
                            error: function () {
                              afficherMessageTemporaire("tableModificationMessageBL",'error', true,chargerDonnees);
                            }
                        });
                }
            });
    });

    $('#btnAnnuler').on('click', function (e) {
        e.preventDefault();
        $('#contenuMessage').val('');
        $('#IDAGENCE').val(1).trigger('change');
        $('#tournee').val(0).trigger('change');
        $('#hiddenIDMessage').val(0);
        chargerDonnees(null,1);
    });

    $('#btnSearchTable').on('click', function (e) {
        e.preventDefault();
        let contenuMessage = $('#contenuMessage').val();
        let IDAGENCE       = $('#IDAGENCE').val();
        let tournee        = $('#tournee').val();
        chargerDonnees(null,0,contenuMessage,IDAGENCE,tournee);
    });

    $(document).on('click', '#supprimerMessage', function () {
        let idMessage = $(this).data('id');
            Swal.fire({
                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer ce message !",
                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("modification_message_bl.delete")}}',
                        method: 'POST',
                        dataType: 'json',
                        data: {
                            ids: [idMessage],
                            _token: '{{ csrf_token() }}'
                        },
                        success: function () {
                            chargerDonnees(null,1);
                        },
                        error: function () {
                          afficherMessageTemporaire("tableModificationMessageBL",'error', true,chargerDonnees);
                        }
                    });
                }
            });
   
    });

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

        let idMessage = $(this).data('id');
        chargerDonnees(idMessage)
        $('#btnAjouter').text('Modifier');
        $('#btnAjouter').removeClass('btn-primary-light');
        $('#btnAjouter').addClass('btn-warning-light');
        $('#btnAjouter').prepend('<i class="bx bxs-edit" style="font-size:13px; cursor:pointer;"></i>');
        $('#hiddenIDMessage').val(idMessage);
    });

    $('.AgenceListSelect').on('change', function() {
        let id_agence = $(this).val()
        let tourneeAgence = dataTournee[0].filter(function(item) {
            return item.IDAGENCE == id_agence
        })
        $('#tournee').empty();
        $('#tournee').append('<option value="0">TOUTES LES TOURNEES</option>')
        $.each(tourneeAgence, function(index, value) {
            $('#tournee').append('<option value="'+value.IDTOURNEE+'">'+value.LibelleTournee+'</option>')
        })  
    })
});



function chargerDonnees(idMessage = null, control = 0, contenuMessage = null, IDAGENCE = null, tournee = null) {
    if(idMessage == null && control == 0){
      afficherMessageTemporaire('tableModificationMessageBL');
    }
    $('#tableModificationMessageBL_wrapper .dataTables_filter input').prop('disabled', true);
    $('#tableModificationMessageBL_wrapper .dataTables_length select').prop('disabled', true);
    $('#tableModificationMessageBL thead th').css('pointer-events', 'none');

    $.ajax({
        url: '{{route("modification_message_bl.get")}}',
        method: 'GET',
        dataType: 'json',
        data:{
            idmessage : idMessage,
            contenuMessage:contenuMessage,
            IDAGENCE:IDAGENCE,
            tournee:tournee,
        },
        beforeSend: function () {
            if(idMessage == null && control == 0){
              progressHandler()
            }
        },
        success: function (data) {
            
            if(idMessage != null){
                $('#contenuMessage').val(data.messages[0].MESSAGE_BL);
                $('#IDAGENCE').val(data.messages[0].IDAGENCE).trigger('change');
                $('#tournee').val(data.messages[0].IDTOURNEE).trigger('change');
                return;
            }
            console.log(data.messages);
             var table_ = $('#tableModificationMessageBL').DataTable();
            table_.clear();
            $.each(data.messages, function (index, message) {
                 console.log(message.nom_agence);
                table_.row.add([
                    `<input class="form-check-input" type="checkbox" style="margin-top:5px; width:19px; height:19px;margin-left:5px" id="checkSelect${index}">
                    <a class="btn btn-sm btn-icon btn-outline-warning" data-id="${message.IDMESSAGE_BL}" id="modifierMessage">
                        <i class="bx bxs-edit" style="font-size: 17px; cursor: pointer;"></i>
                    </a>
                    <a class="btn btn-sm btn-icon btn-outline-danger" data-id="${message.IDMESSAGE_BL}" id="supprimerMessage">
                        <i class="bx bxs-trash" style="font-size: 14px; cursor: pointer;"></i>
                    </a>`,
                    message.nom_agence,
                    message.nom_tournee,
                    message.MESSAGE_BL
                ]);
            });
            table_.draw();
             completeHandler()
        },
        error: function () {
             completeHandler()
          afficherMessageTemporaire("tableModificationMessageBL",'error', true,chargerDonnees);
        },
        complete: function () {
            $('#tableModificationMessageBL_wrapper .dataTables_filter input').prop('disabled', false);
            $('#tableModificationMessageBL_wrapper .dataTables_length select').prop('disabled', false);
            $('#tableModificationMessageBL thead th').css('pointer-events', '');
        }
    });
}

</script>
@endsection