@extends('layouts.app')

@section('title', $course->fullname . ' - Cursos - SICA')
@section('page-icon')
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6l0 13"/><path d="M12 6l0 13"/><path d="M21 6l0 13"/></svg>
@endsection
@section('page-title')
    <a href="{{ route('courses.index') }}" class="text-decoration-none text-secondary">Cursos</a>
    <span class="mx-2 text-secondary">/</span>
    {{ $course->fullname }}
@endsection

@push('styles')
<style>
    .page-body > .container-xl { max-width: 95%; }
</style>
@endpush

@section('content')
{{-- Formulario de edicion --}}
<div class="card mb-3">
    <div class="card-header">
        <h3 class="card-title">Datos del curso</h3>
    </div>
    <form id="form-course">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label required">Nombre Completo</label>
                    <input type="text" name="fullname" id="input-fullname" class="form-control" value="{{ $course->fullname }}" required>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label required">Nombre Corto</label>
                    <input type="text" name="shortname" id="input-shortname" class="form-control" value="{{ $course->shortname }}" required>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Categoria</label>
                    <input type="text" name="category_name" id="input-category" class="form-control" value="{{ $course->category_name }}">
                </div>
                <div class="col-md-9 mb-3">
                    <label class="form-label">Resumen</label>
                    <textarea name="summary" id="input-summary" class="form-control" rows="3">{{ $course->summary }}</textarea>
                </div>
                <div class="col-md-3 mb-3 d-flex align-items-end">
                    <label class="form-check form-switch mb-3">
                        <input type="checkbox" name="visible" id="input-visible" class="form-check-input" value="1" {{ $course->visible ? 'checked' : '' }}>
                        <span class="form-check-label">Visible</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-footer text-end">
            <a href="{{ route('courses.index') }}" class="btn me-2">Volver al listado</a>
            <button type="submit" class="btn btn-success" id="btn-save">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M5 12l5 5l10 -10"/></svg>
                Guardar cambios
            </button>
        </div>
    </form>
</div>

{{-- Tabla de conexiones Moodle --}}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Conexiones Moodle</h3>
        <div class="card-actions">
            <button class="btn btn-sm btn-success" id="btn-send-moodle">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 12h-12"/><path d="M11 8l-4 4l4 4"/><path d="M20 4v16"/></svg>
                Enviar a Moodle
            </button>
        </div>
    </div>
    <div class="card-body">
        @if($course->moodleConnections->isEmpty())
            <div class="text-center text-secondary py-4">
                Este curso no esta vinculado a ningun Moodle.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-vcenter" id="moodle-table">
                    <thead>
                        <tr>
                            <th>Moodle</th>
                            <th>ID en Moodle</th>
                            <th>Nombre en Moodle</th>
                            <th>Categoria</th>
                            <th>Visible</th>
                            <th>Formato</th>
                            <th>Alumnos</th>
                            <th>Sincronizado</th>
                            <th class="w-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($course->moodleConnections as $mc)
                            @php $d = $mc->moodle_data ?? []; @endphp
                            <tr id="row-mc-{{ $mc->id }}">
                                <td>
                                    <span class="badge bg-blue-lt">{{ $mc->connection->name ?? 'Desconocido' }}</span>
                                </td>
                                <td>{{ $mc->moodle_course_id }}</td>
                                <td id="mc-fullname-{{ $mc->id }}">{{ $d['fullname'] ?? '—' }}</td>
                                <td id="mc-category-{{ $mc->id }}">{{ $d['categoryname'] ?? '—' }}</td>
                                <td id="mc-visible-{{ $mc->id }}">
                                    @if(isset($d['visible']))
                                        @if($d['visible'])
                                            <span class="badge bg-success">Si</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    @else
                                        <span class="text-secondary">—</span>
                                    @endif
                                </td>
                                <td id="mc-format-{{ $mc->id }}">{{ $d['format'] ?? '—' }}</td>
                                <td id="mc-enrolled-{{ $mc->id }}">{{ $d['enrolledusercount'] ?? '—' }}</td>
                                <td id="mc-synced-{{ $mc->id }}">
                                    @if($mc->synced_at)
                                        <small class="text-secondary">{{ $mc->synced_at->format('d/m/Y H:i') }}</small>
                                    @else
                                        <small class="text-secondary">Nunca</small>
                                    @endif
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary btn-sync" data-id="{{ $mc->id }}" title="Sincronizar datos de Moodle">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

{{-- Modal enviar a Moodle --}}
<div class="modal modal-blur fade" id="modal-send-moodle" tabindex="-1">
    <div class="modal-dialog modal-md modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Enviar curso a Moodle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="form-send-moodle">
                <div class="modal-body">
                    <p class="text-secondary">Curso: <strong>{{ $course->fullname }}</strong></p>
                    <div class="mb-3">
                        <label class="form-label required">Conexion Moodle</label>
                        <select name="moodle_connection_id" id="send-moodle-select" class="form-select" required>
                            <option value="">Seleccionar conexion...</option>
                            @foreach($connections as $conn)
                                <option value="{{ $conn->id }}">{{ $conn->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3" id="category-container" style="display:none;">
                        <label class="form-label required">Categoria en Moodle</label>
                        <select name="moodle_category_id" id="send-category-select" class="form-select" required>
                            <option value="">Cargando categorias...</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-2" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="btn-send-confirm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M5 12l5 5l10 -10"/></svg>
                        Enviar a Moodle
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var courseUpdateUrl = "{{ route('courses.update', $course) }}";
    var courseSendUrl = "{{ route('courses.send-moodle', $course) }}";
    var courseSyncBaseUrl = "{{ url('courses/' . $course->id . '/sync-moodle') }}";
    var coursesCategoriesUrl = "{{ route('courses.moodle-categories') }}";
    var courseIndexUrl = "{{ route('courses.index') }}";
</script>
<script src="{{ asset('js/courses/show.js') }}?v={{ filemtime(public_path('js/courses/show.js')) }}"></script>
@endpush