@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/clase-independiente') }}">Clases Independientes</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 Clases Independientes</h3>
            <div class="btn-group">
                <button type="button" class="btn btn-warning" onclick="openModal()">Crear Clase</button>
            </div>
        </div>

        <div class="table-responsive">
            <div class="card-body">
                <table id="tblUser" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Clase</th>
                            <th>Materia</th>
                            <th>Profesor</th>
                            <th>Fecha</th>
                            <th>Hora</th>
                            <th>Editar</th>
                            <th>Eliminar</th>
                        </tr>
                    </thead>
                    <tbody id="claseListado">
                        @foreach($clases as $clase)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $clase->nombre ??''}}</td>
                            <td>{{ $clase->materia->nombre ??''}}</td>
                            <td>{{ $clase->profesor->nombre ??''}}</td>
                            <td>{{ $clase->fecha_inicio ??''}}</td>
                            <td>{{ $clase->hora_inicio ??''}}</td>
                            <td><button type='button' class='btn btn-primary btn-xs' onclick="openModal({{ $clase->id }})"><span class='bx bx-pencil'></span></button></td>
                            <td><button type='button' class='btn btn-danger btn-xs' onclick="deleteClase({{ $clase->id }})"><span class='bx bx-trash'></span></button></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal para crear/editar clase -->
    <div class="modal fade" id="myModalClase" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Crear/Editar Clase Independiente</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="formClase" class="form-horizontal" enctype='multipart/form-data'>
                        @csrf
                        <input type="hidden" name="id" id="clase_id">

                        <div class="form-group">
                            <label class="control-label">Materia:</label>
                            <select name="materia_id" id="materia_id" class="form-control" required>
                                @foreach($materias as $materia)
                                <option value="{{ $materia->id }}">{{ $materia->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Profesor:</label>
                            <select name="profesor_id" id="profesor_id" class="form-control" required>
                                @foreach($profesores as $profesor)
                                <option value="{{ $profesor->id }}">{{ $profesor->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Nombre Clase:</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese Nombre Clase" required>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Fecha Inicio:</label>
                            <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio" required>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Hora Inicio:</label>
                            <input type="time" class="form-control" id="hora_inicio" name="hora_inicio">
                        </div>

                        <div class="form-group">
                            <label class="control-label">Link Zoom Clase:</label>
                            <input type="text" class="form-control" id="link_zoom" name="link_zoom">
                        </div>

                        <div class="form-group">
                            <label class="control-label">Video Intro:</label>
                            <textarea id="video_intro" name="video_intro" rows="3" class="form-control" placeholder="Ingrese link del video intro"></textarea>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Descripción de la Clase:</label>
                            <textarea id="descripcion" name="descripcion" rows="5" class="form-control" placeholder="Ingrese descripción de la clase" required></textarea>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Archivo Adjunto:</label>
                            <input type="file" class="form-control" id="archivo_adjunto" name="archivo_adjunto" onchange="updateFileName()">
                            <small id="file-name-preview" style="display:block; margin-top:5px;"></small>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Estado:</label>
                            <select name="estado" id="estado" class="form-control">
                                <option value="activo">Activo</option>
                                <option value="inactivo">Inactivo</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <button type="button" class="btn btn-success" id="btnGuardar" onclick="submitForm()">Guardar</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                        </div>
                    </form>

                    <script>
                        function updateFileName() {
                            var input = document.getElementById('archivo_adjunto');
                            var fileName = input.files.length > 0 ? input.files[0].name : '';
                            document.getElementById('file-name-preview').textContent = fileName;
                        }
                        function submitForm() {
                            var formData = new FormData($('#formClase')[0]);

                            $.ajax({
                                url: '{{ route("clase-independiente.store") }}',
                                type: 'POST',
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function(response) {
                                    $('#myModalClase').modal('hide');
                                    alert('Clase guardada correctamente.');
                                    location.reload();
                                },
                                error: function(xhr) {
                                    alert('Error al guardar la clase: ' + xhr.responseText);
                                }
                            });
                        }

                        function openModal(id = null) {
                            $('#myModalClase').modal('show');
                            if (id) {
                                // Editar
                                $.get('{{ url("/admin/clase-independiente") }}/' + id, function(data) {
                                    $('#clase_id').val(data.id);
                                    $('#materia_id').val(data.materia_id);
                                    $('#profesor_id').val(data.profesor_id);
                                    $('#nombre').val(data.nombre);
                                    $('#fecha_inicio').val(data.fecha_inicio);
                                    $('#hora_inicio').val(data.hora_inicio);
                                    $('#link_zoom').val(data.link_zoom);
                                    $('#video_intro').val(data.video_intro);
                                    $('#descripcion').val(data.descripcion);
                                    $('#estado').val(data.estado);
                                    if (data.archivo_adjunto) {
                                        $('#file-name-preview').html(`<a href="{{ asset('archivos/clases/') }}/${data.archivo_adjunto}" target="_blank">${data.archivo_adjunto}</a>`);
                                    } else {
                                        $('#file-name-preview').text(''); // Limpiar el nombre del archivo
                                    }
                                    $('#btnGuardar').text('Actualizar');
                                });
                            } else {
                                // Crear
                                $('#formClase')[0].reset();
                                $('#clase_id').val('');
                                $('#btnGuardar').text('Guardar');
                            }
                        }

                        function deleteClase(id) {
                            if (confirm('¿Está seguro de que desea eliminar esta clase?')) {
                                $.ajax({
                                    url: '{{ url("/admin/clase-independiente") }}/' + id,
                                    type: 'DELETE',
                                    data: {
                                        '_token': '{{ csrf_token() }}'
                                    },
                                    success: function(result) {
                                        alert('Clase eliminada correctamente.');
                                        location.reload();
                                    },
                                    error: function(xhr) {
                                        alert('Error al eliminar la clase: ' + xhr.responseText);
                                    }
                                });
                            }
                        }
                    </script>

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

</main>
@endsection