@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>Meu Plano</span>
                </li>
            </ul>
            <!-- END PAGE BREADCRUMBS -->

            <!-- BEGIN PAGE CONTENT INNER -->
            <div class="page-content-inner">                
                <div class="row portlet light" id="tab-refill">    
                    <div class="col-md-4">
                        <div class="portlet light" style="border:5px solid #f2784b">
                            <div class="portlet-title">
                                <div class="caption">
                                    <span class="caption-subject font-blue-madison sbold uppercase">Seu Plano atual: <strong>{{ $meuPlano->name }}</strong></span>
                                </div>
                            </div>
                            <div class="table-scrollable">
                                <table class="table table-striped table-hover table-light">
                                    <tbody>
                                        <tr>
                                            <td>Mensalidade <span class="font-blue-madison">{{$meuPlano->valor}}</span></td>
                                        </tr>
                                        <tr>
                                            <td>Fixo Principais Cidades* <span class="font-blue-madison">{{ $meuPlano->fixo_principais_cidades }}</span></td>
                                        </tr>
                                        <tr>
                                            <td>Fixo Demais Cidades* <span class="font-blue-madison">{{ $meuPlano->fixo_demais_cidades }}</span></td>
                                        </tr>
                                        <tr>
                                            <td>Móvel Nacional <span class="font-blue-madison">{{ $meuPlano->movel_nacional }}</span></td>
                                        </tr>
                                        <tr>
                                            <td>Números Entrantes <span class="font-blue-madison">{{ $meuPlano->numeros_entrantes }}</span></td>
                                        </tr>
                                        <tr>
                                            <td>Ativação <span class="font-blue-madison">{{ $meuPlano->ativacao }}</span></td>
                                        </tr>
                                        @if($meuPlano->descontar_credito == 'yes')
                                            <tr>
                                                <td>Valores dos numeros descontado do plano </span></td>
                                            </tr>
                                        @endif
                                        <tr>
                                            <td>Este Plano aceita no máximo <span class="font-blue-madison">{{ $meuPlano->number_maximum }} numeros </span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="alert bg-success" role="alert">
                            @if($retorno->erro)
                                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                            @else
                                <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
                            @endif
                            <strong>{{ $retorno->status }}</strong>
                        </div>
                        <hr>
                        {!! $retorno->msg !!}

                        @if(isset($retorno->proRata) && $retorno->proRata != '')
                            <br/><br/>
                            {{$retorno->proRata->descricao}}
                            <br/><br/>
                            <strong>Obs: A alteração do plano será efetuada após a confirmação do pagamento!</strong>
                            <br/><br/>
                            <strong>Valor:</strong> R$ {{formatMoney($retorno->proRata->valor)}}

                            <div class="portlet-body">                                    
                                <div class="row">
                                    <div class="col-sm-6 credit-card-payment" style="text-align: center;"><br><br>
                                        <form id="payment-form" action="{{ getenv('PRO_RATA_WEBHOOK') }}" method="POST">
                                            <div class="btn-group payment-method-btn-group" data-toggle="buttons">
                                                <label class="btn btn-default active" id="credit-card-checkbox-label">
                                                    <input checked type="checkbox" id="credit-card-checkbox" name="method" value="" >Cartão de Crédito</input>
                                                </label>
                                                <label class="btn btn-default" id="bank-slip-checkbox-label">
                                                    <input type="checkbox" id="bank-slip-checkbox" name="method" value="bank_slip">Boleto Bancário</input>
                                                </label>
                                            </div>
                                            <div class="usable-creditcard-form">
                                                <div class="wrapper">
                                                    <div class="input-group nmb_a">
                                                        <div class="icon ccic-brand"></div>
                                                        <input autocomplete="off" class="credit_card_number" data-iugu="number" placeholder="Número do Cartão" type="text" value="">
                                                    </div>
                                                    <div class="input-group nmb_b">
                                                        <div class="icon ccic-cvv"></div>
                                                        <input autocomplete="off" class="credit_card_cvv" data-iugu="verification_value" placeholder="CVV" type="text" value="">
                                                    </div>
                                                    <div class="input-group nmb_c">
                                                        <div class="icon ccic-name"></div>
                                                        <input class="credit_card_name" data-iugu="full_name" placeholder="Titular do Cartão" type="text" value="">
                                                    </div>
                                                    <div class="input-group nmb_d">
                                                        <div class="icon ccic-exp"></div>
                                                        <input autocomplete="off" class="credit_card_expiration" data-iugu="expiration" placeholder="MM/AA" type="text" value="">
                                                    </div>
                                                </div>
                                                <div class="footer">
                                                    <img src="http://storage.pupui.com.br/9CA0F40E971643D1B7C8DE46BBC18396/assets/cc-icons.e8f4c6b4db3cc0869fa93ad535acbfe7.png" alt="Visa, Master, Diners. Amex" border="0"> 
                                                 </div>
                                            </div>
                                            <input type="hidden" name="token" id="token">
                                            <input type="hidden" name="pro_rata" id="pro_rata">
                                            <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                                        
                                            <div class="submit-div">
                                                <button type="submit" id="iugu-button" class="btn btn green" >Pagar</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                            </div>

                        @endif
                    </div>
                </div> 
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
    <!-- END PAGE CONTENT BODY -->
@stop()

@section('js-voice-plan')
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://js.iugu.com/v2"></script>
    <script type="text/javascript" src="https://www.telefoniacorporativa.com.br/iugu/assets/formatter.js"></script>
    <script type="text/javascript" src="https://www.telefoniacorporativa.com.br/iugu/assets/checkout.js"></script>
    <link href="{{ asset('/assets/global/css/components.min.css') }}" rel="stylesheet" id="style_components" type="text/css" />
    <script src="{{ asset('/assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" 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() {

            $("input:text[name=warning_balance]").blur(function() {
                $('#balance-button').prop("disabled", false);
            });

            $("input:radio[name=recarga]").click(function() {
                $('#iugu-button').prop("disabled", false);
            }); 

        });

        function metodo_pagamento(pg){

            if(pg =='boleto'){
                swal({"title":"Atenção!","text":"Pagamentos realizados com boleto serão creditados após a liberação do banco, no primeiro dia útil seguinte ao do pagamento!","showConfirmButton":true,"type":"info"});
                $("#btn_boleto").removeClass( 'grey-cascade' );
                $("#btn_boleto").addClass( 'blue-madison' );
                $("#btn_cc").removeClass( 'blue-madison' );
                $("#btn_cc").addClass( 'grey-cascade' );
                $(".usable-creditcard-form").hide("slow");
                $(".msg-boleto").show("slow");
                $("#credit-card-checkbox").prop("checked", false);
                $("#bank-slip-checkbox").click();
            }
            
            if(pg =='cc'){
                swal({"title":"Atenção!","text":"Pagamentos realizados com cartão serão creditados em até 30 minutos!","showConfirmButton":true,"type":"info"});
                $("#btn_boleto").removeClass( 'blue-madison' );
                $("#btn_boleto").addClass( 'grey-cascade' );
                $("#btn_cc").removeClass( 'grey-cascade' );
                $("#btn_cc").addClass( 'blue-madison' );
                $(".usable-creditcard-form").show("slow");
                $(".msg-boleto").hide("slow");
                $("#bank-slip-checkbox").prop("checked", false);
                $("#credit-card-checkbox").click();
            }

        }
    </script>
    @if(Auth::user()->chat)
        {!! $config->chat !!}
    @endif
@stop()