@extends('Layouts.app')

@section('content')
<main class="flex-1 p-6 space-y-6">
    <div class="bg-white p-6 rounded-xl shadow">
        {{-- Tombol "Kembali ke Detail Kelas" yang baru --}}
        <a href="{{ route('courses.show', ['code' => $course->code]) }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mb-4">
            <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            Kembali ke Detail Kelas
        </a>
        <h2 class="text-2xl font-semibold text-gray-800 mb-2">Tambah Konten untuk Pertemuan {{ $meeting_number }}</h2>
        <p class="text-gray-600 mb-4">Mata Kuliah: {{ $course->title }}</p>

        {{-- Menampilkan pesan sukses --}}
        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                <span class="block sm:inline">{{ session('success') }}</span>
            </div>
        @endif

        {{-- Menampilkan pesan error validasi --}}
        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">Error!</strong>
                <span class="block sm:inline">Terdapat kesalahan pada input Anda:</span>
                <ul class="mt-2 list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('meetings.store') }}" method="POST" class="space-y-4" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="course_code" value="{{ $course->code }}">
            <input type="hidden" name="meeting_number" value="{{ $meeting_number }}">

            <div>
                <label for="title" class="block text-gray-700 font-medium">Judul Konten</label>
                <input type="text" name="title" id="title" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" value="{{ old('title') }}">
            </div>

            <div>
                <label for="type" class="block text-gray-700 font-medium">Tipe Konten</label>
                <select name="type" id="type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    <option value="materi">Materi</option>
                    <option value="absensi">Absensi</option>
                    <option value="tugas">Tugas</option>
                    <option value="uts">UTS</option>
                    <option value="uas">UAS</option>
                    <!--<option value="quiz">Quiz</option>-->
                    <option value="url">URL</option>
                </select>
            </div>
            
            {{-- Placeholder untuk field dinamis --}}
            <div id="dynamic-fields"></div>

            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Simpan Konten</button>
        </form>
    </div>
</main>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('type');
    const dynamicFields = document.getElementById('dynamic-fields');

    const renderFields = (selectedType) => {
        dynamicFields.innerHTML = '';
        
        if (selectedType === 'materi') {
            dynamicFields.innerHTML = `
                <div>
                    <label for="file_upload" class="block text-gray-700 font-medium">File Materi (PDF/PPT)</label>
                    <input type="file" name="file_upload" id="file_upload" class="mt-1 block w-full">
                </div>
                <div>
                    <label for="video_link" class="block text-gray-700 font-medium">Link Video </label>
                    <input type="text" name="video_link" id="video_link" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
            `;
        } else if (['tugas', 'quiz', 'uts', 'uas'].includes(selectedType)) {
            dynamicFields.innerHTML = `
                <div>
                    <label for="start_date" class="block text-gray-700 font-medium">Tanggal Mulai</label>
                    <input type="datetime-local" name="start_date" id="start_date" class="mt-1 block w-80 rounded-md border-gray-300 shadow-sm">
                </div>
                <div>
                    <label for="end_date" class="block text-gray-700 font-medium">Batas Waktu</label>
                    <input type="datetime-local" name="end_date" id="end_date" class="mt-1 block w-80 rounded-md border-gray-300 shadow-sm">
                </div>
                <div>
                    <label for="file_upload" class="block text-gray-700 font-medium">File Soal</label>
                    <input type="file" name="file_upload" id="file_upload" class="mt-1 block w-full">
                </div>
            `;
        } else if (selectedType === 'absensi') {
            dynamicFields.innerHTML = `
                <div>
                    <label for="start_date" class="block text-gray-700 font-medium">Absensi Dibuka</label>
                    <input type="datetime-local" name="start_date" id="start_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
                <div>
                    <label for="end_date" class="block text-gray-700 font-medium">Absensi Ditutup</label>
                    <input type="datetime-local" name="end_date" id="end_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
            `;
        } else if (selectedType === 'url') {
            dynamicFields.innerHTML = `
                <div id="url-container" class="space-y-4">
                    <div class="url-field">
                        <label class="block text-gray-700 font-medium">URL 1</label>
                        <div class="flex items-center space-x-2">
                            <div class="flex-1">
                                <input type="text" name="urls[0][link]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Masukkan URL">
                                <input type="text" name="urls[0][title]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Masukkan judul (opsional)">
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" id="add-url-btn" class="mt-2 bg-gray-200 text-gray-800 px-3 py-1 rounded-md hover:bg-gray-300">Tambah URL</button>
            `;
            
            let urlIndex = 1;

            // Logika untuk tombol "Tambah URL"
            document.getElementById('add-url-btn').addEventListener('click', () => {
                const urlContainer = document.getElementById('url-container');
                const newUrlField = document.createElement('div');
                newUrlField.className = 'url-field';
                newUrlField.innerHTML = `
                    <label class="block text-gray-700 font-medium">URL ${urlIndex + 1}</label>
                    <div class="flex items-center space-x-2">
                        <div class="flex-1">
                            <input type="text" name="urls[${urlIndex}][link]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Masukkan URL">
                            <input type="text" name="urls[${urlIndex}][title]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Masukkan judul (opsional)">
                        </div>
                        <button type="button" class="remove-url-btn bg-red-500 text-white p-2 rounded-md hover:bg-red-600">
                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 10-2 0v6a1 1 0 102 0V8z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                `;
                urlContainer.appendChild(newUrlField);
                urlIndex++;
            });

            // Logika untuk tombol "Hapus URL"
            dynamicFields.addEventListener('click', (event) => {
                if (event.target.closest('.remove-url-btn')) {
                    const urlContainer = document.getElementById('url-container');
                    if (urlContainer.children.length > 1) {
                        event.target.closest('.url-field').remove();
                        // Perbarui nomor urut URL setelah penghapusan
                        document.querySelectorAll('.url-field').forEach((field, index) => {
                            const label = field.querySelector('label');
                            if (label) {
                                label.textContent = `URL ${index + 1}`;
                            }
                        });
                        urlIndex = urlContainer.children.length;
                    }
                }
            });
        }
    };

    renderFields(typeSelect.value);

    typeSelect.addEventListener('change', (event) => {
        renderFields(event.target.value);
    });
});
</script>
@endpush