@extends('layouts.montir')

@section('title', 'Cek Rutin Alat')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8 pb-32">

    <!-- HEADER -->
    <div class="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl shadow-lg p-6 text-white mb-8">
        <h1 class="text-3xl font-bold">Cek Rutin Alat</h1>
        <p class="mt-2 text-white/90">
            Lakukan pengecekan alat sebelum bekerja. Pemeriksaan ini <span class="font-bold underline">WAJIB</span>.
        </p>
    </div>

    <!-- Alert Success/Error -->
    @if(session('success'))
    <div class="bg-green-50 border-l-4 border-green-500 text-green-700 p-4 rounded-lg mb-6">
        <p class="font-semibold">{{ session('success') }}</p>
    </div>
    @endif

    @if(session('error'))
    <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-lg mb-6">
        <p class="font-semibold">{{ session('error') }}</p>
    </div>
    @endif

    @if($errors->any())
    <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-lg mb-6">
        <p class="font-semibold mb-2">Terdapat kesalahan:</p>
        <ul class="list-disc ml-5 text-sm space-y-1">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ route('montir.cek-rutin-alat.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf

        @php
            $alatList = [
                ['id' => 1, 'nama' => 'Pengukur Ketebalan Cat Mobil'],
                ['id' => 2, 'nama' => 'Tester Baterai'],
                ['id' => 3, 'nama' => 'OBD Scanner'],
                ['id' => 4, 'nama' => 'Thermo AC'],
                ['id' => 5, 'nama' => 'Stetoskop Mesin'],
                ['id' => 6, 'nama' => 'Senter UV'],
                ['id' => 7, 'nama' => 'Tang'],
            ];
        @endphp

        @foreach($alatList as $index => $alat)
        <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">

            <!-- Header -->
            <div class="flex items-center justify-between mb-5 pb-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-800">
                    {{ $index + 1 }}. {{ $alat['nama'] }}
                </h2>
                <span class="text-xs font-semibold bg-red-100 text-red-700 px-3 py-1 rounded-full">
                    WAJIB
                </span>
            </div>

            <!-- Kondisi -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-3">Kondisi Alat</label>
                <div class="grid grid-cols-2 gap-4">
                    <label class="relative cursor-pointer">
                        <input type="radio" 
                               name="alat[{{ $alat['id'] }}][kondisi]" 
                               value="baik" 
                               class="peer sr-only" 
                               required
                               {{ old('alat.'.$alat['id'].'.kondisi') == 'baik' ? 'checked' : '' }}>
                        <div class="border-2 border-gray-300 rounded-lg py-3 text-center font-semibold text-gray-700
                                    peer-checked:border-green-600 peer-checked:bg-green-50 peer-checked:text-green-700
                                    hover:border-green-400 transition-all">
                            Baik
                        </div>
                    </label>

                    <label class="relative cursor-pointer">
                        <input type="radio" 
                               name="alat[{{ $alat['id'] }}][kondisi]" 
                               value="rusak" 
                               class="peer sr-only"
                               {{ old('alat.'.$alat['id'].'.kondisi') == 'rusak' ? 'checked' : '' }}>
                        <div class="border-2 border-gray-300 rounded-lg py-3 text-center font-semibold text-gray-700
                                    peer-checked:border-red-600 peer-checked:bg-red-50 peer-checked:text-red-700
                                    hover:border-red-400 transition-all">
                            Rusak
                        </div>
                    </label>
                </div>
            </div>

            <!-- Upload Foto -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-3">Upload Foto</label>
                
                <div class="grid grid-cols-2 gap-3">
                    <!-- Buka Kamera -->
                    <button type="button"
                            onclick="openCamera({{ $alat['id'] }})"
                            class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-semibold transition-colors">
                        Buka Kamera
                    </button>

                    <!-- Upload dari Galeri -->
                    <label for="foto-upload-{{ $alat['id'] }}" 
                           class="bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-semibold cursor-pointer transition-colors text-center">
                        Pilih dari Galeri
                    </label>
                    <input type="file" 
                           accept="image/*" 
                           multiple
                           id="foto-upload-{{ $alat['id'] }}" 
                           class="hidden"
                           onchange="handleFileUpload(event, {{ $alat['id'] }})">
                </div>

                <!-- Preview Container -->
                <div id="preview-container-{{ $alat['id'] }}" class="mt-4 grid grid-cols-3 gap-3"></div>

                <!-- Hidden inputs untuk menyimpan data foto -->
                <div id="photo-data-{{ $alat['id'] }}" class="hidden"></div>
            </div>

            <!-- Upload Video -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-3">Upload Video (Opsional)</label>
                
                <div class="grid grid-cols-2 gap-3">
                    <!-- Rekam Video -->
                    <button type="button"
                            onclick="openVideoCamera({{ $alat['id'] }})"
                            class="bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-semibold transition-colors">
                        Rekam Video
                    </button>

                    <!-- Upload Video -->
                    <label for="video-upload-{{ $alat['id'] }}" 
                           class="bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-semibold cursor-pointer transition-colors text-center">
                        Pilih Video
                    </label>
                    <input type="file" 
                           accept="video/*" 
                           id="video-upload-{{ $alat['id'] }}" 
                           name="alat[{{ $alat['id'] }}][video]"
                           class="hidden"
                           onchange="previewVideo(event, {{ $alat['id'] }})">
                </div>

                <!-- Video Preview -->
                <div id="video-preview-{{ $alat['id'] }}" class="mt-4"></div>
            </div>

            <!-- Catatan -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Catatan (Opsional)</label>
                <textarea name="alat[{{ $alat['id'] }}][catatan]"
                          rows="3"
                          placeholder="Tulis catatan tambahan tentang kondisi alat..."
                          class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none">{{ old('alat.'.$alat['id'].'.catatan') }}</textarea>
            </div>

        </div>
        @endforeach

        <!-- Submit Button -->
        <div class="sticky bottom-0 bg-white py-4 border-t border-gray-200">
            <button type="submit" 
                    class="w-full bg-orange-600 hover:bg-orange-700 text-white py-4 px-6 rounded-xl font-bold text-lg shadow-lg hover:shadow-xl transition-all">
                Simpan Pemeriksaan
            </button>
        </div>
    </form>

</div>

<!-- Modal Kamera -->
<div id="cameraModal" class="hidden fixed inset-0 bg-black bg-opacity-95 z-50 flex items-center justify-center p-4">
    <div class="w-full max-w-2xl">
        <!-- Camera Controls -->
        <div class="bg-white rounded-t-2xl px-6 py-4">
            <div class="flex justify-between items-center">
                <h3 class="text-xl font-bold text-gray-800">Ambil Foto</h3>
                <button onclick="closeCameraModal()" class="text-gray-500 hover:text-gray-700 text-2xl font-bold">
                    &times;
                </button>
            </div>
        </div>

        <!-- Camera Preview -->
        <div class="bg-black relative">
            <video id="cameraPreview" autoplay playsinline class="w-full aspect-video object-cover"></video>
            
            <!-- Flash Toggle -->
            <button id="flashToggle" 
                    onclick="toggleFlash()" 
                    class="absolute top-4 right-4 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70 transition-opacity">
                <span id="flashIcon">⚡</span>
            </button>

            <!-- Capture Button -->
            <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2">
                <button onclick="capturePhoto()" 
                        class="bg-white w-16 h-16 rounded-full border-4 border-gray-300 hover:border-blue-500 transition-all shadow-lg">
                </button>
            </div>
        </div>

        <!-- Camera Footer -->
        <div class="bg-white rounded-b-2xl px-6 py-4">
            <p class="text-sm text-gray-600 text-center">Klik tombol putih untuk mengambil foto</p>
        </div>
    </div>
</div>

<!-- Modal Video Recorder -->
<div id="videoModal" class="hidden fixed inset-0 bg-black bg-opacity-95 z-50 flex items-center justify-center p-4">
    <div class="w-full max-w-2xl">
        <!-- Video Controls -->
        <div class="bg-white rounded-t-2xl px-6 py-4">
            <div class="flex justify-between items-center">
                <h3 class="text-xl font-bold text-gray-800">Rekam Video</h3>
                <button onclick="closeVideoModal()" class="text-gray-500 hover:text-gray-700 text-2xl font-bold">
                    &times;
                </button>
            </div>
        </div>

        <!-- Video Preview -->
        <div class="bg-black relative">
            <video id="videoPreview" autoplay playsinline class="w-full aspect-video object-cover"></video>
            
            <!-- Recording Indicator -->
            <div id="recordingIndicator" class="hidden absolute top-4 left-4 flex items-center bg-red-600 text-white px-3 py-2 rounded-full">
                <span class="w-3 h-3 bg-white rounded-full mr-2 animate-pulse"></span>
                <span id="recordingTime">00:00</span>
            </div>

            <!-- Record Button -->
            <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2">
                <button id="recordButton" 
                        onclick="toggleRecording()" 
                        class="bg-red-600 w-16 h-16 rounded-full border-4 border-white hover:bg-red-700 transition-all shadow-lg">
                </button>
            </div>
        </div>

        <!-- Video Footer -->
        <div class="bg-white rounded-b-2xl px-6 py-4">
            <p class="text-sm text-gray-600 text-center" id="videoInstruction">Klik tombol merah untuk mulai merekam</p>
        </div>
    </div>
</div>

<!-- Modal Preview Foto -->
<div id="photoModal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <!-- Modal Header -->
        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center rounded-t-2xl">
            <h3 class="text-xl font-bold text-gray-800" id="modalTitle">Preview Foto</h3>
            <button onclick="closePhotoModal()" class="text-gray-500 hover:text-gray-700 text-2xl font-bold">
                &times;
            </button>
        </div>

        <!-- Modal Body -->
        <div class="p-6">
            <!-- Image Preview -->
            <div class="mb-6">
                <img id="modalImage" src="" alt="Preview" class="w-full rounded-lg shadow-lg">
            </div>

            <!-- Perlu Perhatian Checkbox -->
            <div class="mb-4">
                <label class="flex items-center space-x-3 cursor-pointer">
                    <input type="checkbox" 
                           id="modalCheckbox" 
                           class="w-5 h-5 text-orange-600 border-gray-300 rounded focus:ring-orange-500">
                    <span class="text-sm font-semibold text-gray-700">Perlu Perhatian Khusus</span>
                </label>
            </div>

            <!-- Keterangan -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Keterangan</label>
                <textarea id="modalKeterangan" 
                          rows="3" 
                          placeholder="Tulis keterangan untuk foto ini..."
                          class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none"></textarea>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="sticky bottom-0 bg-gray-50 px-6 py-4 flex gap-3 border-t border-gray-200 rounded-b-2xl">
            <button onclick="closePhotoModal()" 
                    class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-3 px-4 rounded-lg font-semibold transition-colors">
                Batal
            </button>
            <button onclick="savePhotoData()" 
                    class="flex-1 bg-orange-600 hover:bg-orange-700 text-white py-3 px-4 rounded-lg font-semibold transition-colors">
                Simpan
            </button>
        </div>
    </div>
</div>

<!-- Ringkasan di Akhir -->
<div class="max-w-4xl mx-auto px-4 pb-8">
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <h3 class="text-lg font-bold text-blue-900 mb-4">Keterangan Foto yang Perlu Perhatian</h3>
        <div id="summary-container" class="space-y-3">
            <p class="text-sm text-gray-600 italic">Belum ada foto yang ditandai perlu perhatian</p>
        </div>
    </div>
</div>

@push('scripts')
<script>
let currentPhotoData = {};
let currentAlatId = null;
let currentPhotoIndex = null;
let cameraStream = null;
let videoStream = null;
let mediaRecorder = null;
let recordedChunks = [];
let flashEnabled = false;
let recordingTime = 0;
let recordingInterval = null;

// ==================== CAMERA FUNCTIONS ====================

async function openCamera(alatId) {
    currentAlatId = alatId;
    
    try {
        // Request camera access with flash support
        cameraStream = await navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: 'environment', // Use back camera
                width: { ideal: 1920 },
                height: { ideal: 1080 }
            }
        });

        const video = document.getElementById('cameraPreview');
        video.srcObject = cameraStream;
        
        // Check if flash is supported
        const track = cameraStream.getVideoTracks()[0];
        const capabilities = track.getCapabilities();
        
        if (capabilities.torch) {
            document.getElementById('flashToggle').classList.remove('hidden');
        } else {
            document.getElementById('flashToggle').classList.add('hidden');
        }

        document.getElementById('cameraModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    } catch (error) {
        console.error('Error accessing camera:', error);
        alert('Tidak dapat mengakses kamera. Pastikan izin kamera sudah diberikan.');
    }
}

