@extends('layouts.app')
@section('title','Moodle LMS Configuration')
@section('page-title','Settings')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>Moodle LMS Integration</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
                <li class="breadcrumb-item active">Moodle</li>
            </ol></nav>
        </div>
        <div class="d-flex gap-2">
            @if($moodle->isEnabled())
            <form method="POST" action="{{ route('moodle.sync') }}">@csrf
                <button class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-arrow-repeat me-1"></i>Sync Courses & Quizzes
                </button>
            </form>
            @endif
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-12 col-lg-7">
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-mortarboard me-2"></i>Moodle Connection
                @if($moodle->isEnabled())
                <span class="badge bg-success ms-2">Connected</span>
                @else
                <span class="badge bg-secondary ms-2">Disabled</span>
                @endif
            </div>
            <form method="POST" action="{{ route('moodle.update') }}">
                @csrf @method('PUT')
                <div class="card-body row g-3">
                    <div class="col-12">
                        <label class="form-label">Moodle Site URL *</label>
                        <input type="url" name="site_url" class="form-control" required
                               value="{{ old('site_url', $config?->site_url) }}"
                               placeholder="https://lms.yourinstitution.edu">
                        <div class="form-text">The base URL of your Moodle installation. No trailing slash.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">API Token *</label>
                        <div class="input-group">
                            <input type="password" name="api_token" class="form-control" required
                                   id="tokenInput"
                                   value="{{ old('api_token', $config?->api_token) }}"
                                   placeholder="Moodle web service token">
                            <button type="button" class="input-group-text" style="cursor:pointer;"
                                    onclick="toggleToken()"><i class="bi bi-eye" id="tokenEye"></i></button>
                        </div>
                        <div class="form-text">Generate at Moodle → Site admin → Server → Manage tokens.</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Match Users By</label>
                        <select name="sync_user_field" class="form-select">
                            <option value="email" {{ ($config?->sync_user_field ?? 'email')==='email'?'selected':'' }}>Email address</option>
                            <option value="username" {{ ($config?->sync_user_field)==='username'?'selected':'' }}>Username</option>
                        </select>
                    </div>
                    <div class="col-6 d-flex align-items-end">
                        <div class="w-100 d-flex align-items-center justify-content-between p-3 rounded-3"
                             style="background:var(--body-bg);border:1px solid var(--card-border);">
                            <div>
                                <div class="fw-semibold" style="font-size:.88rem;">Enable Integration</div>
                                <div style="font-size:.75rem;color:var(--text-2);">Activate Moodle features</div>
                            </div>
                            <div class="form-check form-switch mb-0">
                                <input type="checkbox" name="is_enabled" class="form-check-input" role="switch"
                                       style="width:2.5rem;height:1.3rem;"
                                       value="1" {{ ($config?->is_enabled) ? 'checked' : '' }}>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2"
                                  placeholder="e.g. Token permissions, contact person…">{{ $config?->notes }}</textarea>
                    </div>
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-2"></i>Save Configuration
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="testConnection()">
                            <i class="bi bi-wifi me-2"></i>Test Connection
                        </button>
                    </div>
                    <div id="connResult" class="col-12" style="display:none;"></div>
                </div>
            </form>
        </div>

        {{-- Required Moodle Functions --}}
        <div class="card">
            <div class="card-header"><i class="bi bi-list-check me-2"></i>Required Moodle Web Service Functions</div>
            <div class="card-body" style="font-size:.83rem;">
                <p style="color:var(--text-2);">Enable all of the following functions on your Moodle web service token (Site Admin → Server → Manage tokens → Edit):</p>
                <div class="row g-1">
                    @foreach([
                        'core_user_create_users','core_user_get_users_by_field',
                        'core_course_get_courses','core_enrol_enrol_users',
                        'mod_quiz_get_quizzes_by_courses','mod_quiz_get_user_attempts',
                        'mod_quiz_get_user_best_grade','gradereport_user_get_grade_items',
                        'core_webservice_get_site_info',
                    ] as $fn)
                    <div class="col-12 col-md-6">
                        <div style="background:var(--body-bg);padding:.3rem .7rem;border-radius:6px;font-family:monospace;font-size:.78rem;color:var(--text-1);">
                            {{ $fn }}
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-5">
        {{-- Sync Status --}}
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-cloud-download me-2"></i>Synced Resources</div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-6">
                        <div class="text-center p-3 rounded-3" style="background:var(--body-bg);">
                            <div class="fw-bold" style="font-size:1.8rem;color:var(--ul-primary);">{{ $courses->count() }}</div>
                            <div style="font-size:.75rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;">Courses</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center p-3 rounded-3" style="background:var(--body-bg);">
                            <div class="fw-bold" style="font-size:1.8rem;color:var(--ul-primary);">{{ $quizzes->count() }}</div>
                            <div style="font-size:.75rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;">Quizzes</div>
                        </div>
                    </div>
                </div>
                @if($config?->last_synced_at)
                <div style="font-size:.78rem;color:var(--text-3);">Last synced: {{ $config->last_synced_at->diffForHumans() }}</div>
                @endif
            </div>
        </div>

        @if($quizzes->count())
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-question-circle me-2"></i>Available Quizzes</div>
            <div style="max-height:250px;overflow-y:auto;">
                @foreach($quizzes as $q)
                <div class="d-flex justify-content-between align-items-center px-3 py-2"
                     style="border-bottom:1px solid var(--card-border);font-size:.82rem;">
                    <div><div class="fw-semibold">{{ $q->name }}</div>
                    <div style="font-size:.71rem;color:var(--text-3);">ID: {{ $q->moodle_id }} · Max: {{ $q->max_grade }}</div></div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleToken() {
    const inp = document.getElementById('tokenInput');
    const eye = document.getElementById('tokenEye');
    inp.type = inp.type === 'password' ? 'text' : 'password';
    eye.className = inp.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
}
async function testConnection() {
    const box = document.getElementById('connResult');
    box.style.display = '';
    box.innerHTML = '<div class="alert alert-info mb-0"><span class="spinner-border spinner-border-sm me-2"></span>Testing connection…</div>';
    try {
        const res = await fetch('{{ route("moodle.test") }}');
        const d   = await res.json();
        box.innerHTML = d.ok
            ? `<div class="alert alert-success mb-0"><i class="bi bi-check-circle-fill me-2"></i>${d.message} <small class="text-muted">(${d.version})</small></div>`
            : `<div class="alert alert-danger mb-0"><i class="bi bi-x-circle-fill me-2"></i>${d.message}</div>`;
    } catch (e) {
        box.innerHTML = `<div class="alert alert-danger mb-0">Connection failed: ${e.message}</div>`;
    }
}
</script>
@endpush