@{
    Layout = "~/Views/Admin/Transport/SpjDriverUpst/Shared/_Layout.cshtml";
    ViewData["Title"] = "Detail Penjemputan";
}

<div class="w-full lg:max-w-sm mx-auto min-h-screen bg-gray-50 pb-24">
    <div class="bg-upst text-white px-6 pt-8 pb-16 rounded-b-[40px] shadow-lg relative">
        <div class="flex items-center justify-between relative z-10">
            <a href="@Url.Action("Index", "Home")" class="w-10 h-10 flex items-center justify-center bg-white/10 rounded-xl backdrop-blur-md">
                <i class="w-5 h-5" data-lucide="chevron-left"></i>
            </a>
            <h1 class="text-lg font-black uppercase tracking-tight">Detail Lokasi</h1>
            <div class="w-10"></div>
        </div>
    </div>

    <div class="flex justify-center -mt-8 mb-6 px-6 relative z-20">
        <div class="bg-white border border-gray-100 px-6 py-3 rounded-2xl flex items-center gap-4 w-full justify-between">
            <div class="flex flex-col">
                <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Plat Nomor</span>
                <span id="plat-nomor" class="text-green-700 font-black text-xl leading-none">B 9632 TOR</span>
            </div>
            <div class="h-8 w-[1px] bg-gray-100"></div>
            <div class="text-right">
                <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">No. Pintu</span>
                <p class="text-orange-500 font-bold text-sm">JRC 005</p>
            </div>
        </div>
    </div>

    <div class="px-6 space-y-6">
        <div class="bg-white rounded-[32px] p-6 border border-gray-100 relative overflow-hidden">
            <div class="absolute top-0 right-0 p-4">
                <span class="px-3 py-1 bg-green-500 text-white rounded-full text-[10px] font-black tracking-tighter uppercase">
                    PENGANGKUTAN
                </span>
            </div>

            <div class="space-y-4">
                <div>
                    <p class="text-[10px] text-gray-400 uppercase tracking-widest mb-1">Perusahaan</p>
                    <h2 class="text-xl font-black text-gray-800 leading-tight">CV Tri Berkah Sejahtera</h2>
                </div>

                <div class="flex items-center justify-center gap-2 bg-gray-50 p-2 rounded-xl">
                    <p class="text-gray-600 font-mono text-xl font-bold uppercase tracking-tighter">SPJ/07-2025/PKM/000476</p>
                </div>

                <div class="pt-2 border-t border-gray-50">
                    <div class="flex gap-2 items-start">
                        <p class="text-gray-500 text-xs font-medium leading-relaxed">
                            Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
                        </p>
                    </div>
                </div>

                <div class="pt-4 border-t border-gray-100 mt-4">
                    <div class="flex items-center justify-between mb-2">
                        <p class="text-[10px] text-gray-400 uppercase tracking-widest">Total Berat Semua TPS</p>
                        <span class="text-2xl font-black text-upst"><span id="grand-total-timbangan">0,00</span> kg</span>
                    </div>
                </div>

            </div>
        </div>

        <div id="tps-selection-container" class="bg-white rounded-[32px] p-6 border border-gray-100" style="display: none;">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-2 h-2 rounded-full bg-upst"></div>
                <h3 class="font-black text-gray-800">Pilih TPS yang Akan Diangkut</h3>
            </div>
            <div id="tps-checkboxes" class="space-y-2 mb-4">
            </div>
            <button type="button" id="btn-confirm-tps" class="w-full bg-upst text-white py-3 rounded-xl font-bold text-sm hover:brightness-110">
                Lanjutkan ke Form
            </button>
        </div>

        <div id="tps-tabs-container" class="bg-white rounded-[32px] p-6 border border-gray-100" style="display: none;">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-2 h-2 rounded-full bg-upst"></div>
                <h3 class="font-black text-gray-800">Form Pengangkutan</h3>
            </div>
            <div id="tps-tabs" class="flex gap-2 overflow-x-auto pb-2 mb-4">
            </div>
            <div id="tps-content">
            </div>
        </div>

        @if (TempData["Success"] != null)
        {
            <div class="bg-green-50 border border-green-200 text-green-700 rounded-2xl p-3 text-sm font-medium">
                @TempData["Success"]
            </div>
        }

        @if (TempData["Error"] != null)
        {
            <div class="bg-red-50 border border-red-200 text-red-700 rounded-2xl p-3 text-sm font-medium">
                @TempData["Error"]
            </div>
        }
    </div>

    <partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />
</div>

