@extends('layouts.masterBtnPago')
@section('header')

    <style>
        .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($historial['entidadRespuesta']))--}}

    @if($historial['codrespuesta'] == 'COD_000')
        <div class="container" style="margin-top: 20px">
            <div class="row">
                <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">Historial de Pagos</h3>
                        </div>
                        {{--<div class="panel-body">


                        </div>--}}
                        <table class="table table-striped" id="datos">
                            <thead>
                            <tr>
                                <th>Fecha de Pago</th>
                                <th>Nombre Pagador</th>
                                <th>Nro Pago ZOOM</th>
                                {{--<th>Nro de Control</th>--}}
                                <th>Monto Total</th>
                                <th>Estatus</th>
                                <th>Detalles Guías/Facturas</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($historial['entidadRespuesta'] as $value)
                                {{--@php(dump($value['listpagodoc']))--}}

                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($value['fechapago'])->format('d/m/Y') }}</td>
                                    <td>{{ $value['nombrepagador'] }}</td>
                                    <td>{{ $value['idpago'] }}</td>
                                    {{--<td>{{ $value['nro_control'] }}</td>--}}
                                    <td align="right">{{ number_format($value['montototal'], 2, ',', '.') }}</td>
                                    <td>{{ $value['listestatuspago']['nombre'] }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                                data-target="#listitems_{{ $value['idpago'] }}">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @foreach($historial['entidadRespuesta'] as $value)
            <!-- Modal -->
            <div class="modal fade" id="listitems_{{ $value['idpago'] }}" tabindex="-1" role="dialog"
                 aria-labelledby="listitemsLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="listitemsLabel">Items Pagados</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Guía/Factura</th>
                                    <th>Monto</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($value['listpagodoc'] as $item)
                                    <tr>
                                        <td>
                                            {{ $item['codguia'] == null ? $item['codfactura'] : $item['codguia'] }}
                                        </td>
                                        <td>{{ $item['monto'] }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

    @else
        <div class="alert alert-danger col-sm-6 col-sm-push-3" style="margin-top: 20px;">
            <strong>No posee pagos registrados.</strong>
        </div>
    @endif


@endsection
@section('script')
    <script src="{!! asset('js/jquery.tablesorter.min.js') !!}" type="text/javascript"></script>
    <script src="{!! asset('js/jquery.tablesorter.widgets.min.js') !!}" type="text/javascript"></script>
    <script src="{!! asset('js/jquery.tablesorter.pager.js') !!}" type="text/javascript"></script>
    <script>
        $("#datos").tablesorter({
            theme: "bootstrap",
            widthFixed: true,
            // headerTemplate : '{content} {icon}',
            headerTemplate: '{content}',
            widgets: ["uitheme", "filter", "zebra"],
            widgetOptions: {
                zebra: ["even", "odd"],
                filter_cssFilter: "form-control input-sm",
                uitheme: "bootstrap"
            },
            headers: {
                6: {
                    sorter: false,
                    filter: false
                }
            }
        })
            .tablesorterPager({
                size: 10,
                container: $(".ts-pager"),
                cssGoto: ".pagenum",
                removeRows: false,
                output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                positionFixed: false
            });
        $.tablesorter.themes.bootstrap = {
            caption: 'caption',
            icons: 'icon-white',
            iconSortNone: 'bootstrap-icon-unsorted',
            iconSortAsc: 'glyphicon glyphicon-chevron-up',
            iconSortDesc: 'glyphicon glyphicon-chevron-down'
        };
    </script>
@endsection