<!DOCTYPE html>

<html lang="hu">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Kártevőmester Kft. – Digitális Munkalap & Térkép v4.0 Pro</title>

    <meta name="theme-color" content="#1e6b34">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <style>

        :root {

            --primary: #1e6b34;

            --primary-dark: #144d24;

            --primary-light: #e8f5e9;

            --accent: #2e7d32;

            --bg: #f3f6f4;

            --card-bg: #ffffff;

            --text: #2c3e50;

            --text-muted: #6c757d;

            --border: #dce4df;

            --danger: #d32f2f;

            --warning: #f57c00;

        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        body {

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

            background-color: var(--bg);

            color: var(--text);

            margin: 0;

            padding: 0;

            font-size: 14px;

        }

        /* --- V3.0 PRÉMIUM FEJLÉC --- */

        .top-header {

            background-color: var(--primary);

            color: white;

            padding: 12px 20px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 12px;

            box-shadow: 0 2px 8px rgba(0,0,0,0.15);

        }

        .brand-box {

            display: flex;

            align-items: center;

            gap: 12px;

        }

        .brand-logo {

            width: 40px;

            height: 40px;

            background: white;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 22px;

            border: 2px solid #a5d6a7;

            box-shadow: 0 2px 4px rgba(0,0,0,0.2);

        }

        .brand-title h1 {

            margin: 0;

            font-size: 1.15rem;

            letter-spacing: 0.5px;

            font-weight: 800;

        }

        .brand-title p {

            margin: 2px 0 0 0;

            font-size: 0.75rem;

            opacity: 0.9;

        }

        .header-controls {

            display: flex;

            align-items: center;

            gap: 10px;

            flex-wrap: wrap;

        }

        .template-select {

            background: white;

            color: #222;

            border: none;

            padding: 8px 12px;

            border-radius: 6px;

            font-weight: 700;

            font-size: 0.85rem;

            cursor: pointer;

            box-shadow: 0 1px 3px rgba(0,0,0,0.2);

        }

        .status-badge {

            background: rgba(255,255,255,0.18);

            border: 1px solid rgba(255,255,255,0.35);

            color: white;

            padding: 6px 12px;

            border-radius: 20px;

            font-weight: 700;

            font-size: 0.8rem;

        }

        /* --- NAVIGÁCIÓS FÜLEK --- */

        .nav-tabs {

            display: flex;

            background: white;

            border-bottom: 1px solid var(--border);

            padding: 0 10px;

            overflow-x: auto;

            position: sticky;

            top: 0;

            z-index: 90;

        }

        .nav-tab {

            flex: 1;

            text-align: center;

            padding: 13px 14px;

            font-weight: 700;

            font-size: 0.85rem;

            color: #495057;

            cursor: pointer;

            border-bottom: 3px solid transparent;

            transition: all 0.2s;

            white-space: nowrap;

        }

        .nav-tab.active {

            color: var(--primary);

            border-bottom: 3px solid var(--primary);

            background: linear-gradient(to top, #eff7f1, white);

        }

        /* --- TARTALOM ÉS KÁRTYÁK --- */

        .main-container {

            max-width: 1100px;

            margin: 15px auto;

            padding: 0 12px 50px 12px;

        }

        .tab-pane { display: none; }

        .tab-pane.active { display: block; }

        .card {

            background: var(--card-bg);

            border-radius: 10px;

            border: 1px solid var(--border);

            padding: 18px 20px;

            margin-bottom: 18px;

            box-shadow: 0 2px 6px rgba(0,0,0,0.03);

        }

        .card-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            border-bottom: 1px solid #e9ecef;

            padding-bottom: 10px;

            margin-bottom: 16px;

            flex-wrap: wrap;

            gap: 10px;

        }

        .card-title {

            font-size: 1rem;

            font-weight: 700;

            color: var(--primary-dark);

            display: flex;

            align-items: center;

            gap: 8px;

            margin: 0;

        }

        /* --- GRID RENDSZER --- */

        .grid-3 {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 14px;

            margin-bottom: 12px;

        }

        .grid-2 {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 14px;

            margin-bottom: 12px;

        }

        @media (max-width: 780px) {

            .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 10px; }

        }

        .form-group { margin-bottom: 8px; }

        .form-group label {

            display: block;

            font-size: 0.78rem;

            font-weight: 700;

            color: #495057;

            margin-bottom: 4px;

        }

        input, select, textarea {

            width: 100%;

            padding: 10px 12px;

            border: 1px solid #ced4da;

            border-radius: 6px;

            font-size: 16px; /* iOS/Mobil ne nagyítson bele */

            color: #212529;

            background: #fff;

        }

        input:focus, select:focus, textarea:focus {

            outline: none;

            border-color: var(--primary);

            box-shadow: 0 0 0 2px rgba(30, 107, 52, 0.15);

        }

        input[readonly] {

            background-color: #eff3f0;

            color: #1e6b34;

            font-weight: 700;

        }

        /* --- GOMBOK --- */

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 6px;

            padding: 9px 14px;

            border-radius: 6px;

            font-weight: 700;

            font-size: 0.85rem;

            cursor: pointer;

            border: 1px solid transparent;

            transition: all 0.15s;

        }

        .btn-dark { background: #37474f; color: white; }

        .btn-primary { background: var(--primary); color: white; }

        .btn-outline { background: white; color: var(--primary); border-color: var(--primary); }

        .btn-danger { background: #fff5f5; color: var(--danger); border-color: #ffcdd2; }

        .btn-warning { background: #fff8e1; color: #e65100; border-color: #ffe082; }

        /* --- TÉRKÉP STÚDIÓ --- */

        .map-wrapper {

            border: 2px dashed #b0bec5;

            border-radius: 8px;

            background: #f8f9fa;

            position: relative;

            overflow: hidden;

            margin-top: 10px;

        }

        #mapCanvas {

            width: 100%;

            height: 360px;

            display: block;

            touch-action: none;

        }

        .map-controls {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-top: 10px;

        }

        /* --- LÁDA TÁBLÁZAT --- */

        .station-table {

            width: 100%;

            border-collapse: collapse;

            font-size: 0.85rem;

        }

        .station-table th, .station-table td {

            padding: 9px 10px;

            border-bottom: 1px solid #e9ecef;

            text-align: left;

        }

        .station-table th {

            background: #f1f5f2;

            color: var(--primary-dark);

            font-weight: 700;

        }

        .station-row.checked { background-color: #f4fbf6; }

        .badge-ok { background: #d4edda; color: #155724; padding: 3px 8px; border-radius: 12px; font-weight: 700; font-size: 0.75rem; }

        .badge-warn { background: #fff3cd; color: #856404; padding: 3px 8px; border-radius: 12px; font-weight: 700; font-size: 0.75rem; }

        /* --- ALÁÍRÓ PAD & MUNKALAP ELŐNÉZET --- */

        .sig-box {

            border: 2px dashed #90a4ae;

            border-radius: 8px;

            background: #ffffff;

            height: 180px;

            position: relative;

        }

        #sigCanvas {

            width: 100%;

            height: 100%;

            display: block;

            touch-action: none;

        }

        .preview-paper {

            border: 1px solid #ccc;

            background: #fff;

            padding: 20px;

            border-radius: 6px;

            box-shadow: 0 3px 10px rgba(0,0,0,0.08);

            margin-bottom: 20px;

        }

        .preview-header {

            display: flex;

            justify-content: space-between;

            border-bottom: 2px solid var(--primary);

            padding-bottom: 10px;

            margin-bottom: 15px;

            flex-wrap: wrap;

            gap: 10px;

        }

        @media print {

            .top-header, .nav-tabs, .no-print { display: none !important; }

            .main-container { margin: 0; padding: 0; max-width: 100%; }

            .card { border: none; box-shadow: none; padding: 0; }

        }

    </style>

</head>

<body>

    <header class="top-header">

        <div class="brand-box">

            <div class="brand-logo">🦟</div>

            <div class="brand-title">

                <h1>KÁRTEVŐMESTER KFT.</h1>

                <p>Terepi Ellenőrző & Munkalap App v4.0 Pro</p>

            </div>

        </div>

        <div class="header-controls">

            <select id="sablonSelect" class="template-select" onchange="valtsSablont()">

                <option value="ipari">📁 Sablon: Ipari / HACCP Partner (16 láda)</option>

                <option value="ovoda">📁 Sablon: Önkormányzati Óvoda / Konyha (8 láda)</option>

                <option value="magtar">📁 Sablon: Mezőgazdasági Telep / Magtár (24 láda)</option>

                <option value="egyedi">📁 Sablon: Egyedi / Eseti Kezelés (0 láda)</option>

            </select>

            <div class="status-badge" id="ladaStatusBadge">16 / 16 ellenőrizve</div>

        </div>

    </header>

    <nav class="nav-tabs">

        <div class="nav-tab active" onclick="openTab(1)">1. Alapadatok & Térkép</div>

        <div class="nav-tab" onclick="openTab(2)">2. Terepi Ellenőrző (Ládák)</div>

        <div class="nav-tab" onclick="openTab(3)">3. Éves Összesítő & Trend</div>

        <div class="nav-tab" onclick="openTab(4)">4. Munkalap, TIG & Küldés ✍️</div>

    </nav>

    <div class="main-container">

        <!-- 1. FÜL -->

        <div id="tab1" class="tab-pane active">

            <div class="card">

                <div class="card-header">

                    <h2 class="card-title">🏢 1. Megrendelő és Kezelés Alapadatai</h2>

                    <div style="display:flex; gap:8px; flex-wrap:wrap;">

                        <button class="btn btn-outline" onclick="betoltFopartner()">🔄 Főpartner választó</button>

                        <button class="btn btn-dark" onclick="mentesMemoriaba()">💾 Mentés a memóriába</button>

                    </div>

                </div>

                <div class="grid-3">

                    <div class="form-group">

                        <label>Munkalap Sorszáma (Zárt láncú ID):</label>

                        <input type="text" id="munkalapSzam" readonly>

                    </div>

                    <div class="form-group">

                        <label>Aktuális Irtási Időszak:</label>

                        <input type="text" id="aktualisIdoszak" readonly>

                    </div>

                    <div class="form-group">

                        <label>Következő Esedékes Ellenőrzés:</label>

                        <input type="text" id="kovetkezoIdoszak" readonly>

                    </div>

                </div>

                <div class="grid-3">

                    <div class="form-group">

                        <label>Megrendelő neve (Főpartner):</label>

                        <input type="text" id="megrendeloNev" value="Mintám Kft." oninput="frissitElonezet()">

                    </div>

                    <div class="form-group">

                        <label>Munkavégzés helye (Telephely):</label>

                        <input type="text" id="telephelyCim" value="6800 Hódmezővásárhely, Ipari park 12." oninput="frissitElonezet()">

                    </div>

                    <div class="form-group">

                        <label>Kapcsolattartó / Aláíró neve:</label>

                        <input type="text" id="kapcsolattarto" value="Kovács Anna minőségirányítási vezető" oninput="frissitElonezet()">

                    </div>

                </div>

                <div class="grid-3">

                    <div class="form-group">

                        <label>Megrendelő E-mail címe:</label>

                        <input type="email" id="ugyfelEmail" value="ugyfel@cegnev.hu">

                    </div>

                    <div class="form-group">

                        <label>Kezelés dátuma:</label>

                        <input type="date" id="kezelesDatum" onchange="szamolIdoszakok(); frissitElonezet()">

                    </div>

                    <div class="form-group">

                        <label>Aktuális hónap:</label>

                        <select id="aktualisHonap">

                            <option>Január</option><option>Február</option><option>Március</option>

                            <option>Április</option><option>Május</option><option>Június</option>

                            <option>Július</option><option>Augusztus</option><option>Szeptember</option>

                            <option selected>Október</option><option>November</option><option>December</option>

                        </select>

                    </div>

                </div>

                <div class="grid-3">

                    <div class="form-group">

                        <label>Kezelés jellege / Munka mennyisége:</label>

                        <select id="kezelesJellege" onchange="frissitElonezet()">

                            <option>Szerződéses karbantartás (HACCP / IPM kontroll)</option>

                            <option>Negyedéves kötelező rágcsáló- és rovarirtás</option>

                            <option>Eseti sürgősségi kártevőirtás / Gócpont felszámolás</option>

                            <option>Termény- és gabonagázosítás (Zárt téri)</option>

                            <option>Csípőszúnyog-gyérítés (Melegköd / ULV)</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Irtási gyakoriság:</label>

                        <select id="gyakorisag" onchange="szamolIdoszakok()">

                            <option value="1">Havi rendszerességű (+1 hónap)</option>

                            <option value="3">Negyedéves rendszerességű (+3 hónap)</option>

                            <option value="6">Féléves rendszerességű (+6 hónap)</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Végrehajtó szakember:</label>

                        <input type="text" id="szakember" value="Kalmár Norbert (eü. gázmester, kártevőirtó)" readonly>

                    </div>

                </div>

            </div>

            <div class="card">

                <div class="card-header">

                    <h2 class="card-title">🧪 2. Alkalmazott Irtószerek, Dózisok és IPM Megjegyzések</h2>

                </div>

                <div class="grid-3">

                    <div class="form-group">

                        <label>Rágcsálóirtó szer / Csapda:</label>

                        <select id="ragcsaloSzer" onchange="frissitHatoanyag(); frissitElonezet()">

                            <option value="0,005% bromadiolon">Biotoll Ratimor Blokk (0,005% bromadiolon)</option>

                            <option value="0,005% brodifakum">Vétox / Brodifakum Pép (0,005% brodifakum)</option>

                            <option value="0,0025% difenakum">Difenakum Paraffinos Blokk (0,0025% difenakum)</option>

                            <option value="Irtószermentes monitoring">Irtószermentes ragacsos / mechanikus csapda</option>

                            <option value="Nem történt kihelyezés">Nem volt (----)</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Rágcsálóirtó hatóanyag:</label>

                        <input type="text" id="ragcsaloHatoanyag" value="0,005% bromadiolon">

                    </div>

                    <div class="form-group">

                        <label>Alap töltet / szerelvény (g):</label>

                        <input type="number" id="alapToltet" value="200" step="50">

                    </div>

                </div>

                <div class="grid-3">

                    <div class="form-group">

                        <label>Csótány- és rovarirtó szer / technológia:</label>

                        <select id="csotanySzer" onchange="frissitElonezet()">

                            <option>Maxforce White IC csótányirtó gél (2,15% imidakloprid)</option>

                            <option>K-Othrine SC 25 (2,5% deltametrin) – Permetezés</option>

                            <option>Solfac EW 50 (5% ciflutrin) – Permetezés</option>

                            <option>Monitoring rovarcsapda (attraktáns ragacsos lap)</option>

                            <option>Nem volt (----)</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Csótány fertőzöttség és kijuttatott mennyiség:</label>

                        <select id="csotanyMennyiseg">

                            <option>Kis mérvű | 5 mm (0,1 g) cseppek (1–2 csepp/m²)</option>

                            <option>Közepes / Nagy mérvű | 5 mm (0,1 g) cseppek (2–3 csepp/m²)</option>

                            <option>Permetezés: 50 ml munkaoldat / m² résekbe, szegélyekre</option>

                            <option>Fertőzöttség nem tapasztalható (Prevenció)</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Egyéb speciális kártevőirtás / Gázosítás / Eszköz:</label>

                        <select id="egyebKezeles" onchange="frissitElonezet()">

                            <option>Nem volt (----)</option>

                            <option>Darázsirtás porozással (Birchmeier DR 5 porozó)</option>

                            <option>Csípőszúnyog-gyérítés (Melegködképző / ULV technológia)</option>

                            <option>Terménygázosítás – Quickphos (56% alumínium-foszfid)</option>

                            <option>Hangya- / Poloska- / Bolhairtás célzott permetezéssel</option>

                        </select>

                    </div>

                </div>

                <div class="form-group">

                    <label>Csótányirtás dózis és hatástartam tájékoztató:</label>

                    <textarea id="dozisTajekoztato" rows="2">A gélt kb. 5 mm (0,1 g) átmérőjű cseppek formájában juttatjuk ki: kis mérvű német csótányfertőzöttség esetén 1 csepp/m² vagy folyóméter; nagy mérvű német csótányfertőzöttség esetén 2 csepp/m²; kis mérvű konyhai csótányfertőzöttség esetén 2 csepp/m²; nagy mérvű konyhai csótányfertőzöttség esetén 3 csepp/m². A hatástartam (megfelelő higiénia mellett) 12 hét. Rágcsálóirtás esetén ellenszer: K1-vitamin (Konakion).</textarea>

                </div>

                <div class="form-group">

                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;">

                        <label style="margin:0;">Szakmai Észrevételek, Higiéniai & Műszaki Javaslatok (IPM):</label>

                        <button type="button" class="btn btn-outline" style="padding:4px 10px; font-size:0.78rem;" onclick="inditsDiktalast()">🎤 Diktálás</button>

                    </div>

                    <textarea id="ipmMegjegyzes" rows="3" oninput="frissitElonezet()">A külső rágcsálóirtó szerelvények épek, a 4-es és 7-es ládában részleges fogyás tapasztalható, a szerelvényeket friss Biotoll Ratimor blokkal feltöltöttük. A raktár hátsó rámpájánál a résmentesítést javasoljuk.</textarea>

                </div>

            </div>

            <div class="card">

                <div class="card-header">

                    <h2 class="card-title">🗺️ 3. Interaktív Szerelvény Térkép Stúdió</h2>

                    <input type="file" id="mapUploader" accept="image/*" style="width:auto; padding:5px;">

                </div>

                <div class="map-controls">

                    <button type="button" class="btn btn-primary" id="modeRagcsalo" onclick="setMapMode('ragcsalo')">🔴 Rágcsáló láda</button>

                    <button type="button" class="btn btn-outline" id="modeRovar" onclick="setMapMode('rovar')">🔵 Rovarcsapda</button>

                    <button type="button" class="btn btn-warning" onclick="rajzoljGocpontPoligont()">⚠️ Gócpont poligon</button>

                    <button type="button" class="btn btn-outline" onclick="visszavonUtolsoPin()">↩️ Utolsó törlése</button>

                    <button type="button" class="btn btn-danger" onclick="torolTeljesTerkep()">🗑️ Alaphelyzet</button>

                    <button type="button" class="btn btn-dark" onclick="letoltTerkepKep()">📥 Mentés képként</button>

                </div>

                <div class="map-wrapper">

                    <canvas id="mapCanvas"></canvas>

                </div>

            </div>

        </div>

        <!-- 2. FÜL -->

        <div id="tab2" class="tab-pane">

            <div class="card">

                <div class="card-header">

                    <h2 class="card-title">📦 Terepi Szerelvény (Láda) Ellenőrző Napló</h2>

                    <div style="display:flex; gap:8px; flex-wrap:wrap;">

                        <button class="btn btn-outline" onclick="nfcSzimulacio()">📲 NFC / QR Beolvasás</button>

                        <button class="btn btn-primary" onclick="mindentEllenoriz()">✅ Összes láda: Rendben</button>

                        <button class="btn btn-dark" onclick="ujLadaHozzaadasa()">➕ Új láda</button>

                    </div>

                </div>

                <div style="overflow-x:auto;">

                    <table class="station-table">

                        <thead>

                            <tr>

                                <th>Láda #</th>

                                <th>Elhelyezés / Zóna</th>

                                <th>Típus</th>

                                <th>Fogyás (%)</th>

                                <th>Állapot</th>

                                <th>Pótlás (g)</th>

                                <th>OK</th>

                            </tr>

                        </thead>

                        <tbody id="ladaTableBody"></tbody>

                    </table>

                </div>

            </div>

        </div>

        <!-- 3. FÜL -->

        <div id="tab3" class="tab-pane">

            <div class="card">

                <div class="card-header">

                    <h2 class="card-title">📊 Éves Fogyási Összesítő és Fertőzöttségi Trend (HACCP / NÉBIH Audit)</h2>

                </div>

                <div class="grid-3">

                    <div style="background:#e8f5e9; padding:16px; border-radius:8px; border-left:4px solid #1e6b34;">

                        <div style="font-size:0.8rem; font-weight:700; color:#1e6b34;">ÖSSZES KIHELYEZETT IRTÓSZER</div>

                        <div style="font-size:1.6rem; font-weight:800; margin-top:4px;">3 200 g</div>

                        <div style="font-size:0.75rem; color:#555;">Aktuális ellenőrzési ciklusban</div>

                    </div>

                    <div style="background:#fff3cd; padding:16px; border-radius:8px; border-left:4px solid #f57c00;">

                        <div style="font-size:0.8rem; font-weight:700; color:#856404;">AKTÍV FOGYÁSOS PONTOK</div>

                        <div style="font-size:1.6rem; font-weight:800; margin-top:4px;">2 db láda</div>

                        <div style="font-size:0.75rem; color:#555;">Gócpont megfigyelés alatt (Láda #4, #7)</div>

                    </div>

                    <div style="background:#e3f2fd; padding:16px; border-radius:8px; border-left:4px solid #1976d2;">

                        <div style="font-size:0.8rem; font-weight:700; color:#0d47a1;">AUDIT MEGFELELŐSÉG</div>

                        <div style="font-size:1.6rem; font-weight:800; margin-top:4px;">100% (HACCP)</div>

                        <div style="font-size:0.75rem; color:#555;">Zárt láncú dokumentáció rendben</div>

                    </div>

                </div>

            </div>

        </div>

        <!-- 4. FÜL -->

        <div id="tab4" class="tab-pane">

            <div class="card">

                <div class="card-header no-print">

                    <h2 class="card-title">✍️ 4. Hivatalos Munkalap + Pénzügyi TIG Hitelesítés</h2>

                    <div style="display:flex; gap:8px; flex-wrap:wrap;">

                        <button class="btn btn-outline" onclick="window.print()">🖨️ Nyomtatás / PDF</button>

                        <button class="btn btn-primary" onclick="kuldesEsZaras()">🚀 Zárás & E-mail Küldés</button>

                    </div>

                </div>

                <div class="preview-paper">

                    <div class="preview-header">

                        <div>

                            <h2 style="margin:0; color:#1e6b34;">KÁRTEVŐMESTER KFT.</h2>

                            <p style="margin:2px 0; font-size:0.8rem;">6800 Hódmezővásárhely | Kalmár Norbert – egészségügyi gázmester, kártevőirtó</p>

                        </div>

                        <div style="text-align:right;">

                            <div style="font-weight:800; font-size:1rem; color:#1e6b34;" id="prevSorszam">KM-2026-10-104</div>

                            <div style="font-size:0.8rem; color:#555;">Munkalap & Teljesítésigazolás (TIG)</div>

                        </div>

                    </div>

                    <div class="grid-2" style="font-size:0.88rem; background:#f8faf9; padding:12px; border-radius:6px;">

                        <div>

                            <strong>Megrendelő (Főpartner):</strong> <span id="prevMegrendelo"></span><br>

                            <strong>Munkavégzés helye (Telephely):</strong> <span id="prevTelephely"></span><br>

                            <strong>Kapcsolattartó:</strong> <span id="prevKapcsolattarto"></span>

                        </div>

                        <div>

                            <strong>Kezelés dátuma:</strong> <span id="prevDatum"></span><br>

                            <strong>Irtási időszak:</strong> <span id="prevIdoszak"></span><br>

                            <strong>Következő esedékes ellenőrzés:</strong> <span id="prevKovetkezo"></span>

                        </div>

                    </div>

                    <p style="font-size:0.88rem; margin:12px 0;">

                        <strong>Elvégzett munka jellege:</strong> <span id="prevJelleg"></span><br>

                        <strong>Alkalmazott irtószerek és technológia:</strong> <span id="prevSzerek"></span>

                    </p>

                    <p style="font-size:0.85rem; background:#fffef0; padding:10px; border-left:3px solid #1e6b34;">

                        <strong>Szakmai (IPM) megjegyzés:</strong> <span id="prevIpm"></span>

                    </p>

                    <p style="font-size:0.78rem; color:#555;">

                        <strong>Teljesítésigazolási záradék (TIG):</strong> Alulírott a Megrendelő képviseletében igazolom, hogy a Kártevőmester Kft. a fenti munkalapon részletezett egészségügyi kártevőirtási feladatokat szerződésszerűen elvégezte. Jelen dokumentum számlázási alapbizonylatként szolgál.

                    </p>

                </div>

                <div class="grid-2 no-print">

                    <div>

                        <div style="display:flex; justify-content:space-between; margin-bottom:5px;">

                            <label style="font-weight:700;">Megrendelő Aláírása (S-Pen / Érintőkijelző):</label>

                            <a href="#" onclick="torolAlairas(); return false;" style="color:var(--danger); font-size:0.8rem; font-weight:700;">Törlés / Újraírás</a>

                        </div>

                        <div class="sig-box">

                            <canvas id="sigCanvas"></canvas>

                        </div>

                    </div>

                    <div style="display:flex; flex-direction:column; justify-content:space-between; background:#f8faf9; padding:16px; border-radius:8px; border:1px solid var(--border);">

                        <div>

                            <strong>Szolgáltatói Hitelesítés (Digitális Bélyegző):</strong>

                            <p style="font-size:0.85rem; color:#2e7d32; margin:8px 0;">

                                ✔ KÁRTEVŐMESTER KFT. – Kalmár Norbert<br>

                                Egészségügyi gázmester, kártevőirtó, csípőszúnyogirtó technikus<br>

                                <em>Digitálisan hitelesítve a rendszer által.</em>

                            </p>

                        </div>

                        <button class="btn btn-primary" style="width:100%; padding:14px; font-size:1rem;" onclick="kuldesEsZaras()">

                            🧾 MUNKALAP ÉS TIG RÖGZÍTÉSE + E-MAIL KÜLDÉS

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>

        function openTab(index) {

            document.querySelectorAll('.nav-tab').forEach((t, i) => t.classList.toggle('active', i === index - 1));

            document.querySelectorAll('.tab-pane').forEach((p, i) => p.classList.toggle('active', i === index - 1));

            if (index === 1) setTimeout(resizeMapCanvas, 50);

            if (index === 4) {

                frissitElonezet();

                setTimeout(resizeSigCanvas, 50);

            }

        }

        window.addEventListener('DOMContentLoaded', () => {

            const ma = new Date();

            document.getElementById('kezelesDatum').value = ma.toISOString().split('T')[0];

            const ev = ma.getFullYear();

            const ho = String(ma.getMonth() + 1).padStart(2, '0');

            const sorszam = localStorage.getItem('km_last_seq') ? parseInt(localStorage.getItem('km_last_seq')) + 1 : 104;

            document.getElementById('munkalapSzam').value = `KM-${ev}-${ho}-${String(sorszam).padStart(3, '0')}`;

            szamolIdoszakok();

            generalLadak(16);

            setTimeout(() => { resizeMapCanvas(); resizeSigCanvas(); frissitElonezet(); }, 100);

        });

        function szamolIdoszakok() {

            const datumVal = document.getElementById('kezelesDatum').value;

            const d = datumVal ? new Date(datumVal) : new Date();

            const ev = d.getFullYear();

            const ho = d.getMonth() + 1;

            const negyedev = Math.ceil(ho / 3);

            const romai = ["I.", "II.", "III.", "IV."][negyedev - 1];

            document.getElementById('aktualisIdoszak').value = `${ev}. ${romai} negyedév (${String(ho).padStart(2,'0')}. hó)`;

            const pluszHo = parseInt(document.getElementById('gyakorisag').value || 1);

            const kov = new Date(d.getFullYear(), d.getMonth() + pluszHo, d.getDate());

            document.getElementById('kovetkezoIdoszak').value = `${kov.getFullYear()}. ${String(kov.getMonth() + 1).padStart(2, '0')}. hó (${kov.toISOString().split('T')[0]})`;

        }

        function frissitHatoanyag() {

            document.getElementById('ragcsaloHatoanyag').value = document.getElementById('ragcsaloSzer').value;

        }

        function valtsSablont() {

            const sablon = document.getElementById('sablonSelect').value;

            if (sablon === 'ipari') {

                document.getElementById('megrendeloNev').value = "Mintám Ipari Kft.";

                document.getElementById('telephelyCim').value = "6800 Hódmezővásárhely, Ipari park 12.";

                generalLadak(16);

            } else if (sablon === 'ovoda') {

                document.getElementById('megrendeloNev').value = "Hódmezővásárhely MJV Önkormányzata";

                document.getElementById('telephelyCim').value = "6800 Hódmezővásárhely, 3. sz. Óvoda és Főzőkonyha";

                generalLadak(8);

            } else if (sablon === 'magtar') {

                document.getElementById('megrendeloNev').value = "Dél-Alföldi Agrár Zrt.";

                document.getElementById('telephelyCim').value = "6800 Hódmezővásárhely, Külterületi Sörárpa Magtár";

                document.getElementById('egyebKezeles').selectedIndex = 3;

                generalLadak(24);

            } else {

                generalLadak(0);

            }

            frissitElonezet();

        }

        function betoltFopartner() {

            const valasz = prompt("Válassz Főpartnert:\n1 - Hódmezővásárhely Önkormányzat\n2 - Mintám Ipari Kft.\n3 - Dél-Alföldi Agrár Zrt.", "1");

            if (valasz === "1") { document.getElementById('sablonSelect').value = "ovoda"; valtsSablont(); }

            else if (valasz === "2") { document.getElementById('sablonSelect').value = "ipari"; valtsSablont(); }

            else if (valasz === "3") { document.getElementById('sablonSelect').value = "magtar"; valtsSablont(); }

        }

        function mentesMemoriaba() {

            localStorage.setItem('km_saved_partner', document.getElementById('megrendeloNev').value);

            alert("💾 Partner alapadatok elmentve a készülék memóriájába!");

        }

        let ladaAdatok = [];

        function generalLadak(db) {

            ladaAdatok = [];

            const zonak = ["Külső kerítés - Észak", "Raktár bejárat bal", "Raktár bejárat jobb", "Rámpa alatti sáv", "Hulladéktároló", "Kazánház külső fal", "Konyha gazdasági bejárat", "Szárazáru raktár"];

            for (let i = 1; i <= db; i++) {

                const fogyas = (i === 4 || i === 7) ? 50 : 0;

                ladaAdatok.push({

                    id: i,

                    zona: zonak[(i - 1) % zonak.length] + ` (#${i})`,

                    tipus: "Zárható rágcsálóirtó láda",

                    fogyas: fogyas,

                    allapot: fogyas > 0 ? "Részleges fogyás" : "Érintetlen",

                    potlas: fogyas > 0 ? 100 : 0,

                    checked: true

                });

            }

            renderLadaTabla();

        }

        function renderLadaTabla() {

            const tbody = document.getElementById('ladaTableBody');

            tbody.innerHTML = "";

            let ellenorizveDb = 0;

            ladaAdatok.forEach((l, idx) => {

                if (l.checked) ellenorizveDb++;

                const tr = document.createElement('tr');

                tr.className = l.checked ? "station-row checked" : "station-row";

                tr.innerHTML = `

                    <td><strong>#${l.id}</strong></td>

                    <td><input type="text" value="${l.zona}" style="padding:4px 8px; font-size:0.85rem;"></td>

                    <td>${l.tipus}</td>

                    <td>

                        <select onchange="frissitLadaFogyas(${idx}, this.value)" style="padding:4px; font-size:0.85rem;">

                            <option value="0" ${l.fogyas===0?'selected':''}>0%</option>

                            <option value="25" ${l.fogyas===25?'selected':''}>25%</option>

                            <option value="50" ${l.fogyas===50?'selected':''}>50%</option>

                            <option value="100" ${l.fogyas===100?'selected':''}>100%</option>

                        </select>

                    </td>

                    <td><span class="${l.fogyas > 0 ? 'badge-warn' : 'badge-ok'}">${l.allapot}</span></td>

                    <td><input type="number" value="${l.potlas}" style="width:70px; padding:4px; font-size:0.85rem;"> g</td>

                    <td><input type="checkbox" ${l.checked ? 'checked' : ''} onchange="ladaAdatok[${idx}].checked=this.checked; renderLadaTabla();" style="width:20px; height:20px;"></td>

                `;

                tbody.appendChild(tr);

            });

            document.getElementById('ladaStatusBadge').innerText = `${ellenorizveDb} / ${ladaAdatok.length} ellenőrizve`;

        }

        function frissitLadaFogyas(idx, val) {

            const v = parseInt(val);

            ladaAdatok[idx].fogyas = v;

            ladaAdatok[idx].potlas = v > 0 ? (v * 2) : 0;

            ladaAdatok[idx].allapot = v > 0 ? "Fogyás – Pótolva" : "Érintetlen";

            renderLadaTabla();

        }

        function mindentEllenoriz() { ladaAdatok.forEach(l => l.checked = true); renderLadaTabla(); }

        function ujLadaHozzaadasa() {

            const ujId = ladaAdatok.length + 1;

            ladaAdatok.push({ id: ujId, zona: `Új szerelvény (#${ujId})`, tipus: "Zárható rágcsálóirtó láda", fogyas: 0, allapot: "Új kihelyezés", potlas: 200, checked: true });

            renderLadaTabla();

        }

        function nfcSzimulacio() { alert("📲 NFC / QR Olvasó aktív!"); }

        // Térkép Stúdió

        const mapCanvas = document.getElementById('mapCanvas');

        const mCtx = mapCanvas.getContext('2d');

        let mapImg = new Image();

        let mapLoaded = false;

        let mapPins = [];

        let currentMapMode = 'ragcsalo';

        let showPolygon = false;

        function setMapMode(mode) {

            currentMapMode = mode;

            document.getElementById('modeRagcsalo').className = mode === 'ragcsalo' ? 'btn btn-primary' : 'btn btn-outline';

            document.getElementById('modeRovar').className = mode === 'rovar' ? 'btn btn-primary' : 'btn btn-outline';

        }

        function resizeMapCanvas() {

            mapCanvas.width = mapCanvas.parentElement.clientWidth || 600;

            mapCanvas.height = 360;

            drawMapStudio();

        }

        window.addEventListener('resize', resizeMapCanvas);

        document.getElementById('mapUploader').addEventListener('change', function(e) {

            if (!e.target.files[0]) return;

            const reader = new FileReader();

            reader.onload = function(ev) {

                mapImg.onload = function() { mapLoaded = true; drawMapStudio(); };

                mapImg.src = ev.target.result;

            };

            reader.readAsDataURL(e.target.files[0]);

        });

        function handleMapTap(e) {

            e.preventDefault();

            const rect = mapCanvas.getBoundingClientRect();

            const clientX = e.touches ? e.touches[0].clientX : e.clientX;

            const clientY = e.touches ? e.touches[0].clientY : e.clientY;

            mapPins.push({ x: clientX - rect.left, y: clientY - rect.top, type: currentMapMode, num: mapPins.length + 1 });

            drawMapStudio();

        }

        mapCanvas.addEventListener('mousedown', handleMapTap);

        mapCanvas.addEventListener('touchstart', handleMapTap, { passive: false });

        function drawMapStudio() {

            mCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);

            if (mapLoaded) {

                mCtx.drawImage(mapImg, 0, 0, mapCanvas.width, mapCanvas.height);

            } else {

                mCtx.fillStyle = "#f1f5f2";

                mCtx.fillRect(0, 0, mapCanvas.width, mapCanvas.height);

                mCtx.strokeStyle = "#d0ddd3";

                for (let x = 0; x < mapCanvas.width; x += 40) { mCtx.beginPath(); mCtx.moveTo(x, 0); mCtx.lineTo(x, mapCanvas.height); mCtx.stroke(); }

                for (let y = 0; y < mapCanvas.height; y += 40) { mCtx.beginPath(); mCtx.moveTo(0, y); mCtx.lineTo(mapCanvas.width, y); mCtx.stroke(); }

                mCtx.fillStyle = "#6c757d";

                mCtx.font = "bold 13px sans-serif";

                mCtx.fillText("📐 Bökj ide a szerelvények lerakásához, vagy tölts fel alaprajzot!", 15, 30);

            }

            if (showPolygon && mapPins.length >= 3) {

                mCtx.beginPath();

                mCtx.moveTo(mapPins[0].x, mapPins[0].y);

                for (let i = 1; i < mapPins.length; i++) mCtx.lineTo(mapPins[i].x, mapPins[i].y);

                mCtx.closePath();

                mCtx.fillStyle = "rgba(211, 47, 47, 0.22)";

                mCtx.fill();

                mCtx.strokeStyle = "#d32f2f";

                mCtx.lineWidth = 2;

                mCtx.stroke();

            }

            mapPins.forEach(p => {

                mCtx.beginPath();

                mCtx.arc(p.x, p.y, 13, 0, Math.PI * 2);

                mCtx.fillStyle = p.type === 'ragcsalo' ? '#d32f2f' : '#1976d2';

                mCtx.fill();

                mCtx.lineWidth = 2;

                mCtx.strokeStyle = '#ffffff';

                mCtx.stroke();

                mCtx.fillStyle = '#ffffff';

                mCtx.font = 'bold 11px Arial';

                mCtx.textAlign = 'center';

                mCtx.textBaseline = 'middle';

                mCtx.fillText(p.num, p.x, p.y);

            });

        }

        function visszavonUtolsoPin() { mapPins.pop(); drawMapStudio(); }

        function torolTeljesTerkep() { mapPins = []; showPolygon = false; drawMapStudio(); }

        function rajzoljGocpontPoligont() {

            if (mapPins.length < 3) { alert("Legalább 3 pont szükséges a poligonhoz!"); return; }

            showPolygon = !showPolygon;

            drawMapStudio();

        }

        function letoltTerkepKep() {

            const link = document.createElement('a');

            link.download = `Szerelveny_Terkep_${document.getElementById('munkalapSzam').value}.png`;

            link.href = mapCanvas.toDataURL();

            link.click();

        }

        function inditsDiktalast() {

            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

            if (!SpeechRecognition) { alert("Használd a billentyűzeten lévő mikrofon ikont!"); return; }

            const rec = new SpeechRecognition();

            rec.lang = 'hu-HU';

            rec.onresult = (e) => {

                const mezo = document.getElementById('ipmMegjegyzes');

                mezo.value += (mezo.value ? " " : "") + e.results[0][0].transcript + ".";

                frissitElonezet();

            };

            rec.start();

        }

        // Aláíró pad

        const sigCanvas = document.getElementById('sigCanvas');

        const sCtx = sigCanvas.getContext('2d');

        let isSigDrawing = false;

        function resizeSigCanvas() {

            sigCanvas.width = sigCanvas.parentElement.clientWidth || 350;

            sigCanvas.height = 180;

            sCtx.lineWidth = 2.8;

            sCtx.lineCap = 'round';

            sCtx.strokeStyle = '#0d47a1';

        }

        function getSigPos(e) {

            const r = sigCanvas.getBoundingClientRect();

            const cx = e.touches ? e.touches[0].clientX : e.clientX;

            const cy = e.touches ? e.touches[0].clientY : e.clientY;

            return { x: cx - r.left, y: cy - r.top };

        }

        sigCanvas.addEventListener('mousedown', (e) => { isSigDrawing = true; const p = getSigPos(e); sCtx.beginPath(); sCtx.moveTo(p.x, p.y); });

        sigCanvas.addEventListener('mousemove', (e) => { if (!isSigDrawing) return; const p = getSigPos(e); sCtx.lineTo(p.x, p.y); sCtx.stroke(); });

        window.addEventListener('mouseup', () => { isSigDrawing = false; });

        sigCanvas.addEventListener('touchstart', (e) => { e.preventDefault(); isSigDrawing = true; const p = getSigPos(e); sCtx.beginPath(); sCtx.moveTo(p.x, p.y); }, { passive: false });

        sigCanvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!isSigDrawing) return; const p = getSigPos(e); sCtx.lineTo(p.x, p.y); sCtx.stroke(); }, { passive: false });

        sigCanvas.addEventListener('touchend', () => { isSigDrawing = false; });

        function torolAlairas() { sCtx.clearRect(0, 0, sigCanvas.width, sigCanvas.height); }

        function frissitElonezet() {

            document.getElementById('prevSorszam').innerText = document.getElementById('munkalapSzam').value;

            document.getElementById('prevMegrendelo').innerText = document.getElementById('megrendeloNev').value;

            document.getElementById('prevTelephely').innerText = document.getElementById('telephelyCim').value;

            document.getElementById('prevKapcsolattarto').innerText = document.getElementById('kapcsolattarto').value;

            document.getElementById('prevDatum').innerText = document.getElementById('kezelesDatum').value;

            document.getElementById('prevIdoszak').innerText = document.getElementById('aktualisIdoszak').value;

            document.getElementById('prevKovetkezo').innerText = document.getElementById('kovetkezoIdoszak').value;

            document.getElementById('prevJelleg').innerText = document.getElementById('kezelesJellege').value;

            const rSzer = document.getElementById('ragcsaloSzer').options[document.getElementById('ragcsaloSzer').selectedIndex].text;

            const cSzer = document.getElementById('csotanySzer').value;

            const eSzer = document.getElementById('egyebKezeles').value;

            document.getElementById('prevSzerek').innerText = `${rSzer} | ${cSzer}` + (eSzer !== 'Nem volt (----)' ? ` | ${eSzer}` : '');

            document.getElementById('prevIpm').innerText = document.getElementById('ipmMegjegyzes').value;

        }

        function kuldesEsZaras() {

            const id = document.getElementById('munkalapSzam').value;

            const partner = document.getElementById('megrendeloNev').value;

            const email = document.getElementById('ugyfelEmail').value;

            const seq = parseInt(id.split('-')[3]) || 104;

            localStorage.setItem('km_last_seq', seq);

            alert(`✅ SIKERES RÖGZÍTÉS ÉS KIKÜLDÉS!\n\n• Munkalap sorszám: ${id}\n• Megrendelő: ${partner}\n• E-mail: ${email}\n\nA hitelesített HACCP Munkalap és a Pénzügyi Teljesítésigazolás (TIG) rögzítésre került!`);

        }

    </script>

</body>

</html>