@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Matricula $matricula->id";
        $modulo = "Matricula $matricula->id";
        $vista="Revisar";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
    <link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />

    <style>
        #tabla thead th {
            font-weight: bold;
        }
    </style>

@endsection

@section("contenido")
    <div class="row">
        <div class="card card-stretch col-md-12 mb-5">
            @if($matricula->tipo_estado_id==3)
                <h1 class="text-center text-danger">DENEGADA por {{$matricula->user_deniega->nombre_completo}}</h1>
                <h3 class="text-center text-danger">Justificación: {{$matricula->justificacion}} </h3>
            @endif
            <div class="card-header {{$matricula->tipo_estado_id==2?"bg-success":" bg-danger"}}">
                <h4 class="card-title">Matricula # {{$matricula->id}}</h4>
                <a href="{{route("admin::estudiante.matriculas",$matricula->estudiante->id)}}"> <button class="btn btn-sm btn-dark"> <i class="fas fa-backspace pe-2"></i> Volver</button></a>
            </div>
            <div class="card-body">
                <table class="table table-striped">
                    <tr>
                        <td><b>Fecha:</b> {{date("d-m-Y H:i",strtotime($matricula->fecha))}}</td>
                        <td><b>Sección:</b> {{$matricula->seccion->seccion}} <button class="btn btn-warning btn-icon btn-sm" id="btnCambiarSeccion"> <i class="fas fa-pen"></i></button></td>
                        <td><b>Nivel:</b> {{$matricula->nivel->nivel}} </td>
                        <td><b>Estudiante:</b> {{$matricula->estudiante->nombre_completo}}</td>
                    </tr>
                    @if($matricula->tipo_estado_id==2)
                        <tr>
                            <td><b>Funcionario VB:</b> {{$matricula->user->nombre_completo}}</td>
                            <td><b>Fecha VB:</b> {{date("d-m-Y H:i",strtotime($matricula->fecha_vb))}}</td>
                        </tr>
                    @endif
                </table>
                <hr>
                <div class="row">
                    <div class="col-md-2">
                        <label class="form-label required" for="nivel_id">Condición</label>
                        <select name="tipo_condicion_matricula_id" id="tipo_condicion_matricula_id" class="form-select form-select-sm mt-1 autoguarda" required>
                            @foreach($tipos_condiciones as $tipo_condicion)
                                <option value="{{$tipo_condicion->id}}"   {{ ($tipo_condicion->id==$matricula->tipo_condicion_matricula_id ? "selected":"") }}>
                                    {{$tipo_condicion->tipo_condicion_matricula}}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label required" for="permiso_libre_horario">Permiso salida libre por horario</label>
                        <select name="permiso_libre_horario" id="permiso_libre_horario" class="form-select form-select-sm mt-1 permiso"  required>
                            <option value="1" {{$matricula->permiso_libre_horario==1?"selected":""}} >SI</option>>
                            <option value="0" {{$matricula->permiso_libre_horario==0?"selected":""}} >NO</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label required" for="permiso_almuerzo">Permiso salida almuerzo</label>
                        <select name="permiso_almuerzo" id="permiso_almuerzo" class="form-select form-select-sm mt-1 permiso"  required>
                            <option value="1" {{$matricula->permiso_almuerzo==1?"selected":""}} >SI</option>>
                            <option value="0" {{$matricula->permiso_almuerzo==0?"selected":""}} >NO</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label required" for="permiso_finalizar_horario">Permiso salida finalizar horario</label>
                        <select name="permiso_finalizar_horario" id="permiso_finalizar_horario" class="form-select form-select-sm mt-1 permiso"  required>
                            <option value="1" {{$matricula->permiso_finalizar_horario==1?"selected":""}} >SI</option>>
                            <option value="0" {{$matricula->permiso_finalizar_horario==0?"selected":""}} >NO</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label required" for="tiene_seguro">Tiene póliza</label>
                        <select name="tiene_seguro" id="tiene_seguro" class="form-select form-select-sm mt-1 permiso"  required>
                            <option value="1" {{$matricula->tiene_seguro==1?"selected":""}} >SI</option>>
                            <option value="0" {{$matricula->tiene_seguro==0?"selected":""}} >NO</option>
                        </select>
                    </div>
                </div>
                <hr>
                <div class="row">
                    @foreach($tipos_adecuaciones as $tipo_adecuacion)
                        <div class="col-4">
                            <label class="form-check-image active">
                                <div class="form-check form-check-custom form-check-solid form-check-warning">
                                    <input class="form-check-input ckAdecuacion" type="checkbox" name="adecuaciones[]" value="{{$tipo_adecuacion->id}}"
                                           @if($matricula->adecuaciones->contains('tipo_adecuacion_id', $tipo_adecuacion->id)) checked @endif
                                    />
                                    <div>
                                        <b>  {{$tipo_adecuacion->tipo_adecuacion}}</b>
                                    </div>
                                </div>
                                <div class="form-check">
                                    {{$tipo_adecuacion->descripcion}}
                                </div>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="card card-stretch col-md-12">
            <div class="card-header">
                <h4 class="card-title"><i class="fas fa-user pe-2 text-success"></i>Estudiante</h4>
            </div>
            <div class="card-body">
                <table class="table table-striped">
                    <tr>
                        <td><b>Nombre:</b> {{$matricula->estudiante->nombre}}</td>
                        <td><b>Primer Apellido:</b> {{$matricula->estudiante->primer_apellido}}</td>
                        <td><b>Segundo Apellido:</b> {{$matricula->estudiante->segundo_apellido}}</td>
                    </tr>
                    <tr>
                        <td><b>{{$matricula->estudiante->tipo_identificacion->tipo_identificacion}}:</b> {{$matricula->estudiante->identificacion}}</td>
                        <td><b>Nacionalidad:</b> {{$matricula->estudiante->tipo_nacionalidad->tipo_nacionalidad}}</td>
                        <td><b>Sexo:</b> {{$matricula->estudiante->tipo_sexo->tipo_sexo}}</td>
                    </tr>
                    <tr>
                        <td><b>Fecha de nacimiento:</b> {{date("d-m-Y",strtotime($matricula->estudiante->nacimiento))}}</td>
                        <td><b>Celular:</b> {{$matricula->estudiante->celular}}</td>
                        <td><b>Teléfono:</b> {{$matricula->estudiante->telefono}}</td>
                    </tr>
                    <tr>
                        <td><b>Ruta:</b> {{$matricula->estudiante->ruta->ruta}}</td>
                        <td><b>Primer curso:</b> {{$matricula->estudiante->primer_curso_lectivo}}</td>
                    </tr>
                    <tr>
                        <td colspan="3"><b>Correo:</b> {{$matricula->estudiante->correo}}</td>
                    </tr>

                    <tr>
                        <td colspan="3"><b>Dirección:</b> {{$matricula->estudiante->direccion}}</td>
                    </tr>


                </table>
            </div>
        </div>

        <div class="card card-stretch col-md-6 mt-2">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fas fa-books pe-2 text-success"></i>
                    Materias</h4>

                <div class="card-toolbar">
                    <button type="button" class="btn btn-sm btn-success" id="agregarMateria">Agregar materia</button>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><b>Materia</b></th>
                        <th><b>Nivel</b></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($matricula->materias as $materia)
                        <tr>
                            <td>{{$materia->materia->materia}}</td>
                            <td>{{$materia->nivel->nivel}}</td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm borrarMateria" value="{{$materia->id}}"><i class="fas fa-trash" title="Eliminar"></i></button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>



        <div class="card card-stretch col-md-6 mt-2">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fas fa-folder pe-2 text-success"></i>
                    Documentos</h4>

                <div class="card-toolbar">
                    <button class="btn btn-sm btn-success">Agregar documento</button>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><b>Requisito</b></th>
                        <th><b>Documento</b></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($media as $archivo)
                        <tr>
                            <td>{{$archivo->requisito}}</td>
                            <td>
                                <a href="{{ route('admin::matricula.ver.media', ['uuid' => $archivo->media->uuid]) }}" target="_blank">
                                    {{ $archivo->media->uuid }}
                                </a>
                            </td>
                            <td>
                                {{--                                <button type="button" class="btn btn-danger btn-sm " value="{{$materia->id}}"><i class="fas fa-trash" title="Eliminar"></i></button>--}}
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card card-stretch col-md-12 mt-5">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    @if($matricula->tipo_estado_id!=3)
                        <div class="text-start">
                            <button class="btn btn-danger btn-sm mx-5 denegar"> <i class="fa-duotone fa-close"></i> Denegar</button>
                        </div>
                    @endif
                    @if($matricula->vb==0 ||  $matricula->tipo_estado_id==3)
                        <div class="text-center">
                            <button class="btn btn-success  mx-5 vistoBueno"> <i class="fa-duotone fa-thumbs-up"></i> Dar visto bueno</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="modalSeccion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Cambiar de sección </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="seccionActual" class="form-label">Sección actual</label>
                        <input type="text" class="form-control" id="seccionActual" name="seccionActual" value="{{$matricula->seccion->seccion}}" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="fechaseccionActualAgendar" class="form-label">Secciones disponibles</label>
                        <table class="table table-hover" id="tblSecciones">
                            <thead>
                            <tr>
                                <th><b>Sección</b></th>
                                <th><b>Cupo</b></th>
                                <th><b>Disponible</b></th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modalAgregarMateria" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Agregar materia</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{route("admin::matricula.agregar.materia",$matricula->id)}}" method="post" id="frmAgragarMateria">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <div class="row">
                                <div class="col-md-12">
                                    <label class="form-label required" for="nivel_id">Nivel</label>
                                    <select name="nivel_id" id="nivel_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required>
                                        <option value="">-</option>
                                        @foreach($niveles as $nivel)
                                            <option value="{{$nivel->id}}">{{$nivel->nivel}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label required" for="materia_id">Materia</label>
                                    <select name="materia_id" id="materia_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" required>
                                        <option value="">-</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-sm btn-success"> Agregar materia</button>
                    </div>
                </form>

            </div>
        </div>
        @endsection

        @section("scripts")
            <script>
                const Toast = Swal.mixin({toast: true, position: "bottom-end",
                    showConfirmButton: false, timer: 3000, timerProgressBar: true, didOpen: (toast) => {
                        toast.onmouseenter = Swal.stopTimer;
                        toast.onmouseleave = Swal.resumeTimer;
                    }
                });

                $( document ).ready(function() {

                    $('.vistoBueno').click(function() {
                        // Mostrar un cuadro de diálogo modal personalizado
                        Swal.fire({
                            title: '¿Está seguro de dar el visto bueno?',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#01591a',
                            cancelButtonColor: '#a1a1a1',
                            cancelButtonText: 'Cancelar',
                            confirmButtonText: 'Sí, dar visto bueno'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                let url="{{route("admin::matricula.vb", $matricula->id)}}";
                                let ajax=$.ajax({
                                    url: url,
                                    type: 'POST',
                                    dataType:"json",
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                });
                                ajax.done(function(response) {
                                    location.reload();
                                });
                                ajax.fail(function(error) {
                                    console.error('Error en la solicitud AJAX', error);
                                });
                            }
                        });
                    });

                    $('.denegar').click(function() {
                        // Mostrar un cuadro de diálogo modal personalizado
                        Swal.fire({
                            title: '¿Está seguro de denegar la matricula?',
                            icon: 'error',
                            showCancelButton: true,
                            confirmButtonColor: '#b0051b',
                            cancelButtonColor: '#a1a1a1',
                            cancelButtonText: 'Cancelar',
                            confirmButtonText: 'Sí, denegar',
                            input: 'text',
                            inputLabel: 'Justificación',
                            inputPlaceholder: 'Escribe una justificación...',
                            allowOutsideClick: () => !Swal.isLoading()
                        }).then((result) => {
                            if (result.isConfirmed) {
                                let justificacion = result.value;
                                let url="{{route("admin::matricula.denegar", $matricula->id)}}";
                                let ajax=$.ajax({
                                    url: url,
                                    type: 'POST',
                                    dataType:"json",
                                    data:{"justificacion":justificacion},
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                });
                                ajax.done(function(response) {
                                    location.reload();
                                });
                                ajax.fail(function(error) {
                                    console.error('Error en la solicitud AJAX', error);
                                });
                            }
                        });
                    });

                    $('#btnCambiarSeccion').click(function() {
                        $("#tblSecciones tbody").html("");
                        let seccion_excepcion= "{{$matricula->seccion_id}}";
                        let url="{{route("admin::secciones.nivel", $matricula->nivel_id)}}";
                        let ajax=$.ajax({
                            url: url,
                            dataType:"json",
                            data:{"seccion_excepcion":seccion_excepcion},
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                        });
                        ajax.done(function(response) {
                            $.each(response, function(i, e) {
                                $("#tblSecciones tbody").append('<tr>' +
                                    '<td>'+e.seccion+'</td>' +
                                    '<td>'+e.cupo+'</td>' +
                                    '<td>'+e.disponible+'</td>' +
                                    '<td>' + (e.disponible > 0 ? '<button class="btn btn-sm btn-warning nuevaSeccion" data-value="'+e.id+'" data-disponible="'+e.disponible+'" data-seccion="'+e.seccion+'">Cambiar</button>' : '') + '</td>' +
                                    '</tr>'

                                )
                            });
                        });
                        $("#modalSeccion").modal({backdrop: 'static', keyboard: false}).modal('show');
                    });
                });

                $(document).on("click", ".nuevaSeccion", function() {
                    let seccion_id= $(this).data("value");
                    let seccion= $(this).data("seccion");
                    let disponible= $(this).data("disponible");
                    Swal.fire({
                        title: '¿Está seguro de hacer el cambio de sección?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#01591a',
                        cancelButtonColor: '#a1a1a1',
                        cancelButtonText: 'Cancelar',
                        confirmButtonText: 'Sí, cambiar a '+seccion,
                    }).then((result) => {
                        if (result.isConfirmed) {
                            let url="{{route("admin::matricula.cambiar.seccion", $matricula->id)}}";
                            let ajax=$.ajax({
                                url: url,
                                type: 'POST',
                                dataType:"json",
                                data:{"seccion_id":seccion_id},
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                            });
                            ajax.done(function(response) {
                                location.reload();
                            });
                            ajax.fail(function(error) {
                                console.error('Error en la solicitud AJAX', error);
                            });
                        }
                    });

                });

                $(document).on("click", "#agregarMateria", function() {
                    $("#modalAgregarMateria").modal({backdrop: 'static', keyboard: false}).modal('show');
                });
                $(document).on("change", "#nivel_id", function() {
                    let nivel_id=$(this).val();
                    let url="{{route("admin::materias.nivel",":nivel")}}";
                    url = url.replace(":nivel", nivel_id);
                    $("#materia_id").empty();


                    let ajax=$.ajax({
                        url: url,
                        dataType:"json",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                    });
                    ajax.done(function(response) {
                        $.each(response, function(i, e) {
                            $("#materia_id").append('<option value="' + e.materia_id + '">' + e.materia.materia + '</option>');
                        });
                    });
                });

                $(document).on('submit', '#frmAgragarMateria', function(e) {
                    e.preventDefault()

                    let ajax=$.ajax({
                        type: "POST",
                        url: this.action,
                        dataType: "json",
                        method: "post",
                        data: $(this).serialize(),
                    })
                    ajax.done(function(response) {
                        location.reload();
                    });
                });

                $(document).on("click", ".borrarMateria", function() {
                    let matricula_materia_id=$(this).val();

                    Swal.fire({
                        title: '¿Está seguro de eliminar esta materia?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#860404',
                        cancelButtonColor: '#a1a1a1',
                        cancelButtonText: 'Cancelar',
                        confirmButtonText: 'Sí, Eliminar',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            let url="{{route("admin::matricula.borrar.materia",":matriculaMateria")}}";
                            url = url.replace(":matriculaMateria", matricula_materia_id);
                            let ajax=$.ajax({
                                url: url,
                                dataType:"json",
                                method:"post",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                            });
                            ajax.done(function(response) {
                                location.reload();
                            });
                        }
                    })
                });

                $(document).on("click", ".ckAdecuacion", function () {
                    // Obtenemos datos del checkbox
                    const checkbox = $(this);
                    const adecuacionId = checkbox.val();
                    const matriculaId ={{$matricula->id}};
                    const checked = checkbox.is(":checked");

                    // Mensaje según la acción
                    const action = checked ? "agregar" : "quitar";
                    const confirmText = `¿Estás seguro de que deseas ${action} esta adecuación?`;

                    // Mostrar Swal para confirmación
                    Swal.fire({
                        title: "Confirmar acción",
                        text: confirmText,
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Sí, confirmar",
                        cancelButtonText: "Cancelar",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Llamada AJAX
                            $.ajax({
                                url: "{{route("admin::matricula.actualizarAdecuaciones")}}", // Define la ruta en tu servidor
                                method: "POST", // Usa POST para agregar o quitar
                                data: {
                                    adecuacion_id: adecuacionId,
                                    matricula_id: matriculaId,
                                    action: action, // Pasar la acción al backend
                                },
                                headers: {
                                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), // Asegúrate de tener un token CSRF en tu HTML
                                },
                                success: function (response) {
                                    Swal.fire("¡Éxito!", response.message, "success");
                                },
                                error: function (xhr) {
                                    Swal.fire("Error", "No se pudo completar la acción", "error");
                                    // Revertir el checkbox en caso de error
                                    checkbox.prop("checked", !checked);
                                },
                            });
                        } else {
                            // Revertir el checkbox si cancela
                            checkbox.prop("checked", !checked);
                        }
                    });
                });

                $(document).on("change", "#tipo_condicion_matricula_id", function () {
                    //guardar ajax para actualizar
                    let tipo_condicion_matricula_id = $(this).val();
                    let matricula_id = {{$matricula->id}};
                    let url = "{{route("admin::matricula.actualizarCondicion")}}";
                    let ajax = $.ajax({
                        url: url,
                        type: 'POST',
                        dataType: "json",
                        data: {"tipo_condicion_matricula_id": tipo_condicion_matricula_id, "matricula_id": matricula_id},
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                    });
                    ajax.done(function (response) {
                        Toast.fire({icon: "success", title: response.message});
                    });

                })

                $(document).on("change", ".permiso", function () {
                    let campo = $(this).attr("id");
                    let valor = $(this).val();
                    let matricula_id = {{$matricula->id}};
                    let url = "{{route("admin::matricula.actualizarPermisos")}}";
                    let ajax = $.ajax({
                        url: url,
                        type: 'POST',
                        dataType: "json",
                        data: {"campo": campo, "valor": valor, "matricula_id": matricula_id},
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                    });
                    ajax.done(function (response) {
                        Toast.fire({icon: "success", title: response.message});
                    });

                });



            </script>
@endsection