@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>Comprar Créditos</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 (empty($data->customer->id))
                                    <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
                                    @if($tokenAtivo == 0)
                                        
                                        <div class="alert alert-warning" data-tour-title="Ativação de Conta" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'>Essa parte é muito importante por motivos de segurança nós iremos gerar um token e lhe enviar por SMS a fim de proteger seus dados.<br/>Se voc~e não cadastrou seu celular, você pode cadastrá-lo <a href='{{ route('profile') }}' target='_blank'>aqui</a> ou entrar em contato com o nossa equipe de suporte!" data-tour-index="1">
                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                            <strong>Aviso:</strong><br>
                                            Por motivos de segurança, para efetuar a compra do seu plano é necessária a ativação do seu token de acesso. 
                                            @if(!$temToken)
                                                <button class="btn btn-sm blue-madison btn_token">Gerar Meu Token</button>
                                            @else
                                                <button class="btn btn-sm blue-madison btn_token">Atualizar Token</button>
                                            @endif
                                        </div>

                                        <div id='frm-token' @if(!$temToken) style="display:none" @endif>
                                            <div class="note note-info">
                                                <div class="portlet-title">
                                                    <div class='row'>
                                                        {!! Form::open(['route' => 'voice.ativar.token', 'method' => 'post']) !!}                                                            
                                                            <div class="col-md-1"><h3>Token:</h3></div>
                                                            <div class="col-md-2">
                                                                {!! Form::text('token_id', '', ['class' => 'form-control', 'placeholder' => 'Insira o seu Token', 'autocomplete' => 'off']) !!}
                                                            </div>
                                                            <div class="col-md-1">
                                                                <button class="btn btn-sm blue-madison">Enviar</button>
                                                            </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif

                                <div class="mt-element-step">       
                                    <div class="row step-thin">
                                        <div class="mt-step-desc">
                                            <div id="refill" class="col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison">
                                                <div id="refill-number" class="mt-step-number bg-white font-blue-madison">1</div>
                                                <div id="refill-title" class="mt-step-title uppercase font-white">Plano</div>
                                                <div id="refill-description" class="mt-step-content font-white">Escolha seu plano</div>
                                            </div>
                                            <div id="number" class="col-md-4 mt-step-col bg-grey">
                                                <div id="number-number" class="mt-step-number bg-white font-grey-cascade">2</div>
                                                <div id="number-title" class="mt-step-title uppercase font-grey-cascade">Números</div>
                                                <div id="number-description" class="mt-step-content font-grey-cascade">Números Virtuais ou Portabilidade</div>
                                            </div>
                                            <div id="confirm" class="col-md-4 mt-step-col bg-grey">
                                                <div id="confirm-number" class="mt-step-number bg-white font-grey-cascade">3</div>
                                                <div id="confirm-title" class="mt-step-title uppercase font-grey-cascade">Confirmação</div>
                                                <div id="confirm-description" class="mt-step-content font-grey-cascade">Confirme os dados da compra</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
                
                {!! Form::open(['route' => 'voice.plan.edit', 'method' => 'post']) !!}
                    <div class="row" id="tab-refill">    
                        @foreach($data->plans as $key => $value)                            
                            <div class="col-md-4" @if($key == 0 and !isset($data->plan_name)) data-tour-title="Ativação de Conta" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui você pode escolher o plano que mais se adequa as suas necessidades!" data-tour-index="1" @endif>

                                <div class="portlet light" style="{{ ($value->siptek == $planoAtual) ? 'border:5px solid #f2784b;' : '' }}">

                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-blue-madison sbold uppercase">{{ $value->name }}</span>
                                        </div>
                                        <div class="actions">
                                            @if (!empty($data->customer->id) && $tokenAtivo == 1)
                                                <div class="btn-group">
                                                    @if($planoAtual=='Plano Grátis')
                                                        <button class="btn btn-sm blue-madison" name="plan_id" value="{{ $value->id }}">Comprar Plano</span>
                                                    @else
                                                        @if($value->siptek == $planoAtual)
                                                            <div class="btn btn-sm blue-madison" name="plan_id" value="{{ $value->id }}">Plano Escolhido</div>
                                                        @else
                                                            <button class="btn btn-sm blue-madison" name="plan_id" value="{{ $value->id }}">Alterar Plano</span>
                                                        @endif
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="table-scrollable">
                                        <table class="table table-striped table-hover table-light">
                                            <tbody>
                                                <tr>
                                                    <td>Mensalidade <span class="font-blue-madison">R$ {{ formatMoney($value->price) }}</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Fixo Principais Cidades* <span class="font-blue-madison">R$ {{ formatMoney($value->item_plans['main_cities']) }}</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Fixo Demais Cidades* <span class="font-blue-madison">R$ {{ formatMoney($value->item_plans['other_cities']) }}</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Móvel Nacional <span class="font-blue-madison">R$ {{ formatMoney($value->item_plans['mobile_national']) }}</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Números Entrantes <span class="font-blue-madison">R$ {{ formatMoney($value->item_plans['numbers']) }}</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Ativação <span class="font-blue-madison">R$ {{ formatMoney($value->item_plans['activate']) }}</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Valores dos numeros descontado do plano </span></td>
                                                </tr>
                                                <tr>
                                                    <td>Este Plano aceita no máximo <span class="font-blue-madison">{{ $value->item_plans['number_maximum'] }} numeros </span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>                            
                        @endforeach
                    </div>                    
                {!! Form::close() !!}


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

                    <input type="hidden" name="plan_id" value="{{ $data->plan_id }}">

                    <div class="row" id="tab-number" style="display:none;">
                        <div class="col-md-12">  
                            <div class="portlet light"> 
                                <div class="alert alert-warning alert-dismissable" @if(isset($data->plan_name) and !isset($itemIugu))) data-tour-title="Ativação de Conta" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui você pode finalizar a sua compra!" data-tour-index="1" @endif>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <h3 class='font-dark'>
                                        Caso queira comprar apenas o Plano {{ $data->plan_name }}&nbsp;
                                        <button id="next-payment" class="btn blue-madison">Clique aqui</button>
                                    </h3>
                                </div> 

                                <div class="row" @if(isset($data->plan_name) and !isset($itemIugu))) data-tour-title="Ativação de Conta" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui você pode comprar seu número virtual ou solicitar a sua portabilidade!" data-tour-index="1" @endif>
                                    <div class="col-md-12">
                                        <div class="portlet">
                                            <div class="portlet-body">
                                                <div class="mt-element-step">       
                                                    <div class="row step-thin">
                                                        <div class="mt-step-desc">
                                                            <div id="num-number" style="cursor: pointer;" class="col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison">
                                                                <div id="num-number-title" class="mt-step-title uppercase font-white">
                                                                    Números Virtuais             
                                                                </div>
                                                                <div id="num-number-description" class="mt-step-content font-white">
                                                                    Escolha os números disponíveis
                                                                </div>
                                                            </div>
                                                            
                                                            <div id="num-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>
                            </div>
                        </div>
                        
                        <div id="tab-number-virtual">
                            <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;" class="font-white">Clique aqui</a>.
                                    </div>

                                    <div class="portlet-body">
                                        <div class="note note-info">
                                            Contrate serviços adicionais para a sua linha voip. É fácil e seguro.
                                            <br><br>
                                            @if (empty($data->customer->id))
                                                <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>
                                            @endif
                                        </div>

                                        @if (isset($data->customer->id)) 
                                            @for ($i = 1; $i <= $data->qtde_number; $i++)
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <select name="virtualDDD[]" id="selDDD" class="form-control" onchange="selNumber(this.value, {{ $i }}); return false;">
                                                                <option value="0">Escolha um DDD</option>
                                                                @foreach($data->dids as $value)
                                                                    <option value="{{ $value->ddd }}">{{ $value->ddd }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

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

                        <div 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;" class="font-white">Clique aqui</a>.
                                    </div>

                                    <div class="portlet-body">
                                        <div class="note note-info">Preencha corretamente os campos abaixo, para não ocorrer erros no processo de portabilidade.
                                        <br><br>
                                        <strong>Obs: </strong>O prazo para portabilidade VONO encerrou no dia 29/09/2016.  Contrate agora um novo número da TW-Solutions.

                                            @if (empty($data->customer->id))
                                                <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

                                        </div>

                                        @if (isset($data->customer->id))
                                            @for ($i = 1; $i <= $data->qtde_number; $i++)
                                                <div class="row">
                                                    <div class="form-group col-md-2">
                                                        <select name="ddd[]" class="form-control">
                                                            <option value="0">DDD</option>
                                                            @foreach($data->ddds as $key => $value)
                                                                <option value="{{ $value }}">{{ $value}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="number_portability[]" class="form-control" placeholder="Número">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="origin_operator[]" class="form-control" placeholder="Operadora Origem">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="company_name[]" class="form-control" placeholder="Razão Social/Nome">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="cpf_cnpj[]" class="form-control" placeholder="CPF/CNPJ">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="zip_code[]" class="form-control" placeholder="CEP" id="zip_code_0" onblur="zip_code(0); return false;">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="address[]" id="address_0" class="form-control" placeholder="Endereço">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="number[]" id="number" class="form-control" placeholder="Número Residência">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="complement[]" id="complement_0" class="form-control" placeholder="Complemento">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="neighborhood[]" id="neighborhood_0" class="form-control" placeholder="Bairro">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <input type="text" name="city[]" id="city_0" class="form-control" placeholder="Cidade">
                                                    </div>

                                                    <div class="form-group col-md-2">
                                                        <select name="state[]" id="state_0" class="form-control">
                                                            <option value="0">Estado</option>
                                                            @foreach($data->states as $key => $state)
                                                                <option value="{{$key}}">{{$state}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div><br>
                                            @endfor                                        
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>

                    <div class="row" id="numbers-list">
                        <div class="col-md-12"> 
                            @if($data->plan_id > 0)
                                <div class="portlet light" @if(isset($data->plan_name) and !isset($itemIugu)) data-tour-title="Seus Números" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Aqui você pode vizualizar seus números virtuais" data-tour-index="1" @endif>
                                    <div class="form-actions right">
                                        <button id="submit-button" class="btn blue-madison">Prosseguir</button>
                                    </div>

                                    <div class="portlet-title"><br><br>
                                        <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">
                                                <div class="note note-danger" id="not-number">Você não tem números contratados</div>

                                                <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>
                                                            <th class="col-md-6 bg-default">Cancelar</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>                                                
                                                        <tr>
                                                            <td></td>
                                                            <td></td>
                                                            <td style="text-align:center"><i class="fa fa-times"></i></a></td>
                                                        </tr>
                                                    </tbody>
                                                </table>                       
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                {!! Form::close() !!}
                
                <div class="row" id="tab-confirm" style="display:none;">
                    <div class="col-md-12">
                        <div class="portlet light">

                            <div class="note note-info form-group" @if(isset($itemIugu)) data-tour-title="Gerente de Contas" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Seu gerente de contas será seu principal contato dentro da TW, será com ele que você poderá alterar seu plano!" data-tour-index="1" @endif>
                                <div class="row">
                                    <div class="col-md-3">
                                        {!! Form::label('saleman', 'Selecione o seu gerente de contas') !!}
                                    </div>
                                    <div class="col-md-3">
                                        {!! Form::select('sale_id', $sales, '', ['class'=>'form-control', 'id' => 'sale_id']) !!}
                                    </div>                                   
                                </div>                                   
                            </div> 

                            <div class="portlet-body"@if(isset($itemIugu)) data-tour-title="Confirmação de compra" data-tour-description="<img src='{{ asset('assets/images/wally.png') }}' alt='Wally' class='wally'><br/>Já está acabando!<br/>Aqui você confere seu pedido e pode gerar a sua fatura!" data-tour-index="1" @endif>
                                <div class="note note-info">
                                    Confirme abaixo os serviços contratados.
                                </div> 
                                
                                
                                <div class="alert alert-success alert-dismissable" id="warning-success" style="display:none;">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <span id="message"></span>
                                </div>

                                @if($itemIugu)
                                    <div class="row">
                                       <table class="table table-striped table-hover table-light" id="table-number">
                                            @foreach($itemIugu as $item)
                                                @if($item->type == 'balance')
                                                    <tr class="uppercase">
                                                        <td class="col-md-4 bg-default">{{ statusTypeItemsIugu($item->type) }}</td>
                                                        <td class="col-md-4 bg-default"></td>
                                                        <td class="col-md-4 bg-default"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="col-md-4 bg-default">{{ statusTypeItemsIugu($item->type) }} {{$item->description}}</td>
                                                        <td class="col-md-4 bg-default"></td>
                                                        <th class="col-md-4 bg-default">R$ {{ formatMoney($item->price) }}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </table> 
                                    </div>
                                @endif

                                <div class="row">
                                   <table class="table table-striped table-hover table-light" id="table-number">
                                        <thead>
                                            <tr class="uppercase">
                                                <th class="col-md-4 bg-default">Serviço</th>
                                                <th class="col-md-4 bg-default">Descrição</th>
                                                <th class="col-md-4 bg-default">Valor R$</th>
                                            </tr>
                                        </thead>
                                        <tbody> 
                                        @if($itemIugu)
                                            @foreach($itemIugu as $item)
                                                @if($item->type<>'balance')
                                                    <tr>
                                                        <td>{{ statusTypeItemsIugu($item->type) }}</td>
                                                        <td>{{$item->description}}</td>
                                                        <td>(+) R$ {{ formatMoney($item->price) }}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                            <tr>
                                                <th class="col-md-4 bg-default"></th>
                                                <th class="col-md-4 bg-default"></th>
                                                <th class="col-md-4 bg-default">Total R$ {{ formatMoney($price) }}</th>
                                            </tr>
                                        @endif    
                                        </tbody>
                                    </table> 
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-actions right">
                                            <button id="pay-button" class="btn blue-madison" onclick="generate_invoice(); return false;">Gerar Fatura</button>
                                            <span id="secure-url"></span>
                                        </div>
                                        <div id='janela_iugo'></div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
    <div style="display:none" id="frm"></div>
    <!-- END PAGE CONTENT BODY -->
@stop()

@section('js-voice-plan')
    <script src="{{ asset('/assets/global/plugins/fancybox/source/jquery.fancybox.js?v=2.1.5') }}" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets/global/plugins/fancybox/source/jquery.fancybox.css?v=2.1.5') }}" media="screen" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('.fancybox').fancybox();
        });
        $(document).ready(function() {
            var plan_id = '{{ $data->plan_id }}';
            var temp_id = '{{ $data->temp_id }}';

            if (plan_id > 0 && temp_id <= 0) {
                $("#tab-refill").css('display', 'none');            
                $("#tab-number").css('display', 'block');                

                $("#refill").removeClass('col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#refill-number").removeClass('mt-step-number bg-white font-blue-madison');
                $("#refill-title").removeClass('mt-step-title uppercase font-white');
                $("#refill-description").removeClass('mt-step-content font-white');

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

                $("#number").removeClass('col-md-4 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');

                $("#number").addClass('col-md-4 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');
            } else if(temp_id > 0) {
                $("#tab-confirm").css('display', 'block');
                $("#tab-refill").css('display', 'none');            
                $("#tab-number").css('display', 'none');  
                $("#numbers-list").css('display', 'none');  

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

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

                $("#refill").removeClass('col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#refill-number").removeClass('mt-step-number bg-white font-blue-madison');
                $("#refill-title").removeClass('mt-step-title uppercase font-white');
                $("#refill-description").removeClass('mt-step-content font-white');

                $("#refill").addClass('col-md-4 mt-step-col bg-grey');
                $("#refill-number").addClass('mt-step-number bg-white font-grey-cascade');
                $("#refill-title").addClass('mt-step-title uppercase font-grey-cascade');
                $("#refill-description").addClass('mt-step-content font-grey-cascade');
            } 


            $("#num-portability").click(function() { 
                $("#tab-number-virtual").css('display','none');
                $("#tab-portability").css('display','block');

                // Remove Class
                $("#num-number").removeClass('col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#num-number-title").removeClass('mt-step-title uppercase font-white');
                $("#num-number-description").removeClass('mt-step-content font-white');

                // Add Class
                $("#num-number").addClass('col-md-6 mt-step-col bg-grey');
                $("#num-number-title").addClass('mt-step-title uppercase font-grey-cascade');
                $("#num-number-description").addClass('mt-step-content font-grey-cascade');

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

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

            $("#num-number").click(function() { 
                $("#tab-number-virtual").css('display','block');
                $("#tab-portability").css('display','none');

                // Remove Class
                $("#num-portability").removeClass('col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison');
                $("#portability-title").removeClass('mt-step-title uppercase font-white');
                $("#portability-description").removeClass('mt-step-content font-white');

                // Add Class
                $("#num-portability").addClass('col-md-6 mt-step-col bg-grey');
                $("#portability-title").addClass('mt-step-title uppercase font-grey-cascade');
                $("#portability-description").addClass('mt-step-content font-grey-cascade');

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

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

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

            var params = {
                'customer': '{!! $data->customer !!}',
                'items': '{!! $itemIugu !!}',
                'user_id': '{!! Auth::user()->id !!}',
                'sale_id': $('#sale_id').val(),
                'due_date': '{{$vencimento}}'
            };

            $.blockUI({ message: "<img src='{{ asset('/assets/global/img/loading.gif') }}'> Por favor aguarde momento enquanto carregamos o seu meio de pagamento." });

            $.ajax({ 
                type: "POST", 
                url: 'https://www.telefoniacorporativa.com.br/iugu/index.php',
                data: {params: params}, 
                success: function(data) {
                    $.unblockUI();
                    var json = JSON.parse(data);
                    $("#janela_iugo").html("<a class='fancybox fancybox.iframe' href='"+json.invoice_secure_url+"'></a>");
                    $(".fancybox").click();
                    $("#pay-button").hide("slow");
                    $("#secure-url").html("<a class='btn blue-madison' target='_blank' href='"+json.invoice_secure_url+"'>Pagar Fatura</a>");
                } 
            });
        }

        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);
                } 
            });
        }

        function selNumber(ddd, line) { 
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })
            $("#editNumber-"+line).html("<p>Por favor aguarde enquanto verificamos o(s) número(s) disponível(is) <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);                        
                } 
            });
        }

        $('.btn_token').click(function(){

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })
            
            $.ajax({ 
                type: "GET", 
                url: '{{ route('voice.gerar.token') }}', 
                data: {x: 1}, 
                success: function(data) {
                    if(data == 'notoken'){
                        swal({"title":"","text":"{{auth::user()->name}}, já existe um token ativo vinculado ao númeo de celular informado. Para liberação do mesmo entre em contato com o suporte abrindo um ticket de suporte ou através do email suporte@twsolutions.com.br!","showConfirmButton":true,"type":"warning"});
                    }else{ 
                        @if(!$temToken)    
                            swal({
                                    title: "",
                                    text: "{{auth::user()->name}}, seu token foi gerado com sucesso e enviado para o celular informado no seu cadastro. Dentro de alguns instantes você receberá um SMS com o mesmo que deverá ser inserido no formulário a seguir.",
                                    type: "success",
                                    confirmButtonColor: "#ef541b",
                                    confirmButtonText: "OK"
                                },
                                function(){
                                    location.reload(true);
                                });
                        @else
                            swal({
                                    title: "",
                                    text: "{{auth::user()->name}}, seu token foi atualizado reenviado para o celular informado no seu cadastro. Dentro de alguns instantes você receberá um SMS com o mesmo que deverá ser inserido no formulário a seguir.",
                                    type: "success",
                                    confirmButtonColor: "#ef541b",
                                    confirmButtonText: "OK"
                                },
                                function(){
                                    location.reload(true);
                                });
                        @endif 
                        $("#frm-token").show('slow');
                        $(".btn_token").hide('slow');
                        $(".btn_token").remove();
                    }
                } 
            });
        });
    </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()