@extends('layouts.app')
@section('title', 'Buat Diskusi Baru')
@section('page-title', '💬 Buat Diskusi Baru')

@section('content')

<div class="form-page">
    <div class="form-card">
        <h2>✍️ Ajukan Pertanyaan atau Diskusi</h2>
        <p class="text-muted">Jelaskan masalahmu secara detail agar lebih mudah dijawab.</p>

        <form method="POST" action="{{ route('forum.store') }}" class="main-form">
            @csrf

            <div class="form-group">
                <label>Mata Kuliah</label>
                <select name="course_id" class="form-input" required>
                    <option value="">-- Pilih Mata Kuliah --</option>
                    @foreach($courses as $course)
                    <option value="{{ $course->id }}"
                        {{ (old('course_id') ?? optional($selectedCourse)->id) == $course->id ? 'selected' : '' }}>
                        {{ $course->semester->name }} › {{ $course->name }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label>Judul Diskusi</label>
                <input type="text" name="title" class="form-input"
                       value="{{ old('title') }}"
                       placeholder="Contoh: Error undefined variable di Laravel Controller"
                       required>
                <span class="form-hint">Judul yang spesifik memudahkan orang lain menemukan dan menjawab.</span>
            </div>

            <div class="form-group">
                <label>Deskripsi Masalah</label>
                <textarea name="body" class="form-input" rows="8"
                          placeholder="Jelaskan:&#10;1. Apa yang kamu coba lakukan?&#10;2. Apa yang sudah kamu coba?&#10;3. Pesan error apa yang muncul?"
                          required>{{ old('body') }}</textarea>
            </div>

            {{-- Code Snippet --}}
            <div class="form-group" x-data="{ showCode: false }">
                <label>
                    <input type="checkbox" x-model="showCode">
                    Tambahkan Code Snippet 💻
                </label>
                <div x-show="showCode" class="code-input-area mt-2">
                    <div class="form-row">
                        <label>Bahasa Pemrograman</label>
                        <select name="code_language" class="form-input form-input-sm">
                            @foreach(\App\Models\Post::SUPPORTED_LANGUAGES as $lang)
                            <option value="{{ $lang }}" {{ old('code_language') === $lang ? 'selected' : '' }}>
                                {{ strtoupper($lang) }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <textarea name="code_snippet" class="form-input code-textarea" rows="10"
                              placeholder="// Paste kode yang bermasalah di sini...">{{ old('code_snippet') }}</textarea>
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('forum.index') }}" class="btn btn-ghost">Batal</a>
                <button type="submit" class="btn btn-primary">
                    🚀 Posting Diskusi
                </button>
            </div>
        </form>
    </div>

    {{-- Tips sidebar --}}
    <div class="tips-card">
        <h3>💡 Tips Pertanyaan yang Baik</h3>
        <ul>
            <li>✅ Judul spesifik dan deskriptif</li>
            <li>✅ Sertakan kode yang bermasalah</li>
            <li>✅ Tuliskan pesan error lengkap</li>
            <li>✅ Sebutkan apa yang sudah dicoba</li>
            <li>❌ Jangan hanya tulis "tolong bantu"</li>
            <li>❌ Jangan posting jawaban sebagai pertanyaan</li>
        </ul>

        <h3 class="mt-4">🔥 Poin yang Kamu Dapatkan</h3>
        <ul>
            <li>📝 Buat diskusi: +5 pts</li>
            <li>💬 Jawab diskusi: +3 pts</li>
            <li>✅ Verified Solution: +20 pts</li>
        </ul>
    </div>
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js" defer></script>
@endpush

@endsection