@extends('layouts.montir')
@section('title', 'Foto General')

@section('content')

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

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

    <!-- HEADER -->
    <div class="pt-4">
        <p class="text-amber-700 font-bold text-2xl">2/20</p>
        <h1 class="text-2xl font-bold mt-2 text-gray-900">Foto General</h1>
        <p class="text-gray-600 mt-1">Multi foto wajib, video opsional</p>
    </div>

    @php
    $mediaList = [
        ['key'=>'depan','label'=>'Tampak Depan'],
        ['key'=>'kanan','label'=>'Samping Kanan'],
        ['key'=>'kiri','label'=>'Samping Kiri'],
        ['key'=>'belakang','label'=>'Tampak Belakang'],
    ];
    @endphp

    @foreach($mediaList as $media)
    <div class="space-y-4 border-b pb-6">

        <h2 class="font-semibold text-gray-800">{{ $media['label'] }}</h2>

        <!-- ACTION -->
        <div class="grid grid-cols-2 gap-3">
            <button type="button"
                onclick="openCamera('{{ $media['key'] }}','photo')"
                class="bg-amber-700 text-white py-3 rounded-xl font-medium">
                Ambil Foto
            </button>

            <button type="button"
                onclick="openCamera('{{ $media['key'] }}','video')"
                class="bg-amber-600 text-white py-3 rounded-xl font-medium">
                Rekam Video
            </button>
        </div>

        <!-- CAMERA -->
        <div class="bg-white rounded-2xl shadow p-4 space-y-3">
            <video id="camera-{{ $media['key'] }}"
                   autoplay playsinline
                   class="w-full aspect-video rounded-xl bg-black hidden"></video>

            <button type="button"
                id="capture-{{ $media['key'] }}"
                onclick="capturePhoto('{{ $media['key'] }}')"
                class="hidden w-full bg-amber-800 text-white py-2 rounded-xl font-semibold">
                Ambil Foto
            </button>

            <button type="button"
                id="record-{{ $media['key'] }}"
                onclick="toggleRecording('{{ $media['key'] }}')"
                class="hidden w-full bg-amber-900 text-white py-2 rounded-xl font-semibold">
                Mulai Rekam
            </button>
        </div>

        <!-- PREVIEW -->
        <div class="space-y-4">
            <div>
                <p class="text-sm font-medium mb-1">Preview Foto</p>
                <div id="photo-preview-{{ $media['key'] }}" class="grid grid-cols-2 gap-2"></div>
            </div>

            <div>
                <p class="text-sm font-medium mb-1">Preview Video</p>
                <div id="video-preview-{{ $media['key'] }}" class="grid grid-cols-1 gap-2"></div>
            </div>
        </div>

    </div>
    @endforeach
</div>

<!-- SUMMARY -->
<div class="max-w-md mx-auto px-4 mt-10">
    <div class="bg-red-50 border border-red-200 rounded-2xl p-4 space-y-3">
        <h3 class="text-lg font-bold text-red-700 text-center">
            Ringkasan Item Butuh Perhatian
        </h3>
        <div id="attention-summary" class="space-y-2 text-sm">
            <p class="text-gray-500 text-center">Belum ada item</p>
        </div>
    </div>
</div>

<!-- MODAL -->
<div id="attentionModal"
     class="fixed inset-0 bg-black/60 hidden z-50 flex items-center justify-center">
    <div class="bg-white w-[90%] max-w-sm rounded-2xl p-4 space-y-4">

        <h3 class="text-lg font-bold text-gray-800 text-center">
            Perhatian Khusus
        </h3>

        <label class="flex items-center gap-3">
            <input type="checkbox" id="modalAttentionCheck"
                   class="w-5 h-5 accent-red-600">
            <span class="font-medium text-red-600">
                Tandai butuh perhatian
            </span>
        </label>

        <textarea id="modalAttentionNote"
            rows="3"
            placeholder="Keterangan masalah..."
            class="w-full rounded-xl border-gray-300 text-sm"></textarea>

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

            <button type="button"
                onclick="saveAttention()"
                class="bg-red-600 text-white py-2 rounded-xl">
                Simpan
            </button>
        </div>
    </div>
</div>

<!-- NAV -->
<div class="fixed bottom-0 left-0 right-0 bg-white border-t z-40">
    <div class="max-w-md mx-auto grid grid-cols-2 gap-3 px-4 py-3">
        <a href="{{ route('montir.inspection.step1') }}"
           class="bg-amber-500 text-white py-3 rounded-xl text-center">
            Back
        </a>
        <button type="submit"
            class="bg-amber-700 text-white py-3 rounded-xl">
            Next
        </button>
    </div>
</div>

</form>

<script>
let streams = {}, recorders = {}, chunks = {};
let counters = {};
let currentMediaId = null;

/* ATTENTION INPUT */
function createAttentionInput(id) {
    if (document.getElementById(`attention-${id}`)) return;

    const a = document.createElement('input');
    a.type = 'hidden';
    a.name = `attention[${id}]`;
    a.id = `attention-${id}`;

    const n = document.createElement('input');
    n.type = 'hidden';
    n.name = `attention_note[${id}]`;
    n.id = `attention-note-${id}`;

    document.querySelector('form').append(a, n);
}

