@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Silabo del Curso {{ $curso->nombre }} @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <div class="mb-3 text-end">
                    <a href="{{ route('docente.cursos.informacion', [
                        'id'      => $curso->id,
                        'seccion' => $seccionId,
                        'turno'   => $turnoId
                    ]) }}" class="btn btn-danger btn-sm me-2">
                                            <i class="fas fa-arrow-left"></i> Volver a Información del Curso
                    </a>
                    
                    <button type="button" class="btn btn-primary btn-sm px-3" 
                        data-bs-toggle="modal" 
                        data-bs-target="#modalNuevoSilabo">
                        <i class="fas fa-plus"></i> Agregar Nuevo Silabo
                    </button>
                </div>


                <div class="row">
    @if($silabo)
        <div class="card shadow-sm border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-0 text-primary">
                        <i class="las la-file-pdf font-20 me-1"></i> Sílabo Disponible
                    </h5>
                    <small class="text-muted">Subido el: {{ \Carbon\Carbon::parse($silabo->fecha_subida)->format('d/m/Y H:i') }}</small>
                </div>
                <div class="btn-group gap-2">
                    <a href="{{ asset('storage/' . $silabo->archivo) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                        <i class="las la-external-link-alt"></i> Expandir en pestaña nueva
                    </a>
                    <button type="button" 
                        class="btn btn-sm btn-soft-danger text-danger font-13" 
                        onclick="eliminarSilabo({{ $silabo->id_silabo ?? $silabo->id }})">
                        <i class="las la-trash-alt"></i> Eliminar Sílabo
                    </button>
                </div>
            </div>
            
            <div class="card-body p-0">
                <div class="ratio ratio-16x9" style="height: 600px;">
                    <embed 
                        src="{{ asset('storage/' . $silabo->archivo) }}#toolbar=1&navpanes=0&scrollbar=1" 
                        type="application/pdf" 
                        width="100%" 
                        height="100%"
                        class="rounded-bottom"
                    />
                </div>
            </div>
        </div>
    @else
        <div class="col-12">
            <div class="alert alert-warning text-center border-0 shadow-sm p-4">
                <i class="las la-exclamation-triangle font-40 text-warning d-block mb-2"></i>
                <h5 class="alert-heading">No se ha subido un sílabo para este curso aún</h5>
                <p class="mb-0 text-muted">Utiliza el formulario de arriba para cargar el archivo PDF oficial de la materia.</p>
            </div>
        </div>
    @endif
</div>
            </div>
        </div>
    </div>
</div>


<!-- Modal de agregar -->

<!-- Modal: Agregar Nuevo Silabo -->
<div class="modal fade" id="modalNuevoSilabo" tabindex="-1" aria-labelledby="modalNuevoSilaboLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="formNuevoSilabo" enctype="multipart/form-data">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalNuevoSilaboLabel">Agregar Nuevo Silabo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="archivo" class="form-label">Archivo del Sílabo (PDF)</label>
            <input type="file" class="form-control" id="archivo" name="archivo" accept="application/pdf" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">
            <i class="fas fa-save"></i> Guardar
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            Cancelar
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<!--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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- Agregar -->
<script>
    $(document).ready(function() {
        $('#formNuevoSilabo').submit(function(e) {
            e.preventDefault();

            var formData = new FormData(this);

            $.ajax({
                url: '{{ route('docente.silabos.store', $curso->id) }}', // esta ruta la creamos ahorita
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#modalNuevoSilabo').modal('hide');

                    Swal.fire({
                        icon: 'success',
                        title: '¡Sílabo subido!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Hubo un problema al subir el silabo.'
                    });
                }
            });
        });
    });
</script>


<!-- eliminar -->
<!-- Script de AJAX para eliminar -->
<script>
    function eliminarSilabo(id_silabo) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "¡Esta acción no se puede deshacer!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {

                fetch("{{ url('docentes/silabos') }}/" + id_silabo, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                })
                .then(response => response.json())
                .then(data => {
                    Swal.fire(
                        'Eliminado',
                        data.message,
                        'success'
                    ).then(() => {
                        location.reload(); // Recarga la página para actualizar
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire(
                        'Error',
                        'Hubo un problema al eliminar.',
                        'error'
                    );
                });

            }
        })
    }
</script>



@endsection