@extends('layoutuser.app')

@section('title', 'Pengaturan Alert')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-bell me-2"></i>Pengaturan Alert Makanan
                    </h5>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('user.alert-settings.update') }}" method="POST">
                        @csrf
                        
                        <!-- Toggle Alert -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_enabled" name="is_enabled" 
                                       {{ $alertSetting->is_enabled ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_enabled">
                                    <strong>Aktifkan Alert Makanan</strong>
                                </label>
                            </div>
                            <small class="text-muted">Ketika diaktifkan, Anda akan mendapat notifikasi saat waktu makan tiba</small>
                        </div>

                        <!-- Pilih Waktu Makan -->
                        <div class="mb-4">
                            <label class="form-label"><strong>Pilih Waktu Makan untuk Alert:</strong></label>
                            <div class="row">
                                @foreach($waktuMakans as $waktuMakan)
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   name="enabled_waktu_makan_ids[]" 
                                                   value="{{ $waktuMakan->id }}"
                                                   id="waktu_makan_{{ $waktuMakan->id }}"
                                                   {{ in_array($waktuMakan->id, $alertSetting->enabled_waktu_makan_ids ?? []) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="waktu_makan_{{ $waktuMakan->id }}">
                                                <strong>{{ $waktuMakan->nama }}</strong><br>
                                                <small class="text-muted">{{ $waktuMakan->keterangan }}</small>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Pengaturan Suara -->
                        <div class="mb-4">
                            <label class="form-label"><strong>Pengaturan Suara:</strong></label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="sound_enabled" name="sound_enabled" checked>
                                        <label class="form-check-label" for="sound_enabled">
                                            <strong>Aktifkan Suara Notifikasi</strong>
                                        </label>
                                    </div>
                                    <small class="text-muted">Putar suara saat notifikasi muncul</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Volume Suara:</label>
                                    <input type="range" class="form-range" id="sound_volume" min="0" max="100" value="50">
                                    <small class="text-muted">Volume: <span id="volume_value">50</span>%</small>
                                </div>
                            </div>
                        </div>

                        <!-- Tombol Submit -->
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="fas fa-save me-2"></i>Simpan Pengaturan
                            </button>
                            <a href="{{ route('userdash') }}" class="btn btn-secondary px-4 ms-2">
                                <i class="fas fa-arrow-left me-2"></i>Kembali
                            </a>
                        </div>
                    </form>

                    <!-- Tombol Test Alert -->
                    <hr class="my-4">
                    <div class="text-center">
                        <h6 class="mb-3">Test Alert</h6>
                        <p class="text-muted mb-3">Klik tombol di bawah untuk mencoba notifikasi alert</p>
                        <button type="button" class="btn btn-warning px-4" onclick="testAlert()">
                            <i class="fas fa-bell me-2"></i>Test Alert Sekarang
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function testAlert() {
    // Test alert menggunakan AJAX
    fetch('{{ route("user.alert-settings.test") }}')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showTestAlert(data.alert);
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat test alert');
    });
}

function showTestAlert(alert) {
    const container = document.getElementById('alert-container');
    const alertHtml = `
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fas fa-bell me-2"></i>
            <strong>TEST - ${alert.nama}:</strong> ${alert.alert_text}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    container.innerHTML = alertHtml;
    container.style.display = 'block';
    
    // Putar suara test
    playTestSound();
    
    // Auto hide setelah 5 detik
    setTimeout(() => {
        container.style.display = 'none';
    }, 5000);
}

// Kontrol volume suara
document.addEventListener('DOMContentLoaded', function() {
    const volumeSlider = document.getElementById('sound_volume');
    const volumeValue = document.getElementById('volume_value');
    const soundEnabled = document.getElementById('sound_enabled');
    
    if (volumeSlider) {
        volumeSlider.addEventListener('input', function() {
            volumeValue.textContent = this.value;
            localStorage.setItem('notification_volume', this.value / 100);
        });
        
        // Load volume dari localStorage
        const savedVolume = localStorage.getItem('notification_volume');
        if (savedVolume) {
            volumeSlider.value = savedVolume * 100;
            volumeValue.textContent = volumeSlider.value;
        }
    }
    
    if (soundEnabled) {
        soundEnabled.addEventListener('change', function() {
            localStorage.setItem('notification_sound_enabled', this.checked);
        });
        
        // Load setting dari localStorage
        const savedSoundEnabled = localStorage.getItem('notification_sound_enabled');
        if (savedSoundEnabled !== null) {
            soundEnabled.checked = savedSoundEnabled === 'true';
        }
    }
});

function playTestSound() {
    const soundEnabled = document.getElementById('sound_enabled');
    const volumeSlider = document.getElementById('sound_volume');
    
    if (soundEnabled && soundEnabled.checked) {
        try {
            const audio = new Audio('{{ asset("audio/notification.mp3") }}');
            const volume = volumeSlider ? volumeSlider.value / 100 : 0.5;
            audio.volume = volume;
            audio.play().catch(e => {
                console.log('Audio tidak bisa diputar:', e);
            });
        } catch (error) {
            console.log('Error memutar audio:', error);
        }
    }
}
</script>
@endsection