function closeCameraModal() {
    if (cameraStream) {
        cameraStream.getTracks().forEach(track => track.stop());
        cameraStream = null;
    }
    
    if (flashEnabled) {
        flashEnabled = false;
        updateFlashIcon();
    }

    document.getElementById('cameraModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

async function toggleFlash() {
    if (!cameraStream) return;

    const track = cameraStream.getVideoTracks()[0];
    const capabilities = track.getCapabilities();

    if (capabilities.torch) {
        flashEnabled = !flashEnabled;
        
        try {
            await track.applyConstraints({
                advanced: [{ torch: flashEnabled }]
            });
            updateFlashIcon();
        } catch (error) {
            console.error('Error toggling flash:', error);
        }
    }
}

function updateFlashIcon() {
    const icon = document.getElementById('flashIcon');
    icon.textContent = flashEnabled ? '⚡' : '🔦';
}

function capturePhoto() {
    const video = document.getElementById('cameraPreview');
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0);
    
    canvas.toBlob((blob) => {
        const file = new File([blob], `photo-${Date.now()}.jpg`, { type: 'image/jpeg' });
        addPhotoToGallery(currentAlatId, file, canvas.toDataURL('image/jpeg'));
        closeCameraModal();
    }, 'image/jpeg', 0.9);
}

// ==================== VIDEO FUNCTIONS ====================

async function openVideoCamera(alatId) {
    currentAlatId = alatId;
    
    try {
        videoStream = await navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: 'environment',
                width: { ideal: 1920 },
                height: { ideal: 1080 }
            },
            audio: true
        });

        const video = document.getElementById('videoPreview');
        video.srcObject = videoStream;
        
        document.getElementById('videoModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    } catch (error) {
        console.error('Error accessing video camera:', error);
        alert('Tidak dapat mengakses kamera. Pastikan izin kamera dan mikrofon sudah diberikan.');
    }
}

