{{-- resources/views/siswa/input.blade.php --}}
@extends('layouts.app')

@section('title', (isset($isEdit) && $isEdit ? 'Edit Aktivitas Harian' : 'Input Aktivitas Harian') . ' - LearnMood')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6">
    <!-- Header dengan Progress -->
    <div class="mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
            <h2 class="text-xl md:text-2xl font-bold text-gray-800">{{ isset($isEdit) && $isEdit ? 'Edit Aktivitas Harian' : 'Input Aktivitas Harian' }}</h2>
            <span class="text-sm text-gray-500">{{ now()->format('l, d F Y') }}</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full" style="width: 0%"></div>
        </div>
        <p class="text-sm text-gray-500 mt-2">
            {{ isset($isEdit) && $isEdit ? 'Perbarui data aktivitas hari ini jika ada perubahan' : 'Lengkapi data untuk mendapatkan rekomendasi personal' }}
        </p>
    </div>

    <!-- Main Form Card -->
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Form Header dengan Ilustrasi -->
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-4 md:px-8 py-4 md:py-6">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg md:text-xl font-semibold text-white mb-1 md:mb-2">
                        {{ isset($isEdit) && $isEdit ? 'Edit Aktivitas Belajarmu' : 'Catat Aktivitas Belajarmu' }}
                    </h3>
                    <p class="text-blue-100 text-xs md:text-sm">
                        {{ isset($isEdit) && $isEdit ? 'Rekomendasi akan dihitung ulang setelah data diperbarui' : 'Isi data dengan jujur untuk hasil rekomendasi yang akurat' }}
                    </p>
                </div>
                <div class="bg-white/20 p-2 md:p-3 rounded-xl shrink-0">
                    <svg class="w-6 h-6 md:w-8 md:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Form Body -->
        <form method="POST" action="{{ isset($isEdit) && $isEdit ? route('siswa.input.update-today') : route('siswa.input.store') }}" class="p-4 md:p-8 space-y-6 md:space-y-8" id="inputForm">
            @csrf
            @if(isset($isEdit) && $isEdit)
                @method('PATCH')
            @endif

            <!-- Waktu Belajar Section -->
            <div class="space-y-4">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-base md:text-lg font-semibold text-gray-800">Waktu Belajar</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    <!-- Jam Mulai -->
                    <div class="space-y-2">
                        <label class="block text-xs md:text-sm font-medium text-gray-700">
                            <span class="flex items-center space-x-1">
                                <span>Jam Mulai</span>
                                <span class="text-xs text-gray-400">(Format 24 jam)</span>
                            </span>
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <input type="time" 
                                   name="start_time" 
                                   id="start_time"
                                   value="{{ old('start_time', isset($isEdit) && $isEdit && isset($activity) && $activity->end_time ? \Carbon\Carbon::parse($activity->end_time)->format('H:i') : '') }}"
                                   @if(isset($isEdit) && $isEdit && isset($activity) && $activity->end_time)
                                       min="{{ \Carbon\Carbon::parse($activity->end_time)->format('H:i') }}"
                                   @endif
                                   class="w-full pl-10 pr-4 py-3 text-sm md:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('start_time') border-red-500 @enderror"
                                   required>
                        </div>
                        @error('start_time')
                            <p class="text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Jam Selesai -->
                    <div class="space-y-2">
                        <label class="block text-xs md:text-sm font-medium text-gray-700">
                            <span class="flex items-center space-x-1">
                                <span>Jam Selesai</span>
                                <span class="text-xs text-gray-400">(Format 24 jam)</span>
                            </span>
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <input type="time" 
                                   name="end_time" 
                                   id="end_time"
                                   value="{{ old('end_time') }}"
                                   @if(isset($isEdit) && $isEdit && isset($activity) && $activity->end_time)
                                       min="{{ \Carbon\Carbon::parse($activity->end_time)->format('H:i') }}"
                                   @endif
                                   class="w-full pl-10 pr-4 py-3 text-sm md:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('end_time') border-red-500 @enderror"
                                   required>
                        </div>
                        @error('end_time')
                            <p class="text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Durasi Preview -->
                <div class="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-xl hidden" id="durationPreview">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                        <span class="text-sm text-gray-600">Total Durasi Belajar:</span>
                        <span class="text-lg font-bold text-blue-600" id="durationDisplay">0 menit</span>
                    </div>
                </div>

                @if(isset($isEdit) && $isEdit)
                    <div class="bg-white border border-blue-100 p-4 rounded-xl">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4 text-sm">
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="text-xs text-gray-500">Durasi tersimpan</p>
                                <p class="font-semibold text-gray-800">{{ $activity->duration_minutes ?? 0 }} menit</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="text-xs text-gray-500">Jam selesai terakhir</p>
                                <p class="font-semibold text-gray-800">
                                    {{ isset($activity) && $activity->end_time ? \Carbon\Carbon::parse($activity->end_time)->format('H:i') : '-' }}
                                </p>
                            </div>
                        </div>

                        <label for="total_duration_minutes" class="block text-xs md:text-sm font-medium text-gray-700 mb-2">
                            Total Durasi Belajar Hari Ini
                        </label>
                        <div class="relative">
                            <input type="number"
                                   name="total_duration_minutes"
                                   id="total_duration_minutes"
                                   value="{{ old('total_duration_minutes', $activity->duration_minutes ?? '') }}"
                                   min="1"
                                   max="720"
                                   class="w-full pr-16 pl-4 py-3 text-sm md:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('total_duration_minutes') border-red-500 @enderror"
                                   readonly>
                            <span class="absolute inset-y-0 right-0 pr-4 flex items-center text-sm text-gray-500 pointer-events-none">menit</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            Total otomatis dihitung dari durasi tersimpan ditambah durasi belajar tambahan.
                        </p>
                        @error('total_duration_minutes')
                            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                @endif
            </div>

            <!-- Mood Section -->
            <div class="space-y-4">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-base md:text-lg font-semibold text-gray-800">Mood Hari Ini</h3>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-5 gap-2 md:gap-3">
                    <!-- Bagus -->
                    <label class="relative cursor-pointer">
                        <input type="radio" name="mood" value="Bagus" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Bagus' ? 'checked' : '' }} required>
                        <div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-green-500 peer-checked:bg-green-50 hover:bg-gray-50 transition-all">
                            <span class="text-2xl md:text-3xl block mb-1">😊</span>
                            <span class="text-[10px] md:text-sm font-medium text-gray-700">Bagus</span>
                        </div>
                    </label>

                    <!-- Lumayan -->
                    <label class="relative cursor-pointer">
                        <input type="radio" name="mood" value="Lumayan" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Lumayan' ? 'checked' : '' }}>
                        <div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-blue-500 peer-checked:bg-blue-50 hover:bg-gray-50 transition-all">
                            <span class="text-2xl md:text-3xl block mb-1">🙂</span>
                            <span class="text-[10px] md:text-sm font-medium text-gray-700">Lumayan</span>
                        </div>
                    </label>

                    <!-- Biasa Saja -->
                    <label class="relative cursor-pointer">
                        <input type="radio" name="mood" value="Biasa Saja" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Biasa Saja' ? 'checked' : '' }}>
                        <div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-gray-500 peer-checked:bg-gray-50 hover:bg-gray-50 transition-all">
                            <span class="text-2xl md:text-3xl block mb-1">😐</span>
                            <span class="text-[10px] md:text-sm font-medium text-gray-700">Biasa</span>
                        </div>
                    </label>

                    <!-- Cukup Jenuh -->
                    <label class="relative cursor-pointer">
                        <input type="radio" name="mood" value="Cukup Jenuh" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Cukup Jenuh' ? 'checked' : '' }}>
                        <div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-yellow-500 peer-checked:bg-yellow-50 hover:bg-gray-50 transition-all">
                            <span class="text-2xl md:text-3xl block mb-1">😕</span>
                            <span class="text-[10px] md:text-sm font-medium text-gray-700">Jenuh</span>
                        </div>
                    </label>

                    <!-- Jenuh -->
                    <label class="relative cursor-pointer">
                        <input type="radio" name="mood" value="Jenuh" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Jenuh' ? 'checked' : '' }}>
                        <div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-red-500 peer-checked:bg-red-50 hover:bg-gray-50 transition-all">
                            <span class="text-2xl md:text-3xl block mb-1">😫</span>
                            <span class="text-[10px] md:text-sm font-medium text-gray-700">Sangat Jenuh</span>
                        </div>
                    </label>
                </div>
                @error('mood')
                    <p class="text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Durasi Tidur Section dengan Slider 1-10 Jam -->
            <div class="space-y-4">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                        </svg>
                    </div>
                    <h3 class="text-base md:text-lg font-semibold text-gray-800">Durasi Tidur</h3>
                </div>

                <div class="bg-gray-50 p-4 md:p-6 rounded-xl">
                    <!-- Slider 1-10 Jam -->
                    <div class="space-y-6">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                            <span class="text-xs md:text-sm font-medium text-gray-700">Geser untuk memilih durasi tidur:</span>
                            <div class="flex items-center justify-end">
                                <span class="text-xl md:text-2xl font-bold text-indigo-600" id="sleepHoursDisplay">7</span>
                                <span class="text-sm text-gray-500 ml-1">jam</span>
                            </div>
                        </div>
                        
                        <input type="range" 
                               id="sleepSlider" 
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                               min="1" 
                               max="10" 
                               step="0.5" 
                               value="{{ old('sleep_hours', isset($activity) ? $activity->sleep_hours : 7) }}"
                               required>
                        
                        <!-- Label Range -->
                        <div class="flex justify-between text-[10px] md:text-xs text-gray-500 px-2">
                            <span>😴 1j</span>
                            <span>😊 5j</span>
                            <span>🌙 7j</span>
                            <span>😴 10j</span>
                        </div>
                        
                        <!-- Kategori Tidur -->
                        <div class="flex justify-center">
                            <span class="px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium" id="sleepCategory">
                                Normal (Cukup)
                            </span>
                        </div>
                    </div>

                    <!-- Hidden Input untuk nilai -->
                    <input type="hidden" name="sleep_hours" id="sleepValue" value="{{ old('sleep_hours', isset($activity) ? $activity->sleep_hours : '7') }}">

                    <!-- Preview Card dengan Visual -->
                    <div class="mt-6 p-4 bg-white rounded-lg border border-gray-200">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                            <div class="flex items-center space-x-4">
                                <div class="text-3xl md:text-4xl" id="sleepEmoji">🌙</div>
                                <div>
                                    <p class="text-xs md:text-sm text-gray-500">Kamu tidur selama:</p>
                                    <div class="flex items-baseline space-x-1">
                                        <p class="text-xl md:text-2xl font-bold text-gray-800" id="sleepText">7</p>
                                        <p class="text-sm md:text-base text-gray-600">jam</p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-left sm:text-right">
                                <p class="text-xs md:text-sm text-gray-500" id="sleepQuality">Kualitas: Baik</p>
                            </div>
                        </div>
                        
                        <!-- Progress Bar Tidur -->
                        <div class="mt-3">
                            <div class="flex justify-between text-[10px] md:text-xs text-gray-500 mb-1">
                                <span>Kurang</span>
                                <span>Ideal</span>
                                <span>Berlebih</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-indigo-600 h-2 rounded-full" id="sleepProgress" style="width: 70%"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Info Rekomendasi Tidur -->
                    <div class="mt-4 text-[10px] md:text-xs text-gray-500 flex items-start space-x-2">
                        <svg class="w-4 h-4 text-indigo-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Remaja (14-17 tahun) idealnya tidur 8-10 jam. Dewasa (18+ tahun) idealnya 7-9 jam.</span>
                    </div>
                </div>
            </div>

            <!-- Submit Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 pt-4">
                <button type="submit" 
                        class="w-full sm:flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-medium hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed"
                        id="submitBtn">
                    <span class="flex items-center justify-center space-x-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>{{ isset($isEdit) && $isEdit ? 'Update Aktivitas' : 'Simpan Aktivitas' }}</span>
                    </span>
                </button>
                
                <a href="{{ route('dashboard') }}" 
                   class="w-full sm:w-auto px-6 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 transition-all text-center">
                    Batal
                </a>
            </div>

            <!-- Info Tambahan -->
            <div class="bg-blue-50 p-4 rounded-lg">
                <div class="flex items-start space-x-3">
                    <svg class="w-5 h-5 text-blue-600 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-xs md:text-sm text-blue-700">
                        <span class="font-semibold">Tips:</span> Input data dengan jujur agar rekomendasi belajar lebih personal dan akurat. Data hanya digunakan untuk analisis belajarmu.
                    </p>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Hitung durasi otomatis
    const startTime = document.getElementById('start_time');
    const endTime = document.getElementById('end_time');
    const durationPreview = document.getElementById('durationPreview');
    const durationDisplay = document.getElementById('durationDisplay');
    const isEditMode = @json(isset($isEdit) && $isEdit);
    const previousDuration = @json(isset($activity) ? (int) $activity->duration_minutes : 0);
    const previousEndTime = @json(isset($activity) && $activity->end_time ? \Carbon\Carbon::parse($activity->end_time)->format('H:i') : null);
    const totalDurationInput = document.getElementById('total_duration_minutes');

    function calculateDuration() {
        if (startTime.value && endTime.value) {
            const start = new Date('1970-01-01T' + startTime.value + 'Z');
            const end = new Date('1970-01-01T' + endTime.value + 'Z');
            const previousEnd = previousEndTime ? new Date('1970-01-01T' + previousEndTime + 'Z') : null;

            if (isEditMode && previousEnd && start < previousEnd) {
                durationDisplay.textContent = 'Jam mulai tambahan tidak boleh sebelum ' + previousEndTime;
                durationPreview.style.display = 'block';
                durationPreview.classList.remove('hidden');
                durationPreview.classList.add('bg-red-50');
                durationPreview.classList.remove('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
                durationDisplay.classList.add('text-red-600');
                if (totalDurationInput) {
                    totalDurationInput.value = previousDuration;
                }
                return;
            }
            
            if (end > start) {
                const diffMs = end - start;
                const diffMins = Math.round(diffMs / 60000);
                const totalMins = isEditMode ? previousDuration + diffMins : diffMins;
                
                durationDisplay.textContent = isEditMode
                    ? diffMins + ' menit tambahan, total ' + totalMins + ' menit'
                    : diffMins + ' menit';
                durationPreview.style.display = 'block';
                durationPreview.classList.remove('hidden');
                if (totalDurationInput) {
                    totalDurationInput.value = totalMins;
                }
                
                // Validasi durasi
                if (diffMins > 480) { // Lebih dari 8 jam
                    durationPreview.classList.add('bg-yellow-50');
                    durationPreview.classList.remove('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
                    durationDisplay.classList.add('text-yellow-600');
                    durationDisplay.classList.remove('text-blue-600');
                } else {
                    durationPreview.classList.remove('bg-yellow-50');
                    durationPreview.classList.add('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
                    durationDisplay.classList.remove('text-yellow-600');
                    durationDisplay.classList.add('text-blue-600');
                }
            } else {
                durationDisplay.textContent = 'Jam selesai harus setelah jam mulai';
                durationPreview.style.display = 'block';
                durationPreview.classList.remove('hidden');
                durationPreview.classList.add('bg-red-50');
                durationPreview.classList.remove('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
                durationDisplay.classList.add('text-red-600');
            }
        }
    }

    startTime.addEventListener('change', calculateDuration);
    endTime.addEventListener('change', calculateDuration);

    // Slider untuk durasi tidur 1-10 jam
    const slider = document.getElementById('sleepSlider');
    const sleepHoursDisplay = document.getElementById('sleepHoursDisplay');
    const sleepText = document.getElementById('sleepText');
    const sleepEmoji = document.getElementById('sleepEmoji');
    const sleepCategory = document.getElementById('sleepCategory');
    const sleepQuality = document.getElementById('sleepQuality');
    const sleepProgress = document.getElementById('sleepProgress');
    const sleepValue = document.getElementById('sleepValue');

    function updateSleepDisplay() {
        const hours = parseFloat(slider.value).toFixed(1);
        
        // Update display
        sleepHoursDisplay.textContent = hours;
        sleepText.textContent = hours;
        sleepValue.value = hours;
        
        // Hitung progress percentage (1-10 jam -> 0-100%)
        const progressPercent = ((hours - 1) / 9) * 100;
        sleepProgress.style.width = progressPercent + '%';
        
        // Tentukan emoji dan kategori berdasarkan jam tidur
        if (hours < 5) {
            sleepEmoji.textContent = '😴';
            sleepCategory.textContent = 'Kurang Tidur';
            sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-red-100 text-red-700';
            sleepQuality.textContent = 'Kualitas: Kurang';
            sleepProgress.className = 'bg-red-600 h-2 rounded-full';
        } else if (hours >= 5 && hours < 7) {
            sleepEmoji.textContent = '😐';
            sleepCategory.textContent = 'Kurang Ideal';
            sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-yellow-100 text-yellow-700';
            sleepQuality.textContent = 'Kualitas: Cukup';
            sleepProgress.className = 'bg-yellow-600 h-2 rounded-full';
        } else if (hours >= 7 && hours <= 9) {
            sleepEmoji.textContent = '😊';
            sleepCategory.textContent = 'Ideal';
            sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-green-100 text-green-700';
            sleepQuality.textContent = 'Kualitas: Baik';
            sleepProgress.className = 'bg-green-600 h-2 rounded-full';
        } else {
            sleepEmoji.textContent = '😴';
            sleepCategory.textContent = 'Berlebih';
            sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-blue-100 text-blue-700';
            sleepQuality.textContent = 'Kualitas: Cukup';
            sleepProgress.className = 'bg-blue-600 h-2 rounded-full';
        }
    }

    slider.addEventListener('input', updateSleepDisplay);
    
    // Set initial display
    updateSleepDisplay();

    // Validasi form sebelum submit
    document.getElementById('inputForm').addEventListener('submit', function(e) {
        const start = startTime.value;
        const end = endTime.value;
        
        if (start && end) {
            const startDate = new Date('1970-01-01T' + start + 'Z');
            const endDate = new Date('1970-01-01T' + end + 'Z');
            const previousEndDate = previousEndTime ? new Date('1970-01-01T' + previousEndTime + 'Z') : null;
            
            if (isEditMode && previousEndDate && startDate < previousEndDate) {
                e.preventDefault();
                alert('Jam mulai tambahan tidak boleh sebelum jam selesai aktivitas sebelumnya (' + previousEndTime + ')!');
                return false;
            }
            
            if (endDate <= startDate) {
                e.preventDefault();
                alert('Jam selesai harus setelah jam mulai!');
                return false;
            }
        }
    });
</script>
@endpush