{% extends '@EasyAdmin/default/edit.html.twig' %}

{% block header_container %}
    <style>
        .edit-client .btn{
            position: relative;
        }
        .edit-client .btn .spinner-border{
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        .edit-client .field-text .select2-selection{
            height: 45px !important;
            border: 2px solid #E9EEF4 !important;
        }
        .edit-client .field-text .select2-selection .select2-selection__rendered{
            padding-top: 14px;
        }
        .edit-client .field-text .select2-selection .select2-selection__arrow{
            top: 8px;
        }

        .edit-client .select2-container--default.select2-container--focus .select2-selection--multiple {
            border: 2px solid #E9EEF4 !important;
        }
    </style>
    <div class="row p-t-b-10">
        <div class="col-12" style="padding-left: 40px;">
            <h3 class="font-weight-bold">
                {# <span class="s-24 icon-shopping_cart"> #}
                </span>{% trans %}ProviderClient{% endtrans %}: {{entity.client.companyName}}</span>
            </h3>
        </div>
    </div>
    <div class="row nav-action-tab">
        <ul class="nav nav-material nav-material-white responsive-tab" id="v-pills-tab" role="tablist">
            <div class="global-actions"></div>
            <li>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                <a class="nav-link" title="{% trans %}detail{% endtrans %}" href="{{path('easyadmin', { entity: 'Client', action: 'show', id: entity.client.id }) }}">
                    <i class="fa fa-fw fa-eye"></i>
                    {% trans %}detail{% endtrans %}
                </a>
            </li>
            <li>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                <a class="nav-link active" title="{% trans %}Modify{% endtrans %}" href="#">
                    <i class="fa fa-fw fa-pencil"></i>
                    {% trans %}Modify{% endtrans %}
                </a>
            </li>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            {% if entity.client.getTermconditionscheck == false %}
                <li>
                    {# <a class="nav-link " id="v-pills-86-tab" title="{% trans %}Back to list{% endtrans %}" href="{{path('edit_info_provider_client', { id: entity.client.id }) }}" target="_self">
                        <i class="fa fa-fw fa-pencil"></i>
                        {% trans %}UpdateEmailCliente{% endtrans %}
                    </a> #}
                    <a class="nav-link " id="edit_info_client" title="{% trans %}Back to list{% endtrans %}" href="#!" target="_self">
                        <i class="fa fa-fw fa-pencil"></i>
                        {% trans %}UpdateEmailCliente{% endtrans %}
                    </a>
                </li>
            {% endif %}
            <li>
                <a class="nav-link " id="v-pills-86-tab" title="{% trans %}Back to list{% endtrans %}" href="{{path('easyadmin', { entity: 'Client', action: 'list' }) }}" target="_self">
                    {% trans %}Back to list{% endtrans %}
                </a>
            </li>
        </ul>    
    </div>

    
{% endblock %}

{% block content %}
    {{parent()}}
{% endblock content %}



{% block body_javascript %}
    {{parent()}}
    <script>
    
        let addres = {}
        var listAddres = [];
        {% for k,direccion in entity.client.addresses%}
            addres = {
                "id"  : parseInt('{{direccion.id}}'),
                "state"  : 0,
                "stateName"  : '{{direccion.state}}',
                "nomAddres"  : '{{direccion.name}}',
                "cif"  : '{{direccion.id}}',
                "charge_person"  : '{{direccion.inChargePerson}}',
                "email_address"  : '{{direccion.email}}',
                "addres_one"  : '{{direccion.streetAddress1}}',
                "addres_two"  : '{{direccion.streetAddress2}}',
                "number"  : '{{direccion.number}}',
                "local"  : '{{direccion.local}}',
                "zip_code"  : '{{direccion.zipCode}}',
                "city"  : '{{direccion.city}}',
                "phone_addres"  : '{{direccion.phone}}',
            }
            listAddres.push(addres)
        {% endfor %}
        $(document).ready(function(){
            $(".content-header-title h3").text(`{{ 'ProviderClient'|trans() }}: {{entity.client.companyName}}`)
            

            $("#edit_info_client").click(function () {
                openEditInfoClient();
                listDireccionesAgrefadas();
            })

            const sel = document.getElementById("providerclient_catalogueProducts"); 
            let addoption = true;
            {% for key, catalogue in entity.client.catalogueClients %}
                {# console.log('{{catalogue.catalogue.id}}') #}
                for (var i = 0; i < sel.length; i++) {
                    var opt = sel[i];
                    if(opt.value === '{{catalogue.catalogue.id}}' ){
                        addoption = false
                        $('#providerclient_catalogueProducts').val(opt.value).trigger('change');
                    }
                }
            {% endfor %}

            var newOption = new Option("{{'inviteClienteCatalogue'|trans()}}", "", addoption, addoption);
            $('#providerclient_catalogueProducts').append(newOption).trigger('change');
        })

        function openEditInfoClient(){
            $('#rsidebarOverlay').addClass('RSBactive');
            $('#rsidebar').addClass('RSBactive');

            let html = `<div>
                <div class="content-header p-0">
                    <div class="d-flex flex-row justify-content-between align-content-center w-100">
                        <div class="content-header-title">
                            <h3>{{'Modify'|trans()}} {{'ROLE_CLIENT'|trans()}}</h3>
                            {# <h1 class="title">${subtitle}</h1> #}
                        </div>
                    </div>
                </div>
                <div class="row edit-client">
                    <div class="col-12">
                        <div class="form-group field-text p-0 mb-0 d-block"> 
                            <label class="form-control-label">{{'register.form.email'|trans()}}</label>              
                            <input type="email" id="email" name="email" value="{{entity.client.email}}" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group field-text p-0 mb-0 d-block"> 
                            <label class="form-control-label">{{'register.form.companyName'|trans()}}</label>              
                            <input type="text" id="companyName" name="companyName" value="{{entity.client.companyName}}" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group field-text p-0 mb-0 d-block"> 
                            <label class="form-control-label">{{'provider_ea.form.cif'|trans()}}</label>              
                            <input type="text" id="cifClient" name="cifClient" value="{{entity.client.cif}}" class="form-control">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group field-text p-0 mb-0 d-block"> 
                            <label class="form-control-label">{{'provider_ea.form.billingAddress'|trans()}}</label>              
                            <input type="text" id="billingAddress" name="billingAddress" value="{{entity.client.billingAddress}}" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group field-text p-0 mb-0 d-block"> 
                            <label class="form-control-label">{{'register.form.phone'|trans()}}</label>              
                            <input type="text" id="telefono" name="telefono" value="{{entity.client.phone}}" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group field-text p-0 mb-0 d-block"> 
                            <label class="form-control-label">{{'register.form.mobile'|trans()}}</label>              
                            <input type="text" id="movil" name="movil" value="{{entity.client.mobile}}" class="form-control">
                        </div>
                    </div>
                    <div class="col-12">
                        <a href="#!" class="mt-3 d-block" id="addAddresClient"><i class="fa fa-plus pr-1"></i>{{'addAddresClient'|trans()}}</a>
                        <div class="row" id="contAddAddresClient" style="display:none;">
                            <div class="col-6">
                                <input type="hidden" id="id" name="id" value="" class="form-control">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'STATE ENTITY'|trans}}</label>
                                    <select name="state" id="state" class="form-control" data-widget="select2">
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'client_ea.form.address_name'|trans()}}</label>              
                                    <input type="text" id="nomAddres" name="nomAddres" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'client_ea.form.cif'|trans()}}</label>              
                                    <input type="text" id="cif" name="cif" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'IN CHARGE PERSON'|trans()}}</label>              
                                    <input type="text" id="charge_person" name="charge_person" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'Email'|trans()}}</label>              
                                    <input type="text" id="email_address" name="email_address" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'Street address1'|trans()}}</label>              
                                    <input type="text" id="addres_one" name="addres_one" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'NUMBER'|trans()}}</label>              
                                    <input type="text" id="number" name="number" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'client_ea.form.local'|trans()}}</label>              
                                    <input type="text" id="local" name="local" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'Zip code'|trans()}}</label>              
                                    <input type="text" id="zip_code" name="zip_code" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'City'|trans()}}</label>              
                                    <input type="text" id="city" name="city" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group field-text p-0 mb-0 d-block"> 
                                    <label class="form-control-label">{{'PHONE'|trans()}}</label>              
                                    <input type="text" id="phone_addres" name="phone_addres" value="" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <button type="button" class="btn btn-primary mt-2" onclick="btnAddAddres()">
                                    {{'addAddres'|trans()}}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12" id="direccionesAgregadas"></div>
                    <div class="col-3 col-sm-2 mt-4">
                        <button type="button" class="btn btn-primary" id="updateClient" onclick="updateInfoClientProvider()">
                            {{'save'|trans()}}
                            <div class="spinner-border d-none" id="spinner_create" role="status" >
                                <span class="sr-only">Loading...</span>
                            </div>
                        </button>
                    </div>
                    <div class="col-3 col-sm-2 mt-4">
                        <button type="button" class="btn btn-secondary" onclick="btnCancelar()">
                            {{'Calendar.Cancel'|trans()}}
                        </button>
                    </div>
                    
                    <div class="col-12 mt-3">
                        <div id="cont_alert"></div>
                    </div>
                </div>
            </div>`;

            $('#rsidebar_container').html(html)

            id('telefono').onkeyup = function(){
                mascara( this, mtel );
            }

            id('movil').onkeyup = function(){
                mascara( this, mtel );
            }

            $("#addAddresClient").click(function () {
                faddAddresClient()
            })

            $('#state').select2({
                ajax: {
                    delay: 250,
                    url: '/state/pagination',
                    dataType: 'json',
                    data: function (params) {
                        var query = {
                            sea: params.term,
                            lim: 15,
                            pos: 0,
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            });
        }

        function faddAddresClient(){
            $('#cont_alert').html('')
            $('#contAddAddresClient').toggle()
        }

        function btnAddAddres(){
            $('#cont_alert').html('')
            const addres = {
                "id"  : $('#id').val() !== '' ? parseInt($('#id').val()) : Math.floor(Math.random()*1000),
                "state"  : $('#state').val(),
                "stateName"  : $('#state option:selected').text(),
                "nomAddres"  : $('#nomAddres').val(),
                "cif"  : $('#cif').val(),
                "charge_person"  : $('#charge_person').val(),
                "email_address"  : $('#email_address').val(),
                "addres_one"  : $('#addres_one').val(),
                "addres_two"  : '',
                "number"  : $('#number').val(),
                "local"  : $('#local').val(),
                "zip_code"  : $('#zip_code').val(),
                "city"  : $('#city').val(),
                "phone_addres"  : $('#phone_addres').val(),
            }

            if(addres.nomAddres !== ''){
                if(listAddres.filter( k => (k.id === addres.id))[0]){
                    console.log('entre en el if')
                    listAddres = listAddres.filter( k => (k.id !== addres.id))
                }

                listAddres.push(addres)
                $('#contAddAddresClient').toggle()
                $('#id').val('')
                $('#nomAddres').val("")
                $('#cif').val("")
                $('#charge_person').val("")
                $('#email_address').val("")
                $('#addres_one').val("")
                $('#number').val("")
                $('#local').val("")
                $('#zip_code').val("")
                $('#city').val("")
                $('#phone_addres').val("")
                listDireccionesAgrefadas();
            }else{
                alertView("{{'ingresaNombreDireccion'|trans()}}", 'danger');
            }
            console.log(listAddres);
        }


        function listDireccionesAgrefadas(){
            let list = ``;
            listAddres.map( k => {
                list += `<tr>
                    <td>${k.nomAddres}</td>
                    <td>${k.cif}</td>
                    <td>${k.charge_person}</td>
                    <td>${k.phone_addres}</td>
                    <td>
                        <a role="button" aria-expanded="false" onclick="updateAddres(${k.id})" class="action-edit">
                            <i class="fa fa-fw fa-pencil"></i>
                        </a>
                    </td>
                </tr>`
            })
            const  html = `
                <h4 class="mt-3">{{'Addresses'|trans()}}</h4><hr class="mt-1">
            <div class="table-responsive mt-3">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">{{'client_ea.form.address_name'|trans()}}</th>
                            <th scope="col">{{'client_ea.form.cif'|trans()}}</th>
                            <th scope="col">{{'IN CHARGE PERSON'|trans()}}</th>
                            <th scope="col">{{'PHONE'|trans()}}</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody id="direcciones">
                        ${list}
                    </tbody>
                </table>
            </div>`;

            $('#direccionesAgregadas').html(html)
        }

        function updateAddres(key){
            $('#cont_alert').html('')
            const info = listAddres.filter( k => (k.id === key))[0]
            
            $('#id').val(info.id)
            $('#nomAddres').val(info.nomAddres)
            $('#cif').val(info.cif)
            $('#charge_person').val(info.charge_person)
            $('#email_address').val(info.email_address)
            $('#addres_one').val(info.addres_one)
            $('#number').val(info.number)
            $('#local').val(info.local)
            $('#zip_code').val(info.zip_code)
            $('#city').val(info.city)
            $('#phone_addres').val(info.phone_addres)

            $('#contAddAddresClient').toggle()
        }

        function updateInfoClientProvider(){
            let body = {
                'client': {{entity.client.id}},
                'email': $('#email').val(),
                'cifClient': $('#cifClient').val(),
                'billingAddress': $('#billingAddress').val(),
                'companyName': $('#companyName').val(),
                'telefono': $('#telefono').val(),
                'movil': $('#movil').val(),
                'direcciones': listAddres,
            }
            console.log('hola mundo', body)
            $('#cont_alert').html('')

            $('#updateClient').prop('disabled', true);
            $('#spinner_create').removeClass('d-none');

            let mathod = 'PUT'
            let url = `/provider/client/custom/info`;
            __ajax(`${url}`, JSON.stringify(body), mathod)
                .done(function (obj) {
                    if(obj.code === 200){
                        alertView("{{'clienteUpdateInfo'|trans()}}", 'success');
                    }else{
                        alertView("{{'correoYaEnUso'|trans()}}", 'danger');
                    }
                    {# location.reload(); #}
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log('error',jqXHR.responseJSON);
                    alertView("{{'errorContactaConSoporte'|trans()}}", 'danger');
                }).always(function () {
                    console.log('Todo salio bien');
                    $('#spinner_create').addClass('d-none');
                    $('#updateClient').prop('disabled', false);
                });
        }

        {# function alertView(message, style) {
            const alert = `<div class="alert alert-${style}" role="alert">${message}</div>`;
            $('#cont_alert').html(alert)
        }
        function __ajax(url, data, metho) {
            var ajax = $.ajax({
                url: url,
                data: data,
                type: metho,
                // dataType: "json"
                contentType: "application/json",

            })
            return ajax;
        } #}

        /* Máscaras ER */
        function mascara(o,f){
            v_obj=o
            v_fun=f
            setTimeout("execmascara()",1)
        }
        function execmascara(){
            v_obj.value=v_fun(v_obj.value)
        }
        function mtel(v){
            v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
            v=v.replace(/^(\d{2})(\d)/g,"(+$1)$2"); //Coloca parênteses em volta dos dois primeiros dígitos
            //v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos
            return v;
        }
        function id( el ){
            return document.getElementById( el );
        }
    </script>
{% endblock %}