@extends('template')

@section('content')

<div class="page-content">
    <div class="container-fluid">
        <div class="page-content-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light">
                        <div class="row">
                            <div class="col-md-12">
                               <span class="font-blue-madison title"><i class="fa fa-file-text-o"></i> Emissão de Boletos</span></span>
                               <hr>
                           </div>
                       </div>
                       <div class="portlet-body form">
                        {!! Form::open(['route' => 'admin.boletos.emitirboleto', 'method' => 'POST', 'id'=>'frm_emissaoboletos']) !!}
                        <div class="row">
                            <div class="form-group col-md-5">
                                <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-user-plus"></i>
                                        </span>
                                        {!! Form::select('user_id', $customers, '', ['id'=>'customer', 'class'=>'form-control select2','data-rule-min'=>'1' , 'data-msg-min'=>"Selecione um cliente!"]) !!}
                                        {!! Form::label('layout', 'Cliente', ['class' => 'control-label']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-5">
                                <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::text('data_vencimento',dateToBR(date('Y-m-d')), ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off', 'id' => 'data_vencimento']) !!}
                                        {!! Form::label('layout', 'Data de Vencimento', ['class' => 'control-label']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-2">
                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                    {!! Form::label('item', 'Item', ['class' => 'control-label']) !!}
                                    {!! Form::select('item', ['' => '::Selecione::','recarga' =>'Recargas','itens_personalizados' =>'Itens Personalizados'],'', ['class'=>'form-control','onchange'=>'habilitaCamposItens(this.value);']) !!}
                                    </div>
                                </div>
                                <p>&nbsp;</p>
                                <div class="recarga" style="display: none">
                                    <span class="btn blue-madison popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Adicione mais de uma recarga clicando aqui" id="btn_add_recarga"><i class="fa fa-plus-circle"></i> Adicionar Recargas</span>
                                </div>
                                <div class="itens_personalizados" style="display: none">
                                    <span class="btn blue-madison popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Adicione mais de um item clicando aqui" id="btn_add_itens"><i class="fa fa-plus-circle"></i> Adicionar Itens</span>
                                </div>
                            </div>
                            <div id="modelo_recarga" class="row">
                                <div class="form-group col-md-3 recarga" style="display: none">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        <br>
                                        <select name="recarga[]" class="form-control" id="recarga">
                                            <option value="">Selecione uma Recarga</option>
                                            @foreach($recargas as $recarga)
                                            <option value={{$recarga}}>Recarga de {{financialPrice($recarga)}}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div id="clone_recarga">
                            </div>
                            <div id="modelo_itens" class="row">
                                <div class="form-group col-md-5 itens_personalizados" style="display: none">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::text('descricao[]','', ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off', 'id' => 'descricao']) !!}
                                        {!! Form::label('descricao', 'Descrição') !!}
                                    </div>
                                </div>
                                <div class="form-group col-md-2 itens_personalizados" style="display: none">
                                    <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                        {!! Form::text('valor[]','', ['class' => 'mask-money form-control', 'placeholder' => '', 'autocomplete' => 'off', 'id' => 'valor']) !!}
                                        {!! Form::label('valor', 'Valor') !!}
                                    </div>
                                </div>
                            </div>
                            <div id="clone_itens">
                            </div>
                            
                            <p>&nbsp;</p>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <button type="submit" name="Salvar" value='Salvar' class="btn green-jungle popovers"  data-container="body" data-trigger="hover" data-placement="top" data-content="Gerar Boleto">
                                        <i class=" fa fa-save"></i> Enviar
                                    </button>
                                </div>                          
                            </div>
                            <p>&nbsp;</p>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT INNER -->
    </div>
</div>
@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() {
            $('.fancybox').fancybox();
            $("#frm_emissaoboletos").validate({
                rules: {
                    user_id: "required",
                    item:    "required",
                },
            });
            $(".mask-money").maskMoney({symbol:'', showSymbol:false, thousands:'', decimal:'.', symbolStay: true});
            $('.mask-money').each(function(){
                $(this).maskMoney('mask', $(this).val());
            });
            
            $.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: "30d",
                minDate: '0'
            };

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

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

       function habilitaCamposItens($habilitar){

            if($habilitar == 'recarga'){
                $('.recarga').show('slow');
                $('.itens_personalizados').hide('slow');
            }
            if($habilitar == 'itens_personalizados'){
                $('.recarga').hide('slow');
                $('.itens_personalizados').show('slow');
            }
            if($habilitar == ''){
                $('.recarga').hide('slow');
                $('.itens_personalizados').hide('slow');
            }
        }

        $("body").on('click', '#btn_remove', function(){
            var linha = $(this).closest('.row');
            swal({  
                title: "Atenção",
                text: "Tem certeza que deseja remover este item?",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Sim",
                cancelButtonText: "Não",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {
                    linha.remove();
                }else{
                    return false;
                }
            });
        }); 

        $("#btn_add_recarga").click(function(){
            var linha_modelo = $("#modelo_recarga").clone();
            $("#clone_recarga").append(linha_modelo.attr('id', '').append('<div class="form-group col-md-2 recarga"><div class="form-group form-md-line-input form-md-floating-label has-personalizado"><button type="button" class="btn red popovers" id="btn_remove"><i class="fa fa-times"></i></button></div></div>'));
        });

        $("#btn_add_itens").click(function(){
            var linha_modelo = $("#modelo_itens").clone();
            $("#modelo_itens input[id=valor]").eq(0).val('');
            $("#descricao").eq(0).val('');
            $("#clone_itens").append(linha_modelo.attr('id', '').append('<div class="form-group col-md-2 itens_personalizados"><div class="form-group form-md-line-input form-md-floating-label has-personalizado"><button type="button" class="btn red popovers" id="btn_remove"><i class="fa fa-times"></i></button></div></div>'));
        });

    </script>
@stop()