@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@section('css')

<link href="{{URL::asset('assets/plugins/huebee/huebee.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::asset('assets/plugins/datepicker/datepicker.min.css')}}" rel="stylesheet" type="text/css" />
@endsection
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Supervición de Docentes @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- Botón para agregar nueva matrícula -->


                <div class="container">

                    <!-- HEADER -->
                    <div class="mb-4">
                        <h4 class="fw-bold">{{ $curso->nombre }}</h4>
                        <p class="text-muted">{{ $horario->docente->nombre_completo }}</p>
                    </div>

                    <!-- FORMULARIO -->
                    <form id="formSupervision">
                        @csrf

                        <input type="hidden" name="horario_id" value="{{ $horario->id }}">

                        <!-- 🔥 CHECKLIST SUPERVISIÓN -->
                        <!-- 🔥 CHECKLIST SUPERVISIÓN -->
                        <div class="row mb-4">

                            <!-- SILABO -->
                            <div class="col-md-3">
                                <div class="card border-0 shadow-sm text-center p-3 h-100">
                                    <h6>Sílabo</h6>

                                    <div class="mb-2">
                                        @if($curso->tiene_silabo)
                                        <span class="badge bg-success">Cumple</span>
                                        @else
                                        <span class="badge bg-danger">No cumple</span>
                                        @endif
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input check-eval" type="checkbox"
                                            name="tiene_silabo" value="1"
                                            {{ $curso->tiene_silabo ? 'checked' : '' }}>
                                        <label class="form-check-label">Validar</label>
                                    </div>
                                </div>
                            </div>

                            <!-- SESIONES -->
                            <div class="col-md-3">
                                <div class="card border-0 shadow-sm text-center p-3 h-100">
                                    <h6>Sesiones</h6>
                                    <h4>{{ $curso->total_sesiones }}</h4>

                                    <div class="form-check">
                                        <input class="form-check-input check-eval" type="checkbox"
                                            name="tiene_sesiones" value="1"
                                            {{ $curso->total_sesiones > 0 ? 'checked' : '' }}>
                                        <label class="form-check-label">Validar</label>
                                    </div>
                                </div>
                            </div>

                            <!-- ASISTENCIA -->
                            <div class="col-md-3">
                                <div class="card border-0 shadow-sm text-center p-3 h-100">
                                    <h6>Asistencia</h6>
                                    <h4>{{ $curso->total_asistencias }}</h4>

                                    <div class="form-check">
                                        <input class="form-check-input check-eval" type="checkbox"
                                            name="tiene_asistencia" value="1"
                                            {{ $curso->total_asistencias > 0 ? 'checked' : '' }}>
                                        <label class="form-check-label">Validar</label>
                                    </div>
                                </div>
                            </div>

                            <!-- ARCHIVOS -->
                            <div class="col-md-3">
                                <div class="card border-0 shadow-sm text-center p-3 h-100">
                                    <h6>Archivos</h6>

                                    <div class="mb-2">
                                        @if($curso->tiene_archivos)
                                        <span class="badge bg-success">Cumple</span>
                                        @else
                                        <span class="badge bg-danger">No cumple</span>
                                        @endif
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input check-eval" type="checkbox"
                                            name="tiene_archivo" value="1"
                                            {{ $curso->tiene_archivos ? 'checked' : '' }}>
                                        <label class="form-check-label">Validar</label>
                                    </div>
                                </div>
                            </div>

                            <!-- 🔥 NUEVO: NOTAS -->
                            <div class="col-md-3">
                                <div class="card border-0 shadow-sm text-center p-3 h-100">
                                    <h6>Notas</h6>

                                    <div class="mb-2">
                                        @if($curso->tiene_notas)
                                        <span class="badge bg-success">Subidas</span>
                                        @else
                                        <span class="badge bg-danger">Pendiente</span>
                                        @endif
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input check-eval"
                                            type="checkbox"
                                            name="tiene_notas"
                                            value="1"
                                            {{ $curso->tiene_notas ? 'checked' : '' }}>
                                        <label class="form-check-label">Validar</label>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- 🔥 RESULTADO -->
                        <div class="row">

                            <div class="col-md-4">
                                <label>Puntaje</label>
                                <input type="number" name="puntaje" id="puntaje"
                                    class="form-control" readonly>
                            </div>

                            <div class="col-md-4">
                                <label>Estado</label>
                                <input type="text" id="estado_auto" class="form-control" readonly>
                                <input type="hidden" name="estado" id="estado">
                            </div>

                            <div class="col-md-12 mt-3">
                                <label>Observaciones</label>
                                <textarea name="observaciones" class="form-control"></textarea>
                            </div>

                        </div>

                        <button class="btn btn-primary mt-3 w-100 fw-bold">
                            Guardar Evaluación
                        </button>

                    </form>

                </div>




            </div>

            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>
<!-- Modal de edición -->



<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    function calcularEvaluacion() {

        let checks = document.querySelectorAll('.check-eval:checked').length;
        let totalCriterios = 5;

        let puntaje = (checks / totalCriterios) * 100;

        document.getElementById('puntaje').value = puntaje;

        let estado = 'CRITICO';

        if (puntaje >= 80) estado = 'APROBADO';
        else if (puntaje >= 50) estado = 'OBSERVADO';

        // 🔥 regla inteligente
        if (!document.querySelector('[name="tiene_notas"]').checked) {
            estado = 'CRITICO';
        }

        document.getElementById('estado_auto').value = estado;
        document.getElementById('estado').value = estado;
    }

    calcularEvaluacion();

    document.querySelectorAll('.check-eval').forEach(el => {
        el.addEventListener('change', calcularEvaluacion);
    });
</script>

<script>
    $('#formSupervision').submit(function(e) {
        e.preventDefault();

        let formData = new FormData(this);

        Swal.fire({
            title: 'Guardando...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "{{ route('supervision.store') }}",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,

            success: function(res) {

                Swal.fire({
                    icon: 'success',
                    title: 'Correcto',
                    text: res.message,
                    timer: 1500,
                    showConfirmButton: false
                });

                // 🔥 OPCIONAL: volver al listado
                setTimeout(() => {
                    window.location.href = "{{ route('supervision.index') }}";
                }, 1500);

            },

            error: function() {
                Swal.fire('Error', 'No se pudo guardar', 'error');
            }
        });

    });
</script>

@endsection