@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.$dataType->display_name_plural)

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="{{ $dataType->icon }}"></i> {{ $dataType->display_name_plural }}
        </h1>
        @can('add', app($dataType->model_name))
            {{-- <a href="{{ route('voyager.'.$dataType->slug.'.create') }}" class="btn btn-success btn-add-new">
                <i class="voyager-plus"></i> <span>{{ __('voyager::generic.add_new') }}</span>
            </a> --}}
        @endcan
        @can('delete', app($dataType->model_name))
            {{-- @include('voyager::partials.bulk-delete') --}}
        @endcan
        @can('edit', app($dataType->model_name))
            @if(isset($dataType->order_column) && isset($dataType->order_display_column))
                <a href="{{ route('voyager.'.$dataType->slug.'.order') }}" class="btn btn-primary btn-add-new">
                    <i class="voyager-list"></i> <span>{{ __('voyager::bread.order') }}</span>
                </a>
            @endif
        @endcan
        @can('delete', app($dataType->model_name))
            @if($usesSoftDeletes)
                <input type="checkbox" @if ($showSoftDeleted) checked @endif id="show_soft_deletes" data-toggle="toggle" data-on="{{ __('voyager::bread.soft_deletes_off') }}" data-off="{{ __('voyager::bread.soft_deletes_on') }}">
            @endif
        @endcan
        @foreach(Voyager::actions() as $action)
            @if (method_exists($action, 'massAction'))
                @include('voyager::bread.partials.actions', ['action' => $action, 'data' => null])
            @endif
        @endforeach
        @include('voyager::multilingual.language-selector')
    </div>
@stop
@section('css')
    <style>
        .mr-1{margin-right: 5px; }

        .dataTables_wrapper tfoot {
            display: contents!important;
        }


    </style>
@stop
@section('content')
    <div class="page-content browse container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        
                        <div class="table-responsive">
                            <table id="tabela_incricoes" class="table table-hover dataTable no-footer">
                                <thead>
                                    <tr>
                                        @can('delete',app($dataType->model_name))
                                            {{-- <th>
                                                <input type="checkbox" class="select_all">
                                            </th> --}}
                                        @endcan
                                        @foreach($dataType->browseRows as $row)
                                        <th>
                                            @if ($isServerSide)
                                                <a href="{{ $row->sortByUrl($orderBy, $sortOrder) }}">
                                            @endif
                                            {{ $row->display_name }}
                                            @if ($isServerSide)
                                                @if ($row->isCurrentSortField($orderBy))
                                                    @if ($sortOrder == 'asc')
                                                        <i class="voyager-angle-up pull-right"></i>
                                                    @else
                                                        <i class="voyager-angle-down pull-right"></i>
                                                    @endif
                                                @endif
                                                </a>
                                            @endif
                                        </th>
                                        @endforeach
                                        <th class="actions text-right">{{ __('voyager::generic.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                {{-- <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot> --}}
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->display_name_singular) }}?</h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->





<!-- modal editar categoria -->	

<div class="modal modal-primary fade" tabindex="-1" id="modalPagaManual" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
          <form id="frmPagarManual" method="post" action="/admin/eventos/inscricao/pedido/pagar" >
            @csrf
              <input type="hidden" name="id" value="" id="idPedido">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Registrar Pagamento</h4>
            </div>
            <div class="modal-body">

                <p class="text-center">
                    <strong>Escolha uma das formas de pagamento abaixo: </strong>
                </p>

                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="">Forma de Pagto</label>
                            <select name="forma" id="forma" class="form-control" >
                                <option value="Não Informado">Não Informado</option>
                                <option value="Dinheiro">Dinheiro</option>
                                <option value="Cartão Débito">Cartão Débito</option>
                                <option value="Cartão Crédito">Cartão Crédito</option>
                                <option value="Digital">Digital</option>
                            </select>  
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="">&nbsp;</label>
                        <button type="submit" class="btn btn-primary">Registrar Manualmente</button>
                    </div>
                </div>

                <p  class="text-center">
                    OU
                </p>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a href="#" id="btnPagarPagSeguro" class="btn btn-primary">Pagar com Pagseguro</a>
                    </div>                
                </div>                


            </div>
            <div class="modal-footer">
              
            </div>
        </form>
      </div>
    </div>
