index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KAEFER Employee Leave Portal</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
        body { background-color: #eef2f7; margin: 0; padding: 15px; color: #222; }
        .portal-box { max-width: 900px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        h2 { margin-top: 0; color: #0d233a; border-bottom: 3px solid #0d233a; padding-bottom: 8px; }
        .fetch-status { background: #f4f6f8; border: 1px solid #cbd5e1; padding: 12px; border-radius: 5px; margin-bottom: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
        .fetch-status input { flex: 1; min-width: 200px; padding: 8px; border: 1px solid #94a3b8; border-radius: 4px; }
        .btn { background: #0f766e; color: #fff; border: none; padding: 9px 18px; border-radius: 4px; font-weight: bold; cursor: pointer; }
        .btn:hover { background: #115e59; }
        .fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 15px; margin-bottom: 25px; }
        .field-item { display: flex; flex-direction: column; }
        .field-item label { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #334155; }
        .field-item input, .field-item select { padding: 9px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 14px; }
        .generate-btn { background: #1d4ed8; color: #fff; width: 100%; padding: 14px; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; }
        .generate-btn:hover { background: #1e40af; }

        /* PRINT PREVIEW OVERLAY & EXACT SHEET */
        #printLayer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; overflow-y: auto; }
        .preview-bar { position: fixed; top: 15px; right: 20px; display: flex; gap: 10px; z-index: 10000; }
        .action-btn { padding: 10px 20px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; }
        .print-ok { background: #16a34a; color: #fff; }
        .print-close { background: #dc2626; color: #fff; }

        .a4-sheet {
            position: relative;
            width: 210mm;
            height: 297mm;
            background: #ffffff;
            margin: 20px auto;
            box-shadow: 0 0 15px rgba(0,0,0,0.4);
            overflow: hidden;
        }

        .print-token {
            position: absolute;
            font-size: 11px;
            font-weight: bold;
            color: #000;
            white-space: nowrap;
        }

        @media print {
            @page { size: A4 portrait; margin: 0; }
            body { background: #fff; margin: 0; padding: 0; }
            body * { visibility: hidden; }
            #printLayer, #printLayer * { visibility: visible; }
            #printLayer { position: absolute; left: 0; top: 0; width: 100%; background: none; }
            .preview-bar { display: none !important; }
            .a4-sheet { margin: 0 !important; box-shadow: none !important; width: 210mm !important; height: 297mm !important; }
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
        }
    </style>
</head>
<body>

<div class="portal-box">
    <h2>KAEFER Leave Application Auto-Portal</h2>

    <div class="fetch-status">
        <span id="loadMsg" style="font-weight: bold; color: #0284c7; width: 100%;">Connecting to EMP Details.xlsx...</span>
        <input type="text" id="empSearchId" placeholder="Enter Employee ID (e.g., 18290)">
        <button type="button" class="btn" onclick="executeAutoFill()">Auto-Fill Record</button>
        <input type="file" id="backupFile" accept=".xlsx, .xls" style="font-size: 12px;">
    </div>

    <form id="mainForm" onsubmit="event.preventDefault(); buildAndShowPrintModal();">
        <div class="fields-grid">
            <div class="field-item">
                <label>Form Template Layout</label>
                <select id="formLayout">
                    <option value="smasco" selected>SMASCO Leave Form (OP-FRM-03)</option>
                </select>
            </div>
            <div class="field-item">
                <label>Employee Full Name</label>
                <input type="text" id="valName" value="Mohammed Merajuddin Khan" required>
            </div>
            <div class="field-item">
                <label>Agency / Badge ID No</label>
                <input type="text" id="valEmpNo" value="L_195721" required>
            </div>
            <div class="field-item">
                <label>KAEFER ID Number</label>
                <input type="text" id="valKaeferId" value="18290" required>
            </div>
            <div class="field-item">
                <label>Position / Designation</label>
                <input type="text" id="valTitle" value="Safety Officer" required>
            </div>
            <div class="field-item">
                <label>Work Location / Site</label>
                <input type="text" id="valSite" value="MSA Juymah-Rastanura" required>
            </div>
            <div class="field-item">
                <label>Departure Date of Vacation</label>
                <input type="text" id="valDepDate" value="30th MAY 2026" required>
            </div>
            <div class="field-item">
                <label>Vacation Duration</label>
                <input type="text" id="valDays" value="35 DAYS" required>
            </div>
            <div class="field-item">
                <label>Vacation Stay Location</label>
                <select id="valStay">
                    <option value="OutKsa" selected>Out KSA</option>
                    <option value="InKsa">In KSA</option>
                </select>
            </div>
            <div class="field-item">
                <label>Vacation Type</label>
                <select id="valType">
                    <option value="Annual" selected>Annual</option>
                    <option value="Emergency">Emergency</option>
                    <option value="Sick">Sick</option>
                </select>
            </div>
            <div class="field-item">
                <label>Country of Origin</label>
                <input type="text" id="valCountry" value="INDIA">
            </div>
            <div class="field-item">
                <label>City / Region</label>
                <input type="text" id="valCity" value="ASANSOL">
            </div>
            <div class="field-item">
                <label>Emergency Contact Person</label>
                <input type="text" id="valRelName" value="SHIRIN TABASSUM">
            </div>
            <div class="field-item">
                <label>Relation</label>
                <input type="text" id="valRelation" value="WIFE">
            </div>
            <div class="field-item">
                <label>Contact Phone Number</label>
                <input type="text" id="valContact" value="+916296074461">
            </div>
        </div>
        <button type="submit" class="generate-btn">Generate & Print Form Layout</button>
    </form>
</div>

<!-- MODAL PRINT SCREEN -->
<div id="printLayer">
    <div class="preview-bar">
        <button class="action-btn print-ok" onclick="window.print();">Print / Save PDF</button>
        <button class="action-btn print-close" onclick="closePrintModal();">Close</button>
    </div>
    <div id="sheetContainer"></div>
</div>

<script>
let globalErpData = [];

window.addEventListener('DOMContentLoaded', () => {
    fetch('./EMP Details.xlsx')
        .then(res => {
            if (!res.ok) throw new Error("Fetch failed");
            return res.arrayBuffer();
        })
        .then(buf => {
            const wb = XLSX.read(new Uint8Array(buf), {type: 'array'});
            globalErpData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            document.getElementById('loadMsg').style.color = '#15803d';
            document.getElementById('loadMsg').innerText = `✓ EMP Details.xlsx automatically synchronized (${globalErpData.length} records).`;
        })
        .catch(err => {
            document.getElementById('loadMsg').style.color = '#b91c1c';
            document.getElementById('loadMsg').innerText = `⚠ Auto-fetch blocked. Please use the backup file selector on the right.`;
        });
});

document.getElementById('backupFile').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (evt) => {
        const wb = XLSX.read(new Uint8Array(evt.target.result), {type: 'array'});
        globalErpData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        document.getElementById('loadMsg').style.color = '#15803d';
        document.getElementById('loadMsg').innerText = `✓ Database loaded manually (${globalErpData.length} records ready).`;
    };
    reader.readAsArrayBuffer(file);
});

function executeAutoFill() {
    const query = document.getElementById('empSearchId').value.trim().toLowerCase();
    if (!query) return alert("Please type an Employee ID first.");
    if (globalErpData.length === 0) return alert("Database is not loaded yet.");

    const match = globalErpData.find(row => 
        String(row["Employee ID or ERP ID"] || row["Employee ID"] || row["KAEFER ID No"] || row["SMASCO L No"] || "").toLowerCase() === query
    );

    if (match) {
        document.getElementById('valName').value = match["Name"] || match["Employee Name"] || "";
        document.getElementById('valEmpNo').value = match["SMASCO L No"] || match["Employee ID or ERP ID"] || query;
        document.getElementById('valKaeferId').value = match["KAEFER ID No"] || "";
        document.getElementById('valTitle').value = match["Position"] || match["Designation"] || "";
        document.getElementById('valSite').value = match["Work Location"] || match["Site"] || "";
        document.getElementById('valDepDate').value = match["Date of Vacation"] || "";
        document.getElementById('valDays').value = match["Vacation Period"] || "";
        alert("Employee data mapped successfully!");
    } else {
        alert("ID not found in database.");
    }
}

function buildAndShowPrintModal() {
    const d = {
        name: document.getElementById('valName').value,
        empNo: document.getElementById('valEmpNo').value,
        kaeferId: document.getElementById('valKaeferId').value,
        title: document.getElementById('valTitle').value,
        site: document.getElementById('valSite').value,
        depDate: document.getElementById('valDepDate').value,
        days: document.getElementById('valDays').value,
        stay: document.getElementById('valStay').value,
        type: document.getElementById('valType').value,
        country: document.getElementById('valCountry').value,
        city: document.getElementById('valCity').value,
        relName: document.getElementById('valRelName').value,
        relation: document.getElementById('valRelation').value,
        contact: document.getElementById('valContact').value,
        dateStr: new Date().toLocaleDateString('en-GB')
    };

    // Pixel-mapped coordinates matching the precise layout spaces
    let sheetHtml = `
    <div class="a4-sheet">
        <div class="print-token" style="top: 35px; right: 50px;">${d.dateStr}</div>
        <div class="print-token" style="top: 32px; left: 160px; background:#fff; padding:1px 8px; border:1px solid #000;">${d.kaeferId}</div>

        <div class="print-token" style="top: 132px; left: 170px;">KAEFER SAUDI ARABIA</div>
        <div class="print-token" style="top: 166px; left: 170px;">${d.name}</div>
        <div class="print-token" style="top: 198px; left: 170px;">${d.empNo}</div>
        <div class="print-token" style="top: 230px; left: 170px;">${d.title}</div>
        <div class="print-token" style="top: 262px; left: 170px;">${d.site}</div>
        <div class="print-token" style="top: 295px; left: 170px;">${d.depDate}</div>
        
        <div class="print-token" style="top: 326px; left: ${d.stay === 'InKsa' ? '172px' : '330px'}; font-size:14px;">✔</div>
        <div class="print-token" style="top: 358px; left: 170px;">${d.days}</div>
        <div class="print-token" style="top: 390px; left: ${d.type === 'Annual' ? '172px' : d.type === 'Emergency' ? '390px' : '280px'}; font-size:14px;">✔</div>

        <div class="print-token" style="top: 485px; left: 120px;">${d.country}</div>
        <div class="print-token" style="top: 485px; left: 350px;">${d.city}</div>
        <div class="print-token" style="top: 485px; left: 550px;">${d.contact}</div>
        
        <div class="print-token" style="top: 535px; left: 120px;">${d.relName}</div>
        <div class="print-token" style="top: 535px; left: 350px;">${d.relation}</div>
        <div class="print-token" style="top: 535px; left: 550px;">${d.contact}</div>

        <div class="print-token" style="top: 610px; left: 170px;">${d.name}</div>
        <div class="print-token" style="top: 610px; left: 550px;">${d.dateStr}</div>
    </div>`;

    document.getElementById('sheetContainer').innerHTML = sheetHtml;
    document.getElementById('printLayer').style.display = 'block';
}

function closePrintModal() {
    document.getElementById('printLayer').style.display = 'none';
}
</script>
</body>
</html>