@extends('template')

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="page-content-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light">
                        <div class="portlet-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="font-blue-madison title"><i class="fa fa-check-square"></i> Checklist de ativação da proposta "{{ $proposta->name }}"</span>
                                    <a href="{{ route('admin.propostas') }}" class="right btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Voltar para consulta de propostas"><i class="fa fa-arrow-circle-left"></i>  Voltar</a>
                                    <hr>
                                </div>
                            </div>

                            {!! Form::open(['route' => 'admin.propostas.send.checklist', 'method' => 'post', 'id'=>'sendChecklist','role' => 'form', 'files' => true]) !!}
                            {!! Form::hidden('proposta_id', $proposta->id) !!}

                            <div class="row">
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::text('', $proposta->forma_venda, ['class' => 'form-control', 'autocomplete' => 'off','disabled' => 'disabled']) !!}
                                        {!! Form::label('', 'Tipo de Conta:', ['class' => 'control-label']) !!}
                                        {!! Form::hidden('tipo_de_conta', $proposta->forma_venda) !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-3">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::text('caixa_postal', $customer->email, ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'caixa_postal']) !!}
                                        {!! Form::label('caixa_postal', 'Caixa Postal', ['class' => 'control-label']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                
                                <div class="form-group col-md-12">
                                    <h4 class="font-blue-madison bold">Portabilidade</h4>
                                </div>

                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        <a href="{{ asset('/assets/modelfilesystem/modelo_formulario_portabilidade.xls') }}" class="btn blue-madison popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Clique aqui para baixar o fomulário modelo de portabilidade.">Modelo de Portabilidade</a>
                                    </div>
                                </div>
                                <div class="form-group col-md-4">
                                    <br/>
                                    <div class="fileinput fileinput-new popovers" data-provides="fileinput" data-container="body" data-trigger="hover" data-placement="top" data-content="Clique aqui para realizar o upload do formulário de portabilidade.">
                                        <div class="input-group input-medium">
                                            <span class="input-group-addon btn blue-madison btn-file">
                                                <input name="portabilidade" id ="portabilidade" type="file">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <h4 class="font-blue-madison bold">Números Virtuais</h4>
                                </div>
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('ddd_local', $ddds, '', ['id'=>'ddd_local', 'class'=>'form-control']) !!}
                                        {!! Form::label('ddd_local', 'DDD LOCAL ') !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        <input type="number" min="0" class="form-control" name="qtd_numeros" onkeyup="addDDD(this.value);" onchange="addDDD(this.value);">
                                        {!! Form::label('qtd_numeros', 'Qtd. Números', ['class' => 'control-label']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="row" id="ddds"></div>
                            <!-- <div class="row" class="table-scrollable"><table  class="table table-striped table-bordered table-hover" id="portabilidades"></table></div> -->
                            <div class="row">
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('tipo_de_servico', [''=>'','Conta SIP'=>'Conta SIP', 'PABX'=>'PABX'], '', ['id'=>'tipo_de_servico', 'class'=>'form-control']) !!}
                                        {!! Form::label('tipo_de_servico', 'Tipo Serviço', ['class' => 'control-label']) !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('rota', [''=>'','TDM'=>'TDM', 'CLI'=>'CLI'], '', ['id'=>'rota', 'class'=>'form-control']) !!}
                                        {!! Form::label('rota', 'Rota', ['class' => 'control-label']) !!}
                                    </div>
                                </div>                                    
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('cliente_possui_firewall', [''=>'','Sim'=>'Sim','Não'=>'Não'], '', ['id'=>'cliente_possui_firewall', 'class'=>'form-control']) !!}
                                        {!! Form::label('cliente_possui_firewall', 'Possui Firewall') !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('porteiro', [''=>'','Sim'=>'Sim','Não'=>'Não'], '', ['id'=>'porteiro', 'class'=>'form-control']) !!}
                                        {!! Form::label('porteiro', 'Possui Porteiro') !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('mikrotik', [''=>'','Sim'=>'Sim','Não'=>'Não'], '', ['id'=>'mikrotik', 'class'=>'form-control']) !!}
                                        {!! Form::label('mikrotik', 'Possui mikrotik?') !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::select('vpn', [''=>'','Sim'=>'Sim','Não'=>'Não'], '', ['id'=>'vpn', 'class'=>'form-control']) !!}
                                        {!! Form::label('vpn', 'Possui vpn?') !!}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                @if(count($produtos) > 0)
                                <div class="form-group col-md-12">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <div class="portlet box blue-madison">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        Produtos 
                                                    </div>
                                                </div>
                                                <div class="portlet-body flip-scroll">
                                                    <table class="table table-bordered table-striped table-condensed flip-content">
                                                        <thead class="flip-content">
                                                            <tr>
                                                                <th> Produto </th>
                                                                <th> Quantidade </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach($produtos as $produto)
                                                            <tr>
                                                                <td> {{ $produto->descricao }} </td>
                                                                <td> {{ $produto->qtd }} </td>
                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @if(count($servicos) > 0)
                                <div class="form-group col-md-12">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <div class="portlet box blue-madison">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        Serviços 
                                                    </div>
                                                </div>
                                                <div class="portlet-body flip-scroll">
                                                    <table class="table table-bordered table-striped table-condensed flip-content">
                                                        <thead class="flip-content">
                                                            <tr>
                                                                <th class="col-md-2"> Serviço </th>
                                                                <th class="col-md-2"> Franquia </th>
                                                                <th class="col-md-2"> Valor principais cidades</th>
                                                                <th class="col-md-2"> Valor demais cidades</th>
                                                                <th class="col-md-2"> Valor móvel nacional</th>
                                                                <th class="col-md-1"> Quantidade </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach($servicos as $servico)
                                                            <tr>
                                                                <td> {{ $servico->name }} </td>
                                                                <td> {{ $servico->franquia }} </td>
                                                                <td> {{ financialPrice($servico->fixo_principais_cidades) }} </td>
                                                                <td> {{ financialPrice($servico->fixo_demais_cidades)}} </td>
                                                                <td> {{ financialPrice($servico->movel_nacional )}} </td>
                                                                <td align="center"> {{ $servico->qtd }} </td>
                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">RAMAIS <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Quantos ramais irão ser usados no total, se serão separados por departamentos entre outros."></i></span>
                                            <br/>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="ramais" id="ramais"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">URA <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Informar detalhadamente como será utilizada a ura"></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="ura" id="ura"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">HORÁRIO DE ATENDIMENTO <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Caso for utilizar uma URA com regras de horário de atendimento."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="horario_atendimento" id="horario_atendimento"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">SIGA-ME <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Se é para todos os ramais, para um específico, depois de quantos toques, etc."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="sigame" id="sigame"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">REGRAS DE DISCAGEM <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Verificar se ele terá regras de discagem, ex:(0 pra tdm) (1 pra tdm)."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="regras_de_discagem" id="regras_discagem"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">DISCAGEM PADRÃO <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Informe as regras de discagem padrão para o cliente."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="discagem_padrao" id="discagem_padrao"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">CONFERÊNCIA <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Informar Se o cliente tersala de confereência ou não, em caso positivo detalhar informações."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="conferencia" id="conferencia"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">OPERADORA DE INTERNET <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Informe os detalhes sobre a operadora de internet do cliente."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="operadora" id="operadora"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">REGRAS ESPECÍFICAS <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Se primeiro toca em um ramal, depois toca em outro, etc."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="regras" id="regras"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <span class="font-blue-madison title">Configurações Especiais <i class="fa fa-question-circle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="* Informe se o cliente possui alguma configuração especial. Ex: Mikrotik, VPN, FXO, PORTEIRO."></i></span>
                                        </div>
                                    </div>
                                    <div class="portlet light form-fit ">
                                        <div class="portlet-body form">
                                            <div class="form-body">
                                                <div class="form-group last">
                                                    <div class="col-md-12">
                                                        <textarea name="configuracoes_especiais" id="configuracoes_especiais"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <button type="submit" name="Salvar" value='Salvar' class="btn green-jungle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Envia o checklist para o setor de ativação.">
                                        <i class=" fa fa-send"></i> Enviar
                                    </button>
                                    <a href="{{route('admin.propostas')}}" class="btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Aborta o envio do checklist por email."><i class="fa fa-close"></i> Cancelar</a>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT INNER -->
    </div>
</div>
@stop()

@section('js-admin-servico')
<script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
<link href="{{ asset('/assets/global/plugins/bootstrap-summernote/summernote.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('/assets/global/plugins/bootstrap-summernote/summernote.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('/assets/pages/scripts/components-editors.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready( function() { 
        $("#sendChecklist").validate({
            rules: {
                caixa_postal: {required:true,email:true},
                ddd_local: "required",
                tipo_de_servico: "required",
                rota: "required",
                cliente_possui_firewall: "required",
                porteiro: "required",
                mikrotik: "required",
                vpn: "required",
            },
            messages: {
                caixa_postal: "Favor informar um formato válido de email!",
                ddd_local: "Obrigatório!",
                tipo_de_servico: "Obrigatório!",
                rota: "Obrigatório!",
                cliente_possui_firewall: "Obrigatório!",
                porteiro: "Obrigatório!",
                mikrotik: "Obrigatório!",
                vpn: "Obrigatório!",
            }
        });

    });

    $('#plano').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#ramais').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#regras').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#horario_atendimento').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#ura').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#sigame').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#regras_discagem').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#discagem_padrao').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#conferencia').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#operadora').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });
    $('#configuracoes_especiais').summernote({
        height: 150,
        toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
        ]
    });

    $("#portabilidade").on("change",function (){
        var portabilidade = $(this).val();
        var extensao = portabilidade.split(".");
        if(extensao[1] != 'xls' && portabilidade != '' && extensao[1] != 'xlsx'){
            swal({"title":"Atenção","text":"Tipo de arquivo não permitido!<br/>Insira um arquivo XLS!","showConfirmButton":true,"type":"warning","html":true});
            $(this).val('');
        }
    });
    function addDDD(qtdDDD){
        var option = '<option value=""></option>';
        @foreach($ddds as $key => $value)
        option = option + "<option value='{{$key}}'>{{$value}}</option>";
        @endforeach

        if(qtdDDD == 0){
            $("#ddds").hide('slow');
        }else{
            $("#ddds").html("");
            for(i=0;i<qtdDDD;i++){
                var indice = i+1;
                var ddd = '<div class="form-group col-md-1" id="'+i+'" ><div class="form-group form-md-line-input has-personalizado form-md-floating-label"><select name="ddd[]" class="form-control" onchange="selNumber(this.value, '+i+');">'+option+'</select><label for="ddd[]">DDD '+indice+'</label></div></div>';

                var number = '<div class="form-group col-md-2"><div class="form-group form-md-line-input has-personalizado form-md-floating-label" id="editNumber-'+i+'"><select name="number[]" class="form-control" id="number'+i+'"><option value=""></option></select><label for="ddd[]">Número '+indice+'</label></div></div>';
                $("#ddds").append(ddd);
                $("#ddds").append(number);
            }
            $("#ddds").show("slow");
        }
    }
    
    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($("#virtual_number_"+line).val());
                        if($("#virtualDDD_"+line).val() > 0){
                            $("#editNumber-"+line+" #virtual_number_"+line).css("border-color","#578EBE").attr("title","Campo obrigatório");
                        }
                    }else{
                        $("#editNumber-"+line+" #virtual_number_"+line).css("border-color","#578EBE");
                    }
                }
            });
        }else{
            $("#editNumber_"+line).html('<select id="virtualnumber-default" class="form-control" name=""><option value="">Escolha seu Número Virtual</option></select>');
        }
    }

        //verifica se o numero selecionado ja foi selecionado em outro campo
        $("#ddds").on("change",".number-select",function (){
            numero = $(this).val();
            id_campo = $(this).attr('id');
            
            $('.number-select').not(this).each(function(){
                var valor_atual = $(this).val();
                if(valor_atual == numero){
                    swal({"title":"Atenção","text":"Não é permitido números iguais.<br>Por favor, digite novamente","showConfirmButton":true,"type":"error","html":true});
                    $(this).val('');
                }
            });
        });

        // function addPortabilidade(qtdPort){

        //     var option = '<option value="">DDD</option>';
        //     @foreach($ddds as $key => $value)
        //     option = option + "<option value='{{$key}}'>{{$value}}</option>";
        //     @endforeach
        //     option = option + "<option value='0300'>0300</option>";
        //     option = option + "<option value='0800'>0800</option>";
        //     option = option + "<option value='40XX'>40XX</option>";
        //     var optionS = '<option value="">Estado</option>';
        //     @foreach($states as $sigla => $estado)
        //     optionS = optionS + "<option value='{{$sigla}}'>{{$estado}}</option>";
        //     @endforeach

        //     if(qtdPort == 0){
        //         $("#portabilidades").hide('slow');
        //     }else{
        //         $("#portabilidades").html("");
                
        //         var html = '';
                
        //         for(i=0;i<qtdPort;i++){

        //             var indice = i+1;

        //             html += '<tr><td>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<select name="portabilidade['+i+'][]" class="form-control">'+option+'</select>';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" class="form-control" placeholder="Número">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" class="form-control" placeholder="Operadora Origem">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" class="form-control" placeholder="Razão Social/Nome">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" class="form-control" placeholder="CPF/CNPJ">';
        //             html += '</div>';

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

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" id="address_'+i+'" class="form-control" placeholder="Endereço">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" class="form-control" placeholder="Número Residência">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" id="complement_'+i+'" class="form-control" placeholder="Complemento">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" id="neighborhood_'+i+'" class="form-control" placeholder="Bairro">';
        //             html += '</div>';

        //             html += '<div class="form-group col-md-2">';
        //             html += '<input type="text" name="portabilidade['+i+'][]" id="city_'+i+'" class="form-control" placeholder="Cidade">';
        //             html += '</div>';

        //             html += '<div class="row">';
        //             html += '<div class="form-group col-md-2">';
        //             html += '<select name="portabilidade['+i+'][]" id="state_'+i+'" class="form-control">'+optionS+'</select>';
        //             html += '</div>';
        //             html += '</div>';

        //             html += '</td></tr>';
                    
        //         }

        //         $("#portabilidades").append(html);
        //         $("#portabilidades").show("slow");
        //     }

        // }

        // function zip_code(line) {
        //     $.ajaxSetup({
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        //         }
        //     })

        //     $.ajax({ 
        //         type: "GET", 
        //         url: '{{ route('search.zipcode') }}', 
        //         data: {zip_code: $('#zip_code_'+line).val()}, 
        //         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);
        //         } 
        //     });
        // }
    </script>
    @stop()