@extends('layout.master')

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

    <style>
        @media (max-width: 991px){
            .wrapper{
                margin-top: 30px;
            }
        }
        .table thead{
            background-color: #326dbd !important;

        }
        .table thead tr th{
            color: #fff;
        }
        .pagination-sm>li>a, .pagination-sm>li>span {
            margin: 0px 8px;
            border: 1.9px solid #326dbd;
            border-radius: 6px;
        }
        .btn-primary {
            background-color: #326dbd !important;
            border: 1px solid #326dbd !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: #326dbd !important;
            border: 1px solid #326dbd !important;
        }
        .swal2-modal h2 {
            color: #e8740d;
        }
        .swal2-confirm{
            border-left-color: #e8740d !important;
            border-right-color: #e8740d !important;
            background-color: #e8740d !important;
        }

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

        }

        .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
            color: #fff;
            text-decoration: none;
            background-color: rgba(197, 197, 197, 0.42);
        }

        .dropdown-menu>li>a {
            color: #fff;
        }

        .hide{
            display: none;
        }


    </style>
    {{ $result or '' }}
    <div class="wrapper" style="padding-left: 5%; padding-right: 5%">
        <div class="row">
            <div class="row">
                <div class="col-xs-12">
                    @include('alerts.index')
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8" style="margin-top: 11px">
                    <div><h4>Consultas de transacciones en línea</h4></div>
                    <br>
                </div>
                <div class="col-lg-4" style="text-align: right">
                    <div class="col-lg-12" style="padding-right: 0px">
                        <div class="btn-group">
                            <button style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; background-color: #58595b !important; border: 1px solid #58595b !important;" type="button" class="btn btn-purple dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-download"></i>  Historial de pago <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu" style="background-color: rgba(79, 80, 82, 0.63); color: #fff; text-color: #fff;">
                                <li><a href="#" style=" color: #fff;">Descargar Consolidado</a></li>
                                <li><a href="#" style=" color: #fff;">Descargar Detalle</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="tab-content">
                        <form method="post" action="{{ url('viewer') }}">
                            {{ csrf_field() }}
                            <div class="row" style="padding-bottom: 22px">
                                <div class="col-sm-12">
                                    <div class="card-box table-responsive">
                                        @if(count($array))
                                            <div class="col-md-12">
                                                <div class="col-md-1">

                                                </div>
                                                <div class="col-md-3">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datePickerDesde">
                                                        <span class="input-group-addon bg-primary b-0 text-white" style="background-color: #326dbd !important;"><i class="ion-calendar"></i></span>
                                                    </div><!-- input-group -->
                                                </div>
                                                <div class="col-md-1">
                                                    <h4 style="text-align: center">a</h4>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datePickerHasta">
                                                        <span class="input-group-addon bg-primary b-0 text-white" style="background-color: #326dbd !important;"><i class="ion-calendar"></i></span>
                                                    </div><!-- input-group -->
                                                </div>
                                                <div class="col-md-3">
                                                    <button type="button" class="btn btn-success btn-rounded w-md waves-effect waves-light m-b-5 " style="background-color: #e8740d !important; border: 1px solid #e8740d !important; padding: 6px 0px !important;">Consultar</button>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <h5>Resultados: </h5>
                                            </div>
                                                <table id="datatable-impuesto" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                                    <thead>
                                                    <tr>
                                                        <th>Número de Recibo</th>
                                                        <th>Referencia Visa</th>
                                                        <th>Código de Contribuyente</th>
                                                        <th>Total Pagado</th>
                                                        <th>Año</th>
                                                        <th>Estado</th>
                                                        <th>Ver detalle</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($array as $predial)
                                                        <tr>
                                                            <td>{{  $predial['numeroDeLiquidacion'] }}</td>
                                                            <td>{{  $predial['codigoVisa']}}</td>
                                                            <td>{{  $predial['codigoContribuyente']}}</td>
                                                            <td>{{  $predial['importeTotal']}}</td>
                                                            <td>{{  $predial['anoTransaccion']}}</td>
                                                            <td>{{  $predial['estado']}}</td>
                                                            <td></td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <div class="alert alert-success">
                                                    <strong>No se han realizado pagos</strong>
                                                </div>
                                            @endif
                                    </div>
                                </div>
                            </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": 100,
                        "bLengthChange": false,
                        "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 informacion",
                            "paginate":{
                                "previous": "Anterior",
                                "next": "Siguiente"
                            }
                        }
                    });



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

                    //Datatable Responsive
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
                        $($.fn.dataTable.tables(true)).DataTable()
                                .columns.adjust()
                                .responsive.recalc();
                    });

                } );




                $('#datePickerDesde').datepicker({
                    language: "es"
                });
                $('#datePickerHasta').datepicker({
                    language: "es"
                });


            </script>
            <script>
                var total = 0.0;


                $('#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: "/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");
                                });
                    }).done();
                });


            </script>
@stop