@extends('layout.master')

@section('title')
    Pagos en Línea
@stop
@section('region_editable')

    <style>
		/* ::-webkit-scrollbar {
            display: none;
        } */
        @media (max-width: 991px){
            .wrapper{
                margin-top: 30px;
            }
        }
        .table thead{
            background-color: #61AB65 !important;

        }
        .table thead tr th{
            color: #fff;
        }
        .pagination-sm>li>a, .pagination-sm>li>span {
            margin: 0px 8px;
            border: 1.9px solid #61AB65;
            border-radius: 6px;
        }
        .btn-primary {
            background-color: #61AB65 !important;
            border: 1px solid #61AB65 !important;
        }

        .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary {
            background-color: #61AB65 !important;
            border: 1px solid #61AB65 !important;
        }
        .swal2-modal h2 {
            color: #61AB65;
        }
        .swal2-confirm{
            border-left-color: #61AB65 !important;
            border-right-color: #61AB65 !important;
            background-color: #61AB65 !important;
        }

        .swal2-cancel{
            border-left-color: #e6e7e8 !important;
            border-right-color: #e6e7e8 !important;
            background-color: #e6e7e8 !important;
            color: #000 !important;

        }

        .hide{
            display: none;
        }

		 .pagination-sm>li>a, .pagination-sm>li>span {
            margin: 0px 8px;
            border: 1.9px solid #61AB65;
            border-radius: 6px;
        }
		 .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
            background-color: #61AB65 !important;
        }
        .dataTables_wrapper .dataTables_processing {
            background: #fff !important;
            height: auto !important;
            margin-top: 0 !important;
            padding-bottom: 20px !important;
            top: calc(0% + 39px) !important;
        }

    </style>
    {{ $result or '' }}
    <div class="wrapper" style="padding-left: 5%; padding-right: 5%">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-xs-12">
                    @include('alerts.index')
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8" style="margin-top: 11px">
                    <div><label>Código de contribuyente: </label> {{ Session::get('Datos')['cod_contribuyente']}}</div>
                    <br>
                </div>
                <div class="col-lg-4" style="text-align: right">
                    <div class="col-lg-12" style="padding-right: 0px">
                        <a id="btnBack" onclick="showSpinner()" style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; background-color: #58595b !important; border: 1px solid #58595b !important;" href="{{ url('/') }}" class="btn btn-danger">
                            <i class="fa  fa-mail-reply"></i> &nbsp; <span> Regresar</span> &nbsp;
                        </a>
                    </div>
                </div>
                <br/>
                <div class="col-lg-12">
                    <div class="tab-content">
                        <form method="post" action="{{ url('viewer') }}">
                            {{ csrf_field() }}
                            <input type="hidden" name="ip" value="">
                            <div class="row" style="padding-bottom: 22px">
                                <div class="col-sm-12">
                                    <div class="card-box table-responsive">

                                            <div class="col-md-3">
                                                <div class="form-group">

                                                </div>
                                            </div>
                                            <div class="col-md-3">

                                            </div>
                                            <table id="datatable-impuesto" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                                <thead>
                                                <tr>
                                                    <th>N° de Recibo</th>
                                                    <th>Tipo de Tramite</th>
                                                    <th>Periodo</th>
                                                    <th>Total pagado</th>
                                                    <th>Fecha</th>
                                                    <th>Año</th>
                                                    <th>Lugar</th>
													<th class="text-center">Descargar</th>

                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                    </div>
                                </div>
                            </div>
                           {{--<div clas="col-lg-12" style="text-align: center">--}}
						   {{--<button type="button" id="action-email" class="btn btn-success btn-rounded w-md waves-effect waves-light m-b-5 " style="background-color: #18a054 !important; border: 1px solid #18a054 !important">Enviar por Correo</button>--}}
						   {{--</div>--}}
                        </form>
                    </div>
                </div>

            </div>
        </div>




        @endsection

        @section('js')

            <script type="text/javascript">

                $(document).ready(function() {
                    //Fecha y año
                    var fecha = new Date();
                    var anio = fecha.getFullYear();
                    var range = anio-1993 +1;

                    //DatatableImpuesto
                    var table = $('#datatable-impuesto').DataTable({
                        "iDisplayLength": 10,
                        "bLengthChange": false,
                        "responsive": true,
                        "autoWidth": true,
                        "processing": true,
                        "serverSide": false,
                        "ajax": "/servicehistorial",
                        "columns": [
                            { "data": "pagnumero", "responsivePriority": 1 },
                            { "data": "pagtipotramite" },
                            { "data": "pagperiodo" },
							{
								"targets": [3],
								"data": null,
								"render":function (data,type,row) {
									var aux = parseFloat(row.pagmonto).toFixed(2);
									return '<th>'+"S/.&nbsp;&nbsp;"+aux+'</th>';
								}
							},
                            { "data": "pagfecha" },
                            { "data": "paganyo" },
                            { "data": "paglugar" },
							{
                                "responsivePriority": 1,
							   "targets": [7],
							   "data": null,
							   "render": function ( data, type, row ) {
								   var aux = row.pagnumero;
								   aux = $.trim(aux);
                           return '<td style="text-align:center !important;"><button  style="margin-top: 0px !important; " type="button" class="vmas btn btn-primary waves-effect waves-light m-t-10" onclick= window.open("{{url('cuenta').'/'}}'+aux+'")  data-toggle="modal" data-target="#con-close-modal"> <i class="fa fa-download" aria-hidden="true"></i>&nbsp;Descargar</button></td>';}
						   }
                        ],
                        "language": {
                            "lengthMenu": "Mostrar _MENU_ datos por página",
                            "zeroRecords": "No hubo resultados",
                            "info": "Mostrando página _PAGE_ de _PAGES_",
                            // "infoEmpty": "No records available",
                            "infoFiltered": "(filtered from _MAX_ total records)",
                            "search": "Buscar: ",
                            "emptyTable": "No hay informacion disponible en la tabla",
                            "infoEmpty": "No hay entradas para mostrar",
                            "paginate":{
                                "previous": "Anterior",
                                "next": "Siguiente"
                            },
                            "processing": "Procesando información..."
                        }
                    });






                    $("#datatable-impuesto_filter").hide();



                });
            </script>
			  <script>
                $('#action-email').on('click', function() {
                    swal({
                        title: 'Enviar estado de cuenta',
                        text: 'Escribe aquí tu correo',
                        input: 'email',
                        showCancelButton: true,

                        cancelButtonText: "Cerrar",

                        confirmButtonText: 'Enviar',
                        inputPlaceholder: "Nombre@ejemplo.com"

                    }).then(function(email) {
                        $.ajax(
                                {
                                    type: "get",
                                    url: "/MOLINA.PAGOS/public/index.php/sendemail/"+email,
                                    success: function(data){
                                        console.log("Se envio el correo");
                                    },
                                    error: function (data) {
                                        console.log('Error:', data);
                                    }
                                }
                        )
                                .done(function(data) {
                                    swal({
                                        type: 'success',
                                        html: 'El correo <strong>' + email + '</strong>  ha sido enviado'
                                    });
                                })
                                .error(function(data) {
                                    swal("Ups", "Ocurrio un error con el envio de correo!", "error");
                                    console.log(data);
                                });
                    }).done();
                });
                function showSpinner() {
                    $('#btnBack').append(`
                        <i class="fa fa-spinner fa-pulse"></i>
                        <span class="sr-only">Loading...</span>
                    `);
                }
            </script>

@stop