</div>	
  
  <!-- modal editar categoria -->	



  <div class="modal fade modal-primary" id="modalFormas">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">FORMAS DE PAGAMENTO</h4>
            </div>
            <div class="modal-body" id="divBoxConteudo">
                <input type="hidden" id="idPedidoForma">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#pcartao">Cartão de Crédito</a></li>
                    <li ><a data-toggle="tab" href="#ppix">PIX</a></li>
                    <li ><a data-toggle="tab" href="#pboleto">Boleto</a></li>
                  </ul>
                  <div class="tab-content">
                    <div id="pcartao" class="tab-pane fade in active">
                        
                        <p class="text-center">Preencha corretamente os dados do cartão abaixo</p>

                        <div class="row">
                            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 ">
                                <div class="form-group">
                                    <label for="">Nome do Titular</label>
                                    <input class="form-control"  type="text" name="nome" id="cnome" >
                                </div>
                            </div>
            
            
                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                                <div class="form-group">
                                    <label for="">Parcelas</label>
                                    <select name="parcela" id="cparcela" class="form-control">
                                        <option value="1">1x</option>
                                        {{-- <option value="2">2x</option>
                                        <option value="3">3x</option>
                                        <option value="4">4x</option>
                                        <option value="5">5x</option>
                                        <option value="6">6x</option>
                                        <option value="7">7x</option>
                                        <option value="8">8x</option>
                                        <option value="9">9x</option>
                                        <option value="10">10x</option> --}}
                                    </select>
                                </div>
                            </div>
            
            
                            <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 ">
                                <div class="form-group">
                                    <label for="">Número do cartão</label>
                                    <input class="form-control"  type="text" name="numero" id="cnumero" maxlength="16" inputmode="numeric">
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
                                <div class="form-group">
                                    <label for="">Mês</label>
                                    <input class="form-control"  type="text" name="mes" id="cmes" maxlength="2" inputmode="numeric">
                                </div>                    
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
                                <div class="form-group">
                                    <label for="">Ano</label>
                                    <input class="form-control"  type="text" name="ano" id="cano" maxlength="4" inputmode="numeric">
                                </div>                     
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                                <div class="form-group">
                                    <label for="">Cod. de Segurança</label>
                                    <input class="form-control"  type="text" name="cod" id="ccod" maxlength="3" inputmode="numeric">
                                </div>                      
                            </div>                
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <button id="btnCartao" type="button" class="btn btn-default">Confirmar</button>
                            </div>
                        </div>
                    </div>



                    <div id="ppix" class="tab-pane fade in text-center ">
                        <button onclick="pagarPix()"  type="button" class="btn btn-default" >Gerar QRcode</button>

                        {{-- <br/><br/>

                        <form action="/pago/pix" method="POST">
                            @csrf
                            <input type="hidden" name="pedido" value="" id="idPedidoPix">
                            <button type="submit" class="btn btn-default">Confirmar Pix</button>
                        </form> --}}



                    </div>
                    <div id="pboleto" class="tab-pane fade in text-center">

                        

                        <form action="/pagar/boleto" target="_blank" method="POST">
                            @csrf
                            <input type="hidden" name="pedido" value="" id="idPedidoBoleto">
                            <button type="submit" class="btn btn-default nomargin">Gerar Boleto</button>
                        </form>


                    </div>                                                
                  </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPix">
    <div class="modal-dialog">
        <div class="modal-body">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">PAGAMENTO COM PIX</h4>
                </div>                    
                <div class="modal-body">
                    <p class="text-center">Aponte seu celular para o QRCode abaixo para efetuar o pagamento</p>
                    <img src="" alt="qrcode" id="imgQrcode" style="width:100%;">
                </div>
            </div>
        </div>
    </div>
</div>




@stop

@section('css')
@if(!$dataType->server_side && config('dashboard.data_tables.responsive'))
    <link rel="stylesheet" href="{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}">
@endif
@stop

@section('javascript')


<script src="{{setting('site.url_site')}}js/sweetalert2.all.min.js"></script>	
<script src="{{setting('site.url_site')}}js/jquery.inputmask.bundle.min.js"></script>	
<script type="text/javascript" src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js"></script>
<script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>



    <!-- DataTables -->
    @if(!$dataType->server_side && config('dashboard.data_tables.responsive'))
        <!-- <script src="{{ voyager_asset('lib/js/dataTables.responsive.min.js') }}"></script> -->
    @endif

    <script src="{{setting('site.url_site')}}js/form.js"></script>	

	<script type="text/javascript" src="{{setting('site.url_site')}}js/jquery.blockUI.js"></script>


    <script>
	


        $('#frmPagarManual').ajaxForm({
            dataType: "json",
            resetForm: true,
            success: function(data){
                var tab = $("#tabela_incricoes").DataTable();
                tab.draw(false);
                $('#modalPagaManual').modal('hide');
            },
            error: function(data) {
                toastr["error"]("Não foi possivel executar esta ação","Ops!");
            }
        });	
    

        $('#btnPagarPagSeguro').on('click', function(){
            $('#modalFormas').modal('show');



        });