<register-block dynamic-section="scripts" key="jsDetailPenjemputan">
<script>
document.addEventListener('DOMContentLoaded', function() {
    const grandTotalDisplay = document.getElementById('grand-total-timbangan');
    const tpsSelectionContainer = document.getElementById('tps-selection-container');
    const tpsTabsContainer = document.getElementById('tps-tabs-container');
    const tpsCheckboxesContainer = document.getElementById('tps-checkboxes');
    const btnConfirmTps = document.getElementById('btn-confirm-tps');
    const tpsTabsEl = document.getElementById('tps-tabs');
    const tpsContentContainer = document.getElementById('tps-content');
    
    let activeTpsIndex = 0;
    let tpsData = [];
    let availableTpsList = [];
    let selectedTpsList = [];
    let hasRequestedLocation = [];

    const OCR_AREAS = [
        { id: 'A', x: 0.34, y: 0.35, w: 0.40, h: 0.11, color: 'border-lime-400 bg-lime-500/15' },
        { id: 'B', x: 0.31, y: 0.33, w: 0.45, h: 0.14, color: 'border-amber-300 bg-amber-400/10' },
        { id: 'C', x: 0.29, y: 0.31, w: 0.49, h: 0.17, color: 'border-cyan-300 bg-cyan-400/10' }
    ];

    function initializeLocation(tpsList) {
        availableTpsList = tpsList || [];
        
        if (availableTpsList.length === 0) {
            selectedTpsList = ['Lokasi Utama'];
            initializeTpsData(selectedTpsList);
            tpsTabsContainer.style.display = 'block';
            renderSingleForm();
            return;
        }
        
        if (availableTpsList.length === 1) {
            selectedTpsList = [availableTpsList[0]];
            initializeTpsData(selectedTpsList);
            tpsTabsContainer.style.display = 'block';
            renderTabs();
            renderTpsForm();
            return;
        }
        
        renderTpsSelection();
        tpsSelectionContainer.style.display = 'block';
    }

    function renderTpsSelection() {
        tpsCheckboxesContainer.innerHTML = '';
        availableTpsList.forEach((tpsName, index) => {
            const wrapper = document.createElement('label');
            wrapper.className = 'flex items-center gap-3 p-3 rounded-xl border border-gray-200 hover:bg-gray-50 cursor-pointer transition';
            
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.value = tpsName;
            checkbox.className = 'w-5 h-5 rounded border-gray-300 text-upst focus:ring-upst';
            checkbox.checked = true;
            
            const label = document.createElement('span');
            label.className = 'text-sm font-bold text-gray-700';
            label.textContent = tpsName;
            
            wrapper.appendChild(checkbox);
            wrapper.appendChild(label);
            tpsCheckboxesContainer.appendChild(wrapper);
        });
    }

    btnConfirmTps.addEventListener('click', function() {
        const checkboxes = tpsCheckboxesContainer.querySelectorAll('input[type="checkbox"]:checked');
        selectedTpsList = Array.from(checkboxes).map(cb => cb.value);
        
        if (selectedTpsList.length === 0) {
            alert('Pilih minimal 1 TPS untuk diangkut!');
            return;
        }
        
        initializeTpsData(selectedTpsList);
        tpsSelectionContainer.style.display = 'none';
        tpsTabsContainer.style.display = 'block';
        
        if (selectedTpsList.length === 1) {
            renderSingleForm();
        } else {
            renderTabs();
            renderTpsForm();
        }
    });

    function initializeTpsData(tpsNames) {
        tpsData = tpsNames.map((name, index) => ({
            name: name,
            index: index,
            latitude: '',
            longitude: '',
            alamatJalan: '',
            waktuKedatangan: '',
            fotoKedatangan: [],
            fotoKedatanganUploaded: false,
            timbangan: [],
            totalTimbangan: 0,
            fotoPetugas: [],
            fotoPetugasUploaded: false,
            namaPetugas: '',
            submitted: false
        }));
        hasRequestedLocation = new Array(tpsNames.length).fill(false);
    }

    function renderSingleForm() {
        tpsTabsEl.style.display = 'none';
        activeTpsIndex = 0;
        renderTpsForm();
    }

    function renderTabs() {
        tpsTabsEl.style.display = 'flex';
        tpsTabsEl.innerHTML = '';
        tpsData.forEach((tps, index) => {
            const tab = document.createElement('button');
            tab.type = 'button';
            tab.className = `px-4 py-2 rounded-xl font-bold text-sm whitespace-nowrap transition ${
                index === activeTpsIndex 
                    ? 'bg-upst text-white' 
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`;
            tab.textContent = tps.name;
            if (tps.submitted) {
                tab.innerHTML += ' <span class="text-xs">✓</span>';
            }
            tab.addEventListener('click', () => switchToTps(index));
            tpsTabsEl.appendChild(tab);
        });
    }

    function switchToTps(index) {
        activeTpsIndex = index;
        renderTabs();
        renderTpsForm();
        
        if (!hasRequestedLocation[index]) {
            hasRequestedLocation[index] = true;
            getLocationUpdate();
        }
        
        updateGrandTotal();
    }

    function renderTpsForm() {
        const tps = tpsData[activeTpsIndex];
        const showTpsName = selectedTpsList.length > 1 || availableTpsList.length > 0;
        
        tpsContentContainer.innerHTML = `
            <form class="space-y-5 pb-8" data-tps-index="${tps.index}">
                <input type="hidden" class="tps-latitude" value="${tps.latitude}" />
                <input type="hidden" class="tps-longitude" value="${tps.longitude}" />
                <input type="hidden" class="tps-alamat-jalan" value="${tps.alamatJalan}" />
                <input type="hidden" class="tps-total-timbangan" value="${tps.totalTimbangan}" />

                <section class="bg-white border border-gray-100 rounded-3xl p-5 space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-upst text-white font-black text-sm flex items-center justify-center">1</div>
                        <div>
                            <h3 class="font-black text-gray-800">Foto Kedatangan${showTpsName ? ' - ' + tps.name : ''}</h3>
                            <p class="text-xs text-gray-500">Upload foto kedatangan</p>
                        </div>
                    </div>

                    <label class="block text-xs font-semibold text-gray-600">Upload Foto Kedatangan</label>
                    <input type="file" class="tps-foto-kedatangan block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" accept="image/*" multiple />
                    <div class="tps-preview-kedatangan space-y-2"></div>
                    
                    ${tps.fotoKedatangan.length > 0 && !tps.fotoKedatanganUploaded ? `
                        <button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
                            Upload ${tps.fotoKedatangan.length} Foto Kedatangan
                        </button>
                    ` : tps.fotoKedatanganUploaded ? `
                        <div class="text-center text-xs text-green-600 font-bold py-2">
                            ✓ Foto kedatangan sudah diupload
                        </div>
                    ` : ''}

                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Latitude</label>
                            <input type="text" class="tps-display-latitude w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-xs" readonly value="${tps.latitude}" />
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Longitude</label>
                            <input type="text" class="tps-display-longitude w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-xs" readonly value="${tps.longitude}" />
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Waktu Kedatangan</label>
                        <input type="text" class="tps-waktu-kedatangan w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-xs" readonly value="${tps.waktuKedatangan}" />
                    </div>
                </section>

                <section class="bg-white border border-gray-100 rounded-3xl p-5 space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-upst text-white font-black text-sm flex items-center justify-center">2</div>
                        <div>
                            <h3 class="font-black text-gray-800">Foto Timbang Sampah</h3>
                            <p class="text-xs text-gray-500">Upload foto timbangan, berat auto terisi</p>
                        </div>
                    </div>

                    <div class="tps-timbangan-repeater space-y-3"></div>

                    <button type="button" class="tps-btn-add-timbangan w-full border border-dashed border-upst text-upst rounded-xl py-2 text-xs font-bold transition">
                        + Tambah Foto Timbangan
                    </button>

                    <div class="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2 flex items-center justify-between">
                        <span class="text-xs font-semibold text-gray-600">Total Timbangan${showTpsName ? ' ' + tps.name : ''}</span>
                        <span class="text-base font-black text-upst"><span class="tps-display-total">${formatWeightDisplay(tps.totalTimbangan)}</span> kg</span>
                    </div>
                </section>

                <section class="bg-white border border-gray-100 rounded-3xl p-5 space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-upst text-white font-black text-sm flex items-center justify-center">3</div>
                        <div>
                            <h3 class="font-black text-gray-800">Foto Petugas</h3>
                            <p class="text-xs text-gray-500">Upload dokumentasi petugas</p>
                        </div>
                    </div>

                    <label class="block text-xs font-semibold text-gray-600">Upload Foto Petugas</label>
                    <input type="file" class="tps-foto-petugas block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" accept="image/*" multiple />
                    <div class="tps-preview-petugas space-y-2"></div>
                    
                    ${tps.fotoPetugas.length > 0 && !tps.fotoPetugasUploaded ? `
                        <button type="button" class="tps-btn-upload-petugas w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
                            Upload ${tps.fotoPetugas.length} Foto Petugas
                        </button>
                    ` : tps.fotoPetugasUploaded ? `
                        <div class="text-center text-xs text-green-600 font-bold py-2">
                            ✓ Foto petugas sudah diupload
                        </div>
                    ` : ''}
                    
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Nama Petugas</label>
                        <input type="text" class="tps-nama-petugas w-full rounded-xl border border-gray-200 px-3 py-2 text-sm" placeholder="Masukkan nama petugas" value="${tps.namaPetugas}" />
                    </div>
                </section>

                <div class="flex gap-3">
                    <a href="@Url.Action("Batal", "DetailPenjemputan")" class="w-1/3 text-center bg-red-500 text-white py-3 rounded-xl font-bold text-sm">Batal</a>
                    <button type="submit" class="w-2/3 bg-upst text-white py-3 rounded-xl font-bold text-sm hover:brightness-110">Submit${showTpsName ? ' ' + tps.name : ''}</button>
                </div>
            </form>
        `;

        attachTpsFormListeners();
        restoreTpsTimbanganItems();
        restorePhotoPreview();
    }

    function restorePhotoPreview() {
        const tps = tpsData[activeTpsIndex];
        const form = tpsContentContainer.querySelector('form');
        if (!form) return;

        const previewKedatangan = form.querySelector('.tps-preview-kedatangan');
        if (previewKedatangan && tps.fotoKedatangan.length > 0) {
            renderStoredPhotos(tps.fotoKedatangan, previewKedatangan);
        }

        const previewPetugas = form.querySelector('.tps-preview-petugas');
        if (previewPetugas && tps.fotoPetugas.length > 0) {
            renderStoredPhotos(tps.fotoPetugas, previewPetugas);
        }
    }

    function renderStoredPhotos(files, container) {
        container.innerHTML = '';
        container.className = 'space-y-2';
        
        files.forEach((file, index) => {
            const item = document.createElement('div');
            item.className = 'rounded-xl border border-gray-200 overflow-hidden bg-black';

            const imageUrl = URL.createObjectURL(file);
            const safeName = file.name.replace(/"/g, '&quot;');
            item.innerHTML = `
                <div class="h-44 bg-black/80">
                    <img src="${imageUrl}" alt="Preview ${index + 1}" class="w-full h-full object-contain preview-multi-image" />
                </div>
                <div class="px-2 py-1 bg-white">
                    <p class="text-[11px] font-semibold text-gray-700 truncate">${index + 1}. ${safeName}</p>
                    <p class="text-[10px] text-gray-500">${formatFileSize(file.size)}</p>
                </div>
            `;

            const img = item.querySelector('.preview-multi-image');
            if (img) {
                img.onload = function() {
                    URL.revokeObjectURL(imageUrl);
                };
            }
            container.appendChild(item);
        });
    }

    function attachTpsFormListeners() {
        const form = tpsContentContainer.querySelector('form');
        const tps = tpsData[activeTpsIndex];

        const fotoKedatanganInput = form.querySelector('.tps-foto-kedatangan');
        const fotoPetugasInput = form.querySelector('.tps-foto-petugas');
        const namaPetugasInput = form.querySelector('.tps-nama-petugas');
        const btnAddTimbangan = form.querySelector('.tps-btn-add-timbangan');
        const toggleDebug = form.querySelector('.tps-toggle-debug-crop');

        fotoKedatanganInput.addEventListener('change', function() {
            tps.fotoKedatangan = Array.from(this.files);
            tps.fotoKedatanganUploaded = false;
            updateWaktuKedatangan();
            updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
            renderTpsForm();
        });

        fotoPetugasInput.addEventListener('change', function() {
            tps.fotoPetugas = Array.from(this.files);
            tps.fotoPetugasUploaded = false;
            updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
            renderTpsForm();
        });

        namaPetugasInput.addEventListener('input', function() {
            tps.namaPetugas = this.value;
        });

        btnAddTimbangan.addEventListener('click', function() {
            createTimbanganItem(form.querySelector('.tps-timbangan-repeater'));
        });

        const btnUploadKedatangan = form.querySelector('.tps-btn-upload-kedatangan');
        if (btnUploadKedatangan) {
            btnUploadKedatangan.addEventListener('click', function() {
                uploadFotoKedatangan();
            });
        }

        const btnUploadPetugas = form.querySelector('.tps-btn-upload-petugas');
        if (btnUploadPetugas) {
            btnUploadPetugas.addEventListener('click', function() {
                uploadFotoPetugas();
            });
        }

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            submitTpsData();
        });
    }

    function restoreTpsTimbanganItems() {
        const tps = tpsData[activeTpsIndex];
        const form = tpsContentContainer.querySelector('form');
        const repeater = form.querySelector('.tps-timbangan-repeater');
        
        if (tps.timbangan.length === 0) {
            createTimbanganItem(repeater);
        } else {
            tps.timbangan.forEach(timb => {
                const item = createTimbanganItem(repeater, timb);
            });
        }
    }

    function updateWaktuKedatangan() {
        const tps = tpsData[activeTpsIndex];
        const now = new Date();
        const formatted = now.toLocaleString('id-ID', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        tps.waktuKedatangan = formatted;
        
        const form = tpsContentContainer.querySelector('form');
        const displayWaktu = form.querySelector('.tps-waktu-kedatangan');
        if (displayWaktu) displayWaktu.value = formatted;

        getLocationUpdate();
    }

    function reverseGeocode(lat, lng) {
        const tps = tpsData[activeTpsIndex];
        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
            .then(res => res.json())
            .then(data => {
                const address = data.display_name || `${lat}, ${lng}`;
                tps.latitude = lat;
                tps.longitude = lng;
                tps.alamatJalan = address;
                
                const form = tpsContentContainer.querySelector('form');
                if (form) {
                    const latInput = form.querySelector('.tps-display-latitude');
                    const lngInput = form.querySelector('.tps-display-longitude');
                    if (latInput) latInput.value = lat;
                    if (lngInput) lngInput.value = lng;
                }
            })
            .catch(() => {
                tps.latitude = lat;
                tps.longitude = lng;
                tps.alamatJalan = `${lat}, ${lng}`;
                
                const form = tpsContentContainer.querySelector('form');
                if (form) {
                    const latInput = form.querySelector('.tps-display-latitude');
                    const lngInput = form.querySelector('.tps-display-longitude');
                    if (latInput) latInput.value = lat;
                    if (lngInput) lngInput.value = lng;
                }
            });
    }

    function getLocationUpdate() {
        if (!('geolocation' in navigator)) return;

        navigator.geolocation.getCurrentPosition(
            function(position) {
                const lat = position.coords.latitude.toFixed(6);
                const lng = position.coords.longitude.toFixed(6);
                reverseGeocode(lat, lng);
            },
            function() {
                console.log('Lokasi tidak diizinkan');
            }
        );
    }

    function formatFileSize(bytes) {
        const mb = bytes / (1024 * 1024);
        return `${mb.toFixed(2)} MB`;
    }

    function updateMultiPreview(input, previewContainer) {
        if (!input || !previewContainer) return;
        
        previewContainer.innerHTML = '';
        previewContainer.className = 'space-y-2';
        
        if (!input.files || input.files.length === 0) return;
        
        Array.from(input.files).forEach((file, index) => {
            const item = document.createElement('div');
            item.className = 'rounded-xl border border-gray-200 overflow-hidden bg-black';

            const imageUrl = URL.createObjectURL(file);
            const safeName = file.name.replace(/"/g, '&quot;');
            item.innerHTML = `
                <div class="h-44 bg-black/80">
                    <img src="${imageUrl}" alt="Preview ${index + 1}" class="w-full h-full object-contain preview-multi-image" />
                </div>
                <div class="px-2 py-1 bg-white">
                    <p class="text-[11px] font-semibold text-gray-700 truncate">${index + 1}. ${safeName}</p>
                    <p class="text-[10px] text-gray-500">${formatFileSize(file.size)}</p>
                </div>
            `;

            const img = item.querySelector('.preview-multi-image');
            if (img) {
                img.onload = function() {
                    URL.revokeObjectURL(imageUrl);
                };
            }
            previewContainer.appendChild(item);
        });
    }

    function formatWeightDisplay(value) {
        if (isNaN(value)) return '0,00';
        return value.toFixed(2).replace('.', ',');
    }

    function parseWeightInput(value) {
        if (!value) return 0;
        const cleaned = value.toString().trim().replace(/\s/g, '').replace(',', '.');
        const parsed = parseFloat(cleaned);
        return isNaN(parsed) ? 0 : parsed;
    }

    function readFileAsImage(file) {
        return new Promise(function(resolve, reject) {
            const objectUrl = URL.createObjectURL(file);
            const img = new Image();
            img.onload = function() {
                URL.revokeObjectURL(objectUrl);
                resolve(img);
            };
            img.onerror = function() {
                URL.revokeObjectURL(objectUrl);
                reject(new Error('Gagal membaca gambar.'));
            };
            img.src = objectUrl;
        });
    }

    function createCropCanvas(img, area) {
        const sx = Math.max(0, Math.floor(img.width * area.x));
        const sy = Math.max(0, Math.floor(img.height * area.y));
        const sw = Math.max(1, Math.floor(img.width * area.w));
        const sh = Math.max(1, Math.floor(img.height * area.h));

        const canvas = document.createElement('canvas');
        const scale = 2.2;
        canvas.width = Math.max(1, Math.floor(sw * scale));
        canvas.height = Math.max(1, Math.floor(sh * scale));
        const ctx = canvas.getContext('2d');
        if (!ctx) return canvas;

        ctx.imageSmoothingEnabled = true;
        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
        return canvas;
    }

    function canvasToJpegFile(canvas, fileName) {
        return new Promise(function(resolve, reject) {
            canvas.toBlob(function(blob) {
                if (!blob) {
                    reject(new Error('Gagal membuat crop image.'));
                    return;
                }
                resolve(new File([blob], fileName, { type: 'image/jpeg' }));
            }, 'image/jpeg', 0.92);
        });
    }

    async function requestOpenRouterWeight(imageFile) {
        const formData = new FormData();
        formData.append('Foto', imageFile);
        const response = await fetch('/upst/detail-penjemputan/ocr-timbangan', {
            method: 'POST',
            body: formData
        });
        const result = await response.json();
        if (!response.ok) {
            throw new Error(result.message || 'Request OCR gagal.');
        }
        return result;
    }

    async function autoFillWeight(file, weightInput, ocrInfoEl) {
        let guessedWeight = 0;
        weightInput.placeholder = 'Membaca angka dari foto...';
        if (ocrInfoEl) ocrInfoEl.textContent = 'AI OCR: memproses gambar...';

        try {
            const img = await readFileAsImage(file);
            let bestRawText = '';
            let isSuccess = false;

            for (const area of OCR_AREAS) {
                const cropCanvas = createCropCanvas(img, area);
                const cropFile = await canvasToJpegFile(cropCanvas, `crop-${area.id}.jpg`);
                const aiResult = await requestOpenRouterWeight(cropFile);

                if (aiResult && aiResult.success && aiResult.weight) {
                    guessedWeight = parseWeightInput(aiResult.weight);
                    bestRawText = aiResult.raw || aiResult.weight;
                    isSuccess = guessedWeight > 0;
                    if (isSuccess) break;
                }

                if (aiResult && aiResult.raw) {
                    bestRawText = aiResult.raw;
                }
            }

            if (ocrInfoEl) {
                const cleaned = (bestRawText || '').replace(/\s+/g, ' ').trim();
                ocrInfoEl.textContent = isSuccess
                    ? `AI OCR terbaca: ${cleaned}`
                    : (cleaned ? `AI OCR tidak valid: ${cleaned}` : 'AI OCR tidak menemukan angka valid.');
            }
        } catch (_) {
            guessedWeight = 0;
            if (ocrInfoEl) ocrInfoEl.textContent = 'AI OCR gagal diproses.';
        }

        if (guessedWeight > 0) {
            weightInput.value = formatWeightDisplay(guessedWeight);
            weightInput.placeholder = 'Berat terdeteksi otomatis';
        } else {
            weightInput.placeholder = 'Tidak terbaca otomatis, isi manual';
        }

        updateTpsTotalTimbangan();
    }

    function updateTpsTotalTimbangan() {
        const tps = tpsData[activeTpsIndex];
        const form = tpsContentContainer.querySelector('form');
        if (!form) return;

        let total = 0.0;
        const repeater = form.querySelector('.tps-timbangan-repeater');
        const items = repeater.querySelectorAll('.timbangan-item');
        
        items.forEach(function(item) {
            const weightInput = item.querySelector('.input-berat-timbangan-value');
            if (weightInput) {
                const value = parseWeightInput(weightInput.value || '0');
                total += value;
            }
        });

        tps.totalTimbangan = total;
        
        const displayTotal = form.querySelector('.tps-display-total');
        if (displayTotal) displayTotal.textContent = formatWeightDisplay(total);
        
        updateGrandTotal();
    }

    function updateGrandTotal() {
        let grandTotal = 0;
        tpsData.forEach(tps => {
            grandTotal += tps.totalTimbangan;
        });
        if (grandTotalDisplay) {
            grandTotalDisplay.textContent = formatWeightDisplay(grandTotal);
        }
    }

    function createTimbanganItem(repeater, existingData = null) {
        const item = document.createElement('div');
        item.className = 'timbangan-item rounded-2xl border border-gray-200 p-3 space-y-2 bg-gray-50';
        
        const weight = existingData ? existingData.weight : 0;
        const hasFile = existingData && existingData.file;
        const isUploaded = existingData && existingData.uploaded;
        
        item.innerHTML = `
            <div class="flex items-center justify-between">
                <p class="text-xs font-bold text-gray-600">Item Timbangan</p>
                <button type="button" class="btn-remove-timbangan text-[11px] font-bold text-red-500">Hapus</button>
            </div>
            <input type="file" name="FotoTimbangan" accept="image/*" class="input-foto-timbangan block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" />
            <div class="${hasFile ? '' : 'hidden'} input-preview-wrap relative rounded-xl overflow-hidden border border-gray-200 bg-black">
                <img class="input-preview-image w-full h-44 object-contain" alt="Preview foto timbangan" />
                <div class="input-crop-overlay absolute inset-0 pointer-events-none"></div>
            </div>
            <p class="text-[11px] text-gray-500 input-ocr-info">${hasFile ? 'OCR: diproses.' : 'OCR: belum diproses.'}</p>
            ${hasFile && !isUploaded ? `
                <button type="button" class="btn-upload-timbangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
                    Upload Foto Timbangan Ini
                </button>
            ` : isUploaded ? `
                <div class="text-center text-xs text-green-600 font-bold py-2">
                    ✓ Foto timbangan sudah diupload
                </div>
            ` : ''}
            <div class="grid grid-cols-1 gap-2">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Berat (kg)</label>
                    <input type="text" inputmode="decimal" class="input-berat-timbangan-display w-full rounded-xl border border-gray-200 px-3 py-2 text-sm" placeholder="Contoh: 54,45" value="${weight > 0 ? formatWeightDisplay(weight) : ''}" />
                    <input type="hidden" class="input-berat-timbangan-value" value="${weight.toFixed(2)}" />
                </div>
            </div>
        `;

        const fileInput = item.querySelector('.input-foto-timbangan');
        const previewWrap = item.querySelector('.input-preview-wrap');
        const previewImage = item.querySelector('.input-preview-image');
        const cropOverlay = item.querySelector('.input-crop-overlay');
        const ocrInfoEl = item.querySelector('.input-ocr-info');
        const weightInputDisplay = item.querySelector('.input-berat-timbangan-display');
        const weightInputValue = item.querySelector('.input-berat-timbangan-value');
        const removeBtn = item.querySelector('.btn-remove-timbangan');

        if (existingData && existingData.file) {
            const localUrl = URL.createObjectURL(existingData.file);
            previewImage.src = localUrl;
            previewImage.onload = function() {
                URL.revokeObjectURL(localUrl);
            };
        }

        fileInput.addEventListener('change', async function() {
            if (fileInput.files && fileInput.files[0]) {
                const localUrl = URL.createObjectURL(fileInput.files[0]);
                previewImage.src = localUrl;
                previewWrap.classList.remove('hidden');
                previewImage.onload = function() {
                    URL.revokeObjectURL(localUrl);
                };

                await autoFillWeight(fileInput.files[0], weightInputDisplay, ocrInfoEl);
                const parsed = parseWeightInput(weightInputDisplay.value);
                weightInputValue.value = parsed.toFixed(2);
                updateTpsTotalTimbangan();
                syncTimbanganToTpsData();
                
                const tps = tpsData[activeTpsIndex];
                const itemIndex = Array.from(repeater.children).indexOf(item);
                if (itemIndex >= 0 && tps.timbangan[itemIndex]) {
                    tps.timbangan[itemIndex].uploaded = false;
                    
                    const existingUploadBtn = item.querySelector('.btn-upload-timbangan');
                    if (!existingUploadBtn) {
                        const ocrInfo = item.querySelector('.input-ocr-info');
                        const uploadBtn = document.createElement('button');
                        uploadBtn.type = 'button';
                        uploadBtn.className = 'btn-upload-timbangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110';
                        uploadBtn.textContent = 'Upload Foto Timbangan Ini';
                        uploadBtn.addEventListener('click', function() {
                            uploadSingleFotoTimbangan(itemIndex);
                        });
                        ocrInfo.parentNode.insertBefore(uploadBtn, ocrInfo.nextSibling);
                    }
                }
            }
        });

        weightInputDisplay.addEventListener('input', function() {
            const cleaned = this.value.replace(/[^0-9.,]/g, '');
            this.value = cleaned;
            const parsed = parseWeightInput(cleaned);
            weightInputValue.value = parsed.toFixed(2);
            updateTpsTotalTimbangan();
            syncTimbanganToTpsData();
        });

        weightInputDisplay.addEventListener('blur', function() {
            const parsed = parseWeightInput(this.value);
            if (parsed > 0) {
                this.value = formatWeightDisplay(parsed);
                weightInputValue.value = parsed.toFixed(2);
            } else {
                this.value = '';
                weightInputValue.value = '0.00';
            }
            updateTpsTotalTimbangan();
            syncTimbanganToTpsData();
        });

        removeBtn.addEventListener('click', function() {
            item.remove();
            const form = tpsContentContainer.querySelector('form');
            const repeater = form ? form.querySelector('.tps-timbangan-repeater') : null;
            if (repeater && repeater.children.length === 0) {
                createTimbanganItem(repeater);
            }
            updateTpsTotalTimbangan();
            syncTimbanganToTpsData();
        });

        const btnUploadTimbangan = item.querySelector('.btn-upload-timbangan');
        if (btnUploadTimbangan) {
            btnUploadTimbangan.addEventListener('click', function() {
                const itemIndex = Array.from(repeater.children).indexOf(item);
                uploadSingleFotoTimbangan(itemIndex);
            });
        }

        repeater.appendChild(item);
        return item;
    }

    function syncTimbanganToTpsData() {
        const tps = tpsData[activeTpsIndex];
        const form = tpsContentContainer.querySelector('form');
        if (!form) return;

        const repeater = form.querySelector('.tps-timbangan-repeater');
        const items = repeater.querySelectorAll('.timbangan-item');
        
        tps.timbangan = [];
        items.forEach(item => {
            const fileInput = item.querySelector('.input-foto-timbangan');
            const weightValue = item.querySelector('.input-berat-timbangan-value');
            
            const existingIndex = tps.timbangan.length;
            const existingData = tps.timbangan[existingIndex];
            
            tps.timbangan.push({
                file: fileInput.files[0] || (existingData ? existingData.file : null),
                weight: parseWeightInput(weightValue.value),
                uploaded: existingData ? existingData.uploaded : false
            });
        });
    }

    function uploadSingleFotoTimbangan(itemIndex) {
        const tps = tpsData[activeTpsIndex];
        
        if (!tps.timbangan[itemIndex] || !tps.timbangan[itemIndex].file) {
            alert('Belum ada foto timbangan yang dipilih!');
            return;
        }
        
        const timbanganItem = tps.timbangan[itemIndex];
        
        alert(`Upload foto timbangan #${itemIndex + 1} untuk ${tps.name}\nBerat: ${timbanganItem.weight} kg\n(Implementasi upload ke server)`);
        
        timbanganItem.uploaded = true;
        
        const form = tpsContentContainer.querySelector('form');
        const repeater = form.querySelector('.tps-timbangan-repeater');
        const items = repeater.querySelectorAll('.timbangan-item');
        const targetItem = items[itemIndex];
        
        if (targetItem) {
            const uploadBtn = targetItem.querySelector('.btn-upload-timbangan');
            if (uploadBtn) {
                uploadBtn.remove();
            }
            
            const ocrInfo = targetItem.querySelector('.input-ocr-info');
            if (ocrInfo && !targetItem.querySelector('.upload-success-message')) {
                const successMsg = document.createElement('div');
                successMsg.className = 'text-center text-xs text-green-600 font-bold py-2 upload-success-message';
                successMsg.textContent = '✓ Foto timbangan sudah diupload';
                ocrInfo.parentNode.insertBefore(successMsg, ocrInfo.nextSibling);
            }
        }
    }

    function uploadFotoKedatangan() {
        const tps = tpsData[activeTpsIndex];
        if (tps.fotoKedatangan.length === 0) {
            alert('Belum ada foto kedatangan yang dipilih!');
            return;
        }
        
        alert(`Upload ${tps.fotoKedatangan.length} foto kedatangan untuk ${tps.name}\n(Implementasi upload ke server)`);
        
        tps.fotoKedatanganUploaded = true;
        renderTpsForm();
    }

    function uploadFotoPetugas() {
        const tps = tpsData[activeTpsIndex];
        if (tps.fotoPetugas.length === 0) {
            alert('Belum ada foto petugas yang dipilih!');
            return;
        }
        
        alert(`Upload ${tps.fotoPetugas.length} foto petugas untuk ${tps.name}\n(Implementasi upload ke server)`);
        
        tps.fotoPetugasUploaded = true;
        renderTpsForm();
    }

    function submitTpsData() {
        const tps = tpsData[activeTpsIndex];
        
        if (!tps.fotoKedatangan.length) {
            alert('Foto kedatangan belum diupload!');
            return;
        }
        if (!tps.timbangan.length) {
            alert('Belum ada data timbangan!');
            return;
        }
        if (!tps.fotoPetugas.length) {
            alert('Foto petugas belum diupload!');
            return;
        }
        if (!tps.namaPetugas.trim()) {
            alert('Nama petugas belum diisi!');
            return;
        }

        const formData = new FormData();
        formData.append('TpsName', tps.name);
        formData.append('Latitude', tps.latitude);
        formData.append('Longitude', tps.longitude);
        formData.append('AlamatJalan', tps.alamatJalan);
        formData.append('WaktuKedatangan', tps.waktuKedatangan);
        formData.append('TotalTimbangan', tps.totalTimbangan);
        formData.append('NamaPetugas', tps.namaPetugas);
        
        tps.fotoKedatangan.forEach((file, i) => {
            formData.append(`FotoKedatangan`, file);
        });
        
        tps.timbangan.forEach((timb, i) => {
            if (timb.file) formData.append(`FotoTimbangan`, timb.file);
            formData.append(`BeratTimbangan`, timb.weight);
        });
        
        tps.fotoPetugas.forEach((file, i) => {
            formData.append(`FotoPetugas`, file);
        });

        alert(`Submit data ${tps.name}:\n- Lokasi: ${tps.alamatJalan}\n- Total: ${tps.totalTimbangan} kg\n- Petugas: ${tps.namaPetugas}\n\n(Implementasi POST ke server)`);
        
        tps.submitted = true;
        if (selectedTpsList.length > 1) {
            renderTabs();
        }
    }

    initializeLocation(['TPS A', 'TPS B', 'TPS C']);
});
</script>
</register-block>