@extends('template')

@section('content')

    <!-- BEGIN PAGE CONTENT BODY -->
    <div class="page-content">
        <div class="container-fluid">

            <!-- BEGIN PAGE BREADCRUMBS -->
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">Dashboard</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Números Virtuais</span>
                </li>
            </ul>
            <!-- END PAGE BREADCRUMBS -->

            <!-- BEGIN PAGE CONTENT INNER -->
            <div class="page-content-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet">
                            <div class="portlet-body">

                                @if (session('messageError'))
                                    <div class="alert alert-success alert-dismissable">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        {{ session('messageError') }}
                                    </div>
                                @endif

                                <div class="mt-element-step">
                                    <div class="row step-thin">
                                        <div class="mt-step-desc">
                                            <div id="number" style="cursor: pointer;" class="col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison">
                                                <div id="number-title" class="mt-step-title uppercase font-white">
                                                    Números Virtuais
                                                </div>
                                                <div id="number-description" class="mt-step-content font-white">
                                                    Escolha os números disponíveis
                                                </div>
                                            </div>

                                            <div id="portability" style="cursor: pointer;" class="col-md-6 mt-step-col bg-grey">
                                                <div id="portability-title" class="mt-step-title uppercase font-grey-cascade">
                                                    Portabilidade
                                                </div>
                                                <div id="portability-description" class="mt-step-content font-grey-cascade">
                                                    Escolha os DDD's disponíveis
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {!! Form::open(['route' => 'number.storage', 'method' => 'post', 'files' => true]) !!}

                    @if (!isset($item_plan->plan_id))
                        <input type="hidden" name="plan_id" value="{{ $item_plan->plan_id }}">
                    @else
                            <input type="hidden" name="plan_id" value="">
                    @endif
                    <div class="row" id="tab-number">
                        <div class="col-md-12">
                            <div class="portlet light">

                                <div class="portlet-title">
                                    <div class="caption caption-md">
                                        <span class="caption-subject bold">Números Virtuais</span>
                                        <span class="caption-helper hide"></span>
                                    </div>
                                </div>

                                <div class="alert alert-success alert-dismissable" id="warning-plan" style="display:none;">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    Não é possível adicionar mais números no plano atual, caso deseje migrar de plano <a href="{{ route('voice.plan') }}" style="text-decoration:none; color:#fff;">Clique aqui</a>.
                                </div>

                                <div class="portlet-body hide-maximum">
                                    <div class="note note-info">Contrate serviços adicionais para a sua linha voip. É fácil e seguro.
                                    <br><br>

                                        @if (count($customer) <= 0)
                                            <div class="alert alert-warning">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                <strong>Aviso:</strong><br>
                                                Você precisa completar o seu <a href="{{ route('profile') }}">cadastro</a>, para comprar números virtuais.
                                            </div>
                                        @else
                                            <p style="display:none;">Valor Total de Ativação: <strong id="amount-number">R$ 15,00</strong></p>
                                            <p style="display:none;">Valor Total de Mensalidade: <strong id="amount-monthly">R$ 20,00</strong></p>
                                        @endif

                                        @if (!empty($free_plan))
                                            <div class="alert alert-warning">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                <strong>Aviso:</strong><br>
                                                Você precisa ativar o seu <a href="{{ route('voice.plan') }}">Plano</a>, para comprar números virtuais.
                                            </div>
                                        @endif

                                    </div>

                                    @if ((isset($customer->id)) && (!$free_plan) && Auth::user()->active == 'yes')
                                        @for ($i = 0; $i+$totalNumbers < $item_plan->number_maximum; $i++)
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <select name="virtualDDD[]" id="virtualDDD_{{ $i }}" class="form-control" onchange="selNumber(this.value, {{ $i }}); return false;">
                                                            <option value="0">Escolha um DDD</option>
                                                            @foreach($dids as $did)
                                                                <option value="{{$did->ddd}}" {{ old('virtualDDD')[$i] == $did->ddd ? 'selected' : '' }}>{{$did->ddd}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group" id="editNumber-{{ $i }}">
                                                        <select name="" id="virtual_number_{{ $i }}" class="form-control">
                                                            <option value="">Escolha seu Número Virtual</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="tab-portability" style="display:none;">
                        <div class="col-md-12">
                            <div class="portlet light">
                                <div class="portlet-title">
                                    <div class="caption caption-md">
                                        <span class="caption-subject bold">Portabilidade</span>
                                        <span class="caption-helper hide"></span>
                                    </div>
                                </div>

                                <div class="alert alert-success alert-dismissable" id="warning-plan-portability" style="display:none;">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    Não é possível adicionar mais números no plano atual, caso deseje migrar de plano <a href="{{ route('voice.plan') }}" style="text-decoration:none; color:#fff;">Clique aqui</a>.
                                </div>

                                <div class="portlet-body hide-maximum">
                                    <div class="note note-info">Preencha corretamente os campos abaixo, para não ocorrer erros no processo de portabilidade.
                                    <br><br>

                                        @if (count($customer) <= 0)
                                            <div class="alert alert-warning">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                <strong>Aviso:</strong><br>
                                                Você precisa completar o seu <a href="{{ route('profile') }}">cadastro</a>, para solicitar portabilidade.
                                            </div>
                                        @endif

                                        @if (!empty($free_plan))
                                            <div class="alert alert-warning">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                <strong>Aviso:</strong><br>
                                                Você precisa ativar o seu <a href="{{ route('voice.plan') }}">Plano</a>, para realizar portabilidade.
                                            </div>
                                        @endif
                                    </div>

                                    @if (session('messagePortability'))
                                        <div class="alert alert-success alert-dismissable">
                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                            {{ session('messagePortability') }}
                                        </div>
                                    @endif

                                    @if ((isset($customer->id)) && (!$free_plan) && Auth::user()->active == 'yes'))
                                        <div class="portability">
                                        @for ($i = 0; $i+$totalNumbers < $item_plan->number_maximum; $i++)
                                            <div class="note note-info">
                                                <h3>Portabilidade {{$i+1}}</h3>
                                            </div>
                                            <div class="row">

                                                <div class="form-group col-md-2">
                                                    <select name="ddd[]" id="ddd_{{ $i }}" value="{{ old('ddd')[$i] }}" class="form-control">
                                                        <option value="0">DDD</option>
                                                        @foreach($ddds as $key => $ddd)
                                                            <option value="{{$ddd}}" {{ old('ddd')[$i] == $ddd ? 'selected' : ''}}>{{$ddd}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="number_portability[]" id="number_portability_{{ $i }}" value="{{ old('number_portability')[$i] }}" class="form-control" placeholder="Número" >
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="origin_operator[]" id="origin_operator_{{ $i }}" value="{{ old('origin_operator')[$i] }}" class="form-control" placeholder="Operadora Origem">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="company_name[]" id="company_name_{{ $i }}" value="{{ old('company_name')[$i] }}" class="form-control" placeholder="Razão Social/No  me">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="cpf_cnpj[]" id="cpf_cnpj_{{ $i }}" value="{{ old('cpf_cnpj')[$i] }}" class="form-control cpf_cnpj" placeholder="CPF/CNPJ"  >
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="zip_code[]" id="zip_code_{{ $i }}" value="{{ old('zip_code')[$i] }}" class="form-control" placeholder="CEP" onblur="zip_code({{ $i }}); return false;">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="address[]" id="address_{{ $i }}" value="{{ old('address')[$i] }}" class="form-control" placeholder="Endereço">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="number[]" id="number_{{ $i }}" value="{{ old('number')[$i] }}" class="form-control" placeholder="Número Residência">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="complement[]" id="complement_{{ $i }}" value="{{ old('complement')[$i] }}" class="form-control" placeholder="Complemento">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="neighborhood[]" id="neighborhood_{{ $i }}" value="{{ old('neighborhood')[$i] }}" class="form-control" placeholder="Bairro">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <input type="text" name="city[]" id="city_{{ $i }}" value="{{ old('city')[$i] }}" class="form-control" placeholder="Cidade">
                                                </div>

                                                <div class="form-group col-md-2">
                                                    <select name="state[]" id="state_{{ $i }}"  class="form-control">
                                                        <option value="0">Estado</option>
                                                        @foreach($states as $key => $state)
                                                            <option value="{{$key}}" {{ old('state')[$i] == $key ? 'selected' : ''}}>{{$state}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endfor
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    @if((isset($customer->id)) && (!$free_plan) && Auth::user()->active == 'yes')
                        <div class="col-md-12">
                            <div class="portlet light">
                                <div class="form-actions right">
                                    <button id="submit-button" class="btn blue-madison">Prosseguir</button>
                                </div><br>

                                <div class="portlet-title">
                                    <div class="caption caption-md">
                                        <span class="caption-subject bold">Números adquiridos</span>
                                        <span class="caption-helper hide"></span>
                                    </div>
                                </div>

                                <div class="portlet">
                                    <div class="">
                                        <div class="table-scrollable table-scrollable-borderless">
                                            @if(count($numbers) <= 0 and count($portabilities) <= 0)
                                                <div class="note note-danger">Você não tem números contratados</div>
                                            @else
                                                <table class="table table-striped table-hover table-light" id="table-number">
                                                    <thead>
                                                        <tr class="uppercase">
                                                            <th class="col-md-6 bg-default">DDD</th>
                                                            <th class="col-md-6 bg-default">Número</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($numbers as $number)
                                                            <tr>
                                                                <td>{{$number->ddd}}</td>
                                                                <td>{{$number->number}}</td>
                                                            </tr>
                                                        @endforeach
                                                        @foreach($portabilities as $portabilitie)
                                                            <tr>
                                                                <td>{{$portabilitie->ddd}}</td>
                                                                <td>{{$portabilitie->number_portability}}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                {!! Form::close() !!}
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
    <!-- END PAGE CONTENT BODY -->
@stop()

@section('js-virtualnumber')

    <script src="{{ asset('/assets/global/scripts/valida-cpf-cnpj.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/scripts/valida-celular.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    @if (count($customer) > 0)
        $(document).ready(function() {
            @if (session('trataError'))

                var trataError = '{{ session('trataError') }}';
                trataError = JSON.parse(trataError.replace(/&quot;/g,'"'));
                var old = '{{ json_encode(old()) }}';
                old = JSON.parse(old.replace(/&quot;/g,'"'));
                console.log(old);
                console.log(trataError);
                for(tipoForm in trataError){
                    // console.log(tipoForm);
                    for(form in trataError[tipoForm]){
                        // console.log(form);
                        for(campo in trataError[tipoForm][form]){
                            var tooltip = trataError[tipoForm][form][campo];
                            // console.log(campo,tooltip);
                            if(tipoForm == "number"){
                                selNumber(old.virtualDDD[form], form,true);

                            }else{
                                $("#"+campo+"_"+form).css("border-color","#f2784b").attr("title",tooltip);

                            }

                        }
                    }
                }
            @endif
            var countNumbers = '{{count($numbers)}}';
            var countPortabilities = '{{count($portabilities)}}';


            var countNumbersCurrency = parseInt(countNumbers) + parseInt(countPortabilities);

            var value = '{{ $item_plan->number_maximum }}';

            var max_fields = value - countNumbersCurrency;

            if (max_fields <= 0) {
                $("button").css('display', 'none');
                $("input").css('display', 'none');
                $(".hide-maximum").css('display', 'none');

                $("#warning-plan").css('display', 'block');
                $("#warning-plan-portability").css('display', 'block');
            }

            $("#portability").click(function() {
                // Mostra ou esconde tab
                $("#tab-number").css('display', 'none');
                $("#tab-portability").css('display', 'block');

                // Removendo classe atual da aba
                $("#number").removeClass('col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#number-number").removeClass('mt-step-number bg-white font-blue-madison');
                $("#number-title").removeClass('mt-step-title uppercase font-white');
                $("#number-description").removeClass('mt-step-content font-white');

                $("#portability").removeClass('col-md-6 mt-step-col bg-grey');
                $("#portability-number").removeClass('mt-step-number bg-white font-grey-cascade');
                $("#portability-title").removeClass('mt-step-title uppercase font-grey-cascade');
                $("#portability-description").removeClass('mt-step-content font-grey-cascade');

                // Adicionando classe atual da aba
                $("#number").addClass('col-md-4 mt-step-col bg-grey');
                $("#number-number").addClass('mt-step-number bg-white font-grey-cascade');
                $("#number-title").addClass('mt-step-title uppercase font-grey-cascade');
                $("#number-description").addClass('mt-step-content font-grey-cascade');

                $("#portability").addClass('col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#portability-number").addClass('mt-step-number bg-white font-blue-madison');
                $("#portability-title").addClass('mt-step-title uppercase font-white');
                $("#portability-description").addClass('mt-step-content font-white');
            });

            $("#number").click(function() {
                // Mostra ou esconde tab
                $("#tab-number").css('display', 'block');
                $("#tab-portability").css('display', 'none');

                // Removendo classe atual da aba
                $("#portability").removeClass('col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#portability-number").removeClass('mt-step-number bg-white font-blue-madison');
                $("#portability-title").removeClass('mt-step-title uppercase font-white');
                $("#portability-description").removeClass('mt-step-content font-white');

                $("#number").removeClass('col-md-6 mt-step-col bg-grey');
                $("#number-number").removeClass('mt-step-number bg-white font-grey-cascade');
                $("#number-title").removeClass('mt-step-title uppercase font-grey-cascade');
                $("#number-description").removeClass('mt-step-content font-grey-cascade');

                // Adicionando classe atual da aba
                $("#portability").addClass('col-md-4 mt-step-col bg-grey');
                $("#portability-number").addClass('mt-step-number bg-white font-grey-cascade');
                $("#portability-title").addClass('mt-step-title uppercase font-grey-cascade');
                $("#portability-description").addClass('mt-step-content font-grey-cascade');

                $("#number").addClass('col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#number-number").addClass('mt-step-number bg-white font-blue-madison');
                $("#number-title").addClass('mt-step-title uppercase font-white');
                $("#number-description").addClass('mt-step-content font-white');
            });

            $('.cpf_cnpj').blur(function(){
                if(this.value != ""){
                    if(formata_cpf_cnpj(this.value)){
                        this.value = formata_cpf_cnpj(this.value);
                    }else{
                        swal({"title":"Atenção!","text":"CPF ou CNPJ inválido!","showConfirmButton":true,"type":"error"});
                    }
                }
            });
        });


        function selNumber(ddd, line, retorno) {
            if(ddd>0){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                })

                $("#editNumber-"+line).html("<p>Por favor aguarde enquanto os procuramos os números disponíveis <img src='{{ asset('/assets/global/img/loading.gif') }}'></p>");

                $.ajax({
                    type: "GET",
                    url: '{{ route('virtualnumber.did') }}',
                    data: {ddd: ddd},
                    success: function(data) {
                        $("#editNumber-"+line).html(data);
                        $("#editNumber-"+line+" #virtual_number").attr("id","virtual_number_"+(line));
                        if(retorno){
                            console.log($("#virtualDDD_"+line).val());
                            if($("#virtualDDD_"+line).val() > 0){
                                $("#editNumber-"+line+" #virtual_number_"+line).css("border-color","#f2784b").attr("title","Campo obrigatório");
                            }
                        }else{
                            $("#editNumber-"+line+" #virtual_number_"+line).css("border-color","#c2cad8");
                        }

                    }
                });
            }else{
                $("#editNumber_"+line).html('<select id="virtualnumber-default" class="form-control" name=""><option value="">Escolha seu Número Virtual</option></select>');
            }
        }
        // function dynamicHtml(tipo,signal,max){
        //     $.ajaxSetup({
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        //         }
        //     });

        //     var varCount = tipo == "portability" ? countPortabilities : countNumbers;
        //     if(signal == "+"){
        //         varCount++;
        //         if( max > ((countNumbers + countPortabilities)+1) ){// Compara se não excede a quantidade de numeros disponiveis por plano

        //         }else{

        //         }
        //     }else{
        //         varCount--;
        //         if(0 <= ((countNumbers + countPortabilities)-1)){
        //             return false;
        //         }
        //     }


        //     $.ajax({
        //         type: "GET",
        //         url: '{{ route('virtualnumber.dynamic') }}',
        //         data: {tipo: tipo,qtd: varCount,max: max},
        //         success: function(data) {
        //             countNumbers - countPortabilities
        //             console.log("dynamicHtml",data);
        //             $("#dynamic-"+tipo).html(data);
        //         }
        //     });
        // }
        function zip_code(line) {
            var zip_code = $('#zip_code_'+line).val() ? $('#zip_code_'+line).val() : "";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })

            $.ajax({
                type: "GET",
                url: '{{ route('search.zipcode') }}',
                data: {zip_code:zip_code },
                success: function(data) {
                    var json = JSON.parse(data);
                    console.log(json);

                    $("#address_"+line).val(json.logradouro);
                    $("#complement_"+line).val(json.complemento);
                    $("#neighborhood_"+line).val(json.bairro);
                    $("#city_"+line).val(json.localidade);
                    $("#state_"+line).val(json.uf);
                }
            });
        }
    @endif
</script>
    @if(Auth::user()->chat)
        <!-- BEGIN JIVOSITE CODE {literal} -->
            <script type='text/javascript'>
            (function(){ var widget_id = 'o6gDGQPyK5';var d=document;var w=window;function l(){
            var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
        <!-- {/literal} END JIVOSITE CODE -->
        <!-- <script type="text/javascript">
            var __tw_omni_args__ = { channel: 'widget', link: 'https://app.omnismart.io:3000/', sk: '1591185964576', lang: 'pt-BR' }; 
            var script = document.createElement('script'); script.type = 'text/javascript'; script.src = __tw_omni_args__.link + 'chat/index.js'; 
            document.head.appendChild(script); 
        </script> -->
    @endif
@stop()