@extends('adminlte::page')

@section('content_header')
    <h1><b>Reportes de kardex del estudiante: </b> {{ $estudiante->apellidos . ' ' . $estudiante->nombres }}</h1>
    <hr>
@stop

@section('content')
    <div class="row">
        <div class="col-md-8">
            <div class="accordion" id="accordionExample">
                @foreach ($matriculas as $matricula)
                    <div class="card">
                        <div class="card-header" style="background-color:rgb(177, 238, 215);" id="heading{{ $matricula->id }}">
                            <h2 class="mb-0">
                                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                                    data-target="#collapseOne{{ $matricula->id }}" aria-expanded="true"
                                    aria-controls="collapseOne{{ $matricula->id }}">
                                    <b>Matricula: Gestión
                                        {{ $matricula->gestion->nombre . ' - ' . $matricula->nivel->nombre . ' - ' . $matricula->grado->nombre . ' - ' . $matricula->paralelo->nombre }}</b>
                                </button>
                            </h2>
                        </div>

                        <div id="collapseOne{{ $matricula->id }}" class="collapse show"
                            aria-labelledby="heading{{ $matricula->id }}" data-parent="#accordionExample">
                            <div class="card-body">
                                <b>Materias asignadas</b>
                                <hr>
                                <table class="table table-bordered table-striped table-hover table-sm">
                                    <thead>
                                        <tr>
                                            <th>Nro</th>
                                            <th>Docente</th>
                                            <th>Materia</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($asignaciones as $asignacione)
                                            @if (
                                                $asignacione->turno_id == $matricula->turno_id &&
                                                    $asignacione->gestion_id == $matricula->gestion_id &&
                                                    $asignacione->nivel_id == $matricula->nivel_id &&
                                                    $asignacione->grado_id == $matricula->grado_id &&
                                                    $asignacione->paralelo_id == $matricula->paralelo_id)
                                                <tr>
                                                    <td style="text-align: center">{{ $loop->iteration }}</td>
                                                    <td>{{ $asignacione->personal->apellidos . ' ' . $asignacione->personal->nombres }}
                                                    </td>
                                                    <td>{{ $asignacione->materia->nombre }}</td>
                                                    <td>
                                                        <a href="{{url('/admin/kardexs/detalle/asignacion/'.$asignacione->id.'/estudiante/'.$estudiante->id)}}" 
                                                            class="btn btn-danger"><i class="fas fa-list-alt"></i>Ver reportes</a>
                                                    </td>
                                                </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        #example1_wrapper .dt-buttons {
            background-color: transparent;
            box-shadow: none;
            border: none;
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15x;
        }

        #example1_wrapper .btn {
            color: #fff;
            border-radius: 4px;
            padding: 5px 15px;
            font-size: 14px;
        }

        .btn-danger {
            background-color: #dc3545;
            border: none;
        }

        .btn-success {
            background-color: #28a745;
            border: none;
        }

        .btn-info {
            background-color: #17a2b8;
            border: none;
        }

        .btn-warning {
            background-color: #ffc107;
            border: none;
        }

        .btn-default {
            background-color: #6e7176;
            border: none;
        }
    </style>
@stop

@section('js')
    <script>
        $(function() {
            var table = $('#example1').DataTable({
                "pageLength": 5,
                "language": {
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Asignaciones",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Asignaciones",
                    "infoFiltered": "(filtrado de _MAX_ total Asignaciones)",
                    "lengthMenu": "Mostrar _MENU_ Asignaciones",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "No se encontraron resultados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                buttons: [{
                        text: '<i class="fas fa-copy"></i> COPIAR',
                        extend: 'copy',
                        className: 'btn btn-default'
                    },
                    {
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        extend: 'pdf',
                        className: 'btn btn-danger',
                        customize: function(doc) {
                            doc.pageOrientation = 'landscape';
                            doc.pageSize = 'A4';
                            var colCount = doc.content[1].table.body[0].length;
                            let widths = [];
                            for (let i = 0; i < colCount; i++) {
                                if (i === 0) { // Nro
                                    widths.push(18); // ancho más pequeño para Nro
                                } else {
                                    widths.push('*');
                                }
                            }
                            doc.content[1].table.widths = widths;
                            doc.styles.tableHeader.fontSize = 7; // fuente más pequeña
                            doc.defaultStyle.fontSize = 6; // fuente más pequeña
                            doc.pageMargins = [1, 1, 1, 1]; // márgenes más pequeños
                        }
                    },
                    {
                        text: '<i class="fas fa-file-csv"></i> CSV',
                        extend: 'csv',
                        className: 'btn btn-info'
                    },
                    {
                        text: '<i class="fas fa-file-excel"></i> EXCEL',
                        extend: 'excel',
                        className: 'btn btn-success'
                    },
                    {
                        text: '<i class="fas fa-print"></i> IMPRIMIR',
                        extend: 'print',
                        className: 'btn btn-warning'
                    }
                ]
            }).buttons().container().appendTo('#example1_wrapper .row:eq(0)');
        });
    </script>
    <!-- Contenido de la vista -->
    @include('footer')
@stop