<?php
// BEZUSLOVNO UBIJANJE KEŠA NA NIVOU BROWSERA
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Pragma: no-cache");
header("Expires: 0");
// Učitavanje liste poslovnica iz CSV fajla
$poslovnice_lista = [];
if (($handle = fopen("poslovnice_superpay.csv", "r")) !== FALSE) {
    fgetcsv($handle, 1000, ","); // Preskakanje zaglavlja
    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
        if (isset($data[0]) && isset($data[1]) && isset($data[3])) {
            $sp_id = trim($data[0]);
            $zastupnik = trim($data[1]);
            $grad = trim($data[2]);
            $adresa = trim($data[3]);
            $pun_naziv = "$zastupnik - $grad, $adresa";

            $poslovnice_lista[] = [
                'id' => $sp_id,
                'naziv' => $pun_naziv
            ];
        }
    }
    fclose($handle);
}

// PHP DEO - OBRADA PODATAKA
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['slika'])) {
    require 'db.php';
    header('Content-Type: application/json');

    try {
        $poslovnica = $_POST['poslovnica'];
        $is_pdf = isset($_POST['is_pdf']) && $_POST['is_pdf'] === '1';

        $year = date("Y");
        $month = date("m");

        $target_dir = "uploads/$year/$month/";
        if (!file_exists($target_dir)) {
            if (!mkdir($target_dir, 0755, true)) {
                $err = error_get_last();
                file_put_contents(__DIR__ . '/error_log.txt', date('[Y-m-d H:i:s] ') . "DIR_GRESKA: Ne mogu kreirati $target_dir. " . print_r($err, true) . "\n", FILE_APPEND);
                throw new Exception("Greška pri kreiranju foldera na serveru.");
            }
        }

        $ext = $is_pdf ? ".pdf" : ".jpg";
        $filename = date("Ymd_His") . "_" . uniqid() . "_" . preg_replace('/[^A-Za-z0-9\-]/', '', $poslovnica) . $ext;
        $target_file = $target_dir . $filename;

        if (move_uploaded_file($_FILES["slika"]["tmp_name"], $target_file)) {
            $filesize = round(filesize($target_file) / 1024);

            $sp_transaction_id = !empty($_POST['sp_transaction_id']) ? $_POST['sp_transaction_id'] : null;
            $app_version = isset($_POST['app_version']) ? $_POST['app_version'] : 'nepoznato';

            if ($sp_transaction_id) {
                // Standardni storno zahtev - snimamo u dokumenti sa pravim ID-jem
                $stmt = $pdo->prepare("INSERT INTO dokumenti (poslovnica, file_path, file_name, file_size_kb, transaction_id) VALUES (?, ?, ?, ?, ?)");
                $stmt->execute([$poslovnica, $target_file, $filename, $filesize, $sp_transaction_id]);

                // Ažuriranje postojećeg zahteva i beleženje verzije aplikacije
                $stmt_iznos = $pdo->prepare("SELECT amount, ocr_details FROM storno_zahtevi WHERE transaction_id = ?");
                $stmt_iznos->execute([$sp_transaction_id]);
                $row = $stmt_iznos->fetch(PDO::FETCH_ASSOC);

                $iznos = $row ? $row['amount'] : 0;
                $ocr_details = $row ? json_decode($row['ocr_details'] ?? '{}', true) : [];
                if (!is_array($ocr_details))
                    $ocr_details = [];
                $ocr_details['app_version'] = $app_version;
                $ocr_details_json = json_encode($ocr_details);

                // Promena statusa u bazi uz verifikacije
                $stmt_storno = $pdo->prepare("UPDATE storno_zahtevi SET status = 'poslato_na_odobrenje', ocr_details = ? WHERE transaction_id = ?");
                if (!$stmt_storno->execute([$ocr_details_json, $sp_transaction_id])) {
                    $dbErr = $stmt_storno->errorInfo();
                    file_put_contents(__DIR__ . '/error_log.txt', date('[Y-m-d H:i:s] ') . "PDO_EXEC_GRESKA za ID $sp_transaction_id: " . print_r($dbErr, true) . "\n", FILE_APPEND);
                    throw new Exception("SQL greška pri ažuriranju statusa.");
                }

                if ($stmt_storno->rowCount() === 0 && !$row) {
                    file_put_contents(__DIR__ . '/error_log.txt', date('[Y-m-d H:i:s] ') . "PDO_ROW_GRESKA: Ažurirano 0 redova. Zahtev $sp_transaction_id verovatno ne postoji u bazi.\n", FILE_APPEND);
                    // Nastavljamo uprkos ovome, da se makar dokument sačuvao
                }

                // Hit Webhook-a za n8n OCR analizu
                $webhook_url = 'https://automation.dunavgold.rs/webhook/storno-ocr-provera';
                $data = [
                    'transaction_id' => $sp_transaction_id,
                    'iznos_iz_baze' => $iznos,
                    'image_url' => 'https://dcs.dunavunion.rs/' . $target_file,
                    'app_version' => $app_version
                ];

                $ch = curl_init($webhook_url);
                curl_setopt($ch, CURLOPT_POST, 1);
                curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
                curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type:application/json']);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
                curl_setopt($ch, CURLOPT_TIMEOUT, 2); // Kratak timeout od 2s da ne bi blokirali frontend dok n8n misli

                // Izvrši i hvataj eventualne mrežne greške
                $result = curl_exec($ch);
                if ($result === false) {
                    $error_msg = curl_error($ch);
                    file_put_contents(__DIR__ . '/debug_log.txt', date('[Y-m-d H:i:s] ') . "cURL GRESKA za $sp_transaction_id : $error_msg\n", FILE_APPEND);
                } else {
                    file_put_contents(__DIR__ . '/debug_log.txt', date('[Y-m-d H:i:s] ') . "cURL USPEH za $sp_transaction_id HTTP Odgovor: " . substr($result, 0, 100) . "\n", FILE_APPEND);
                }
                curl_close($ch);

            } else {
                // Generički dokument - BYPASS N8N WEBHOOK-A
                $sp_location_id = isset($_POST['sp_location_id']) ? $_POST['sp_location_id'] : null;
                $new_tx_id = 'DOC_' . date("YmdHis") . '_' . mt_rand(100, 999);

                // Snimamo u dokumenti sa novim random ID-jem
                $stmt = $pdo->prepare("INSERT INTO dokumenti (poslovnica, file_path, file_name, file_size_kb, transaction_id) VALUES (?, ?, ?, ?, ?)");
                $stmt->execute([$poslovnica, $target_file, $filename, $new_tx_id]);

                // Pakujemo app_version u ocr_details
                $ocr_details = json_encode([
                    'app_version' => $app_version,
                    'tip' => 'dodatni_dokument'
                ]);

                // Upisujemo u storno_zahtevi sa statusom 'ostalo' da bi admin panel mogao to da dohvati
                $stmt_storno_gen = $pdo->prepare("INSERT INTO storno_zahtevi (agent_id, location_id, transaction_id, amount, currency, datum_transakcije, status, ocr_details) VALUES (0, ?, ?, 0.00, 'RSD', NOW(), 'ostalo', ?)");
                $stmt_storno_gen->execute([$sp_location_id, $new_tx_id, $ocr_details]);
            }

            echo json_encode(['status' => 'success', 'message' => '✅ Dokument uspešno poslat!']);
        } else {
            // move_uploaded_file je feilovao, daj da vidimo zašto
            $err = error_get_last();
            file_put_contents(__DIR__ . '/error_log.txt', date('[Y-m-d H:i:s] ') . "UPLOAD_GRESKA: Ne mogu prebaciti fajl u $target_file. " . print_r($err, true) . "\n", FILE_APPEND);
            throw new Exception('Greška pri čuvanju fajla na disku. Kontaktiraj administratora.');
        }
    } catch (Exception $e) {
        file_put_contents(__DIR__ . '/error_log.txt', date('[Y-m-d H:i:s] ') . "OPSTA_GRESKA: " . $e->getMessage() . "\n", FILE_APPEND);
        http_response_code(500);
        echo json_encode(['status' => 'error', 'message' => '❌ Sistemska greška, pogledajte logove.']);
    }
    exit;
}
?>
<!DOCTYPE html>
<html lang="sr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Dostava Dokumenata | Dunav Union</title>
    <style>
        @font-face {
            font-family: "Montserrat";
            src: url("montserrat-regular-webfont.woff2?v=1.2") format("woff2");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: "Montserrat";
            src: url("montserrat-bold-webfont.woff2?v=1.2") format("woff2");
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            height: 100svh;
            overflow: hidden;
            background: #f4f4f4;
            font-family: "Montserrat", sans-serif;
            display: flex;
            justify-content: center;
        }

        * {
            box-sizing: border-box;
        }

        .main-wrapper {
            position: relative;
            width: 100vw;
            max-width: 500px;
            height: 100svh;
            display: flex;
            flex-direction: column;
            background: white;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        header {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
            background: #fff;
            flex-shrink: 0;
            z-index: 10;
        }

        header img {
            height: 50px;
            display: inline-block;
        }

        .content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background: #f9f9f9;
        }

        .content-inner {
            padding-bottom: 20px;
        }

        .bottom-cta {
            flex: initial;
            padding: 15px;
            background: white;
            border-top: 1px solid #ddd;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 10;
        }

        .bottom-cta button {
            width: 100%;
            padding: 18px;
            font-size: 18px;
            font-weight: bold;
            background: #ed1941;
            color: white;
            border: none;
            border-radius: 10px;
            font-family: Montserrat, sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .bottom-cta button:disabled {
            background: #ccc;
            color: #777;
            cursor: not-allowed;
            transform: none;
        }

        .bottom-cta button:active:not(:disabled) {
            transform: scale(0.98);
        }

        label.section-title {
            text-transform: uppercase;
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 6px;
            display: block;
            color: #555;
        }

        /* AUTOCOMPLETE */
        .autocomplete-container {
            position: relative;
            width: 100%;
            margin-bottom: 20px;
        }

        .autocomplete-container input {
            font-family: Montserrat, sans-serif;
            width: 100%;
            padding: 14px 40px 14px 15px;
            font-size: 16px;
            border-radius: 8px;
            border: 1px solid #ccc;
            outline: none;
            background: #fff;
        }

        .clear-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #aaa;
            cursor: pointer;
            display: none;
            user-select: none;
        }

        .clear-icon:hover {
            color: #ed1941;
        }

        .autocomplete-items {
            position: absolute;
            border: 1px solid #ccc;
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 220px;
            overflow-y: auto;
            background-color: #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            border-radius: 0 0 8px 8px;
        }

        .autocomplete-items div {
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            color: #333;
        }

        .autocomplete-items div:hover {
            background-color: #f0f0f0;
        }

        .autocomplete-items:empty {
            display: none;
        }

        /* CARDS */
        #cards-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .card.storno-card {
            border-left: 5px solid #f59e0b;
            /* Orange pending */
        }

        .card.generic-card {
            border-left: 5px solid #ccc;
        }

        .card.ready {
            border-left-color: #10b981;
            /* Green ready */
            background: #f0fdf4;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            gap: 0 10px
        }

        .card-title {
            font-weight: 700;
            font-size: 14px;
            color: #333;
        }

        .card-amount {
            color: #ed1941;
            font-weight: 700;
            font-size: 16px;
        }

        .card-details {
            font-size: 12px;
            color: #666;
            margin-bottom: 12px;
        }

        .btn-capture {
            background: #1fbecf;
            color: white;
            padding: 12px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            width: 100%;
            transition: background 0.3s;
        }

        .card.ready .btn-capture {
            background: #10b981;
        }

        .preview-img {
            width: 100%;
            margin-top: 10px;
            border-radius: 6px;
            border: 1px solid #ddd;
            display: none;
        }

        .pdf-label {
            margin-top: 10px;
            font-size: 12px;
            font-weight: bold;
            color: #059669;
            background: #d1fae5;
            padding: 5px;
            border-radius: 4px;
            text-align: center;
            display: none;
        }

        .status-msg {
            margin-bottom: 15px;
            font-weight: bold;
            padding: 12px;
            border-radius: 6px;
            display: none;
            text-align: center;
            font-size: 14px;
        }

        #loadingOverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 18px;
            color: #333;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #ed1941;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .progress-text {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }

        .hints {
            text-align: center;
            color: #d97706;
            font-size: 12px;
            margin-top: 15px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="main-wrapper">
        <header>
            <img src="dunav-union-slanje-logo.png?v=1.2" alt="Dunav Union">
        </header>

        <div class="content">
            <div class="content-inner">
                <div id="statusBox" class="status-msg"></div>

                <label class="section-title">Izaberite Poslovnicu:</label>
                <div class="autocomplete-container">
                    <input type="text" id="poslovnica" autocomplete="off" placeholder="Kreni da kucaš naziv...">
                    <span id="clearInput" class="clear-icon">&times;</span>
                    <div id="autocomplete-list" class="autocomplete-items"></div>
                </div>

                <div id="cards-container">
                    <!-- Dinamičke kartice se renderuju ovde -->
                    <div style="text-align: center; color: #888; padding: 20px; font-size:14px;" id="idleState">
                        Molimo izaberite poslovnicu kako bi učitali eventualne storno zahteve.
                    </div>
                </div>

                <div class="hints" id="globalHints" style="display:none;">
                    ⚠️ Molimo slikajte strogo <b>jednu po jednu</b> uplatnicu.
                </div>
            </div>
        </div>

        <div class="bottom-cta">
            <button id="mainSubmitBtn" disabled>NEMA SPREMNIH SLIKA</button>
            <div style="text-align: center; margin-top: 8px;">
                <small id="appVersionDisplay" style="color: #888; font-weight: bold;"></small>
            </div>
        </div>

        <!-- LOADING OVERLAY ZA SLANJE -->
        <div id="loadingOverlay" style="display: none;">
            <div class="spinner"></div>
            <div id="loadingText">Šaljem dokumente...</div>
            <div id="loadingProgress" class="progress-text">0 / 0</div>
        </div>
    </div>

    <script>
        const APP_VERSION = '1.2';
        document.getElementById('appVersionDisplay').innerText = `Verzija ${APP_VERSION}`;

        const svePoslovnice = <?php echo json_encode($poslovnice_lista); ?>;

        const inputPoslovnica = document.getElementById('poslovnica');
        const listContainer = document.getElementById('autocomplete-list');
        const clearBtn = document.getElementById('clearInput');
        const cardsContainer = document.getElementById('cards-container');
        const mainSubmitBtn = document.getElementById('mainSubmitBtn');
        const loadingOverlay = document.getElementById('loadingOverlay');
        const loadingText = document.getElementById('loadingText');
        const loadingProgress = document.getElementById('loadingProgress');
        const globalHints = document.getElementById('globalHints');
        const statusBox = document.getElementById('statusBox');

        // Glavni rezervoar za sve sakupljene fajlove (kartice)
        let payloadPool = {};
        let globalLocationId = null;

        // Inicijalizacija poslovnice (ukoliko je sačuvana u localStorage)
        const savedPoslovnica = localStorage.getItem('moja_poslovnica');
        const savedPoslovnicaId = localStorage.getItem('moja_poslovnica_id');
        if (savedPoslovnica && savedPoslovnicaId) {
            inputPoslovnica.value = savedPoslovnica;
            globalLocationId = savedPoslovnicaId;
            clearBtn.style.display = 'block';
            ucitajZahteve(savedPoslovnicaId);
        }

        clearBtn.addEventListener('click', function () {
            resetSve();
        });

        function resetSve() {
            inputPoslovnica.value = '';
            globalLocationId = null;
            clearBtn.style.display = 'none';
            listContainer.innerHTML = '';
            cardsContainer.innerHTML = '<div style="text-align: center; color: #888; padding: 20px; font-size:14px;">Molimo izaberite poslovnicu kako bi učitali eventualne storno zahteve.</div>';
            globalHints.style.display = 'none';
            statusBox.style.display = 'none';
            payloadPool = {};
            azurirajCtaDugme();
            localStorage.removeItem('moja_poslovnica');
            localStorage.removeItem('moja_poslovnica_id');
            inputPoslovnica.focus();
        }

        // AUTOCOMPLETE LOGIKA
        inputPoslovnica.addEventListener('input', function () {
            let val = this.value;
            listContainer.innerHTML = '';

            if (val.length > 0) {
                clearBtn.style.display = 'block';
            } else {
                clearBtn.style.display = 'none';
                return false;
            }

            const searchStr = val.toLowerCase().replace(/[.,-]/g, '').replace(/\s+/g, ' ').trim();
            const searchTerms = searchStr.split(' ');

            let count = 0;
            for (let i = 0; i < svePoslovnice.length; i++) {
                const targetObj = svePoslovnice[i];
                const targetOriginal = targetObj.naziv;
                const targetClean = targetOriginal.toLowerCase().replace(/[.,-]/g, '').replace(/\s+/g, ' ');

                let matchesAll = true;
                for (let term of searchTerms) {
                    if (!targetClean.includes(term)) {
                        matchesAll = false;
                        break;
                    }
                }

                if (matchesAll) {
                    let div = document.createElement('div');
                    let displayHtml = targetOriginal;
                    for (let term of searchTerms) {
                        if (term.length > 1) {
                            let regex = new RegExp(`(${term})`, "gi");
                            displayHtml = displayHtml.replace(regex, "<b>$1</b>");
                        }
                    }
                    div.innerHTML = displayHtml;

                    div.addEventListener('click', function () {
                        inputPoslovnica.value = targetOriginal;
                        globalLocationId = targetObj.id;
                        listContainer.innerHTML = '';
                        clearBtn.style.display = 'block';
                        localStorage.setItem('moja_poslovnica', targetOriginal);
                        localStorage.setItem('moja_poslovnica_id', targetObj.id);

                        ucitajZahteve(targetObj.id);
                    });
                    listContainer.appendChild(div);
                    count++;
                    if (count >= 20) break;
                }
            }
        });

        document.addEventListener('click', function (e) {
            if (e.target !== inputPoslovnica && e.target !== clearBtn) {
                listContainer.innerHTML = '';
            }
        });

        // POZIV API-JA I RENDER CARTICA
        function ucitajZahteve(locationId) {
            payloadPool = {}; // Rest pools if location changes
            cardsContainer.innerHTML = '<div style="text-align: center; color: #888; padding: 20px; font-size:14px;">🛠 Tražim zahteve...</div>';

            fetch(`api/proveri_storno.php?location_id=${locationId}`)
                .then(res => res.json())
                .then(data => {
                    cardsContainer.innerHTML = '';

                    if (data.found && data.data && data.data.length > 0) {
                        data.data.forEach(zahtev => {
                            renderStornoCard(zahtev);
                        });
                    }

                    // Uvek dodajemo na kraju i jednu generičku karticu za obične dokumente
                    renderGenericCard();

                    globalHints.style.display = 'block';
                    azurirajCtaDugme();
                })
                .catch(err => {
                    console.error('Greška:', err);
                    cardsContainer.innerHTML = '<div style="text-align: center; color: red; padding: 20px;">Mrežna greška. Molimo pokušajte ponovo.</div>';
                });
        }

        function renderStornoCard(zahtev) {
            const cardId = 'card_storno_' + zahtev.transaction_id;

            // Inteligentno formatiranje vremena prijema
            let formatiranoVreme = zahtev.vreme_prijema || zahtev.datum_transakcije;
            if (zahtev.vreme_prijema) {
                try {
                    // Pretvaranje MySQL datetime (YYYY-MM-DD HH:MM:SS) formata u siguran JS format
                    const safeDateString = zahtev.vreme_prijema.replace(' ', 'T');
                    const dateObj = new Date(safeDateString);
                    const danas = new Date();

                    const jeDanas = dateObj.getDate() === danas.getDate() &&
                        dateObj.getMonth() === danas.getMonth() &&
                        dateObj.getFullYear() === danas.getFullYear();

                    const hours = String(dateObj.getHours()).padStart(2, '0');
                    const minutes = String(dateObj.getMinutes()).padStart(2, '0');

                    if (jeDanas) {
                        formatiranoVreme = `Danas u ${hours}:${minutes}h`;
                    } else {
                        const day = String(dateObj.getDate()).padStart(2, '0');
                        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
                        formatiranoVreme = `${day}.${month}.${dateObj.getFullYear()}. u ${hours}:${minutes}h`;
                    }
                } catch (e) {
                    console.error("Greška pri parsiranju datuma", e);
                }
            }

            const html = `
                <div class="card storno-card" id="${cardId}">
                    <div class="card-header">
                        <div>
                            <div class="card-title">STORNO ZAHTEV</div>
                            <div class="card-details">ID: ${zahtev.transaction_id} | ${formatiranoVreme}</div>
                        </div>
                        <div class="card-amount">${zahtev.amount} ${zahtev.currency || 'RSD'}</div>
                    </div>
                    <label class="btn-capture">
                        📸 Uslikaj uplatnicu
                        <input type="file" accept="image/*,application/pdf" capture="environment" style="display:none;" 
                            onchange="handleFileInput(event, '${cardId}', '${zahtev.transaction_id}')">
                    </label>
                    <img class="preview-img" id="${cardId}-img">
                    <div class="pdf-label" id="${cardId}-pdf">Spreman PDF dokument</div>
                </div>
            `;
            cardsContainer.insertAdjacentHTML('beforeend', html);
        }

        function renderGenericCard() {
            // Unikatni ID za generičku karticu na osnovu vremena
            const genId = 'generic_doc';
            const html = `
                <div class="card generic-card" id="card_${genId}">
                    <div class="card-header">
                        <div>
                            <div class="card-title">DODATNI DOKUMENT</div>
                            <div class="card-details">Ugovor, izjava, ostalo...</div>
                        </div>
                    </div>
                    <label class="btn-capture" style="background:#555;">
                        📎 Uslikaj ili izaberi
                        <input type="file" accept="image/*,application/pdf" style="display:none;" 
                            onchange="handleFileInput(event, 'card_${genId}', '')">
                    </label>
                    <img class="preview-img" id="card_${genId}-img">
                    <div class="pdf-label" id="card_${genId}-pdf">Spreman PDF dokument</div>
                </div>
            `;
            cardsContainer.insertAdjacentHTML('beforeend', html);
        }

        // OBRADA SETOVANJA FAJLOVA ZA POJEDINAČNE KARTICE
        function handleFileInput(e, cardElementId, transactionId) {
            const file = e.target.files[0];
            if (!file) return;

            const isPdf = file.type === 'application/pdf';
            const previewImgEl = document.getElementById(cardElementId + '-img');
            const previewPdfEl = document.getElementById(cardElementId + '-pdf');
            const cardEl = document.getElementById(cardElementId);
            const btnEl = cardEl.querySelector('.btn-capture');

            if (isPdf) {
                spremiURezervoar(cardElementId, transactionId, file, true);

                previewImgEl.style.display = 'none';
                previewPdfEl.style.display = 'block';
                btnEl.innerHTML = `♻️ Promeni PDF`;
                cardEl.classList.add('ready');
            } else {
                // Resize image
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (event) {
                    const img = new Image();
                    img.src = event.target.result;
                    img.onload = function () {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');

                        const maxWidth = 1600;
                        let width = img.width;
                        let height = img.height;

                        if (width > maxWidth) {
                            height *= maxWidth / width;
                            width = maxWidth;
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);

                        canvas.toBlob(function (blob) {
                            spremiURezervoar(cardElementId, transactionId, blob, false);

                            previewPdfEl.style.display = 'none';
                            previewImgEl.src = URL.createObjectURL(blob);
                            previewImgEl.style.display = 'block';
                            btnEl.innerHTML = `♻️ Ponovi slikanje`;
                            cardEl.classList.add('ready');

                        }, 'image/jpeg', 0.8);
                    }
                }
            }
        }

        function spremiURezervoar(cardId, transactionId, blob, isPdf) {
            payloadPool[cardId] = {
                transactionId: transactionId, // Ako je generic, ovo je prazno
                file: blob,
                isPdf: isPdf
            };
            azurirajCtaDugme();

            // Ukoliko popunimo karticu "Dodatni Dokument", renderuj novu čistu odmah ispod za beskonačni upload
            if (cardId.startsWith('card_generic_') && document.querySelectorAll('.generic-card:not(.ready)').length === 0) {
                renderGenericCardN();
            }
            if (cardId === 'card_generic_doc') {
                renderGenericCardN();
            }
        }

        let genCounter = 1;
        function renderGenericCardN() {
            const genId = 'generic_doc_' + genCounter++;
            const html = `
                <div class="card generic-card" id="card_${genId}">
                    <div class="card-header">
                        <div class="card-title">JOŠ JEDAN DOKUMENT</div>
                    </div>
                    <label class="btn-capture" style="background:#555;">
                        📎 Uslikaj ili izaberi
                        <input type="file" accept="image/*,application/pdf" style="display:none;" 
                            onchange="handleFileInput(event, 'card_${genId}', '')">
                    </label>
                    <img class="preview-img" id="card_${genId}-img">
                    <div class="pdf-label" id="card_${genId}-pdf">Spreman PDF dokument</div>
                </div>
            `;
            cardsContainer.insertAdjacentHTML('beforeend', html);
        }

        function azurirajCtaDugme() {
            const count = Object.keys(payloadPool).length;
            if (count > 0) {
                let txt = count === 1 ? "1 DOKUMENT SPREMAN" : `${count} SPREMNA DOKUMENTA`;
                mainSubmitBtn.innerText = `${txt} - POŠALJI`;
                mainSubmitBtn.disabled = false;
            } else {
                mainSubmitBtn.innerText = "NEMA SPREMNIH SLIKA";
                mainSubmitBtn.disabled = true;
            }
        }

        // ASINHRONO ITERATIVNO SLANJE
        mainSubmitBtn.addEventListener('click', async function () {
            const keys = Object.keys(payloadPool);
            if (keys.length === 0) return;

            const poslovnicaNaziv = inputPoslovnica.value;
            if (!globalLocationId) {
                alert("Greška: Poslovnica nije pravilno selektovana.");
                return;
            }

            // UI Blokada
            loadingOverlay.style.display = 'flex';
            mainSubmitBtn.disabled = true;
            statusBox.style.display = 'none';

            let successCount = 0;
            let current = 1;
            let total = keys.length;

            for (const key of keys) {
                loadingProgress.innerText = `Obrađujem: ${current} od ${total}...`;
                const item = payloadPool[key];

                const fd = new FormData();
                fd.append('poslovnica', poslovnicaNaziv);
                fd.append('sp_location_id', globalLocationId);
                fd.append('sp_transaction_id', item.transactionId); // "" ako je generička kartica
                fd.append('is_pdf', item.isPdf ? '1' : '0');
                fd.append('app_version', APP_VERSION);
                fd.append('slika', item.file, item.isPdf ? "document.pdf" : "image.jpg");

                try {
                    const response = await fetch('index.php', { method: 'POST', body: fd });
                    const result = await response.json();

                    if (result.status === 'success') {
                        successCount++;
                        // Vizuelno ukidamo tu karticu iz GUI
                        const trgCard = document.getElementById(key);
                        if (trgCard) trgCard.style.display = 'none';
                    } else {
                        console.error('Server error on upload: ', result.message);
                        alert(`Dokument za ${item.transactionId || 'Običnu sliku'} nije uspeo: ${result.message}`);
                    }
                } catch (err) {
                    console.error('Fetch error:', err);
                    alert(`Došlo je do mrežne greške na dokumentu ${current}. Mogući prekid interneta.`);
                }

                current++;
            }

            loadingOverlay.style.display = 'none';

            // Očistimo pool zbog uspešnih
            payloadPool = {};

            if (successCount > 0) {
                statusBox.innerHTML = `✅ Uspešno otpremljeno ${successCount} slika/dokumenata!`;
                statusBox.style.background = "#d4edda";
                statusBox.style.color = "#155724";
                statusBox.style.display = "block";
            }

            // Rekonstruiši liste za preostale ili osvežene stornove iz baze
            ucitajZahteve(globalLocationId);
        });
    </script>
</body>

</html>