@extends('template.layout')
@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        option{
            background-color: white;
        }
        table.dataTable.dtr-inline.collapsed > tbody > tr > td.details-control:first-child:before {
            display: none;
        }
        .filter-none{
            display: none;
        }
        .dataTables_filter, .dataTables_info { display: none; }
    </style>
@endsection
@section('content')
    <h1 class="page-title">
        Historial de pagos
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <h4 class="modal-title caption-subject font-blue-secondary sbold uppercase">Historial Pagos</h4>
            </div>
        </div>
        <div class="portlet-body">
            <div class="tabbable-custom nav-justified">
                <ul class="nav nav-tabs nav-justified">
                    <li class="active">
                        <a href="#tab_1_1_1" data-toggle="tab"> Trámites </a>
                    </li>
                    <li>
                        <a href="#tab_1_1_2" data-toggle="tab"> Biblioteca </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1_1_1">
                        <div class="Forum-ForumTopicList row" style="margin:20px">
                            <table class="table table-hover nowrap dataTable dtr-inline collapsed tbPersonal"
                                   id="tb-gestionpagos"
                                   width="100%" role="grid" aria-describedby="tbPersonal_info">
                                <thead class="thead-default">
                                <tr>
                                    <th>Cód. recibo</th>
                                    <th>Fecha de Pago</th>
                                    <th>Semestre</th>
                                    <th>Turno</th>
                                    <th>Monto</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_1_1_2">
                        <div class="Forum-ForumTopicList row" style="margin:20px">
                            <table class="table table-hover nowrap dataTable dtr-inline collapsed tbPersonal"
                                   id="tb-biblioteca"
                                   width="100%" role="grid" aria-describedby="tbPersonal_info">
                                <thead class="thead-default">
                                <tr>
                                    <th>Cód. recibo</th>
                                    <th>Fecha de Pago</th>
                                    <th>Semestre</th>
                                    <th>Turno</th>
                                    <th>Monto</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endsection

        @section('scripts')
            <script src="{{asset('css/icheck/icheck.min.js')}}" type="text/javascript"></script>
            <script>
                var url_biblioteca = "{{ url('historialpagos/historialbiblioteca') }}";
                var url_gestionpagos = "{{ url('historialpagos/historialtramite') }}";
            </script>
            <script src="{{asset('js/Historial/Biblioteca.js')}}"></script>
            <script src="{{asset('js/Historial/GestionPagos.js')}}"></script>
            <script>
                $('.nav-tabs a').on('click',function(){
                    tablePersonal.draw();
                    tableBiblioteca.draw();
                });
            </script>
@endsection