@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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css">

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

@endsection

@section("contenido")
    <div class="row">
        @if ($errors->any())
            <div class="alert alert-danger">
                <h4>El registro tiene los siguientes errores.</h4>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ session('success') }}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <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->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"}}">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Matricula # {{$matricula->id}}</h4>
                    <div>
                        <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>
                        <a target="_blank" href="{{route('admin::matricula.pdf', $matricula->codigo)}}" class="mx-2">
                            <button class="btn btn-light-danger btn-sm">Comprobante</button>
                        </a>
                        <a target="_blank"  href="{{route('admin::matricula.constancia', $matricula->codigo)}}" class="mx-2">
                            <button class="btn btn-light-primary btn-sm">Constancia</button>
                        </a>
                    </div>
                </div>
            </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>Satélite:</b> {{$matricula->satelite->satelite}}</td>
                        <td><b>Grupo:</b> {{$matricula->grupo->grupo}} <button class="btn btn-warning btn-icon btn-sm" id="btnCambiarGrupo"> <i class="fas fa-pen"></i></button></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>
                            <td><b>Grado:</b>
                                <select class="form-select form-select-sm" id="grado_matricula" name="grado_matricula" required>
                                    <option value="">-</option>
                                    @foreach($grados as $grado)
                                        <option value="{{$grado->id}}" {{$grado->id==$matricula->grado_id?"selected":""}}>{{$grado->grado}}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                    @endif
                </table>
            </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-9 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 modulo</button>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><b>Modulo</b></th>
                        <th><b>Grado</b></th>
                        <th><b>Asignatura</b></th>
                        <th><b>Créditos</b></th>
                        <th><b>Suficiencia</b></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($modulos_m as $modulo_m)
                        <tr>
                            <td title="matricula_modulo:{{$modulo_m->id}} modulo: {{$modulo_m->modulo->id}}">{{$modulo_m->modulo->codigo}}-{{$modulo_m->modulo->modulo}}</td>
                            <td>{{$modulo_m->modulo->asignatura->asignatura}}</td>
                            <td>{{$modulo_m->modulo->grado->grado}}</td>
                            <td>{{$modulo_m->modulo->creditos}}</td>
                            <td>
                                @if($modulo_m->suficiencia)
                                    <span class='badge badge-success'>Si</span>
                                @else
                                    <span class='badge badge-danger'>No</span>
                            @endif
                            <td>
                                <button type="button" class="btn btn-danger btn-sm borrarModulo" value="{{$modulo_m->id}}"><i class="fas fa-trash" title="Eliminar"></i></button>
                            </td>
                        </tr>
                    @endforeach
                    <tr>
                        <td colspan="2"></td>
                        <td><b>Total créditos:</b></td>
                        <td><b>{{$matricula->total_creditos}}</b></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>



        <div class="card card-stretch col-md-3 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" id="btnNuevoDocumento">Agregar documento</button>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><b>Descripción</b></th>
                        <th><b>Documento</b></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($media as $archivo)
                        <tr>
                            <td>
                                {{ ($archivo->getCustomProperty('descripcion'))??"Adjunto" }}
                            </td>
                            <td>
                                <a href="{{ route('admin::matricula.ver.media', ['uuid' => $archivo->uuid]) }}" target="_blank" title="{{$archivo->name}}">
                                    {{ \Illuminate\Support\Str::limit($archivo->name, 15, '...') }}
                                </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="fas fa-close"></i> Denegar</button>
                        </div>
                    @endif
                    @if($matricula->tipo_estado_id==3 ||  $matricula->tipo_estado_id==1)
                        <div class="text-center">
                            <button class="btn btn-success  mx-5 vistoBueno"> <i class="fas fa-thumbs-up"></i> Dar visto bueno</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="modalGrupo" 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 grupo </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="satelite_id" class="form-label">Satélite</label>
                        <select name="satelite_id" id="satelite_id" class="form-select form-select-sm">
                            @foreach($satelites as $satelite)
                                <option value="{{$satelite->id}}" {{$satelite->id==$matricula->satelite_id?"selected":""}}>{{$satelite->satelite}}</option>)
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="grupo_actual" class="form-label">Grupo actual</label>
                        <input type="text" class="form-control" id="grupo_actual" name="grupo_actual" value="{{$matricula->grupo->grupo}}" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="notas" class="form-label">Notas</label>
                        <input type="text" class="form-control" id="notas" name="notas" placeholder="Razón del cambio">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Grupos disponibles</label>
                        <table class="table table-hover" id="tblGrupos">
                            <thead>
                            <tr>
                                <th><b>Grupo</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="modalAgregarModulo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Agregar modulo a la matricula</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{route("admin::matricula.agregar.modulo",$matricula->id)}}" method="post" id="frmAgregarModulo">
                    @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">Grado</label>
                                    <select name="grado_id" id="grado_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($grados as $grado)
                                            <option value="{{$grado->id}}">{{$grado->grado}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label required" for="asignatura_id">Asignatura</label>
                                    <select name="asignatura_id" id="asignatura_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($asignaturas as $asignatura)
                                            <option value="{{$asignatura->id}}">{{$asignatura->asignatura}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 mt-5">
                                    <label class="form-label required" for="materia_id">Modulo</label>
                                    <select name="modulo_id" id="modulo_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 modulo</button>
                    </div>
                </form>

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

    <div class="modal fade" id="modalDocumento" 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 grupo </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <form action="{{route("admin::matricula.subirMedia",$matricula)}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <label for="descripcion" class="text-start"><b>Descripción</b></label>
                        <input type="text" class="form-control form-control-sm " id="descripcion" name="descripcion" placeholder="Descripción">
                        <hr>
                        <input type="file" id="archivo" name="archivo" class="dropify inputFile my-5" accept=".pdf, .png, .jpg, .jpeg" required>
                        <button class="btn btn-success btn-sm mt-4" type="submit">Subir archivo</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.dropify').dropify({
                height: "100px",
                //cambiar tammaño texto mensaje
                tpl: {
                    message: '<div class="dropify-message"><span class="file-icon" /> <p>Subir archivo</p></div>',
                },
            });
        });
    </script>
    <script>
        $( document ).ready(function() {
            $('.vistoBueno').click(function() {
                let grado_matricula=$("#grado_matricula").val();
                if(grado_matricula==""){
                    Swal.fire({title: 'Debe seleccionar un grado', icon: 'error', confirmButtonColor: '#b0051b',});
                    return;
                }
                // 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);
                        });
                    }
                });
            });

            $('#btnCambiarGrupo').click(function() {
                cargarGrupos();
                $("#modalGrupo").modal({backdrop: 'static', keyboard: false}).modal('show');
            });

            $('#satelite_id').on('change', function() {
                cargarGrupos();
            });
        });

        $(document).on("click", ".nuevoGrupo", function() {
            let grupo_id= $(this).data("value");
            let grupo= $(this).data("grupo");
            let disponible= $(this).data("disponible");
            let notas= $("#notas").val();
            Swal.fire({
                title: '¿Está seguro de hacer el cambio de grupo?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#01591a',
                cancelButtonColor: '#a1a1a1',
                cancelButtonText: 'Cancelar',
                confirmButtonText: 'Sí, cambiar a '+grupo,
            }).then((result) => {
                if (result.isConfirmed) {
                    let url="{{route("admin::matricula.cambiar.grupo", $matricula->id)}}";
                    let ajax=$.ajax({
                        url: url,
                        type: 'POST',
                        dataType:"json",
                        data:{"grupo_id":grupo_id,"notas":notas},
                        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);
                    });
                }
            });

        });

        function cargarGrupos(){
            $("#tblGrupos tbody").html("");
            let grupo_excepcion= "{{$matricula->grupo_id}}";
            let satelite_id= $("#satelite_id").val();

            let url="{{route("admin::grupos.porCicloSatelite", ["ciclo"=>":ciclo","satelite"=>":satelite"])}}".replace(":ciclo", "{{$matricula->grupo->ciclo_id}}").replace(":satelite", satelite_id);
            let ajax=$.ajax({
                url: url,
                dataType:"json",
                data:{"grupo_excepcion":grupo_excepcion},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            });
            ajax.done(function(response) {
                $.each(response, function(i, e) {
                    $("#tblGrupos tbody").append('<tr>' +
                        '<td>'+e.grupo+'</td>' +
                        '<td>'+e.cupo+'</td>' +
                        '<td>'+e.disponible+'</td>' +
                        '<td>' + (e.disponible > 0 ? '<button class="btn btn-sm btn-warning nuevoGrupo" data-value="'+e.id+'" data-disponible="'+e.disponible+'" data-grupo="'+e.grupo+'">Cambiar</button>' : '') + '</td>' +
                        '</tr>'

                    )
                });
            });
        }

        $(document).on("click", "#agregarMateria", function() {
            $("#modalAgregarModulo").modal({backdrop: 'static', keyboard: false}).modal('show');
        });
        $(document).on("change", "#grado_id, #asignatura_id", function() {
            let grado_id=$("#grado_id").val();
            let asignatura_id=$("#asignatura_id").val();

            if(grado_id=="" || asignatura_id==""){
                return;
            }

            let url="{{route("admin::modulos.grado.asignatura",["grado"=>":grado", "asignatura"=>":asignatura"])}}".replace(":grado", grado_id).replace(":asignatura", asignatura_id);
            $("#modulo_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) {
                    $("#modulo_id").append('<option value="' + e.id + '">' + e.codigo + ' - ' + e.modulo + '</option>');
                });
            });
        });

        $(document).on('submit', '#frmAgregarModulo', 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", ".borrarModulo", function() {
            let matricula_modulo_id=$(this).val();

            Swal.fire({
                title: '¿Está seguro de eliminar este modulo?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#860404',
                cancelButtonColor: '#a1a1a1',
                cancelButtonText: 'Cancelar',
                confirmButtonText: 'Sí, Eliminar',
            }).then((result) => {
                if (result.isConfirmed) {
                    let url="{{route("admin::matricula.borrar.modulo",":matriculaModulo")}}";
                    url = url.replace(":matriculaModulo", matricula_modulo_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("change", "#grado_matricula", function() {
            let grado_id=$(this).val();
            if  (grado_id==""){
                return;
            }
            let matricula_id="{{$matricula->id}}";
            let url="{{route("admin::matricula.setGrado",":matricula")}}";
            url = url.replace(":matricula", matricula_id);
            let ajax=$.ajax({
                url: url,
                type: 'POST',
                dataType:"json",
                data:{"grado_id":grado_id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            });
            ajax.done(function(response) {
                location.reload();
            });
        });

        $(document).on("click", "#btnNuevoDocumento", function() {
            $("#modalDocumento").modal({backdrop: 'static', keyboard: false}).modal('show');
        });



    </script>
@endsection