@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>Recargas</span>
                    <i class="fa fa-circle"></i>
                </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 light">

                            @if(Auth::User()->active == 'yes')

                                <div class="portlet-body"> 
                                    {!! Form::open(['route' => 'iugu.gera.recarga', 'method' => 'post', 'id' => 'payment-form']) !!}
                                        <div class="row">
                                            @if($saldo_compartilhado == 'no')
                                                <div class="col-sm-4 note">
                                                    <div class="note note-info">
                                                        <p>Selecione uma conta para efetuar a recarga. <i class='glyphicon glyphicon-share-alt font-blue-madison right'></i></p>
                                                    </div>
                                                    <table class="table">
                                                        <thead>
                                                            <tr>
                                                                <td></td>
                                                                <td>Conta</td>
                                                                <td>Saldo</td>
                                                            </tr>
                                                            @foreach($contas as $key => $value)
                                                                <tr>
                                                                    <td>
                                                                        <input type="radio" name="conta" value="{{$value['servico']}}"> 
                                                                    </td>
                                                                    <td>
                                                                        {{$value['servico']}} 
                                                                    </td>
                                                                    <td>
                                                                        R$ {{$value['saldo']}}
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </thead>
                                                    </table>
                                                </div>
                                            @else
                                                @foreach($contas as $key => $value)
                                                    <input type="radio" checked name="conta" value="{{$value['servico']}}" style="display:none">
                                                @endforeach
                                            @endif

                                            <div class="col-sm-4 note">
                                                <div class="note note-info">
                                                    <p>Selecione uma valor para efetuar a recarga. <i class='glyphicon glyphicon-share-alt font-blue-madison right'></i></p>
                                                </div>
                                                <table class="table">
                                                    <thead>
                                                        @foreach(getValoresRecarga() as $valor)
                                                            <tr>
                                                                <td><label><input type="radio" name="recarga" price="{{$valor}}"> Recarga de {{financialPrice($valor)}}</label></td>
                                                            </tr>
                                                        @endforeach
                                                    </thead>
                                                </table>
                                            </div>

                                            <div class="col-sm-4 note credit-card-payment" style="text-align: center;" >
                                                <div class="note note-info">
                                                    <p>Escolha um forma de pagamento.</p>
                                                </div>
                                                <span class="fa fa-credit-card btn btn-default blue-madison mt-sweetalert" id='btn_cc' onclick="metodo_pagamento('cc')"> <strong>Cartão de Crédito<strong></span>
                                                <span class="fa fa-barcode btn btn-default mt-sweetalert grey-cascade" id='btn_boleto' onclick="metodo_pagamento('boleto')"> <strong>Boleto Bancário</strong></span>

                                                <div class="btn-group payment-method-btn-group" data-toggle="buttons" style="display:none;">
                                                    <input checked type="checkbox" id="credit-card-checkbox" name="method" value="" >
                                                    <input type="checkbox" id="bank-slip-checkbox" name="method" value="bank_slip">
                                                </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"
                                                            name="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" name="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" name="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" name="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>
                                                    <p><strong>Pagamentos realizados com cartão serão creditados em até 30 minutos!</strong></p>
                                                </div>

                                                <div class='msg-boleto' style='display:none;'>
                                                    <br/><br/>
                                                    Pagamentos realizados com boleto serão creditados após a liberação do banco, no primeiro dia útil seguinte ao do pagamento!
                                                    <br/><br/>
                                                </div>
                                                <div class="submit-div">
                                                    <button type="submit" id="iugu-button" onclick="block();" class="btn btn blue-madison" disabled="disabled">Pagar</button>
                                                </div>
                                            </div>
                                        </div>
                                        {!! Form::hidden('token', '',['id'=>'token']) !!}
                                        {!! Form::hidden('recharge', '',['id'=>'recharge']) !!}
                                        {!! Form::hidden('cutomer_token', '',['id'=>'cutomer_token']) !!}
                                    {!! Form::close() !!}
                                </div>
                            @else
                                <div class="alert alert-warning">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <strong>Aviso:</strong><br>
                                    No momento sua conta está impossibilitada de realizar recargas, por favor entre em contato através do email <a href="mailto:suporte@twsolutions.com.br?subject=Bloqueio">suporte@twsolutions.com.br</a>.
                                </div>
                            @endif
                            
                        </div>
                    </div>

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

@section('js-sigame')
    <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 src="{{ asset('/assets/iugu/formatter.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/iugu/checkout.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/ui-blockui.min.js') }}" type="text/javascript"></script>
    <script>
        $(document).ready(function() { 
           
            $("input:radio[name=recarga]").click(function() {
                if($("input:radio[name=recarga]").is(':checked') && $("input:radio[name=conta]").is(':checked')) { 
                    $('#iugu-button').prop("disabled", false);    
                }
            });

            $("input:radio[name=conta]").click(function() {
                if($("input:radio[name=recarga]").is(':checked') && $("input:radio[name=conta]").is(':checked')) { 
                    $('#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();
            }

        }

        function block(){
            
            if($("#credit-card-checkbox").attr("checked")=="checked"){
                if($('.credit_card_number').val() != '' && $('.credit_card_cvv').val() != '' && $('.credit_card_name').val() != '' && $('.credit_card_number').val()!= ''){
                    $.blockUI({ message: "Olá {!! Auth::user()->name !!}, por favor aguarde um momento enquanto a informação é processada <img src='{{ asset('/assets/global/img/loading.gif') }}'>" });
                } 
            }else{
                $.blockUI({ message: "Olá {!! Auth::user()->name !!}, por favor aguarde um momento enquanto a informação é processada <img src='{{ asset('/assets/global/img/loading.gif') }}'>" });
            }

        }

    </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()