@extends('layouts.montir')

@section('title', 'Foto Interior')

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

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

    <!-- HEADER -->
    <div class="pt-4">
        <p class="text-amber-700 font-bold text-xl">4/20</p>
        <h1 class="text-2xl font-bold text-gray-900">Foto & Video Interior</h1>
        <p class="text-gray-600 text-sm">
            Dokumentasi interior (multi foto)
        </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">
            Foto
        </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>

    <!-- COUNTER -->
    <p class="text-sm text-gray-600">
        Total Foto: <span id="count">0</span>
    </p>

    <!-- FOTO GRID -->
    <div id="photoPreview" class="grid grid-cols-3 gap-2"></div>
    <input type="file" id="fotoInput" name="foto[]" multiple hidden>

    <!-- SUMMARY -->
    <div id="summaryBox"
        class="bg-red-50 border border-red-200 rounded-xl p-3 hidden">
        <h3 class="font-bold text-red-700 mb-2">
            ⚠️ Foto Interior Perlu Perhatian
        </h3>
        <ul id="summaryList"
            class="text-sm text-red-800 space-y-1"></ul>
    </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.eksterior', $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>

<!-- MODAL -->
<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="modalPerhatian"
                   class="w-5 h-5 text-amber-600">
            Perlu Perhatian
        </label>

        <textarea id="modalNote"
                  rows="3"
                  placeholder="Catatan interior..."
                  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">
                Tutup
            </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>

<!-- SCRIPT -->
<script>
/* ===== GLOBAL ===== */
let stream = null;
let recorder = null;
let chunks = [];

let photos = [];
let meta = [];
let 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());
        stream=null;
    }
}

/* ===== PHOTO ===== */
function capturePhoto(){
    const canvas = document.createElement('canvas');
    canvas.width = camera.videoWidth;
    canvas.height = camera.videoHeight;
    canvas.getContext('2d').drawImage(camera,0,0);

    canvas.toBlob(blob=>{
        photos.push(new File([blob], `interior_${Date.now()}.jpg`, {type:'image/jpeg'}));
        meta.push({ perhatian:false, note:'' });

        renderPhotos();
        renderSummary();
    },'image/jpeg',0.85);

    stopCamera();
}

/* ===== RENDER ===== */
function renderPhotos(){
    photoPreview.innerHTML='';
    count.innerText=photos.length;

    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].perhatian?'ring-2 ring-red-500':''}
        `;
        img.onclick=()=>openModal(i);
        photoPreview.appendChild(img);
    });

    fotoInput.files=dt.files;
    injectHiddenInputs();
}

/* ===== MODAL ===== */
function openModal(i){
    activeIndex=i;
    modalImage.src=URL.createObjectURL(photos[i]);
    modalPerhatian.checked=meta[i].perhatian;
    modalNote.value=meta[i].note;
    photoModal.classList.remove('hidden');
    photoModal.classList.add('flex');
}

function closeModal(){
    photoModal.classList.add('hidden');
}

function saveModal(){
    meta[activeIndex]={
        perhatian:modalPerhatian.checked,
        note:modalNote.value
    };
    renderPhotos();
    renderSummary();
    closeModal();
}

function deletePhoto(){
    if(!confirm('Hapus foto ini?')) return;
    photos.splice(activeIndex,1);
    meta.splice(activeIndex,1);
    renderPhotos();
    renderSummary();
    closeModal();
}

/* ===== SUMMARY ===== */
function renderSummary(){
    summaryList.innerHTML='';
    if(!meta.some(m=>m.perhatian)){
        summaryBox.classList.add('hidden');
        return;
    }

    summaryBox.classList.remove('hidden');
    meta.forEach((m,i)=>{
        if(m.perhatian){
            summaryList.innerHTML+=
                `<li>Foto ${i+1}: ${m.note||'-'}</li>`;
        }
    });
}

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

    meta.forEach((m,i)=>{
        if(m.perhatian){
            interiorForm.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], 'interior.webm', { type: 'video/webm' });
            
            const dt = new DataTransfer();
            dt.items.add(file);
            
            const input = document.createElement('input');
            input.type = 'file';
            input.name = 'video';
            input.hidden = true;
            input.files = dt.files;
            interiorForm.appendChild(input);
        };
        recorder.start();
        recordBtn.innerText='Stop Rekam';
    } else {
        recorder.stop();
        recordBtn.innerText='Mulai Rekam';
        stopCamera();
    }
}
</script>
@endsection