@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>Perfil</span>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Cancelamento</span>
                </li>
            </ul>
            <div class="page-content-inner">                
                <div class="row" id="tab-refill">    
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="portlet-title">
                                <div class="caption">
                                   <span class="caption-subject font-blue-madison sbold uppercase"> Atenção!
                                </div>
                            </div>
                            Ao cancelar seu plano acarretará em uma multa de cancelamento de {{$customer->multa}}% no valor das faturas pendentes:
                            <br><br>
                            <table class="table table-striped table-hover table">
                                <thead>
                                    <tr class="uppercase">
                                        <th class='col-md-1'>Parcela</th>
                                        <th class='col-md-1'>Data Vencimento</th>
                                        <th class='col-md-1'>Valor</th>
                                        <th class='col-md-1'>Multa</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($faturas as $fatura)
                                        <tr>
                                            <td>{!! $fatura->parcela_contrato !!}</td>
                                            <td>{!! dateToBR($fatura->data_vencimento) !!}</td>
                                            <td>{!! financialPrice($fatura->valor) !!}
                                                <a title = "Itens" onclick="detalhe({{$fatura->id}})"  class="showhide-{{$fatura->id}} popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Mostrar itens">
                                                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                                </a>
                                                <a onclick="detalhe({{$fatura->id}})" class="showhide-{{$fatura->id}} popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Esconder itens" style="display:none;"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
                                            </td>
                                            <td>{!! financialPrice($fatura->multa) !!}</td>
                                        </tr>
                                            <tr style="display:none;background:#dedede;" class="uppercase detalhe-{{$fatura->id}}">
                                                <td><strong>Tipo</strong></td> 
                                                <td colspan="2"><strong>Descrição do serviço</strong></td> 
                                                <td colspan="2"><strong>Valor Parcela</strong></td>
                                            </tr>
                                            @foreach($fatura->itens as $itens)

                                                <tr style="display:none;background:#dedede;" class="detalhe-{{$fatura->id}}">
                                                    <td>{{$itens->tipo}}</td> 
                                                    <td colspan="2">{{$itens->description}}</td> 
                                                    <td colspan="2">R$ {{formatMoney($itens->valor_parcela)}}</td>

                                                </tr>
                                            @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="col-md-7">
                                    Valor total de faturas pendentes: <strong> {{financialPrice($totalFaturas)}}</strong>
                                </div>
                                <div class="col-md-5">
                                    Valor de Multa de Contrato: <strong>{{ financialPrice($multa) }} </strong>
                                    <br><br>
                                </div>
                            </div>

                            {!! Form::open(['route' => 'profile.cancelamento', 'method' => 'post']) !!}
                                <div class="row" id="motivo_cancelamento">
                                    <div class="form-group col-md-3">
                                        <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                            <div class="input-group left-addon">
                                                <span class="input-group-addon has-personalizado">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                                {!! Form::label('layout', 'Data de cancelamento', ['class' => 'control-label']) !!}
                                                 {!! Form::select('data_cancelamento',$datasCancelamento,'',['class'=>'form-control','onchange'=>'habilitaCamposItens(this.value);']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        {!! Form::label('motivo', 'Motivo do Cancelamento:') !!}
                                        {!! Form::textarea("motivo", null, ['class' => 'form-control', 'id'=>'user_summary']) !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-3">
                                   {!! Form::submit('Concordo e Prosseguir', ['class'=>'btn blue-madison', 'id'=>'cancelarPlano']) !!}
                                   
                                   <a class="btn red" href="perfil">Voltar</a>
                                </div>
                                <br/><br/>
                            {!! Form::close() !!}
                        </div>
                    </div> 
                </div>                    
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
    <!-- END PAGE CONTENT BODY -->
@stop()
@section('js-admin-faq')
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/select2/js/select2.full.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/components-select2.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>
    <script src="{{ asset('/assets/global/plugins/bootstrap-summernote/summernote.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery-ui/jquery-ui.1.10.3.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/apps/scripts/jquery.maskMoney.js') }}" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() { 
            $.datepicker.regional['pt-BR'] = {
                closeText: 'Fechar',
                prevText: '&#x3c;Anterior',
                nextText: 'Pr&oacute;ximo&#x3e;',
                currentText: 'Hoje',
                monthNames: ['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho',
                'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
                monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
                'Jul','Ago','Set','Out','Nov','Dez'],
                dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
                dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
                dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
                weekHeader: 'Sm',
                dateFormat: 'dd/mm/yy',
                firstDay: 0,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                maxDate: "7d",
                minDate: '0'
            };

            $.datepicker.setDefaults($.datepicker.regional['pt-BR']);

            $("#data_vencimento").datepicker();

        });
        function detalhe(id){
            $(".showhide-"+id).toggle();
            $(".detalhe-"+id ).toggle();
        }
    </script>
@stop()