@extends('adminlte::page')

@section('content_header')
    <h1>Listado de calificaciones</h1>
    <hr>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><b>Calificaciones registradas - Gestión: {{ $asignacion->gestion->nombre }} -
                            Nivel:
                            {{ $asignacion->nivel->nombre }}
                            - Grado: {{ $asignacion->grado->nombre }} - Paralelo: {{ $asignacion->paralelo->nombre }} -
                            Materia: {{ $asignacion->materia->nombre }}</b></h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCreate">
                            Calificar estudiantes
                        </button>
                        <!-- Botón para reporte general -->
                        <a href="{{ url('admin/calificaciones/pdf', ['id' => $docente->id]) }}"
                            class="btn btn-secondary ml-2" target="_blank">
                            <i class="fas fa-file-pdf"></i> Reporte general
                        </a>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="modalCreate" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header" style="background-color: #007bff; color: white;">
                                    <h5 class="modal-title" id="exampleModalLabel">Registrar calificación</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">

                                    <form action="{{ url('/admin/calificaciones/create') }}" method="POST">
                                        @csrf
                                        <input type="text" name="asignacion_id" value="{{ $asignacion->id }}" hidden>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">Periodo para calificación</label><b>(*)</b>
                                                    <select name="periodo_id" class="form-control" id="" required>
                                                        <option value="">Seleccione el periodo..</option>
                                                        @foreach ($periodos as $periodo)
                                                            <option value="{{ $periodo->id }}">
                                                                {{ $periodo->nombre }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="tipo">Tipo de calificación <b>(*)</b></label>
                                                    <select name="tipo" id="tipo" class="form-control" required>
                                                        <option value="">-- Seleccione una opción --</option>
                                                        <option value="Acumulado">Acumulado</option>
                                                        <option value="Examen">Examen</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">Fecha de calificación</label><b>(*)</b>
                                                    <input type="date" class="form-control" name="fecha" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">Descripción</label>
                                                    <input type="text" class="form-control" name="descripcion">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="">Estudiantes</label><b>(*)</b>
                                                    <table class="table table-bordered table-striped table-hover table-sm">
                                                        <thead>
                                                            <tr>
                                                                <th style="text-align: center">Nro</th>
                                                                <th style="text-align: center">Estudiante</th>
                                                                <th style="text-align: center">Carnet de identidad</th>
                                                                <th style="text-align: center">Calificación</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($matriculados as $matriculado)
                                                                <tr>
                                                                    <td style="text-align: center">
                                                                        {{ $loop->iteration }}</td>
                                                                    <td>{{ $matriculado->estudiante->apellidos }}
                                                                        {{ $matriculado->estudiante->nombres }}</td>
                                                                    <td>{{ $matriculado->estudiante->ci }}</td>
                                                                    <td>
                                                                        <center>
                                                                            <input style="text-align: center; width:70px"
                                                                                type="number" class="form-control"
                                                                                name="nota[{{ $matriculado->estudiante->id }}]"
                                                                                value="{{ old('nota.' . $matriculado->estudiante->id) }}"
                                                                                min="0" max="100" required>
                                                                        </center>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Cancelar</button>
                                                <button type="submit" class="btn btn-primary">Registrar
                                                    Calificaciones</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped table-sm">
                    <thead>
                        <tr>
                            <th>Nro</th>
                            <th>Tipo</th>
                            <th>Descripción</th>
                            <th>Periodo</th>
                            <th>Fecha</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($calificaciones as $calificacione)
                            <tr>
                                <td style="text-align:center">{{ $loop->iteration }}</td>
                                <td>{{ $calificacione->tipo }}</td>
                                <td>{{ $calificacione->descripcion }}</td>
                                <td>{{ $calificacione->periodo->nombre }}</td>
                                <td>{{ $calificacione->fecha }}</td>
                                <td>

                                    <button type="button" class="btn btn-info" data-toggle="modal"
                                        data-target="#modalVerCalificaciones{{ $calificacione->id }}">
                                        <i class="fas fa-eye"></i> Ver calificaciones
                                    </button>

                                    <!-- Modal para ver la calificaciones  -->
                                    <div class="modal fade" id="modalVerCalificaciones{{ $calificacione->id }}"
                                        tabindex="-1" aria-labelledby="exampleModalLabel{{ $calificacione->id }}"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header"
                                                    style="background-color: #17a2b8; color: white;">
                                                    <h5 class="modal-title"
                                                        id="exampleModalLabel{{ $calificacione->id }}">Detalle de
                                                        calificaciones</h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="">Periodo para calificación</label>
                                                                <p>{{ $calificacione->periodo->nombre }}</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="tipo">Tipo de calificación</label>
                                                                <p>{{ $calificacione->tipo }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="">Fecha de
                                                                    calificación</label>
                                                                <p>{{ $calificacione->fecha }}</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="">Descripción</label>
                                                                <p>{{ $calificacione->descripcion }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <label for="">Estudiantes</label>
                                                                <table
                                                                    class="table table-bordered table-striped table-hover table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th style="text-align: center">Nro</th>
                                                                            <th style="text-align: center">Estudiante
                                                                            </th>
                                                                            <th style="text-align: center">Carnet de
                                                                                identidad</th>
                                                                            <th style="text-align: center">Calificación
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($calificacione->detalleCalificaciones as $detalle)
                                                                            <tr>
                                                                                <td style="text-align: center">
                                                                                    {{ $loop->iteration }}</td>
                                                                                <td>{{ $detalle->estudiante->apellidos }}
                                                                                    {{ $detalle->estudiante->nombres }}
                                                                                </td>
                                                                                <td>{{ $detalle->estudiante->ci }}
                                                                                </td>
                                                                                <td style="text-align: center">
                                                                                    {{ $detalle->nota ?? 'No calificado' }}
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Cerrar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Inicio Modal para editar la calificaciones  -->
                                    <button type="button" class="btn btn-success" data-toggle="modal"
                                        data-target="#modalEditarCalificaciones{{ $calificacione->id }}">
                                        <i class="fas fa-eye"></i> Editar calificaciones
                                    </button>
                                    <!-- Modal para editar la calificaciones  -->
                                    <div class="modal fade" id="modalEditarCalificaciones{{ $calificacione->id }}"
                                        tabindex="-1" aria-labelledby="exampleModalLabel{{ $calificacione->id }}"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header"
                                                    style="background-color: #17b83f; color: white;">
                                                    <h5 class="modal-title"
                                                        id="exampleModalLabel{{ $calificacione->id }}">Editar
                                                        calificaciones
                                                    </h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form
                                                        action="{{ url('/admin/calificaciones/' . $calificacione->id) }}"
                                                        method="post">
                                                        @csrf
                                                        @method('PUT')
                                                        <input type="text" name="asignacion_id"
                                                            value="{{ $asignacion->id }}" hidden>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="">Periodo para
                                                                            calificación<b>(*)</b></label>
                                                                        <select name="periodo_id" class="form-control"
                                                                            id="" required>
                                                                            @foreach ($periodos as $periodo)
                                                                                <option value="{{ $periodo->id }}"
                                                                                    {{ $periodo->id == $calificacione->periodo_id ? 'selected' : '' }}>
                                                                                    {{ $periodo->nombre }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="tipo">Tipo de calificación
                                                                            <b>(*)</b></label>
                                                                        <select name="tipo" class="form-control"
                                                                            required>
                                                                            <option value="">-- Seleccione --
                                                                            </option>
                                                                            <option value="Examen"
                                                                                {{ old('tipo', $calificacione->tipo ?? '') == 'Examen' ? 'selected' : '' }}>
                                                                                Examen</option>
                                                                            <option value="Acumulado"
                                                                                {{ old('tipo', $calificacione->tipo ?? '') == 'Acumulado' ? 'selected' : '' }}>
                                                                                Acumulado</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="">Fecha de
                                                                            calificación<b>(*)</b></label>
                                                                        <input type="date"
                                                                            value="{{ $calificacione->fecha }}"
                                                                            class="form-control" name="fecha" required>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="">Descripción</label>
                                                                        <input type="text"
                                                                            value="{{ $calificacione->descripcion }}"
                                                                            class="form-control" name="descripcion"
                                                                            required>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <label for="">Estudiantes</label>
                                                                        <table
                                                                            class="table table-bordered table-striped table-hover table-sm">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th style="text-align: center">Nro
                                                                                    </th>
                                                                                    <th style="text-align: center">
                                                                                        Estudiante</th>
                                                                                    <th style="text-align: center">
                                                                                        Carnet de identidad</th>
                                                                                    <th style="text-align: center">
                                                                                        Calificación</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($calificacione->detalleCalificaciones as $detalle)
                                                                                    <tr>
                                                                                        <td style="text-align: center">
                                                                                            {{ $loop->iteration }}</td>
                                                                                        <td>{{ $detalle->estudiante->apellidos }}
                                                                                            {{ $detalle->estudiante->nombres }}
                                                                                        </td>
                                                                                        <td>{{ $detalle->estudiante->ci }}
                                                                                        </td>
                                                                                        <td style="text-align: center">
                                                                                            <center>
                                                                                                <input
                                                                                                    style="text-align: center; width:80px"
                                                                                                    type="number"
                                                                                                    class="form-control"
                                                                                                    name="nota[{{ $detalle->estudiante->id }}]"
                                                                                                    value="{{ $detalle->nota ?? '' }}"
                                                                                                    min="0"
                                                                                                    max="100"
                                                                                                    required>
                                                                                            </center>
                                                                                        </td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <button type="button" class="btn btn-secondary"
                                                                        data-dismiss="modal">Cancelar</button>
                                                                    <button type="submit"
                                                                        class="btn btn-success">Actualizar
                                                                        Calificaciones</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Fin Modal para editar la calificaciones  -->
                                    <form action="{{ url('admin/calificaciones/' . $calificacione->id) }}" method="post"
                                        id="miFormulario{{ $calificacione->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger"
                                            onclick="preguntar{{ $calificacione->id }}(event)">
                                            <i class="fas fa-trash"></i> Eliminar calificaciones
                                        </button>
                                    </form>
                                    <script>
                                        function preguntar{{ $calificacione->id }}(event) {
                                            event.preventDefault();

                                            Swal.fire({
                                                title: '¿Desea eliminar este registro?',
                                                text: 'Si lo elimina No podrá revertir esta acción',
                                                icon: 'question',
                                                showDenyButton: true,
                                                confirmButtonText: 'Eliminar',
                                                confirmButtonColor: '#a5161d',
                                                denyButtonColor: '#270a0a',
                                                denyButtonText: 'Cancelar',
                                            }).then((result) => {
                                                if (result.isConfirmed) {
                                                    // JavaScript puro para enviar el formulario
                                                    document.getElementById('miFormulario{{ $calificacione->id }}').submit();
                                                }
                                            });
                                        }
                                    </script>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
@stop

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

        #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')
    @if (session('mensaje'))
        <script>
            Swal.fire({
                title: {!! json_encode(session('titulo') ?? (session('icono') == 'success' ? '¡Éxito!' : '¡Error!')) !!},
                text: {!! json_encode(session('mensaje')) !!},
                icon: "{{ session('icono') }}",
                confirmButtonText: 'Aceptar',
                confirmButtonColor: "{{ session('icono') == 'success' ? '#28a745' : '#d33' }}"
            });
        </script>
    @endif

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: `{!! implode('<br>', $errors->all()) !!}`,
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                });
            @elseif (session('mensaje'))
                Swal.fire({
                    icon: '{{ strtolower(session('icono')) }}',
                    title: '{{ session('mensaje') }}',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                });
            @endif

            $('#example1').DataTable({
                "pageLength": 5,
                "language": {
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Calificaciones",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Calificaciones",
                    "infoFiltered": "(filtrado de _MAX_ total Calificaciones)",
                    "lengthMenu": "Mostrar _MENU_ Calificaciones",
                    "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++) {
                                widths.push(i === 0 ? 18 : '*');
                            }
                            doc.content[1].table.widths = widths;
                            doc.styles.tableHeader.fontSize = 7;
                            doc.defaultStyle.fontSize = 6;
                            doc.pageMargins = [5, 5, 5, 5];
                        }
                    },
                    {
                        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>
    @include('footer')
@stop