<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SGM Gold Testing Lab</title>
<style>
* { box-sizing:border-box; margin:0; padding:0; }
body {
    background: #f0f2f5;
    color: #1a1a2e;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── HEADER ── */
.hdr {
    background: linear-gradient(135deg, #1a3a6b 0%, #0d5c9e 100%);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.hdr-title { font-size:22px; font-weight:bold; color:#fff; text-align:center; flex:1; }
.hdr-title span { color:#ffd700; }
.hdr-dt { font-size:15px; color:#cce0ff; min-width:140px; }
.hdr-dt.right { text-align:left; direction:ltr; }

/* ── TOP INPUT SECTION ── */
.top-bar {
    background: #fff;
    border-bottom: 2px solid #e0e7ef;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.purity-card {
    background: #f8faff;
    border: 1.5px solid #d0dff0;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    min-width: 100px;
}
.purity-card .lbl { font-size:13px; color:#888; font-weight:bold; text-transform:uppercase; }
.purity-card .val { font-size:28px; font-weight:bold; color:#0d5c9e; }
.purity-card .val.red { color:#e53935; }

.inp-group { flex:1; display:flex; flex-direction:column; gap:10px; }
.inp-row { display:flex; align-items:center; gap:10px; }
.inp-lbl {
    background: #1a3a6b;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size:15px;
    min-width:210px;
    text-align:center;
}
.inp-box {
    border: 2px solid #b0c8e8;
    border-radius: 8px;
    padding: 10px 12px;
    font-size:22px;
    font-weight:bold;
    width:180px;
    text-align:center;
    color:#1a1a2e;
    background:#fff;
    transition: border-color 0.2s;
}
.inp-box:focus { outline:none; border-color:#0d5c9e; box-shadow:0 0 0 3px rgba(13,92,158,0.12); }
.inp-box.green { background:#e8f8ee; border-color:#2e7d32; color:#1b5e20; }
.inp-val { font-size:22px; font-weight:bold; color:#0d5c9e; min-width:100px; direction:ltr; }

.changed-box {
    background:#f8faff; border:1.5px solid #d0dff0; border-radius:10px;
    padding:10px 18px; text-align:center; min-width:100px;
}
.changed-box .lbl { font-size:12px; color:#888; }
.changed-box .val { font-size:26px; font-weight:bold; color:#0d5c9e; }

/* ── MAIN LAYOUT ── */
.main { display:flex; flex:1; overflow:hidden; }
.main-content { flex:1; padding:12px 16px; overflow-y:auto; }
.sidebar { width:115px; background:#fff; border-right:1px solid #e0e7ef; display:flex; flex-direction:column; gap:8px; padding:12px 10px; box-shadow:-2px 0 6px rgba(0,0,0,0.04); }

/* ── SECTION TITLE ── */
.sec-title {
    background: linear-gradient(90deg, #1a3a6b, #0d5c9e);
    color:#fff; text-align:center; padding:8px 14px;
    font-size:18px; font-weight:bold; border-radius:8px; margin-bottom:8px;
}
.tola-info { font-size:14px; color:#666; margin-bottom:6px; }
.tola-info span { color:#0d5c9e; font-weight:bold; }

/* ── TABLE ── */
table { width:100%; border-collapse:collapse; margin-bottom:10px; }
th {
    background:#1a3a6b; color:#fff;
    padding:8px 10px; font-size:15px; text-align:center;
    border:1px solid #2a4a7b;
}
td {
    background:#fff; padding:8px 10px; font-size:16px;
    text-align:center; border:1px solid #e0e7ef;
}
td.lc {
    background:#f5f8ff; font-size:13px; color:#1a3a6b;
    text-align:right; padding-right:12px; font-weight:bold;
}
td.lc2 {
    background:#f5f8ff; font-size:13px; color:#1a3a6b;
    text-align:right; padding-right:12px; min-width:150px;
}
.g  { color:#2e7d32; font-weight:bold; font-size:17px; }
.r  { color:#e53935; font-weight:bold; font-size:17px; }
.y  { color:#f57c00; font-weight:bold; font-size:17px; }
.b  { color:#0d5c9e; font-weight:bold; font-size:17px; }

/* ratti side box */
.ratti-side { font-size:13px; color:#555; text-align:center; }
.ratti-val  { font-size:20px; font-weight:bold; color:#2e7d32; }

/* fi gram box */
.fi-box {
    background:#fff8e1; border:1px solid #ffe082;
    border-radius:6px; padding:5px 8px; text-align:center;
    font-size:12px; color:#f57c00;
}
.fi-box span { font-size:16px; font-weight:bold; display:block; }

/* input inside table */
.tf {
    border:1.5px solid #b0c8e8; border-radius:6px;
    padding:7px 10px; font-size:16px; font-weight:bold;
    width:100%; text-align:center; background:#fff;
    color:#1a1a2e;
}
.tf:focus { outline:none; border-color:#0d5c9e; }

/* customer input */
.cust-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.cust-lbl {
    background:#1a3a6b; color:#fff; padding:9px 16px;
    border-radius:8px; font-size:14px; min-width:150px; text-align:center;
}
.cust-inp {
    flex:1; border:1.5px solid #b0c8e8; border-radius:8px;
    padding:9px 12px; font-size:15px; color:#1a1a2e;
}
.cust-inp:focus { outline:none; border-color:#0d5c9e; }

/* ── SIDEBAR BUTTONS ── */
.btn {
    padding:14px 6px; border:none; border-radius:8px;
    cursor:pointer; font-size:15px; font-weight:bold;
    width:100%; transition:opacity 0.15s, transform 0.1s;
}
.btn:hover { opacity:0.88; transform:scale(0.98); }
.btn-blue   { background:#1a3a6b; color:#fff; }
.btn-green  { background:#2e7d32; color:#fff; }
.btn-red    { background:#c62828; color:#fff; }
.btn-gray   { background:#607d8b; color:#fff; }

/* ── BOTTOM BAR ── */
.bot {
    background:#1a3a6b; color:#cce0ff;
    padding:7px 20px; font-size:14px; text-align:center;
}
</style>
</head>
<body>

<!-- HEADER -->
<div class="hdr">
    <div class="hdr-dt" id="hdrDate"></div>
    <div class="hdr-title">SGM <span>Gold Testing Lab</span> &nbsp;|&nbsp; لیزر لیبارٹری سسٹم</div>
    <div class="hdr-dt right" id="hdrTime"></div>
</div>

<form method="POST" action="<?php echo e(route('gold.store')); ?>" id="goldForm">
<?php echo csrf_field(); ?>

<!-- TOP INPUT BAR -->
<div class="top-bar">
    <div class="purity-card">
        <div class="lbl">PURE</div>
        <div class="val" id="pureDisp">0.00</div>
    </div>
    <div class="purity-card">
        <div class="lbl">Impure</div>
        <div class="val red" id="impureDisp">0.00</div>
    </div>

    <div class="inp-group">
        <div class="inp-row">
            <div class="inp-lbl">=> توکل وزن WEIGHT</div>
            <input class="inp-box" type="number" step="0.001" name="weight" id="weight"
                   placeholder="0.000" oninput="calc()" required autofocus>
            <span class="inp-val" id="wDisp">0.000</span>
        </div>
        <div class="inp-row">
            <div class="inp-lbl">=> پوائنٹس Laser Points</div>
            <input class="inp-box" type="number" step="0.01" name="laser_points" id="laser"
                   placeholder="0.00" oninput="calc()" required>
            <span class="inp-val" id="lDisp">0.00</span>
        </div>
    </div>

    <div class="changed-box">
        <div class="lbl">تبدیلی شدہ</div>
        <div class="val" id="changedPt">0.00</div>
    </div>
</div>

<!-- MAIN -->
<div class="main">

    <!-- SIDEBAR BUTTONS (right side) -->
    <div class="sidebar">
        <button type="submit" class="btn btn-blue">Print<br>(P)</button>
        <button type="button" class="btn btn-green" onclick="window.location='<?php echo e(route('gold.records')); ?>'">Record</button>
        <button type="button" class="btn btn-red" onclick="doReset()">Reset<br>(ESC)</button>
        <button type="button" class="btn btn-gray">Setting</button>
    </div>

    <!-- CONTENT -->
    <div class="main-content">
        <div class="sec-title">Laser Gold Lab — SGM</div>
        <div class="tola-info">Tola = 11.664 &nbsp;&nbsp; خالص تولہ: <span id="tolaDisp">0.0000</span></div>

        <!-- MAIN WEIGHT TABLE -->
        <table>
            <thead>
                <tr>
                    <th style="width:80px;"></th>
                    <th style="width:130px;"></th>
                    <th>تولہ</th>
                    <th>آٹھ</th>
                    <th>رتی</th>
                    <th>گرام</th>
                    <th style="width:70px;"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="lc" rowspan="1">
                        <div class="ratti-side">Ratti IN</div>
                        <div class="ratti-val" id="rattiIn">0.00</div>
                    </td>
                    <td class="lc2">=> نوکل وزن</td>
                    <td class="g" id="tot_tola">0</td>
                    <td class="g" id="tot_aath">0</td>
                    <td class="g" id="tot_ratti">0.00</td>
                    <td class="g" id="tot_gram">0.000</td>
                    <td class="fi-box" rowspan="3" style="vertical-align:middle;">
                        فی گرام<br>
                        <span id="fiGram">0.0000</span>
                    </td>
                </tr>
                <tr>
                    <td class="lc"></td>
                    <td class="lc2">=> کاٹ فی تولہ</td>
                    <td class="r" id="kaat_tola">0</td>
                    <td class="r" id="kaat_aath">0</td>
                    <td class="r" id="kaat_ratti">0.00</td>
                    <td class="r" id="kaat_gram">0.0000</td>
                </tr>
                <tr>
                    <td class="lc">
                        <div class="ratti-side">Ratti Out</div>
                        <div class="ratti-val" id="rattiOut">0.00</div>
                    </td>
                    <td class="lc2">=> کاٹ</td>
                    <td class="r" id="cut_tola">0</td>
                    <td class="r" id="cut_aath">0</td>
                    <td class="r" id="cut_ratti">0.00</td>
                    <td class="r" id="cut_gram">0.000</td>
                </tr>
                <tr>
                    <td class="lc"></td>
                    <td class="lc2">=> خالص سونا</td>
                    <td class="g" id="pure_tola">0</td>
                    <td class="g" id="pure_aath">0</td>
                    <td class="g" id="pure_ratti">0.00</td>
                    <td class="y" id="pure_gram">0.000</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

        <!-- RATE / PRICE TABLE -->
        <table>
            <tbody>
                <tr>
                    <td class="lc" style="width:80px;">Pluss (+)</td>
                    <td class="lc2">=> ریٹ فی تولہ (R)</td>
                    <td style="width:130px;"><input class="tf" type="number" name="rate_per_tola" id="rate" placeholder="0" oninput="calc()"></td>
                    <td class="lc">نوکل قیمت سونا</td>
                    <td class="g" id="goldPrice">0</td>
                    <td class="lc" style="width:55px;">کیرٹ</td>
                    <td class="b" id="keratDisp" style="width:55px;">0.00</td>
                </tr>
                <tr>
                    <td class="lc">Minus (-)</td>
                    <td class="lc2">=> نیٹ چارجز CH:</td>
                    <td><input class="tf" type="number" name="ch_charges" id="ch" placeholder="0" oninput="calc()"></td>
                    <td class="lc">نوکل چارجز</td>
                    <td class="r" id="chDisp">0</td>
                    <td colspan="2"></td>
                </tr>
                <tr>
                    <td class="lc">Reset (ESC)</td>
                    <td class="lc2">فی گرام چارجز LBR:</td>
                    <td><input class="tf" type="number" name="lbr_charges" id="lbr" placeholder="0" oninput="calc()"></td>
                    <td class="lc">بقایا قیمت</td>
                    <td class="g" style="font-size:15px; font-weight:bold;" id="totalPrice">0</td>
                    <td colspan="2">
                        <span style="background:#e8f0fe;color:#1a3a6b;padding:2px 6px;border-radius:3px;font-size:10px;">WAD</span>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- CUSTOMER -->
        <div class="cust-row">
            <div class="cust-lbl">نام گاہک (Customer)</div>
            <input type="text" name="customer_name" class="cust-inp" placeholder="Customer Name (Optional)">
        </div>
    </div>

</div>
</form>

<!-- BOTTOM BAR -->
<div class="bot">
    SGM Gold Testing Lab &nbsp;|&nbsp; 0302-3155157 &nbsp;|&nbsp; 0306-3108504 &nbsp;|&nbsp; Sarafa Bazar
</div>

<script>
const TOLA = 11.664;

function updateClock(){
    const n = new Date();
    document.getElementById('hdrDate').textContent =
        n.toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'}).replace(/ /g,'-');
    document.getElementById('hdrTime').textContent =
        n.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
}
setInterval(updateClock, 1000); updateClock();

function bd(g){
    const t = g / TOLA;
    const tI = Math.floor(t);
    const aT = (t - tI) * 16;
    const aI = Math.floor(aT);
    const r  = (aT - aI) * 6;
    return { tola:tI, aath:aI, ratti:parseFloat(r.toFixed(2)) };
}

function set(id, v){ document.getElementById(id).textContent = v; }

function calc(){
    const w   = parseFloat(document.getElementById('weight').value) || 0;
    const l   = parseFloat(document.getElementById('laser').value)  || 0;
    const r   = parseFloat(document.getElementById('rate').value)   || 0;
    const ch  = parseFloat(document.getElementById('ch').value)     || 0;
    const lbr = parseFloat(document.getElementById('lbr').value)    || 0;

    const pureW   = w * (l / 100);
    const impureW = w - pureW;
    const impPct  = 100 - l;
    const pureTola = pureW / TOLA;

    const tot  = bd(w);
    const pure = bd(pureW);
    const cut  = bd(impureW);
    const kaatFiTola = w > 0 ? impureW / (w / TOLA) : 0;
    const kft  = bd(kaatFiTola);

    const rattiIN  = parseFloat((impPct * 96 / 100).toFixed(2));
    const rattiOUT = l > 0 ? parseFloat((rattiIN / (l / 100)).toFixed(2)) : 0;
    const fiGram   = w > 0 ? (impureW / w) : 0;
    const kerat    = (l / 100) * 24;
    const goldPrice  = pureTola * r;
    const totalPrice = goldPrice - ch - lbr;

    // Top bar
    set('pureDisp',   l.toFixed(2));
    set('impureDisp', impPct.toFixed(2));
    set('wDisp',      w.toFixed(3));
    set('lDisp',      l.toFixed(2));
    set('changedPt',  l.toFixed(2));
    set('tolaDisp',   pureTola.toFixed(4));

    // Laser input color
    const li = document.getElementById('laser');
    li.className = 'inp-box' + (l > 0 ? ' green' : '');

    // Table
    set('tot_tola',  tot.tola);   set('tot_aath',  tot.aath);   set('tot_ratti',  tot.ratti.toFixed(2));   set('tot_gram',  w.toFixed(3));
    set('kaat_tola', kft.tola);   set('kaat_aath', kft.aath);   set('kaat_ratti', kft.ratti.toFixed(2));   set('kaat_gram', fiGram.toFixed(4));
    set('cut_tola',  cut.tola);   set('cut_aath',  cut.aath);   set('cut_ratti',  cut.ratti.toFixed(2));   set('cut_gram',  impureW.toFixed(3));
    set('pure_tola', pure.tola);  set('pure_aath', pure.aath);  set('pure_ratti', pure.ratti.toFixed(2));  set('pure_gram', pureW.toFixed(3));

    set('rattiIn',  rattiIN.toFixed(2));
    set('rattiOut', rattiOUT.toFixed(2));
    set('fiGram',   fiGram.toFixed(4));
    set('keratDisp',  kerat.toFixed(2));
    set('goldPrice',  Math.round(goldPrice).toLocaleString());
    set('chDisp',     (ch + lbr).toLocaleString());
    set('totalPrice', Math.round(totalPrice).toLocaleString());
}

function doReset(){
    document.getElementById('goldForm').reset();
    document.getElementById('laser').className = 'inp-box';
    calc();
    document.getElementById('weight').focus();
}

document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){ e.preventDefault(); doReset(); return; }
    if(e.key === 'p' || e.key === 'P'){
        const w = parseFloat(document.getElementById('weight').value)||0;
        const l = parseFloat(document.getElementById('laser').value)||0;
        if(w>0 && l>0){ e.preventDefault(); document.getElementById('goldForm').submit(); }
        else alert('پہلے Weight اور Laser Points درج کریں');
    }
});
</script>
</body>
</html>
<?php /**PATH D:\Gold Lab\sgm-gold-lab\resources\views/gold/index.blade.php ENDPATH**/ ?>