function closeVideoModal() {
    if (videoStream) {
        videoStream.getTracks().forEach(track => track.stop());
        videoStream = null;
    }
    
    if (recordingInterval) {
        clearInterval(recordingInterval);
        recordingInterval = null;
    }

    document.getElementById('videoModal').classList.add('hidden');
    document.getElementById('recordingIndicator').classList.add('hidden');
    document.getElementById('recordButton').classList.remove('bg-white', 'w-12', 'h-12');
    document.getElementById('recordButton').classList.add('bg-red-600', 'w-16', 'h-16');
    document.getElementById('videoInstruction').textContent = 'Klik tombol merah untuk mulai merekam';
    recordingTime = 0;
    document.body.style.overflow = 'auto';
}

function toggleRecording() {
    if (mediaRecorder && mediaRecorder.state === 'recording') {
        stopRecording();
    } else {
        startRecording();
    }
}

function startRecording() {
    recordedChunks = [];
    mediaRecorder = new MediaRecorder(videoStream, {
        mimeType: 'video/webm;codecs=vp9'
    });

    mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };

    mediaRecorder.onstop = () => {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        const file = new File([blob], `video-${Date.now()}.webm`, { type: 'video/webm' });
        
        // Set video to form
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        document.getElementById(`video-upload-${currentAlatId}`).files = dataTransfer.files;
        
        // Preview video
        previewVideoFile(file, currentAlatId);
        
        closeVideoModal();
    };

    mediaRecorder.start();
    
    // Update UI
    document.getElementById('recordingIndicator').classList.remove('hidden');
    document.getElementById('recordButton').classList.remove('bg-red-600', 'w-16', 'h-16');
    document.getElementById('recordButton').classList.add('bg-white', 'w-12', 'h-12');
    document.getElementById('videoInstruction').textContent = 'Klik tombol putih untuk berhenti merekam';
    
    // Start timer
    recordingTime = 0;
    recordingInterval = setInterval(() => {
        recordingTime++;
        const minutes = Math.floor(recordingTime / 60).toString().padStart(2, '0');
        const seconds = (recordingTime % 60).toString().padStart(2, '0');
        document.getElementById('recordingTime').textContent = `${minutes}:${seconds}`;
    }, 1000);
}