$('#btnCartao').on('click', () => {
    
    if($('#cnome').val() ==''){
        toastr["error"]("Digite o nome do titular do cartão","ATENÇÃO!");
    } else if($('#cnumero').val() == ''){
        toastr["error"]("Digite o número do cartão","ATENÇÃO!");
    } else if($('#cmes').val() == '') {
        toastr["error"]("Digite o mês de validade do cartão","ATENÇÃO!");
    } else if($('#cano').val() == ''){
        toastr["error"]("Digite o ano de validade do cartão","ATENÇÃO!");
    } else if($('#ccod').val() == ''){
        toastr["error"]("Digite o código de segurança do cartão","ATENÇÃO!");
    } else {
        var ano  = $('#cano').val();
        if(ano.length < 4){
            toastr["error"]("ANO com 4 Digitos","ATENÇÃO!");
        } else {
            var card = PagSeguro.encryptCard({
                //publicKey: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAr+ZqgD892U9/HXsa7XqBZUayPquAfh9xx4iwUbTSUAvTlmiXFQNTp0Bvt/5vK2FhMj39qSv1zi2OuBjvW38q1E374nzx6NNBL5JosV0+SDINTlCG0cmigHuBOyWzYmjgca+mtQu4WczCaApNaSuVqgb8u7Bd9GCOL4YJotvV5+81frlSwQXralhwRzGhj/A57CGPgGKiuPT+AOGmykIGEZsSD9RKkyoKIoc0OS8CPIzdBOtTQCIwrLn2FxI83Clcg55W8gkFSOS6rWNbG5qFZWMll6yl02HtunalHmUlRUL66YeGXdMDC2PuRcmZbGO5a/2tbVppW6mfSWG3NPRpgwIDAQAB",
                publicKey: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuytnDY60+jGTzo6TuIWoet+C7YRQ+xsBoa//Hhl3ObydYF1TT5acBcmEMDETKKVzfp47FecLhkafy4m0Ekh4ZHbGYR+UTVGdjfBxQ11ZUmA6iqYTACOqVh9/s8WhCFFxx+C/26+DeSDpEH2INHq9F/gVfvbM40+JPu6p/OnMtmMXzNz4UM9Gq5z6V4c3AXN34UlsAJ9uAhGQe0l0ZFzDS68w1nbV5oQuUQrCl6PmYl+DWU0LGy9mVZm9pXoGW+6tr1qpO/A82iztLB7iXd2tdTblFqQ6eD+Qry83nSW1+8sbGUH1y9nrGvIaGXjdn+Wv3LsXYFEnOS6SeAenrsvzgwIDAQAB", //producao
                holder: $('#cnome').val(),
                number: $('#cnumero').val(),
                expMonth: $('#cmes').val(),
                expYear: $('#cano').val(),
                securityCode: $('#ccod').val()
            });
        
            if(card.hasErrors ==  true){
                toastr["error"]("Verifique os dados do cartão.","DADOS DO CARTÃO INVÁLIDOS");     
            } else {

                $('#divBoxConteudo').block({ 
                    message: 'Aguarde...',
                    css: { 
                        border: 'none', 
                        padding: '15px', 
                        backgroundColor: '#000', 
                        '-webkit-border-radius': '10px', 
                        '-moz-border-radius': '10px', 
                        opacity: .5, 
                        color: '#fff' 
                }}); 

                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: "/pagar/cartao",
                    data: {
                        pedido: $('#idPedidoForma').val(),
                        cartao_numero: card.encryptedCard,
                        cartao_code: $('#ccod').val(),
                        cartao_nome: $('#cnome').val(),
                        cartao_parcela: $('#cparcela').val(),
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },				
                    success: function(data) {
                        $('#divBoxConteudo').unblock();
                        if(data.success == true){
                            $('#modalFormas').modal('hide');
                            toastr["success"]("Pagamento realizado","SUCESSO");
                        } else {
                            toastr["error"]("Seu pagamento não foi efetuado","OCORREU UM ERRO");
                        }
                    },
                    error: function(data) {
                        $('#divBoxConteudo').unblock();
                        toastr["error"]("Não foi possivel executar esta ação","Ops!");
                    }
                }); 



            }

        }
    } 
});




        function pagarPix(){

            //console.log($('#idPedidoForma').val());
            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/pagar/pix",
                data: {
                    pedido: $('#idPedidoForma').val(),
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },				
                success: function(data) {
                    if(data.success == true){
                        $('#imgQrcode').attr('src', data.qrcode );                  
                        $('#modalPix').modal('show');
                    }
                },
                error: function(data) {
                    toastr["error"]("Não foi possivel executar esta ação","Ops!");
                }
            });         
        }


        const pagarPedido = (i) => {
            //$('#btnPagarPagSeguro').attr('href', '/pedido/pagar/' + i);
            $('#idPedido').val(i);
            $('#idPedidoForma').val(i);
            $('#idPedidoBoleto').val(i);
            $('#idPedidoPix').val(i);
            $('#modalPagaManual').modal('show');
        }

		
	
        $(document).ready(function () {
    			
			
		var tabela = $("#tabela_incricoes").dataTable({
			drawCallback: function () { 
				$('[data-toggle="tooltip"]').tooltip();
			},
			processing: true,
			serverSide:true,
			ajax:{
				url:"/admin/pedidos/carrega/tabela"
			},
            fixedHeader: {
                header: false,
                footer: true
            },
			//dom: 'Bfrtip',
			"language": {
				"lengthMenu": "Mostrando _MENU_ registros",
				"zeroRecords": "Nada encontrado",
                "info":"Mostrando _START_ de _END_ de um total de _TOTAL_ registros",
				"infoEmpty": "Nenhum registro ainda",
				"infoFiltered": "(Filtrado de um total de _MAX_ registros)",
				"sSearch":"Pesquisar",
				  "oPaginate": {
					"sFirst": "Primeiro",
					"sPrevious": "Anterior",
					"sNext": "Próximo",
					"sLast": "Último"
				  },					
			},			
			columns:[
				{data:'id'},
				{data:'evento'},
				{data:'participante'},
				{data:'codigo'},
				{data:'criado'},
				{data:'pagto'},
				{data:'status'},
				{data:'forma'},
				{data:'valor'},
				{data:'aceite'},				
				{data:'action'},				
			],
		   buttons: [
		   
				{ extend: 'pdf', className: 'btn dark btn-outline', exportOptions: {
					columns: ':visible'
				}  },
				{ extend: 'excel', 
					className: 'btn dark btn-outline', 
					exportOptions: {
						columns: ':visible',
						format:{
						  body: function(data, row, column, node) {
							  data = $('<p>' + data + '</p>').text();
							  return $.isNumeric(data.replace(',', '.')) ? data.replace(',', '.') : data;
						  }
						}
					}
				},
				{ extend: 'csv', className: 'btn dark btn-outline', exportOptions: {
					columns: ':visible'
				}  },
				{extend: 'colvis', className: 'btn dark btn-outline', text: 'Colunas'},
				
			],
			columnDefs: [		
				{
					'targets': 10,
                    "width": "100px",
					'createdCell':  function (td, cellData, rowData, row, col) {
					   $(td).attr('id', 'bread-actions'); 
					}
				 }				
			],
			"lengthMenu": [
				[5, 10, 15, 20, 50, 100, -1],
				[5, 10, 15, 20, 50, 100, "Tudo"] // change per page values here
			],		
			"order": [
				[0, 'desc']
			],				
			"pageLength": 5,
			"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

		});
						
			
            // $('#tabela_incricoes tfoot th').each( function (i) {
            //     $(this).html( '<input type="text" style="width:100%;" class="form-control" placeholder="pesquisar..." data-index="'+i+'" />' );
            // } );
            // $('#tabela_incricoes').on( 'keyup', 'tfoot input', function () {
            //     var t = $("#tabela_incricoes").DataTable();
            //     t.column( $(this).data('index') ).search( this.value ).draw();
            // } );


			
			
            @if (!$dataType->server_side)
				
					
				
            @else
                $('#search-input select').select2({
                    minimumResultsForSearch: Infinity
                });
            @endif

            @if ($isModelTranslatable)
                $('.side-body').multilingual();
                //Reinitialise the multilingual features when they change tab
                $('#dataTable').on('draw.dt', function(){
                    $('.side-body').data('multilingual').init();
                })
            @endif
            $('.select_all').on('click', function(e) {
                $('input[name="row_id"]').prop('checked', $(this).prop('checked'));
            });
        });

        var deleteFormAction;
        $('td').on('click', '.delete', function (e) {
            $('#delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', ['id' => '__id']) }}'.replace('__id', $(this).data('id'));
            $('#delete_modal').modal('show');
        });

        @if($usesSoftDeletes)
            @php
                $params = [
                    's' => $search->value,
                    'filter' => $search->filter,
                    'key' => $search->key,
                    'order_by' => $orderBy,
                    'sort_order' => $sortOrder,
                ];
            @endphp
            $(function() {
                $('#show_soft_deletes').change(function() {
                    if ($(this).prop('checked')) {
                        $('#dataTable').before('<a id="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 1]), true)) }}"></a>');
                    }else{
                        $('#dataTable').before('<a id="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 0]), true)) }}"></a>');
                    }

                    $('#redir')[0].click();
                })
            })
        @endif
        $('input[name="row_id"]').on('change', function () {
            var ids = [];
            $('input[name="row_id"]').each(function() {
                if ($(this).is(':checked')) {
                    ids.push($(this).val());
                }
            });
            $('.selected_ids').val(ids);
        });
    </script>
@stop