@extends('base')

@section('content')


    <div class="alert alert-success text-center">LISTE DES CLIENT</div>
    <div class="col-md-12 row">
        <div class="form-group col-md-2">
            <label for="position_compte">Position de compte :</label>
            <select type="text" class="form-control" style="color:black !important" id="position_compte" >
                <option value="0">Aucune</option>
                @foreach($positions_compte as $position_compte)
                    <option value="{{$position_compte->id_position_compte}}">{{$position_compte->position_compte_code}} -> {{$position_compte->position_compte_libelle}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-10">
            <button class="btn btn-success ajouter_client" style="margin-top:2%" @disabled($profil->profil_client_chantier==0  || $profil->profil_client_chantier==1 || $profil->profil_client_chantier==3)>Ajouter</button>
            <button class="btn btn-success d-none" id="rafraichir" >rafriachir</button>
        </div>
    </div>
    <div id="filtre"><button type="button" class="fermer_client btn btn-danger" >X</button></div><div id="affiche_client"></div><div id="affiche_chantier"></div><div id="afficher_adresse_facturation"></div>
    <div class="col-md-12 text-center">Nombre de client(s) : <span class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;"> </span></div>
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_client">
            <thead style="background-color:#28a745; color:white">
            <tr>
                <th  class="text-center th_cursor_pointer client_code"  >CODE</th>
                <th scope="col" class="text-center th_cursor_pointer client_mot_dir" >MOT DIRECTEUR </th>
                <th scope="col" class="text-center">CIVILITE</th>
                <th scope="col" class="text-center th_cursor_pointer client_nom" >NOM</th>
                <th scope="col" class="text-center">COMPTANT</th>
                <th scope="col" class="text-center" >ADRESSE1</th>
                <th scope="col" class="text-center">ADRESSE2</th>
                <th scope="col" class="text-center">CP</th>
                <th scope="col" class="text-center">VILLE</th>
                <th scope="col" class="text-center">TEL</th>
                <th scope="col" class="text-center">DOM</th>
                <th scope="col" class="text-center">MOBILE</th>
                <th scope="col" class="text-center">FAX</th>
                <th scope="col" class="text-center">SOUS FAMILLE</th>
                <th scope="col" class="text-center">MODE REGLEMENT</th>
                <th scope="col" class="text-center">ECHEANCE</th>
                <th scope="col" class="text-center" aria-label="Rendering engine: activate to sort column ascending">SUPPRIMER</th>
            </tr>
            <tr style="background-color: whitesmoke" >
                <th  class="filterhead text-center th_cursor_pointer client_code"  >CODE</th>
                <th scope="col" class="filterhead text-center th_cursor_pointer client_mot_dir">MOT DIRECTEUR </th>
                <th scope="col" class="filterhead text-center">CIVILITE</th>
                <th scope="col" class="filterhead text-center th_cursor_pointer client_nom">NOM</th>
                <th scope="col" class="filterhead text-center">COMPTANT</th>
                <th scope="col" class="filterhead text-center" >ADRESSE1</th>
                <th scope="col" class="filterhead text-center">ADRESSE2</th>
                <th scope="col" class="filterhead text-center">CP</th>
                <th scope="col" class="filterhead text-center">VILLE</th>
                <th scope="col" class="filterhead text-center">TEL</th>
                <th scope="col" class="filterhead text-center">DOM</th>
                <th scope="col" class="filterhead text-center">MOBILE</th>
                <th scope="col" class="filterhead text-center">FAX</th>
                <th scope="col" class="filterhead text-center">SOUS FAMILLE</th>
                <th scope="col" class="filterhead text-center">MODE REGLEMENT</th>
                <th scope="col" class="filterhead text-center">ECHEANCE</th>
                <th scope="col" class="filterhead text-center" aria-label="Rendering engine: activate to sort column ascending">SUPPRIMER</th>
            </tr>

            </thead>

        </table>

    </div>

    <script>

        $(function() { // Dom ready

            $('title').text("CLIENT - SMART CENTRAL");

            $("#filtre").click(function(e) {
                e.preventDefault();
                if ($('#affiche_chantier').is(":visible") || $('#afficher_adresse_facturation').is(":visible")) {
                    // console.log('adresse ou chantier visible');
                    $("#affiche_chantier").hide();
                    $("#afficher_adresse_facturation").hide();
                    $("#affiche_client").show();
                    $("#filtre").show();
                } else {
                    $("#affiche_client").hide();
                    $("#filtre").hide();
                }

            });
            $(".fermer").click(function(e) {
                e.preventDefault();
                if ($('#affiche_chantier').is(":visible") || $('#afficher_adresse_facturation').is(":visible")) {

                    $("#affiche_chantier").hide();
                    $("#afficher_adresse_facturation").hide();
                    $("#affiche_client").show();
                    $("#filtre").show();
                } else {
                    $("#affiche_client").hide();
                    $("#filtre").hide();
                }
            });
            $(".ajouter_client").click(function(e,data) {
                e.preventDefault();
                $("#filtre").show();
                $("#affiche_client").empty();
                $("#affiche_client").show();
                // console.log(data);
                function reponse(retour) {

                    $("#affiche_client").html(retour);

                }


                if ( typeof data !== 'undefined' && typeof data.client_id !== 'undefined' ) {

                    var url ='{{route('client.modifier',['client'=>'client_id_temp'])}}'
                    url = url.replace('client_id_temp',data.client_id) ;
                }else{
                    data= {'modifier_client': 'false'};
                    var url ='{{route('client.creer')}}';
                }


                $.get(
                    url,
                    {
                        modifier_client:data.modifier_client,
                        @if(request()->has('id_chantier'))
                        id_chantier: "{{ request('id_chantier') }}",
                        @endif
                    },
                    reponse,
                    'html'
                );

            });
            @if(isset($_GET['id_client']))
            $(".ajouter_client").trigger('click', {client_id:,modifier_client:false});
            @endif
            var table = $('#table_client').on('processing.dt', function(e, settings, processing) {

                $('.ring').css('display', processing ? 'block' : 'none');
                $('#filtre_loading').css('display', processing ? 'block' : 'none');
            }).DataTable({
                scrollX: true,
                orderCellsTop: true,
                // fixedHeader: true,
                scrollCollapse: true,
                autoWidth: true,
                paging: true,
                serverSide: true,
                iDisplayLength: {{$parametres->parametre_nombre_ligne_grille}},
                dom: 'lBfrtip',
                buttons: [

                    { "extend": 'excel',
                        "text":'Export excel',
                        "className": 'btn btn-success',
                        title:'LISTE CLIENT',

                    }
                ],
                'lengthMenu': [[10, 25, 50,100, -1], [10, 25, 50,100, 'Tout']],
                "ajax": {

                    "url": "{{route('client.table')}}",
                    "type": "POST",
                    "data": {
                        'position_compte_id': function() { return $('#position_compte').val() },
                        _token: '{{ csrf_token() }}'


                    },



                    "dataSrc": function(json) {

                        $(".badge").html(json.recordsFiltered);

                        return json.data;
                    },
                },
                "search": {
                    "search": $('#recherche_default').val(),


                },

                // columns: [
                //     {data: 'client_code'},
                //     {data: 'client_recherche'},
                //     {data: 'civilite_code'},
                //     {data: 'client_nom'},
                //     {data: 'client_comptant'},
                //     {data: 'client_adresse1'},
                //     {data: 'client_adresse2'},
                //     {data: 'commune_code_postal'},
                //     {data: 'commune_ville'},
                //     {data: 'client_tel_pro'},
                //     {data: 'client_tel_dom'},
                //     {data: 'client_tel_mobile'},
                //     {data: 'client_fax'},
                //     {data: 'sous_famille_client_libelle'},
                //     {data: 'mode_reg_libelle'},
                //     {data: 'echeance_libelle'},
                // ],
                'createdRow': function (row, data, dataIndex) {

                    if (data['4'] == '1') {
                        $(row).css('color', 'blue');
                    }
                },

                columnDefs: [
                    {
                        "targets": 4,
                        "data": function(json) {
                            var valeur = json['client_comptant'];

                            var text = '<i class="fas fa-ban" style="color:red"></i>';
                            if (valeur==1) {
                                text = '<i class="fas fa-check"></i>';
                            }
                            return text;
                        },
                        "defaultContent": null
                    },
                    {
                        "targets": 16,
                        "data": function(json) {

                            var text = '<i style="color:#ff0000" class="fas fa-times-circle"></i>';

                            return text;
                        },
                        "defaultContent": null



                    },



                    { "className": "text-center align-middle modifier_client th_cursor_pointer font-weight-bold", "targets": [0] },

                    { "className": "text-center align-middle supprimer_client th_cursor_pointer", "targets": [16] },
                    { "className": "text-center align-middle ", "targets": "_all" },

                    {
                        "targets": 2,
                        "createdCell": function(td, cellData, rowData, row, col) {


                            if (rowData['DT_ClientColor'] != "") {
                                $(td).css('background-color', rowData['DT_ClientColor']);
                            }

                        }

                    },





                ],


                initComplete: function () {
                    var api = this.api();
                    // console.log(api)
                    // Setup - add a text input to each header cell
                    $('.filterhead', api.table().header()).each( function () {
                        var title = $(this).text();
                        $(this).html( '<input type="text" placeholder="'+title+'" class="column_search"  style="width:100%" />' );
                    } );

                    api.columns.adjust();

                }

            });
// Apply the search
            $('table thead').on('keyup', '.column_search', function () {

                table
                    .column($(this).parent().index())
                    .search(this.value)
                    .draw();
            });
            $(".btn-success").css("color", "#fff");
            $(".btn-success").css("background-color", "#218838");
            $(".btn-success").css("#1e7e34", "#1e7e34");

            $("#position_compte").change(function() {


                table.ajax.reload(null, false);

            });
            $("#rafraichir").click(function() {
                table.ajax.reload(null, false);
            });

            $('#table_client tbody').on('click', '.modifier_client', function(e) {
                e.preventDefault();

                var data = table.row($(this).parents('tr')).data();
                var id_client = data['DT_RowId'];

                $(".ajouter_client").trigger('click', {client_id:id_client,modifier_client:true});

            });
            $('#table_client tbody').on('click', '.supprimer_client', function(e) {
                e.preventDefault();


                var data = table.row($(this).parents('tr')).data();
                var client_id = data['DT_RowId'];

                if (confirm("Êtes-vous sûr(e)?")) {
                    function reponse(retour) {
                        $("#message_base_supprimer").html(retour.message);
                        $("#message_base_supprimer").show();
                        setTimeout(function() {
                            $('#message_base_supprimer').hide();
                        }, 3000);
                        if (retour.success) {
                            setTimeout(function() {
                                table.ajax.reload(null, false);
                            }, 3000);


                        }

                    }
                    var url ='{{route('client.supprimer',['client'=>'client_id_temp'])}}';
                    url = url.replace('client_id_temp',client_id) ;
                    $.ajax({
                        url: url,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}' // Assurez-vous d'inclure le jeton CSRF pour les requêtes DELETE
                        },
                        success: function(response) {
                            // Traitement de la réponse retournée par le serveur
                            reponse(response)
                        },
                        error: function(xhr, status, error) {
                            // Gestion des erreurs
                            console.error(error);
                        }
                    })
                }

            });



        });


    </script>




@endsection