function stopRecording() {
    if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.stop();
        clearInterval(recordingInterval);
    }
}

// ==================== PHOTO GALLERY FUNCTIONS ====================

function addPhotoToGallery(alatId, file, dataUrl) {
    if (!currentPhotoData[alatId]) {
        currentPhotoData[alatId] = [];
    }

    const photoIndex = currentPhotoData[alatId].length;
    
    currentPhotoData[alatId].push({
        file: file,
        dataUrl: dataUrl,
        perluPerhatian: false,
        keterangan: ''
    });

    renderPhotoPreview(alatId);
}

function handleFileUpload(event, alatId) {
    const files = event.target.files;
    
    if (!currentPhotoData[alatId]) {
        currentPhotoData[alatId] = [];
    }

    Array.from(files).forEach((file) => {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            currentPhotoData[alatId].push({
                file: file,
                dataUrl: e.target.result,
                perluPerhatian: false,
                keterangan: ''
            });
            
            renderPhotoPreview(alatId);
        };
        
        reader.readAsDataURL(file);
    });
}

function renderPhotoPreview(alatId) {
    const container = document.getElementById(`preview-container-${alatId}`);
    container.innerHTML = '';
    
    currentPhotoData[alatId].forEach((photo, index) => {
        const wrapper = document.createElement('div');
        wrapper.className = 'relative group';
        wrapper.innerHTML = `
            <img src="${photo.dataUrl}" 
                 class="w-full aspect-square object-cover rounded-lg shadow cursor-pointer hover:opacity-90 transition-opacity"
                 onclick="openPhotoModal(${alatId}, ${index})">
            <button type="button"
                    onclick="deletePhoto(${alatId}, ${index})"
                    class="absolute top-2 right-2 bg-red-600 text-white w-8 h-8 rounded-full hover:bg-red-700 opacity-0 group-hover:opacity-100 transition-opacity font-bold">
                &times;
            </button>
            <div id="badge-${alatId}-${index}" class="${photo.perluPerhatian ? '' : 'hidden'} absolute top-2 left-2 bg-orange-600 text-white text-xs px-2 py-1 rounded-full font-semibold">
                Perhatian
            </div>
        `;
        container.appendChild(wrapper);
    });
}

