@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>Pedido - Números Virtuais</span>
                </li>
            </ul>
            <!-- END PAGE BREADCRUMBS -->

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

                                <div class="portlet-body">
                                    <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>

                                    <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>
                                                @foreach($itemIugu as $item)
                                                    <tr>
                                                        <td>{{ statusTypeItemsIugu($item->type) }}</td>
                                                        <td>{{ $item->description }}</td>
                                                        <td>{{ formatMoney($item->price) }}</td>
                                                    </tr>
                                                @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 {{ formatMoney($price) }}</th>
                                                </tr>
                                            </tbody>
                                        </table> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="form-actions right">
                                                <button id="pay-button" class="btn blue-madison" onclick="generate_invoice(); return false;">Gerar Fatura</button>
                                                <div id="janela_iugo"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END PAGE CONTENT INNER -->
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
    <!-- END PAGE CONTENT BODY -->
@stop()

@section('js-financial')
    <script src="{{ asset('/assets/global/plugins/jquery.min.js') }}"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="https://jquery.bassistance.de/validate/jquery.validate.js"></script>
    <script src="https://jquery.bassistance.de/validate/additional-methods.js"></script>
    <script src="{{ asset('/assets/global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.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 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>
    <script src="{{ asset('/assets/layouts/global/scripts/quick-nav.min.js') }}" type="text/javascript"></script>
    <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="../assets/global/plugins/fancybox/source/jquery.fancybox.css?v=2.1.5'" media="screen" />
    <script type="text/javascript">
        $(document).ready( function() {  
            $('.fancybox').fancybox();
        });
    
       function generate_invoice(id,invoice_id) { 
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                })
                
                var params = {
                    'customer': '{!! $customer !!}', 
                    'items': '{!! $itemIugu !!}',
                    'user_id': '{!! Auth::user()->id !!}'
                };

                $.blockUI({ message: "Olá {!! Auth::user()->name !!}, por favor aguarde um momento enquanto enquanto carregamos o seu meio de pagamento <img src='{{ asset('/assets/global/img/loading.gif') }}'>" });
                
                $("#pay-button").remove();

                $.ajax({ 
                    type: "POST", 
                    url: '{{getenv('PATH_IUGU_WEBHOOK')}}',
                    data: {params: params}, 
                    success: function(data) {
                        
                        console.log(data);
                        var json = JSON.parse(data);
                        $.unblockUI();

                        $("#janela_iugo").html("<a class='fancybox fancybox.iframe' href='"+json.invoice_secure_url+"'></a>");
                        $(".fancybox").click();
                                            
                    } 
                });
            }
    </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()