@extends('layouts.montir')
@section('title', 'Foto & Video Eksterior')

@section('content')
<form method="POST"
      action="{{ route('montir.inspection.eksterior.store', $inspeksi->id) }}"
      enctype="multipart/form-data"
      id="eksteriorForm">
@csrf

<div class="max-w-md mx-auto px-4 pb-44 space-y-6">

    <!-- HEADER -->
    <div class="pt-4">
        <p class="text-amber-700 font-bold text-xl">3/20</p>
        <h1 class="text-2xl font-bold text-gray-900">Foto & Video Eksterior</h1>
        <p class="text-gray-600 text-sm">Foto wajib (max 25), video opsional</p>
    </div>

    <!-- ACTION -->
    <div class="grid grid-cols-2 gap-3">
        <button type="button" onclick="openCamera('photo')"
            class="bg-amber-700 text-white py-3 rounded-xl font-medium">
            Kamera
        </button>

        <button type="button" onclick="openCamera('video')"
            class="bg-amber-600 text-white py-3 rounded-xl font-medium">
            Video
        </button>
    </div>

    <!-- CAMERA -->
    <div class="bg-white rounded-xl shadow p-3 space-y-2">
        <video id="camera"
               autoplay playsinline
               class="w-full aspect-video rounded-lg bg-black hidden"></video>

        <button type="button" id="captureBtn"
            onclick="capturePhoto()"
            class="hidden w-full bg-amber-800 text-white py-2 rounded-lg text-sm font-semibold">
            Ambil Foto
        </button>

        <button type="button" id="recordBtn"
            onclick="toggleRecording()"
            class="hidden w-full bg-amber-900 text-white py-2 rounded-lg text-sm font-semibold">
            Mulai Rekam
        </button>
    </div>

    <!-- FOTO GRID -->
    <div id="photoList" class="grid grid-cols-3 gap-2"></div>

    <!-- SUMMARY -->
    <div id="summaryBox"
         class="hidden bg-red-50 border border-red-200 rounded-xl p-3">
        <h3 class="font-bold text-red-700 mb-2">⚠️ Foto Perlu Perhatian</h3>
        <ul id="summaryList" class="text-sm text-red-800 space-y-1"></ul>
    </div>

    <!-- VIDEO -->
    <div class="bg-white rounded-xl shadow p-2">
        <p class="text-sm font-medium mb-1">Preview Video</p>
        <video id="videoPreview"
               controls
               class="w-full aspect-video rounded bg-gray-100 hidden"></video>
        <p id="videoEmpty" class="text-xs text-gray-400 text-center">
            Belum ada video
        </p>
    </div>

    <!-- INPUT FILE (WAJIB) -->
    <input type="file" name="foto[]" id="fotoInput" multiple hidden>
    <input type="file" name="video" id="videoInput" hidden>

</div>

<!-- MODAL FOTO -->
<div id="photoModal"
     class="fixed inset-0 bg-black/70 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-2xl max-w-sm w-full mx-4 p-4 space-y-4">

        <img id="modalImage"
             class="w-full rounded-xl object-contain max-h-[60vh]">

        <label class="flex items-center gap-2 font-semibold">
            <input type="checkbox" id="modalAttention"
                   class="w-5 h-5 text-amber-600">
            Perlu Perhatian
        </label>

        <textarea id="modalNote"
                  rows="3"
                  placeholder="Keterangan..."
                  class="w-full rounded-xl border px-3 py-2 text-sm"></textarea>

        <div class="grid grid-cols-3 gap-2">
            <button type="button" onclick="closeModal()"
                class="bg-gray-200 py-2 rounded-xl font-semibold">
                Batal
            </button>

            <button type="button" onclick="deletePhoto()"
                class="bg-red-600 text-white py-2 rounded-xl font-semibold">
                Hapus
            </button>

            <button type="button" onclick="saveModal()"
                class="bg-amber-700 text-white py-2 rounded-xl font-semibold">
                Simpan
            </button>
        </div>
    </div>
</div>

<!-- BOTTOM NAV -->
<div class="fixed bottom-0 left-0 right-0 bg-white border-t z-50">
    <div class="max-w-md mx-auto grid grid-cols-2 gap-3 px-4 py-3">
        <a href="{{ route('montir.inspection.general', $inspeksi->id) }}"
           class="bg-amber-500 text-white py-3 rounded-xl font-medium text-center">
            Back
        </a>

        <button type="submit"
            class="bg-amber-700 text-white py-3 rounded-xl font-medium">
            Next
        </button>
    </div>
</div>
</form>

