@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">EMAIL</th>
                    <th scope="col" class="text-center">EMAIL DEMAT</th>
                    <th scope="col" class="text-center">EMAIL FAC</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">SIRET</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">EMAIL</th>
                    <th scope="col" class="filterhead text-center">EMAIL DEMAT</th>
                    <th scope="col" class="filterhead text-center">EMAIL FAC</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">SIRET</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,
            // searchDelay: 1000,
            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
        var columnSearchTimers = {};
        $('table thead').on('keyup', '.column_search', function () {
            // console.log('bonjour');
            var columnIndex = $(this).parent().index();
            var inputValue = this.value;

            clearTimeout(columnSearchTimers[columnIndex]);

            columnSearchTimers[columnIndex] = setTimeout(function () {
                table
                    .column(columnIndex)
                    .search(inputValue)
                    .draw();
            }, 1000); // 1000 ms = 1 seconde (modifiable selon vos besoins)
            // 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