@extends('layouts.montir')

@section('title', 'Foto & Video Dokumen')

@section('content')

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

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

    <!-- STEP -->
    <div class="pt-4">
        <p class="text-amber-700 font-bold text-xl">9/20</p>
        <h1 class="text-2xl font-bold text-gray-900">Foto & Video Dokumen</h1>
        <p class="text-gray-600 text-sm">Foto wajib, 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">
            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>

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

    <!-- SUMMARY -->
    <div class="bg-white rounded-xl shadow p-3 text-sm space-y-1">
        <p>Total Foto: <b id="totalFoto">0</b></p>
        <p>Butuh Perhatian: <b id="perluPerhatian">0</b></p>
    </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 type="file" name="video" id="videoInput" hidden>

</div>

<!-- 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.alat', $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>

<!-- LOADER -->
<div id="photoLoader"
     class="fixed inset-0 bg-black/40 hidden z-50 flex items-center justify-center">
    <div class="bg-white px-6 py-4 rounded-xl flex items-center gap-3">
        <svg class="animate-spin h-6 w-6 text-amber-700"
             xmlns="http://www.w3.org/2000/svg"
             fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10"
                    stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8v4l3-3-3-3v4a12 12 0 00-12 12h4z"/>
        </svg>
        <span class="text-sm font-semibold">Memproses foto...</span>
    </div>
</div>

<!-- PHOTO MODAL -->
<div id="photoModal"
     class="fixed inset-0 bg-black/70 hidden z-50 flex items-center justify-center px-4">
    <div class="bg-white rounded-xl w-full max-w-md overflow-hidden">
        <img id="modalImage" class="w-full aspect-square object-cover">

        <div class="p-3 space-y-2">
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" id="modalAttention">
                Perlu Perhatian
            </label>

            <input type="text"
                   id="modalNote"
                   placeholder="Catatan"
                   class="w-full border rounded px-3 py-2 text-sm">

            <button type="button"
                    onclick="closeModal()"
                    class="w-full bg-gray-800 text-white py-2 rounded-lg text-sm">
                Tutup
            </button>
        </div>
    </div>
</div>

<script>
let stream, recorder, chunks = [];
let photoIndex = 0;
let videoTrack;
let activeCard = null;

/* OPEN 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;
    videoTrack = stream.getVideoTracks()[0];
}

/* CAPTURE PHOTO */
function capturePhoto(){
    if(photoIndex >= 25){
        alert('Maksimal 25 foto');
        return;
    }

    photoLoader.classList.remove('hidden');

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

    canvas.toBlob(blob=>{
        const dt = new DataTransfer();
        dt.items.add(new File([blob], `dokumen_${photoIndex}.jpg`, { type:'image/jpeg' }));

        const card = document.createElement('div');
        card.className = `relative aspect-square rounded-lg overflow-hidden border-2 border-transparent cursor-pointer`;
        card.innerHTML = `
            <img src="${URL.createObjectURL(blob)}" class="w-full h-full object-cover">
            <input type="file" name="foto[]" hidden>
            <input type="checkbox" name="perlu_perhatian[${photoIndex}]" hidden>
            <input type="text" name="catatan[${photoIndex}]" hidden>
        `;
        card.querySelector('input[type=file]').files = dt.files;
        card.onclick = () => openModal(card);

        photoList.appendChild(card);
        photoIndex++;

        updateSummary();
        photoLoader.classList.add('hidden');
    });

    stopCamera();
}

/* MODAL */
function openModal(card){
    activeCard = card;

    modalImage.src = card.querySelector('img').src;
    modalAttention.checked = card.querySelector('input[type=checkbox]').checked;
    modalNote.value = card.querySelector('input[type=text]').value;

    photoModal.classList.remove('hidden');
}

function closeModal(){
    if(!activeCard) return;

    const attention = activeCard.querySelector('input[type=checkbox]');
    const note = activeCard.querySelector('input[type=text]');

    attention.checked = modalAttention.checked;
    note.value = modalNote.value;

    activeCard.classList.toggle('border-amber-600', attention.checked);

    updateSummary();
    photoModal.classList.add('hidden');
    activeCard = null;
}

/* SUMMARY */
function updateSummary(){
    const cards = document.querySelectorAll('#photoList > div');
    let perhatian = 0;

    cards.forEach(c=>{
        if(c.querySelector('input[type=checkbox]').checked){
            perhatian++;
        }
    });

    totalFoto.innerText = cards.length;
    perluPerhatian.innerText = perhatian;
}

/* 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'});
            videoPreview.src = URL.createObjectURL(blob);
            videoPreview.classList.remove('hidden');
            videoEmpty.classList.add('hidden');

            const dt = new DataTransfer();
            dt.items.add(new File([blob],'dokumen.webm',{type:'video/webm'}));
            videoInput.files = dt.files;
        };

        recorder.start();
        recordBtn.innerText = 'Stop Rekam';
    }else{
        recorder.stop();
        recordBtn.innerText = 'Mulai Rekam';
        stopCamera();
    }
}

/* STOP */
function stopCamera(){
    if(stream) stream.getTracks().forEach(t=>t.stop());
}
</script>
@endsection