@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' => $meeting->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">Edit Konten Pertemuan {{ $meeting->meeting_number }}</h2>
        <p class="text-gray-600 mb-4">Mata Kuliah: {{ $meeting->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 mb-4" 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 mb-4" 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

        {{-- Perhatikan perubahan action dan method di form --}}
        <form action="{{ route('meetings.update', $meeting->id) }}" method="POST" class="space-y-4" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            {{-- Hidden input tetap ada untuk informasi meeting --}}
            <input type="hidden" name="course_code" value="{{ $meeting->course->code }}">
            <input type="hidden" name="meeting_number" value="{{ $meeting->meeting_number }}">
            <input type="hidden" name="type" value="{{ $meeting->type }}">

            <div>
                <label for="title" class="block text-gray-700 font-medium">Judul Konten</label>
                {{-- Tambahkan 'value' dari data yang sudah ada --}}
                <input type="text" name="title" id="title" value="{{ old('title', $meeting->title) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
            </div>
            
            <div id="dynamic-fields">
                @php
                    $contentData = null;
                    if ($meeting->type === 'materi') {
                        $contentData = $meeting->materials->first();
                    } elseif (in_array($meeting->type, ['tugas', 'quiz', 'uts', 'uas'])) {
                        $contentData = $meeting->assignments->first();
                    }
                @endphp
                {{-- Bagian ini diperbarui untuk menampilkan konten URL --}}
                @if ($meeting->type === 'materi')
                <div>
                    <label for="file_upload" class="block text-gray-700 font-medium">File Materi (PDF/PPT)</label>
                    @if ($contentData && $contentData->file_path)
                        <p class="text-sm text-gray-500 mb-2">File saat ini: <a href="{{ asset('storage/' . $contentData->file_path) }}" target="_blank" class="text-blue-500 hover:underline">Lihat File</a></p>
                        <label class="block text-gray-700 font-medium">
                            <input type="checkbox" name="delete_file"> Hapus file saat ini
                        </label>
                    @endif
                    <input type="file" name="file_upload" id="file_upload" class="mt-1 block w-full">
                    <p class="text-xs text-gray-500 mt-1">Kosongkan jika tidak ingin mengganti file. Centang "Hapus" untuk menghapus tanpa mengganti.</p>
                </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" value="{{ old('video_link', $contentData->video_link ?? '') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>

                @elseif (in_array($meeting->type, ['tugas', 'quiz', 'uts', 'uas']))
                    <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" value="{{ old('start_date', \Carbon\Carbon::parse($contentData->start_date ?? now())->format('Y-m-d\TH:i')) }}" 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" value="{{ old('end_date', \Carbon\Carbon::parse($contentData->end_date ?? now())->format('Y-m-d\TH:i')) }}" 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>
                        @if ($contentData && $contentData->file_path)
                            <p class="text-sm text-gray-500 mb-2">File saat ini: <a href="{{ asset('storage/' . $contentData->file_path) }}" target="_blank" class="text-blue-500 hover:underline">Lihat File</a></p>
                            <label class="block text-gray-700 font-medium">
                                <input type="checkbox" name="delete_file"> Hapus file saat ini
                            </label>
                        @endif 
                        <input type="file" name="file_upload" id="file_upload" class="mt-1 block w-full">
                        <p class="text-xs text-gray-500 mt-1">Kosongkan jika tidak ingin mengganti file. Centang "Hapus" untuk menghapus tanpa mengganti.</p>
                    </div>

                
                @elseif ($meeting->type === 'absensi')
                    <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" value="{{ old('start_date', \Carbon\Carbon::parse($meeting->start_date ?? now())->format('Y-m-d\TH:i')) }}" 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" value="{{ old('end_date', \Carbon\Carbon::parse($meeting->end_date ?? now())->format('Y-m-d\TH:i')) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    </div>
                @elseif ($meeting->type === 'url')
                    <div id="url-container" class="space-y-4">
                        @forelse ($meeting->meetingUrls as $index => $url)
                            <div class="url-field">
                                <label class="block text-gray-700 font-medium">URL {{ $index + 1 }}</label>
                                <div class="flex items-center space-x-2">
                                    <div class="flex-1">
                                        {{-- Gunakan old() untuk mempertahankan input setelah validasi gagal --}}
                                        <input type="text" name="urls[{{ $index }}][link]" value="{{ old('urls.' . $index . '.link', $url->url_link) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Masukkan URL">
                                        <input type="text" name="urls[{{ $index }}][title]" value="{{ old('urls.' . $index . '.title', $url->url_title) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" placeholder="Masukkan judul (opsional)">
                                        {{-- Hidden input untuk ID, agar tahu URL mana yang harus diperbarui atau dihapus --}}
                                        <input type="hidden" name="urls[{{ $index }}][id]" value="{{ $url->id }}">
                                    </div>
                                    {{-- Tampilkan tombol hapus jika jumlah URL lebih dari 1 --}}
                                    @if ($meeting->meetingUrls->count() > 1)
                                    <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>
                                    @endif
                                </div>
                            </div>
                        @empty
                            {{-- Jika tidak ada URL, tampilkan satu field kosong --}}
                            <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>
                        @endforelse
                    </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>
                @endif
            </div>

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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const urlContainer = document.getElementById('url-container');
        const addUrlBtn = document.getElementById('add-url-btn');

        if (addUrlBtn && urlContainer) {
            let urlIndex = urlContainer.children.length > 0 ? urlContainer.children.length : 0;

            addUrlBtn.addEventListener('click', () => {
                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++;
                updateRemoveButtons();
            });

            urlContainer.addEventListener('click', (event) => {
                if (event.target.closest('.remove-url-btn')) {
                    const fieldToRemove = event.target.closest('.url-field');
                    const fields = urlContainer.querySelectorAll('.url-field');
                    // Pastikan selalu ada minimal 1 field
                    if (fields.length > 1) {
                        fieldToRemove.remove();
                        updateRemoveButtons();
                    }
                }
            });

            const updateRemoveButtons = () => {
                const fields = urlContainer.querySelectorAll('.url-field');
                // Sembunyikan tombol hapus jika hanya ada 1 field
                if (fields.length === 1) {
                    const removeBtn = fields[0].querySelector('.remove-url-btn');
                    if (removeBtn) {
                        removeBtn.style.display = 'none';
                    }
                } else {
                    // Tampilkan semua tombol hapus jika lebih dari 1
                    fields.forEach(field => {
                        let removeBtn = field.querySelector('.remove-url-btn');
                        if (removeBtn) {
                            removeBtn.style.display = 'inline-flex';
                        }
                    });
                }
                
                // Perbarui penomoran dan nama input
                fields.forEach((field, index) => {
                    const label = field.querySelector('label');
                    if (label) {
                        label.textContent = `URL ${index + 1}`;
                    }
                    const linkInput = field.querySelector('input[name*="[link]"]');
                    if (linkInput) linkInput.name = `urls[${index}][link]`;
                    const titleInput = field.querySelector('input[name*="[title]"]');
                    if (titleInput) titleInput.name = `urls[${index}][title]`;
                    const idInput = field.querySelector('input[name*="[id]"]');
                    if (idInput) idInput.name = `urls[${index}][id]`;
                });
            };

            // Panggil ini saat halaman dimuat untuk menyesuaikan tombol hapus
            updateRemoveButtons();
        }
    });
</script>
@endpush