{{-- @php
    $ligne = 1;
@endphp --}}

{!! $tabs->contents($__data) !!}

<div class="modal fade" id="address-map-modal" role="dialog"></div>
@push('js')
    <script>
        //var ligne = 1;
        const _tbody = $('#opOperations');
        var ligne = $('tr', _tbody).length - 1;
        //var ligne = parseInt($(_tbody).data('index'));
        // var operateurLine = 1;
        window.types = [];

        $('body').on('change', '.operateur-select', function() {

            const value = $(this).val();
            $.get('{{ route('annuaires.get-operator-operations', '_OPERATOR_') }}'.replace('_OPERATOR_', value),
                response => {

                    console.log('The response', response)
                });
        });

        $('#op_op').hide();
        if ($('#type_id :selected').val() ==
            '{{ get_intitule('LIB_TYPE_ANNUAIRE_OPERATEUR', 'constante', 'id') }}') { //operator
            $('#op_op').show();
            $('#op_cl').hide();
        } else if ($('#type_id :selected').val() == '{{ get_intitule('LIB_TYPE_ANNUAIRE_CLIENT', 'constante', 'id') }}') {
            $('#op_op').hide();
            $('#op_cl').show();
        }

        $('#packservice').show();
        if ($('#type_id :selected').val() ==
            '{{ get_intitule('LIB_TYPE_ANNUAIRE_CLIENT', 'constante', 'id') }}') { //operator
            $('#packservice').show();
        } else {
            $('#packservice').hide();
        }


        $('#type_id').change(function() {

            const type_id = $(this).val();
            if ($('#type_id :selected').val() ==
                '{{ get_intitule('LIB_TYPE_ANNUAIRE_OPERATEUR', 'constante', 'id') }}') {
                $('#op_op').show();
                $('#op_cl').hide();
                $('#packservice').hide();
            } else if ($('#type_id :selected').val() ==
                '{{ get_intitule('LIB_TYPE_ANNUAIRE_CLIENT', 'constante', 'id') }}') {
                $('#op_op').hide();
                $('#op_cl').show();
                $('#packservice').show();
            }
        })

        operateurs = @json($operateurs);
        op_operations = @json($opOperations);
        cl_operations = @json($clOperations);

        $('.fa-caret-up').on('click', function() {
            $(this).toggleClass('fa-caret-down fa-caret-up');
        });


        function add_new_contact_row() {
            const tbody = $('#contact-table>tbody');
            const numberOfRows = $('tr', tbody).length;
            const index = parseInt($(tbody).data('index'));

            const row =
                `<tr id="contact${numberOfRows}">
                    <td>${numberOfRows+1}</td>
                    <td>
                        <input type="text" id="contacts[${index}][first_name]" name="contacts[${index}][first_name]"  data-add-new="true" class="form-control"/>
                    </td>
                    <td>
                        <input type="text" id="contacts[${index}][last_name]" name="contacts[${index}][last_name]"  data-add-new="true" class="form-control"/>
                    </td>
                    <td>
                        <input type="email" id="contacts[${index}][email]" name="contacts[${index}][email]" data-add-new="true" class="form-control"/>
                    </td>
                    <td>
                        <select id="contacts[${index}][service_id]" name="contacts[${index}][service_id]"  data-add-new="true" class="form-control"  >
                        <option value=""></option>
                            @foreach (get_intitules_by_group([['slug', '=', 'services']]) as $service)
                                                <option {{ old('service_id', $service->id) == $service->id ? 'selected' : '' }} value="{{ $service->id }}" data-valeur="{{ $service->valeur }}">{{ $service->libelle }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <input type="text" id="contacts[${index}][mobile]" name="contacts[${index}][mobile]" data-add-new="true" class="form-control"/>
                    </td>

                    <td class="text-center">
                        <a class="btn btn-danger" onclick="removeData('contact${numberOfRows}')">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>

                </tr>`.replaceAll('CURRENT_INDEX', index);

            $('#contact-body').append(row);
            $('#contact-body').data('index', index + 1);
            init_3rd_party_plugins(contact);
            update_contacts_numbering();

            return row;
        }

        function update_contacts_numbering() {
            $('#contact-table>tbody>tr').each((index, tr) => {
                $($('td:first-child', tr).get(0)).text(index + 1);
            });
        }

        function operation_add() {

            ligne++;
            $('#opOperations').append(`
                <tr id='ligne${ligne}'>
                    <td>
                        <select name="service_operators[${ligne}][service]" id="ligne${ligne}" class="form-control init-select2">
                            <option value="">@lang('global.Choose')</option>
                            @foreach ($operationsListe as $ope)
                                <option value="{{ $ope->libelle }}"> {{ $ope->libelle }} </option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <div class="input-group">
                            <select id="ussdcode_id" data-add-new="true" data-add-new-modal="#intitule-modal" data-put-searching-text-in="libelle" data-add-new-class="add-intitule" class="init-select2 ussdcode-select form-control @error('ussdcode_id') is-invalid @enderror" data-add-new-extra="{{ json_encode(['intitule-group' => 'prefixes-ussds', 'data-input-id' => 'ussdcode_id']) }}">
                                <option value="">@lang('global.Choose')</option>
                                @foreach (get_intitules_by_group([['slug', '=', 'prefixes-ussds']]) as $intitule)
                                    <option value="{{ $intitule->valeur }}">{{ $intitule->libelle }} ({{ $intitule->valeur }})</option>
                                @endforeach
                            </select>

                            <div class="input-group-append">
                                <input type="text" class="form-control codeReseau-input" name="service_operators[${ligne}][code]" value="">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <input class="form-control" type="text" name="service_operators[${ligne}][ussd_option]" id="service_operators[${ligne}][ussd_option]" >
                        </div>
                    </td>
                    <td class="text-center">
                        <a class="btn btn-danger" onclick="removeData('ligne${ligne}')">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
            `);

            init_3rd_party_plugins($(`#ligne${ligne}`));
            // $('#operation-op-table>tbody>tr').each((index, tr) => {
            //     $($('td:first-child', tr).get(0)).text(index+1);
            // });

        }

        function operation_cliente_add() {
            operateurLine++;
            $('#clOperations').append(`
            <tr id="operateur${operateurLine}">
                <td>
                    <div class="form-group">
                        <div class="input-group">
                            <select name="service_clients[${operateurLine}][operator]" id="operateurSelect${operateurLine}" class="form-control init-select2 operateur-select" onchange="operateurChange('operateurSelect${operateurLine}', 'operationSelect${operateurLine}', 'codeOperateur${operateurLine}')">
                                <option value="">@lang('global.Choose')</option>
                                @foreach ($operateurs as $operateur)
                                    <option value="{{ $operateur->id }}"> {{ $operateur->raison_sociale }} </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </td>

                <td>
                    <div class="form-group">
                        <div class="input-group">
                            <select name="service_clients[${operateurLine}][op_operation_id]" id="operationSelect${operateurLine}" class="form-control init-select2" onchange="operationChange('operationSelect${operateurLine}', 'codeOperateur${operateurLine}')"></select>
                        </div>
                    </div>
                </td>

                <td id="codeOperateur${operateurLine}" class="text-center"></td>

                <td>
                    <input type="text" name="service_clients[${operateurLine}][idPaiement]" id="paiementId${operateurLine}" placeholder="ex: 11578" class="form-control" value="">
                </td>

                <td>
                    <input type="text" name="service_clients[${operateurLine}][libelle]" id="libelleId${operateurLine}" placeholder="ex: Caisse No.1" class="form-control" value="">
                </td>

                <td class="text-center">
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input form-control" type="checkbox" name="service_clients[${operateurLine}][enable]" value="1">
                        </label>
                    </div>
                </td>

                <td class="text-center">
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input form-control" type="checkbox" name="service_clients[${operateurLine}][for_web]" value="1">
                        </label>
                    </div>
                </td>

                <td class="text-center">
                    <a class="btn btn-danger" onclick="removeData('operateur${operateurLine}')">
                        <i class="fas fa-trash"></i>
                    </a>
                </td>
            </tr>
            `);

            init_3rd_party_plugins($(`#operateur${operateurLine}`))
            // $('#table-cl-responsive>tbody>tr').each((index, tr) => {
            //     $($('td:first-child', tr).get(0)).text(index+1);
            // });

        }

        function operateurChange(operateurSelected, operationId, codeId) {
            var operateur;

            $('#' + codeId).text('');

            operateurs.forEach(_operateur => {
                if (_operateur.id == $('#' + operateurSelected + ' :selected').val()) {
                    operateur = _operateur;
                }
            });

            if (operateur) {
                $('#' + operationId).empty().append('<option value="">@lang('global.Choose')</option>');

                operateur.op_operations.forEach(operation => {
                    $('#' + operationId).append(`
                        <option value="` + operation.id + `">` + operation.name + `</option>
                    `);
                });

            }

        }

        function operationChange(operationSelected, codeId) {
            var operation;

            op_operations.forEach(_operation => {
                if (_operation.id == $('#' + operationSelected).val()) {
                    operation = _operation;
                }
            });

            $('#' + codeId).text(operation.code);
        }

        function removeData(data) {
            console.log('The data', data);
            $('#' + data).remove();
        };


        $('body').on('change', '.ussdcode-select', function() {

            const value = $(this).val();
            //const label = $(`option[value="${value}"]`, this).text();
            $(this).closest('td').find('.codeReseau-input').val(value);
        });

        $('body').on('click', '.delete-contact', function(e) {
            e.preventDefault();

            $(this).closest('tr').remove();
            update_contacts_numbering();
        });

        $('.toggle-logo-show').on('click', function(e) {
            e.preventDefault();

            if ($('#logo-image').length) {

                $('#logo-image').toggleClass('d-none');
                if ($('i', this).hasClass('fa-eye')) {

                    $('i', this).removeClass('fa-eye');
                    $('i', this).addClass('fa-eye-slash');
                } else {

                    $('i', this).removeClass('fa-eye-slash');
                    $('i', this).addClass('fa-eye');
                }
            }
        });

        num_compte_change = () => {
            const uo_id = $('#uo_id').val();
            const uo_num_compte = $(`option[value="${uo_id}"]`, $('#uo_id')).data('num_compte');
            const next_annuaire_id = {{ next_annuaire_id() }};

            $('#num_compte').val(uo_num_compte + '_' + ('000000' + next_annuaire_id).substr(6));
        }

        if ($('#uo_id').val() && @json($annuaire->id) == null) {
            num_compte_change();
        }

        $('#uo_id').on('change', function() {
            num_compte_change();
        });

        // $(selector).change(function (e) {
        //     const uo_id = $('#uo_id').val();
        //     console.log(uo_id);
        //     if(uo_id && @json($annuaire->num_compte == null)) {
        //         const uo_num_compte = $(`option[value="${uo_id}"]`, $('#uo_id')).data('num_compte');
        //         const next_annuaire_id = {{ next_annuaire_id() }};
        //         $('#num_compte').val(uo_num_compte+'_'+('000000'+next_annuaire_id).substr(6));
        //     }
        // });

        //MAP
        $('body').on('change', 'select[name="city_id"]', function() {

            const city_id = $(this).val();
            const city_name = $(`option[value="${city_id}"]`, this).text();
            $('[data-modal="#address-map-modal"]').data('city', city_name);
            //$('#adresse, #cp').val('');
        });

        $('body').on('input', 'input#city_id', function() {

            const city_name = $(this).val();
            $('[data-modal="#address-map-modal"]').data('city', city_name);
            //$('#adresse, #cp').val('');
        });

        function init_city_id_autocomplete() {

            if ($('#city_id_input_type').val() == "input") {

                const country_id = $("#country_id").val();
                $.get(`/api/countries/${country_id}/code`, ({
                    code
                }) => {

                    if (!window._autocomplete_) {

                        var options = {
                            language: "en",
                            types: ['(cities)'],
                            componentRestrictions: {
                                country: code
                            }
                        };

                        var input = document.getElementById('city_id');
                        window._autocomplete_ = new google.maps.places.Autocomplete(input, options);
                        window._autocomplete_.addListener("place_changed", () => {

                            $('body #city_id').val(window._autocomplete_.getPlace().name).trigger('input');
                        })
                    } else {

                        console.log("Auto_Complete", window._autocomplete_, code)
                        window._autocomplete_.setComponentRestrictions({
                            country: code
                        })
                    }
                }, "json");
            }
        }

        init_city_id_autocomplete();
        // $('#country_id').on('change', function () {

        //     $('#city_id').html('').trigger('change');
        //     //$('#adresse, #cp').val('');
        //     const country_id = $(this).val();

        //     const country_name = $(`option[value="${country_id}"]`, this).text();
        //     $('[data-modal="#address-map-modal"]').data('country', country_name);

        //     $.get(`/api/countries/${country_id}/cities`, cities => {

        //         const p = $("#city_id").parent();
        //         if(!cities.length) {

        //             if($('#city_id').prop('nodeName').toLowerCase() == "select") {

        //                 $('#city_id').select2('destroy');
        //                 $('#city_id').remove();
        //                 $(p).append('<input type="text" autocomplete="off" name="city_id" id="city_id" value="" class="form-control" />');
        //                 $('#city_id_input_type').val('input');
        //             }

        //             init_city_id_autocomplete()
        //         } else {

        //             $('#city_id').remove();
        //             $(p).append('<select name="city_id" id="city_id" class="form-control init-select2" data-add-new="true" data-pre-modal-callback="prepare_add_new_city_modal_inputs" data-put-searching-text-in="name" data-add-new-modal="#ajax_add_new_city" data-server-side="true" data-url="callback" data-callback_handler="get_cities_by_country_handler"></select>')
        //             init_select2(p);
        //             $('#city_id_input_type').val('select');
        //         }
        //     }, "json");
        // });

        $('#adresse').on('change keyup paste click onreadystatechange', function() {
            $('#map-address-container').text($('#adresse').val());
        });
    </script>
@endpush