@extends('models')
@section('titre-page', 'Suivi intégration sage')
@section('content-body')
    <style>
        input[type=radio] {
            position: absolute;
            visibility: hidden;
            display: none;
        }

        label {
            color: lighten('red', 40%);
            display: inline-block;
            cursor: pointer;
            font-weight: bold;
            padding: 5px 20px;
        }

        input[type=radio]:checked+label {
            color: #fff;
            background: #906AE2;
        }

        input[type=radio]+label:hover {
            background: #bfa9f0;
            color: #fff;
        }


        /*label + input[type=radio] + label {
        border-left: solid 2px blue;
        }*/
        .radio-group {
            border: solid 2px #906AE2;
            display: inline-block;
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
    </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-2">
                <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);">Comptabilité</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Suivi intégration sage</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-5 col-md-8">

                    {{-- <button class="btn btn-primary" id="verifycode">check</button> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">

            <div class="row g-2">
                <div class="col-xl-5 mb-2">
                    <div class="row g-2">
                        <div class="col-xl-6">
                            <div for="" class="mt-2 me-2 text-muted">N° doc rechercher :</div>
                            <input type="text" name="" class="form-control" style="padding :6px"
                                id="numero-document">
                        </div>

                        <div class="col-xl-6">
                            <div for="" class="mt-2 me-2 text-muted">Valeur à rechercher dans "données" :</div>
                            <input type="text" name="" class="form-control" placeholder="ODP" style="padding :6px"
                                id="valeur-donnees">
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 mb-2">
                    <div class="row g-2">
                        <div class="col-xl-3">
                            <div for="" class="mt-2 text-muted">Agence :</div>
                            <select name="" class="form-select" style="padding :6px"
                                id="Agence-suivi-integration-sage" @disabled(checkIfDroit('DG_AccesMultiSite'))>
                                <option value="">Sélectionner</option>
                            </select>
                        </div>
                        <div class="col-xl-4">
                            <div for="" class="mt-2 text-muted">Typre document :</div>
                            <select name="" class="form-select" style="padding :6px" id="type-document">
                                <option value="0">TOUS</option>
                                <option value="1">FACTURE CLIENT</option>
                                <option value="2">RELEVE CLIENT</option>
                                <option value="10">CONTRAT MEDICIEL</option>
                                <option value="3">REGLEMENT</option>
                                <option value="4">ESCOMPTE</option>
                                <option value="5">RISTOURNE</option>
                                <option value="11">PAIEMENT ESCOMPTE/RISTOURNE</option>
                                <option value="6">CORRECTION DE STOCK</option>
                                <option value="7">BON DE LIVRAISON</option>
                                <option value="8">RECLAMATION FOURNISSEUR</option>
                                <option value="9">TRANSFERT INTER SITE [ENVOI]</option>
                                <option value="12">TRANSFERT INTER SITE [RECEPTION]</option>
                            </select>
                        </div>
                        <div class="col-xl-5">
                            <div for="" class="mt-2 text-muted">Période :</div>
                            <input type="text" name="daterange" class="form-control" style="padding :6px"
                                id="periode-suivi-integration-sage">
                        </div>
                    </div>
                </div>

                <div class="col-xl-1">
                    <div class="d-flex justify-content-end mt-4">
                        <div>
                            <button id="BtnSearch-suivi" class="btn btn-primary">
                                <i class="ri-search-line" style="font-size:13px;"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>


            <div style=" display: flex; justify-content: space-between; ">
                <div>
                    <div class="radio-group">
                        <input type="radio" id="option-one" name="selector" value="1"><label
                            for="option-one">ECRITURES EN ATTENTES</label>
                        <input type="radio" id="option-two" name="selector" value="2"><label
                            for="option-two">ECRITURES AVEC PROBLEMES DETECTES</label>
                        <input type="radio" id="option-three" name="selector" value="3"><label
                            for="option-three">ECRITURES REGENEREES</label>
                        <input type="radio" id="option-four" name="selector" value="4"><label
                            for="option-four">ECRITURES INTEGREES</label>
                    </div>
                </div>
                <div>
                    <div id="regenerer-ecriture-btn"
                        style="padding: 5px;border:1px solid gray;cursor:pointer;border-radius:3px;margin-top:25px;display:none">
                        Regénérer les écritures</div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="tablehover table table-striped text-nowrap w-100" id="SuibliIntegrationSageTable">
                    <thead class="bg-thead">
                        <tr>
                            <th><input class="form-check-input me-1" type="checkbox" id="checkSelectAll">#</th>
                            <th>Date et heure</th>
                            <th>ID document</th>
                            <th>N° document</th>
                            <th>Type document</th>
                            <th>Agence</th>
                            <th>Données</th>
                            <th>Commentaire</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            listingComboAgence('#Agence-suivi-integration-sage').then((result) => {
                $('#Agence-suivi-integration-sage').val($("#idSiteEnCours").val()).change()
            });

            $(document).on('click', '#BtnSearch-suivi', function() {
                var numero_document = $('#numero-document').val();
                var valeur_donnees = $('#valeur-donnees').val();
                var type_document = $('#type-document').val();
                var periode_suivi_integration_sage = $('#periode-suivi-integration-sage').val();
                var date_debut = periode_suivi_integration_sage.split(' - ')[0];
                var date_fin = periode_suivi_integration_sage.split(' - ')[1];
                var agence = $('#Agence-suivi-integration-sage').val();
                var ongletMenu = $('input[name="selector"]:checked').val();
                recuperationdonnee(numero_document, valeur_donnees, type_document, date_debut, date_fin,
                    agence, ongletMenu);
            });

            $('input[name="selector"][value="1"]').prop('checked', true);

            $(document).on('change', 'input[name="selector"]', function() {
                if ($(this).val() == '2') {
                    $('#regenerer-ecriture-btn').css('display', 'block');
                } else {
                    $('#regenerer-ecriture-btn').css('display', 'none');
                }
                var numero_document = $('#numero-document').val();
                var valeur_donnees = $('#valeur-donnees').val();
                var type_document = $('#type-document').val();
                var periode_suivi_integration_sage = $('#periode-suivi-integration-sage').val();
                var date_debut = periode_suivi_integration_sage.split(' - ')[0];
                var date_fin = periode_suivi_integration_sage.split(' - ')[1];
                var agence = $('#Agence-suivi-integration-sage').val();
                var ongletMenu = $(this).val();
                recuperationdonnee(numero_document, valeur_donnees, type_document, date_debut, date_fin,
                    agence, ongletMenu);
            });
            fixe_elements_on_headers_tab('SuibliIntegrationSageTable', `
                    <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                                    <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                    <span id="btn-export-suiviIntegration" class="fw-bold" style="cursor : pointer;">Exporter</span>
                    </span>

                    <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                                    <i class='ri-printer-fill text-warning me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                    <span id="btn-print-suiviIntegration" class="fw-bold" style="cursor : pointer;">Imprimer</span>
                    </span>
            `);

            $(document).on('click', '#btn-export-suiviIntegration', function() {
                var data = remplissage_avec_row_add_DataTable('SuibliIntegrationSageTable')
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename, ['#']);
            });

            $(document).on('click', '#btn-print-suiviIntegration', function() {

                $.ajax({
                    type: "GET",
                    url: "{{ route('suivi-integration-sage.get') }}",
                    data: {
                        numero_document: $('#numero-document').val(),
                        valeur_donnees: $('#valeur-donnees').val(),
                        type_document: $('#type-document').val(),
                        dateDebut: $('#periode-suivi-integration-sage').val().split(' - ')[0],
                        dateFin: $('#periode-suivi-integration-sage').val().split(' - ')[1],
                        agence: $('#Agence-suivi-integration-sage').val(),
                        ongletMenu: $('input[name="selector"]:checked').val(),
                        imprimer: true
                    },
                    beforeSend: function() {
                        progressHandler();
                    },
                    dataType: "json",
                    success: function(resp) {
                        completeHandler();
                        if (resp.succes && resp.data) {

                            // Si ton contrôleur retourne un tableau de PDFs
                            const base64Pdf = Array.isArray(resp.data.datas) ? resp.data.datas[
                                0] : resp.data.datas;
                            //console.log('Début:', base64Pdf.substring(0, 50));
                            // Conversion Base64 → Blob
                            const byteCharacters = atob(base64Pdf);
                            const byteNumbers = new Array(byteCharacters.length);
                            for (let i = 0; i < byteCharacters.length; i++) {
                                byteNumbers[i] = byteCharacters.charCodeAt(i);
                            }
                            const byteArray = new Uint8Array(byteNumbers);
                            const blob = new Blob([byteArray], {
                                type: 'application/pdf'
                            });

                            // Création URL et ouverture dans un nouvel onglet
                            const url = URL.createObjectURL(blob);
                            window.open(url, '_blank');
                        } else {
                            console.error('Erreur: PDF non reçu correctement');
                        }
                    },
                    error: function(xhr) {
                        completeHandler();
                        console.error('Erreur Ajax:', xhr);
                    }
                });

            });

            $(document).on('change', '#Agence-suivi-integration-sage', function() {
                var numero_document = $('#numero-document').val();
                var valeur_donnees = $('#valeur-donnees').val();
                var type_document = $('#type-document').val();
                var periode_suivi_integration_sage = $('#periode-suivi-integration-sage').val();
                var date_debut = periode_suivi_integration_sage.split(' - ')[0];
                var date_fin = periode_suivi_integration_sage.split(' - ')[1];
                var agence = $('#Agence-suivi-integration-sage').val();
                var ongletMenu = $('input[name="selector"]:checked').val();
                recuperationdonnee(numero_document, valeur_donnees, type_document, date_debut, date_fin,
                    agence, ongletMenu);
            });

        })

        function recuperationdonnee($numero_document, $valeur_donnees, $type_document, $date_debut, $date_fin, $agence,
            ongletMenu) {
            $.ajax({
                url: "{{ route('suivi-integration-sage.get') }}",
                type: "GET",
                data: {
                    numero_document: $numero_document,
                    valeur_donnees: $valeur_donnees,
                    type_document: $type_document,
                    dateDebut: $date_debut,
                    dateFin: $date_fin,
                    agence: $agence,
                    ongletMenu: ongletMenu,
                },
                beforeSend: progressHandler(),
                success: function(response) {
                    completeHandler()
                    table = $('#SuibliIntegrationSageTable').DataTable();
                    table.clear().draw();

                    $.each(response.data.tableEcriture, function(index, item) {

                        var typeDocument = table_variable(item.TypeDocument);
                        var actions = '';
                        if (item.StatutLigne == 2) {
                            actions += `<div>
                                    <input type="checkbox" class="form-check-input  me-1 checking-checkbox-tab" id="checkbox-${item.ID}" data-id="${item.ID}" />
                                    <label for="checkbox-${item.ID}" class="form-check-label"></label>
                                </div>`;
                        } else {
                            actions += `<div>
                        <input type="checkbox" class="form-check-input checking-checkbox-tab me-1"disabled />
                        <label for="checkbox-${item.ID}" class="form-check-label"></label>
                    </div>`;
                        }


                        table.row.add([
                            actions,
                            item.CreeLe,
                            item.IDDocConcerne,
                            item.NumeroDoc,
                            typeDocument,
                            item.NomAgence,
                            item.DonneeRequeteSage,
                            item.Commentaire
                        ]);
                    });
                    table.draw();
                    //$('#EscompteRistournePalierTable').DataTable().clear().rows.add(response.data).draw();
                },
                error: function(xhr) {
                    completeHandler()
                    console.error(xhr);
                }
            });

        }

        function table_variable(value) {
            const tableau = [{
                    lib: 'FACTURE CLIENT',
                    value: 1
                },
                {
                    lib: 'RELEVE CLIENT',
                    value: 2
                },
                {
                    lib: 'CONTRAT MEDICIEL',
                    value: 10
                },
                {
                    lib: 'REGLEMENT',
                    value: 3
                },
                {
                    lib: 'ESCOMPTE',
                    value: 4
                },
                {
                    lib: 'RISTOURNE',
                    value: 5
                },
                {
                    lib: 'PAIEMENT ESCOMPTE/RISTOURNE',
                    value: 11
                },
                {
                    lib: 'CORRECTION DE STOCK',
                    value: 6
                },
                {
                    lib: 'BON DE LIVRAISON',
                    value: 7
                },
                {
                    lib: 'RECLAMATION FOURNISSEUR',
                    value: 8
                },
                {
                    lib: 'TRANSFERT INTER SITE [ENVOI]',
                    value: 9
                },
                {
                    lib: 'TRANSFERT INTER SITE [RECEPTION]',
                    value: 12
                }
            ];

            const found = tableau.find(item => item.value == value);
            return found ? found.lib : '';
        }
    </script>
@endsection