function openAttentionModal(id) {
    currentMediaId = id;

    const att = document.getElementById(`attention-${id}`);
    const note = document.getElementById(`attention-note-${id}`);

    document.getElementById('modalAttentionCheck').checked =
        att && att.value === '1';

    document.getElementById('modalAttentionNote').value =
        note ? note.value : '';

    document.getElementById('attentionModal').classList.remove('hidden');
}

function closeAttentionModal() {
    document.getElementById('attentionModal').classList.add('hidden');
    document.getElementById('modalAttentionCheck').checked = false;
    document.getElementById('modalAttentionNote').value = '';
    currentMediaId = null;
}

function saveAttention() {
    document.getElementById(`attention-${currentMediaId}`).value =
        document.getElementById('modalAttentionCheck').checked ? '1' : '';

    document.getElementById(`attention-note-${currentMediaId}`).value =
        document.getElementById('modalAttentionNote').value;

    const el = document.querySelector(`[onclick="openAttentionModal('${currentMediaId}')"]`);
    if (el) {
        el.classList.toggle(
            'ring-4 ring-red-500',
            document.getElementById(`attention-${currentMediaId}`).value === '1'
        );
    }

    updateSummary();
    closeAttentionModal();
}

function updateSummary() {
    const box = document.getElementById('attention-summary');
    box.innerHTML = '';
    let found = false;

    document.querySelectorAll('input[id^="attention-"]').forEach(att => {
        if (att.value === '1') {
            found = true;
            const id = att.id.replace('attention-','');
            const note = document.getElementById(`attention-note-${id}`).value;

            box.innerHTML += `
                <div class="bg-white border border-red-200 rounded-xl p-3">
                    <p class="font-semibold text-red-700">⚠ ${id}</p>
                    <p class="text-sm">${note || '-'}</p>
                </div>
            `;
        }
    });

    if (!found) {
        box.innerHTML = `<p class="text-gray-500 text-center">Belum ada item</p>`;
    }
}

/* CAMERA */
async function openCamera(key, type) {
    const video = document.getElementById(`camera-${key}`);
    const captureBtn = document.getElementById(`capture-${key}`);
    const recordBtn  = document.getElementById(`record-${key}`);

    video.classList.remove('hidden');
    captureBtn.classList.add('hidden');
    recordBtn.classList.add('hidden');

    streams[key] = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: "environment" },
        audio: type === 'video'
    });

    video.srcObject = streams[key];
    video.onloadedmetadata = () => video.play();

    type === 'photo'
        ? captureBtn.classList.remove('hidden')
        : recordBtn.classList.remove('hidden');
}

function capturePhoto(key) {
    counters[key] = (counters[key] || 0) + 1;
    const id = `${key}-photo-${counters[key]}`;

    const video = document.getElementById(`camera-${key}`);
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    canvas.toBlob(blob => {
        const id = `${key}-photo-${counters[key]}`;
        const file = new File([blob], `${id}.jpg`, { type: 'image/jpeg' });
        
        // Simpan ke hidden input agar bisa di-upload
        const dt = new DataTransfer();
        dt.items.add(file);
        
        const input = document.createElement('input');
        input.type = 'file';
        input.name = `foto[${key}]`; // Note: Controller expects foto[depan], etc.
        input.hidden = true;
        input.files = dt.files;
        document.querySelector('form').appendChild(input);

        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        img.className = 'rounded-xl shadow cursor-pointer';
        img.onclick = () => openAttentionModal(id);

        createAttentionInput(id);
        document.getElementById(`photo-preview-${key}`).appendChild(img);
    }, 'image/jpeg', 0.8);

    stopCamera(key);
}

function toggleRecording(key) {
    counters[key] = (counters[key] || 0) + 1;
    const id = `${key}-video-${counters[key]}`;

    chunks[key] = [];
    recorders[key] = new MediaRecorder(streams[key]);

    recorders[key].ondataavailable = e => chunks[key].push(e.data);
    recorders[key].onstop = () => {
        const blob = new Blob(chunks[key], { type: 'video/webm' });
        const file = new File([blob], `${id}.webm`, { type: 'video/webm' });

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

        const input = document.createElement('input');
        input.type = 'file';
        input.name = `video[${key}]`;
        input.hidden = true;
        input.files = dt.files;
        document.querySelector('form').appendChild(input);

        const v = document.createElement('video');
        v.src = URL.createObjectURL(blob);
        v.controls = true;
        v.className = 'rounded-xl shadow cursor-pointer';
        v.onclick = () => openAttentionModal(id);

        createAttentionInput(id);
        document.getElementById(`video-preview-${key}`).appendChild(v);
    };

    recorders[key].start();
    setTimeout(() => recorders[key].stop(), 5000);
}

function stopCamera(key) {
    if (streams[key]) streams[key].getTracks().forEach(t => t.stop());
    document.getElementById(`camera-${key}`).classList.add('hidden');
    document.getElementById(`capture-${key}`).classList.add('hidden');
    document.getElementById(`record-${key}`).classList.add('hidden');
}
</script>

@endsection