@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
            <li class="">&nbsp;&nbsp;/ Admin Aula</li>
            <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/docente') }}">Docentes</a></li>
        </ol>
    </div>
    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Lista de capacitadores</h3>
            <a href="javascript:void(0)" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalProfe" onclick="agregarNuevoProfesor()">
                <i class='bx bxs-pencil'></i> Nuevo Registro
            </a>
        </div>
    
        <div class="card-body">
            <!-- Tabla de Profesores -->
            <div class="table-responsive">
                <table id="tblUser" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Profesor</th>
                            <th>Apellidos</th>
                            <th>Editar</th>
                            <th>Eliminar</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($profesores as $key => $profesor)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $profesor->nombre }}</td>
                            <td>{{ $profesor->apellidos }}</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-xs" onclick="editarProfesor({{ $profesor->id }})">
                                    <span class='bx bx-pencil'></span>
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-xs" onclick="eliminarProfesor({{ $profesor->id }})">
                                    <span class='bx bx-trash'></span>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    
        <!-- Modal para Crear o Editar Profesor -->
        <div class="modal fade" id="myModalProfe" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear/Editar Profesor</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Formulario para crear o editar profesor -->
                        <div id="profesorForm" class="form-horizontal">
                            @csrf
                            <input type="hidden" id="profesor_id">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label" for="nombre">Nombre:</label>
                                        <input type="text" class="form-control" id="nombre" maxlength="255" placeholder="Ingrese Nombre del Profesor">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="apellidos">Apellidos:</label>
                                        <input type="text" class="form-control" id="apellidos" maxlength="255" placeholder="Ingrese Apellidos del Profesor">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="profesion">Profesión:</label>
                                        <input type="text" class="form-control" id="profesion" maxlength="255" placeholder="Ingrese Profesión del Profesor">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="fechainicio">Fecha de Inicio:</label>
                                        <input type="date" class="form-control" id="fechainicio" placeholder="Ingrese Fecha de Inicio">
                                    </div>
                                    <div class="form-group">
                                        <label class="" for="foto">Foto Profesor:</label>
                                        <input type="file" class="form-control" id="foto" accept="image/*" onchange="previewImage(event)">
                                        <img id="foto-preview" src="#" alt="Vista previa de la imagen" style="display: none; width: 100px; height: auto;">
                                    </div>
                                </div>
    
                                <div class="col-lg-6">
                                    <p><b>REDES SOCIALES DEL PROFESOR</b></p>
                                    <div class="form-group">
                                        <label class="control-label" for="link_fb">URL Facebook:</label>
                                        <input type="url" class="form-control" id="link_fb" maxlength="255" placeholder="URL Facebook">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="link_twi">URL Twitter:</label>
                                        <input type="url" class="form-control" id="link_twi" maxlength="255" placeholder="URL Twitter">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="link_ytb">URL Youtube:</label>
                                        <input type="url" class="form-control" id="link_ytb" maxlength="255" placeholder="URL Youtube">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="link_ig">URL Instagram:</label>
                                        <input type="url" class="form-control" id="link_ig" maxlength="255" placeholder="URL Instagram">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="area_id">Area del  Docente:</label>
                                        <select id="area_id" class="form-control" >
                                            <option value="">Selecciona un área</option>
                                            @foreach($areas as $area)
                                                <option value="{{ $area->id }}">{{ $area->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
    
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label" for="descripcion">Descripción Profesor:</label>
                                        <textarea id="descripcion" class="form-control" placeholder="Ingrese descripción del profesor"></textarea>
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="col-sm-offset-5 col-sm-12">
                                    <button type="button" class="btn btn-success" id="guardarProfesor" onclick="guardarProfesor()">Guardar</button>
                                </div>
                            </div>

                        </div>
                        <!-- Fin del formulario -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type='text/javascript'>
        function agregarNuevoProfesor() {
            document.getElementById('foto-preview').style.display = 'none'; // Ocultar vista previa
            $('#myModalProfe').modal('show');
        }

        function guardarProfesor() {
          

            var formData = new FormData();
            formData.append('nombre', $('#nombre').val());
            formData.append('apellidos', $('#apellidos').val());
            formData.append('profesion', $('#profesion').val());
            formData.append('fechainicio', $('#fechainicio').val());
            formData.append('link_fb', $('#link_fb').val());
            formData.append('link_twi', $('#link_twi').val());
            formData.append('link_ytb', $('#link_ytb').val());
            formData.append('link_ig', $('#link_ig').val());
            formData.append('descripcion', $('#descripcion').val());
            formData.append('foto', $('#foto')[0].files[0]);
            formData.append('area_id', $('#area_id').val());
            formData.append('_token', '{{ csrf_token() }}');

            var profesorId = $('#profesor_id').val();
            var url = profesorId ? '{{ url("/admin/docente/editar") }}/' + profesorId : '{{ url("/admin/docente/guardar") }}';

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('#myModalProfe').modal('hide');
                    location.reload(); 
                    alert('Profesor guardado exitosamente');
                },
                error: function (response) {
                    alert('Error al guardar el profesor');
                }
            });
        }

        function editarProfesor(id) {
          
            $.ajax({
                url: '{{ url("/admin/docente/editar") }}/' + id,
                type: 'GET',
                success: function (response) {
                    $('#profesor_id').val(response.id);
                    $('#nombre').val(response.nombre);
                    $('#apellidos').val(response.apellidos);
                    $('#profesion').val(response.profesion);
                    $('#fechainicio').val(response.fechainicio);
                    $('#link_fb').val(response.link_fb);
                    $('#link_twi').val(response.link_twi);
                    $('#link_ytb').val(response.link_ytb);
                    $('#link_ig').val(response.link_ig);
                    $('#descripcion').val(response.descripcion);
                    $('#area_id').val(response.area_id);
                    // Mostrar la imagen existente en la vista previa
                    if (response.foto) {
                        var fotoPreview = document.getElementById('foto-preview');
                        fotoPreview.src = '{{ asset("img/profesores/") }}/' + response.foto;
                        fotoPreview.style.display = 'block';
                    }

                    $('#myModalProfe').modal('show');
                },
                error: function (response) {
                    alert('Error al obtener los datos del profesor');
                }
            });
        }

        function eliminarProfesor(id) {
            if (confirm('¿Estás seguro de eliminar este profesor?')) {
                $.ajax({
                    url: '{{ url("/admin/docente/eliminar") }}/' + id,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'POST'
                    },
                    success: function (response) {
                        location.reload(); // Recargar la página para actualizar la lista
                        alert('Profesor eliminado exitosamente');
                    },
                    error: function (response) {
                        alert('Error al eliminar el profesor');
                    }
                });
            }
        }

        function previewImage(event) {
            var reader = new FileReader();
            reader.onload = function(){
                var output = document.getElementById('foto-preview');
                output.src = reader.result;
                output.style.display = 'block'; // Muestra la imagen
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</main>
@endsection