@extends('layouts.masterBtnPago')

@section('header')
    <meta name="logout" content="{{ route('web.logout') }}">
    <style>

        /*.modal {
            text-align: center;
        }

        @media screen and (min-width: 768px) {
            .modal:before {
                display: inline-block;
                vertical-align: middle;
                content: " ";
                height: 100%;
            }
        }

        .modal-dialog {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }*/

        .vertical-alignment-helper {
            display: table;
            height: 100%;
            width: 100%;
            pointer-events: none;
        }

        .vertical-align-center {
            /* To center vertically */
            display: table-cell;
            vertical-align: middle;
            pointer-events: none;
        }

        .modal-content {
            /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
            width: inherit;
            max-width: inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
            height: inherit;
            /* To center horizontally */
            margin: 0 auto;
            pointer-events: all;
        }

        .panel {
            border-color: #222222;
        }

        .panel-heading {
            color: #ffffff;
            background-color: #222;
            border-color: #222;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .head-logo {
            margin-right: 30px;
        }

        .head-logo .bg-logo > a > img {
            width: 220px;
        }

        .head-logo .navbar-brand {
            background-color: white;
            height: 90px;
            padding-right: 46px;
        }

        .head-logo div.bg-logo {
            background: #fff;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 50px;
            padding-left: 25px;
        }

        .head-logo div.bg-logo:after, .head-logo div.bg-logo:before {
            content: "";
            width: 0;
            height: 0;
            top: 0;
            border-style: solid;
            border-width: 92px 31px 0 0;
            position: absolute;
            -webkit-transform: skew(-30deg, 0deg);
            transform: skew(-30deg, 0deg)
        }

        .head-logo div.bg-logo:before {
            background-color: #9e9e9e;
            border-color: transparent #9e9e9e transparent transparent;
            right: -30px;
            z-index: 1
        }

        .head-logo div.bg-logo:after {
            background-color: #e2e2e2;
            border-color: transparent #e2e2e2 transparent transparent;
            right: -3px
        }

        .detalle-pago {
            margin-right: 20px;
        }
    </style>

@endsection
@section('content')
    {{--    @php dump($pagos) @endphp--}}
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-push-1">
                <br><br>
                <div class="panel">
                    <div class="panel-heading">
                        <h4 class="panel-title">Historial de Pagos</h4>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-condensed table-striped" id="historialMiaTable">
                                <thead>
                                <tr>
                                    <th>N° Guía</th>
                                    <th>N° Casillero</th>
                                    <th>Último 4 dígitos Tarjeta</th>
                                    <th>N° de Aprobación</th>
                                    <th>Fecha de Pago</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($pagos['entidadRespuesta'] as $pago)
                                    <tr>
                                        <td>
                                            <a href="https://www.zoomenvios.com/zoomtrack/zoom-track-res.php?identificacion={{ $pago['codguia'] }}&rastreoenvio=guia" target="_blank">{{ $pago['codguia'] }}</a>
                                        </td>
                                        <td>{{ $pago['casillero'] }}</td>
                                        <td>************{{ $pago['nro_tarjeta'] }}</td>
                                        <td>{{ $pago['nro_aprobacion'] }}</td>
                                        <td><span style="display: none">{{ $pago['fechapago'] }}</span>{{ \Carbon\Carbon::parse($pago['fechapago'])->format('d/m/Y') }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="{!! asset('/js/PagosElectronicos/botonPago.js')  !!}"></script>
    <script>
        $(document).ready(function () {
            $('#historialMiaTable').DataTable({
                "order": [[ 4, "desc" ]],
                "language": {
                    "processing": "Procesando...",
                    "lengthMenu": "Mostrar _MENU_ registros",
                    "zeroRecords": "No se encontraron resultados",
                    "emptyTable": "Ningún dato disponible en esta tabla",
                    "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "infoPostFix": "",
                    "search": "Buscar:",
                    "url": "",
                    "infoThousands": ",",
                    "loadingRecords": "Cargando...",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    },
                    "aria": {
                        "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                }
            });
        });
    </script>
@endsection