<script>
/* ================= STATE ================= */
let stream=null, recorder=null, chunks=[];
let photos=[], meta=[], activeIndex=null;

const camera = document.getElementById('camera');

/* ================= CAMERA ================= */
async function openCamera(type){
    camera.classList.remove('hidden');
    captureBtn.classList.toggle('hidden', type!=='photo');
    recordBtn.classList.toggle('hidden', type!=='video');

    stream = await navigator.mediaDevices.getUserMedia({
        video:{facingMode:'environment'},
        audio:type==='video'
    });
    camera.srcObject = stream;
}
function stopCamera(){
    if(stream) stream.getTracks().forEach(t=>t.stop());
}

/* ================= PHOTO ================= */
function capturePhoto(){
    if(photos.length >= 25){
        alert('Maksimal 25 foto');
        return;
    }

    const c=document.createElement('canvas');
    c.width=camera.videoWidth;
    c.height=camera.videoHeight;
    c.getContext('2d').drawImage(camera,0,0);

    c.toBlob(blob=>{
        const file = new File(
            [blob],
            `eksterior_${Date.now()}.jpg`,
            { type:'image/jpeg' }
        );

        photos.push(file);
        meta.push({attention:false,note:''});
        renderPhotos();
        renderSummary();
        injectHiddenInputs();
    },'image/jpeg',0.85);

    stopCamera();
}

/* ================= RENDER ================= */
function renderPhotos(){
    photoList.innerHTML='';
    const dt=new DataTransfer();

    photos.forEach((file,i)=>{
        dt.items.add(file);

        const img=document.createElement('img');
        img.src=URL.createObjectURL(file);
        img.className=`
            aspect-square object-cover rounded-lg cursor-pointer
            ${meta[i].attention?'ring-2 ring-red-500':''}
        `;
        img.onclick=()=>openModal(i);
        photoList.appendChild(img);
    });

    fotoInput.files = dt.files;
}

/* ================= MODAL ================= */
function openModal(i){
    activeIndex=i;
    modalImage.src=URL.createObjectURL(photos[i]);
    modalAttention.checked=meta[i].attention;
    modalNote.value=meta[i].note;
    photoModal.classList.remove('hidden');
    photoModal.classList.add('flex');
}
function closeModal(){
    photoModal.classList.add('hidden');
}
function saveModal(){
    meta[activeIndex]={
        attention:modalAttention.checked,
        note:modalNote.value
    };
    renderPhotos();
    renderSummary();
    injectHiddenInputs();
    closeModal();
}
function deletePhoto(){
    photos.splice(activeIndex,1);
    meta.splice(activeIndex,1);
    renderPhotos();
    renderSummary();
    injectHiddenInputs();
    closeModal();
}

/* ================= SUMMARY ================= */
function renderSummary(){
    summaryList.innerHTML='';
    const list=meta.filter(m=>m.attention);
    if(list.length===0){
        summaryBox.classList.add('hidden');
        return;
    }
    summaryBox.classList.remove('hidden');
    meta.forEach((m,i)=>{
        if(m.attention){
            summaryList.innerHTML+=`
                <li>Foto ${i+1}: ${m.note||'-'}</li>
            `;
        }
    });
}

/* ================= HIDDEN INPUT ================= */
function injectHiddenInputs(){
    document.querySelectorAll('.meta-input').forEach(e=>e.remove());

    meta.forEach((m,i)=>{
        if(m.attention){
            eksteriorForm.insertAdjacentHTML('beforeend',`
                <input type="hidden" class="meta-input"
                       name="perhatian[${i}][checked]" value="1">
                <input type="hidden" class="meta-input"
                       name="perhatian[${i}][note]"
                       value="${m.note}">
            `);
        }
    });
}

/* ================= VIDEO ================= */
function toggleRecording(){
    if(!recorder || recorder.state==='inactive'){
        chunks=[];
        recorder=new MediaRecorder(stream);
        recorder.ondataavailable=e=>chunks.push(e.data);
        recorder.onstop=()=>{
            const blob=new Blob(chunks,{type:'video/webm'});
            const file=new File([blob],'eksterior.webm',{type:'video/webm'});

            const dt=new DataTransfer();
            dt.items.add(file);
            videoInput.files=dt.files;

            videoPreview.src=URL.createObjectURL(blob);
            videoPreview.classList.remove('hidden');
            videoEmpty.classList.add('hidden');
        };
        recorder.start();
        recordBtn.innerText='Stop Rekam';
    } else {
        recorder.stop();
        recordBtn.innerText='Mulai Rekam';
        stopCamera();
    }
}
</script>
@endsection