@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">

                    <h4 class="fw-bold mb-4">Editar Supervisión</h4>

                    <div class="card shadow-sm border-0 p-4">

                        <!-- INFO -->
                        <h6 class="text-primary fw-bold">
                            {{ $supervision->docente->nombre_completo }}
                        </h6>

                        <p class="text-muted">
                            {{ $supervision->curso->nombre }}
                        </p>

                        <form id="formUpdate">

                            <input type="hidden" value="{{ $supervision->id }}" id="id">

                            <div class="row">

                                <!-- PUNTAJE -->
                                <div class="col-md-4">
                                    <label>Puntaje</label>
                                    <input type="number"
                                        id="puntaje"
                                        name="puntaje"
                                        value="{{ $supervision->puntaje }}"
                                        class="form-control"
                                        readonly>
                                </div>

                                <!-- ESTADO -->
                                <div class="col-md-4">
                                    <label>Estado</label>
                                    <select id="estado" name="estado" class="form-control" readonly>
                                        <option value="APROBADO" {{ $supervision->estado == 'APROBADO' ? 'selected' : '' }}>APROBADO</option>
                                        <option value="OBSERVADO" {{ $supervision->estado == 'OBSERVADO' ? 'selected' : '' }}>OBSERVADO</option>
                                        <option value="CRITICO" {{ $supervision->estado == 'CRITICO' ? 'selected' : '' }}>CRITICO</option>
                                    </select>
                                </div>

                                <!-- OBSERVACIONES -->
                                <div class="col-md-12 mt-3">
                                    <label>Observaciones</label>
                                    <textarea name="observaciones" class="form-control">{{ $supervision->observaciones }}</textarea>
                                </div>

                                <!-- CHECKS -->
                                <div class="col-md-12 mt-4">

                                    <label class="me-3">
                                        <input type="checkbox" class="check-eval" name="tiene_silabo"
                                            {{ $supervision->tiene_silabo ? 'checked' : '' }}>
                                        📘 Sílabo
                                    </label>

                                    <label class="me-3">
                                        <input type="checkbox" class="check-eval" name="tiene_asistencia"
                                            {{ $supervision->tiene_asistencia ? 'checked' : '' }}>
                                        🧑‍🎓 Asistencia
                                    </label>

                                    <label class="me-3">
                                        <input type="checkbox" class="check-eval" name="tiene_archivo"
                                            {{ $supervision->tiene_archivo ? 'checked' : '' }}>
                                        📂 Archivos
                                    </label>

                                    <label class="me-3">
                                        <input type="checkbox" class="check-eval" name="tiene_notas"
                                            {{ $supervision->tiene_notas ? 'checked' : '' }}>
                                        📝 Notas
                                    </label>

                                </div>

                            </div>

                            <!-- BOTÓN -->
                            <button class="btn btn-primary mt-4 w-100">
                                Actualizar Evaluación
                            </button>

                        </form>

                    </div>

                </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 = 4; // 🔥 ahora son 4

        let puntaje = (checks / totalCriterios) * 100;

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

        let estado = 'CRITICO';

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

        // 🔥 REGLA IMPORTANTE
        let tieneNotas = document.querySelector('[name="tiene_notas"]').checked;

        if (!tieneNotas) {
            estado = 'CRITICO';
        }

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

    // 🔥 inicializar al cargar
    document.addEventListener('DOMContentLoaded', function() {

        calcularEvaluacion();

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

    });
</script>

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

    let id = $('#id').val();
    let formData = $(this).serialize();

    // 🔥 DEBUG 1: Ver datos enviados
    console.log("📦 DATA ENVIADA:");
    console.log(formData);

    Swal.fire({
        title: 'Actualizando...',
        text: 'Enviando datos al servidor',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
    });

    $.ajax({
        url: '/supervision/' + id,
        type: 'POST',
        data: formData + '&_method=PUT',

        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },

        success: function(res) {

            // 🔥 DEBUG 2: Respuesta OK
            console.log("✅ RESPUESTA EXITOSA:");
            console.log(res);

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

            setTimeout(() => {
                window.location.href = "{{ route('supervision.lista') }}";
            }, 1500);
        },

        error: function(xhr) {

            console.log("❌ ERROR COMPLETO:", xhr);

            let mensaje = "Error desconocido";

            try {
                let res = JSON.parse(xhr.responseText);

                console.log("📛 ERROR BACKEND:", res);

                mensaje = res.message + 
                        "\n\n📍 Línea: " + res.line;

            } catch (e) {
                console.warn("No se pudo parsear JSON");
            }

            Swal.fire({
                icon: 'error',
                title: 'Error real del sistema',
                text: mensaje
            });
        }
    });
});
</script>

@endsection