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

        <div class="page-content-inner">
            <div class="col-md-12">
                <div class="portlet light portlet-fit ">
                    <div class="portlet-body checkout">
                        <div class="mt-element-step">
                            <div class="row step-thin">
                                <a href="{{ route('lojavirtual.checkout') }}">
                                    <div class="col-md-4 bg-grey mt-step-col">
                                        <div class="mt-step-number bg-white font-grey">1</div>
                                        <div class="mt-step-title uppercase font-grey-cascade">Carrinho</div>
                                        <div class="mt-step-content font-grey-cascade">Serviços selecionados</div>
                                    </div>
                                </a>
                                <a href="{{ route('lojavirtual.checkout2') }}">
                                    <div class="col-md-4 bg-grey mt-step-col">
                                        <div class="mt-step-number bg-white font-grey">2</div>
                                        <div class="mt-step-title uppercase font-grey-cascade">Identificação</div>
                                        <div class="mt-step-content font-grey-cascade">&nbsp;</div>
                                    </div>
                                </a>
                                <a href="{{ route('lojavirtual.checkout2') }}">
                                    <div class="col-md-4 bg-grey mt-step-col done">
                                        <div class="mt-step-number bg-white font-grey">3</div>
                                        <div class="mt-step-title uppercase font-grey-cascade">Pagamento</div>
                                        <div class="mt-step-content font-grey-cascade">&nbsp;</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-md-12">
                <!-- BEGIN BORDERED TABLE PORTLET-->
                <div class="portlet light portlet-fit ">
                    <div class="portlet-title">
                        <div class="caption">
                            <span class="caption-subject font-blue-madison sbold uppercase">Check out</span>
                        </div>
                    </div>
                    <div class="portlet-body">

                        <div class="row">
                            <!-- Detalhes das Faturas -->
                            <div class="col-md-4">
                                <div class="col-md-12">
                                    <div class="panel panel-default blue-madison">
                                        <div class="panel-heading">
                                            <h3 class="panel-title"> Dia de Vencimento </h3>
                                        </div>
                                        <div class="panel-body">
                                            Agendado para todo dia {{ $diaV[2] }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="panel panel-default blue-madison">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Primeira Fatura</h3>
                                        </div>
                                        <div class="panel-body"> R$ {{ formatMoney($primeira_fatura) }}
                                            @if((session('carrinho.ativacao')) > 0)
                                            <a href="javascript:;" data-trigger="hover" class="popovers" data-container="body" data-content="Seu pedido contém taxa de  R$ {{ session('carrinho.ativacao') }} que será cobrado na primeira fatura.">*</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="panel panel-default blue-madison">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Outras Fatura</h3>
                                        </div>
                                        <div class="panel-body"> R$ {{ formatMoney(session('carrinho.total')) }} </div>
                                    </div>
                                </div>
                            </div>
                            <!-- / Fim Detalhes das Faturas -->
                            <div class="col-md-8">
                                <div class="panel panel-default blue-madison">
                                    <!-- Default panel contents -->
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Tempo de Contrato</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="form-group form-md-radios">
                                            <div class="md-radio-inline">
                                                @foreach($periodo_contrato as $periodo)
                                                <div class="md-radio">
                                                    <input type="radio" id="tempo_contrato{{ $periodo->id }}" name="tempo_contrato" class="md-radiobtn" value="{{ $periodo->id }}" {{ $periodo->tempo == 12 ? 'checked' : '' }}>
                                                    <label for="tempo_contrato{{ $periodo->id }}">
                                                        <span></span>
                                                        <span class="check"></span>
                                                        <span class="box"></span> {{ $periodo->alias }} </label>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if((session('carrinho.ativacao')) > 0)
                                <div class="table-scrollable table-scrollable-borderless">
                                    <div class="note note-warning" style="background-color: white; font-size: 13px ">* Taxa de ativação será cobrado na primeira parcela.</div>
                                </div>
                                @endif
                                <div class="table-scrollable table-scrollable-borderless">
                                    <div class="note note-info" style="background-color: white; font-size: 13px "> Valor de crédito à ser liberado: R$ {{ formatMoney(session('carrinho.credito')) }}</div>
                                </div>
                                <div class="clearfix text-center">
                                    <button id="btn_gerar_fatura" type="button" data-loading-text="Loading..." class="btn blue-madison mt-ladda-btn ladda-button mt-progress-demo" data-style="slide-right">
                                        <span class="ladda-label">Gerar Fatura</span>
                                        <span class="ladda-spinner"></span>
                                        <span class="ladda-spinner"></span>
                                    </button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <!-- END BORDERED TABLE PORTLET-->
            </div>

        </div>
    </div>
    <!-- END PAGE CONTENT INNER -->
</div>
<!-- END PAGE CONTENT BODY -->

@stop()

@section('js-script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
<link href="{{ asset('assets/global/plugins/ladda/ladda-themeless.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('assets/global/plugins/ladda/spin.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/ladda/ladda.min.js') }}" type="text/javascript"></script>

<script>

    jQuery(document).ready(function() {

        $('#btn_gerar_fatura').click(function(e){
            e.preventDefault();
            var l = Ladda.create(this);
            l.start();
            $.post("{{ route('lojavirtual.gerarfatura') }}",
                   { tempo_contrato : $("input[name=tempo_contrato]").val() },
                   function(response){
                location.reload();
            }, "json")
                .always(function() { l.stop(); });
            return false;
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


    });

</script>
@stop()