function deletePhoto(alatId, photoIndex) {
    if (confirm('Hapus foto ini?')) {
        currentPhotoData[alatId].splice(photoIndex, 1);
        renderPhotoPreview(alatId);
        updateSummary();
    }
}

// ==================== PHOTO MODAL FUNCTIONS ====================

function openPhotoModal(alatId, photoIndex) {
    currentAlatId = alatId;
    currentPhotoIndex = photoIndex;
    
    const photoData = currentPhotoData[alatId][photoIndex];
    
    document.getElementById('modalImage').src = photoData.dataUrl;
    document.getElementById('modalCheckbox').checked = photoData.perluPerhatian;
    document.getElementById('modalKeterangan').value = photoData.keterangan || '';
    
    document.getElementById('photoModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closePhotoModal() {
    document.getElementById('photoModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

function savePhotoData() {
    const perluPerhatian = document.getElementById('modalCheckbox').checked;
    const keterangan = document.getElementById('modalKeterangan').value;
    
    currentPhotoData[currentAlatId][currentPhotoIndex].perluPerhatian = perluPerhatian;
    currentPhotoData[currentAlatId][currentPhotoIndex].keterangan = keterangan;
    
    // Update badge
    const badge = document.getElementById(`badge-${currentAlatId}-${currentPhotoIndex}`);
    if (perluPerhatian) {
        badge.classList.remove('hidden');
    } else {
        badge.classList.add('hidden');
    }
    
    updateSummary();
    closePhotoModal();
}

// ==================== VIDEO PREVIEW ====================

function previewVideo(event, alatId) {
    const file = event.target.files[0];
    if (file) {
        previewVideoFile(file, alatId);
    }
}

function previewVideoFile(file, alatId) {
    const container = document.getElementById(`video-preview-${alatId}`);
    const videoUrl = URL.createObjectURL(file);
    container.innerHTML = `
        <div class="relative">
            <video controls class="w-full rounded-lg shadow-lg">
                <source src="${videoUrl}" type="${file.type}">
            </video>
            <button type="button"
                    onclick="deleteVideo(${alatId})"
                    class="absolute top-2 right-2 bg-red-600 text-white px-3 py-2 rounded-lg hover:bg-red-700 font-semibold">
                Hapus Video
            </button>
        </div>
    `;
}

function deleteVideo(alatId) {
    if (confirm('Hapus video ini?')) {
        document.getElementById(`video-upload-${alatId}`).value = '';
        document.getElementById(`video-preview-${alatId}`).innerHTML = '';
    }
}

// ==================== SUMMARY ====================

function updateSummary() {
    const summaryContainer = document.getElementById('summary-container');
    summaryContainer.innerHTML = '';
    
    let hasAttention = false;
    
    @foreach($alatList as $alat)
    const alatId{{ $alat['id'] }} = {{ $alat['id'] }};
    if (currentPhotoData[alatId{{ $alat['id'] }}]) {
        currentPhotoData[alatId{{ $alat['id'] }}].forEach((photo, index) => {
            if (photo.perluPerhatian && photo.keterangan) {
                hasAttention = true;
                const item = document.createElement('div');
                item.className = 'bg-white border border-orange-200 rounded-lg p-3';
                item.innerHTML = `
                    <p class="font-semibold text-sm text-gray-800">{{ $alat['nama'] }} - Foto ${index + 1}</p>
                    <p class="text-sm text-gray-600 mt-1">${photo.keterangan}</p>
                `;
                summaryContainer.appendChild(item);
            }
        });
    }
    @endforeach
    
    if (!hasAttention) {
        summaryContainer.innerHTML = '<p class="text-sm text-gray-600 italic">Belum ada foto yang ditandai perlu perhatian</p>';
    }
}

// ==================== FORM SUBMISSION ====================

document.querySelector('form').addEventListener('submit', function(e) {
    // Convert photos to file inputs
    Object.keys(currentPhotoData).forEach(alatId => {
        const dataTransfer = new DataTransfer();
        const hiddenContainer = document.getElementById(`photo-data-${alatId}`);
        
        currentPhotoData[alatId].forEach((photo, index) => {
            // Add file to DataTransfer
            dataTransfer.items.add(photo.file);
            
            // Create hidden input for metadata
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = `alat[${alatId}][foto_data][${index}]`;
            input.value = JSON.stringify({
                perluPerhatian: photo.perluPerhatian,
                keterangan: photo.keterangan
            });
            hiddenContainer.appendChild(input);
        });
        
        // Create file input for actual files
        if (currentPhotoData[alatId].length > 0) {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.name = `alat[${alatId}][foto][]`;
            fileInput.multiple = true;
            fileInput.files = dataTransfer.files;
            fileInput.style.display = 'none';
            hiddenContainer.appendChild(fileInput);
        }
    });
});

// Close modals on ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeCameraModal();
        closeVideoModal();
        closePhotoModal();
    }
});
</script>
@endpush

@endsection