<div class="content" id="pelaporan" style="display: none">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1>Pelaporan Kerusakan</h1>
    </div>
    <form id="reportForm" action="submit_report.php" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="">Lokasi</label>
            <div class="d-flex flex-column" style="gap: 6px">
                <select id="division" name="division" required>
                    <option value="null">Pilih Afdeling</option>
                </select>
                <select id="block" name="block" required>
                    <option value="null">Pilih Blok</option>
                </select>
                <select id="kj" name="kj" class="form-control" required>
                    <option value="null">Pilih Tipe KJ</option>
                    <option value="KJ1">KJ1</option>
                    <option value="KJ2">KJ2</option>
                    <option value="KJ3">KJ3</option>
                    <option value="KJ4">KJ4</option>
                </select>
            </div>
        </div>
        
        <!-- New field: Waktu Temuan -->
        <div class="form-group">
            <label for="waktu_temuan">Waktu Temuan</label>
            <input 
                type="datetime-local" 
                id="waktu_temuan" 
                name="waktu_temuan" 
                class="form-control" 
                required>
        </div>
        
        <div class="form-group">
            <label for="classification">Klasifikasi Kubangan</label>
            <select id="classification" name="classification" class="form-control" required>
                <option value="Kecil">Kecil</option>
                <option value="Sedang">Sedang</option>
                <option value="Besar">Besar</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="damageType">Potensi Penyebab Kerusakan</label>
            <select id="damageType" name="damageType" required>
                <option value="null">Pilih Potensi Penyebab Kerusakan</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="mitigationPlan">Penanggulangan</label>
            <textarea
                id="mitigationPlan"
                name="mitigationPlan"
                class="form-control"
                rows="2"></textarea>
        </div>
        
        <div class="form-group">
            <label for="notes">Catatan</label>
            <textarea
                id="notes"
                name="notes"
                class="form-control"
                rows="4"></textarea>
        </div>
        
        <label for="">Dokumentasi</label>
        <div class="custom-file">
            <input
                type="file"
                id="initialPhoto"
                name="initialPhoto"
                class="custom-file-input"
                accept="image/*" />
            <label for="initialPhoto" class="custom-file-label">Upload Foto</label>
        </div>
        
        <button type="submit" class="btn btn-primary mt-4">Kirim Pelaporan</button>
    </form>
</div>

<script>
// Function to set current datetime
function setCurrentDateTime() {
    const now = new Date();
    // Adjust for timezone offset to get local time
    const offset = now.getTimezoneOffset() * 60000;
    const localTime = new Date(now.getTime() - offset);
    const currentDateTime = localTime.toISOString().slice(0, 16);
    
    const waktuTemuanField = document.getElementById('waktu_temuan');
    if (waktuTemuanField) {
        waktuTemuanField.value = currentDateTime;
        console.log('Waktu temuan set to:', currentDateTime);
    }
}

// Run when DOM is loaded
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setCurrentDateTime);
} else {
    setCurrentDateTime();
}

// Also run when the pelaporan section becomes visible
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const pelaporanDiv = document.getElementById('pelaporan');
            if (pelaporanDiv && pelaporanDiv.style.display !== 'none') {
                setTimeout(setCurrentDateTime, 100);
            }
        }
    });
});

// Start observing
const pelaporanDiv = document.getElementById('pelaporan');
if (pelaporanDiv) {
    observer.observe(pelaporanDiv, { attributes: true });
}
</script>
