<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$url_baju  = app_url() . 'sales_transaction/add/baju';
$url_linen = app_url() . 'sales_transaction/add/linen';
?>
<div class="slc-shell">
    <div class="slc-ambient" aria-hidden="true"></div>

    <header class="slc-head">
        <div class="slc-head-main">
            <span class="slc-overline"><span class="slc-dot"></span> MEJA KASIR — PENERIMAAN BARANG</span>
            <h1 class="slc-title">Pilih Jenis <span class="slc-title-hl">Transaksi</span></h1>
            <p class="slc-sub">Kategori yang dipilih menentukan pencarian barang, pembuatan barang baru, hingga scan QR — semuanya otomatis dibatasi.</p>
        </div>
        <div class="slc-date"><span>Hari ini</span><b><?php echo Date('d/m/Y'); ?></b></div>
    </header>

    <div class="slc-cards">
        <a class="slc-card slc-baju" href="<?php echo $url_baju; ?>">
            <span class="slc-ghost">B</span>
            <div class="slc-card-top">
                <span class="slc-ico">👕</span>
                <div class="slc-chips">
                    <span class="slc-chip">Kategori B</span>
                    <span class="slc-chip slc-chip-soft">Selesai H+2 · 17:00</span>
                </div>
            </div>
            <h2 class="slc-name">Transaksi Baju</h2>
            <p class="slc-desc">Kemeja, kaos, celana, jaket &amp; pakaian harian lainnya.</p>
            <span class="slc-cta">Mulai Transaksi <span class="slc-arr">→</span></span>
        </a>

        <a class="slc-card slc-linen" href="<?php echo $url_linen; ?>">
            <span class="slc-ghost">L</span>
            <div class="slc-card-top">
                <span class="slc-ico">🧺</span>
                <div class="slc-chips">
                    <span class="slc-chip">Kategori L</span>
                    <span class="slc-chip slc-chip-soft">Selesai H+3 · 17:00</span>
                </div>
            </div>
            <h2 class="slc-name">Transaksi Linen</h2>
            <p class="slc-desc">Bed cover, sprei, selimut, gorden &amp; linen hotel/rumah.</p>
            <span class="slc-cta">Mulai Transaksi <span class="slc-arr">→</span></span>
        </a>
    </div>

    <div class="slc-hint">
        <span class="slc-hint-ico">💡</span>
        <span><b>Transaksi Baju</b> hanya memakai barang kategori <b>B</b>, <b>Transaksi Linen</b> hanya kategori <b>L</b> — termasuk scan QR &amp; buat barang baru. Pintasan: tekan <kbd>1</kbd> untuk Baju, <kbd>2</kbd> untuk Linen.</span>
    </div>
</div>

<style>
.slc-shell{position:relative;max-width:880px;margin:12px auto 34px;font-family:'Segoe UI',Arial,sans-serif;
background:linear-gradient(165deg,#f4f8f6 0%,#e9f1ee 55%,#e4edf4 100%);border:1px solid #d9e4df;
border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(18,48,44,.08);}
.slc-ambient{position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(420px 240px at 12% -8%,rgba(19,128,116,.16),transparent 70%),
radial-gradient(420px 240px at 92% 112%,rgba(47,111,176,.16),transparent 70%),
repeating-linear-gradient(-55deg,rgba(15,60,52,.035) 0 14px,transparent 14px 30px);
animation:slcDrift 26s linear infinite;}
@keyframes slcDrift{to{background-position:0 0,0 0,520px 0;}}

.slc-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 26px 18px;}
.slc-overline{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:#41625c;background:rgba(255,255,255,.75);border:1px solid #cfe0da;border-radius:20px;padding:5px 12px;}
.slc-dot{width:7px;height:7px;border-radius:50%;background:#138074;box-shadow:0 0 0 0 rgba(19,128,116,.55);animation:slcPulse 1.8s infinite;}
@keyframes slcPulse{0%{box-shadow:0 0 0 0 rgba(19,128,116,.5);}70%{box-shadow:0 0 0 7px rgba(19,128,116,0);}100%{box-shadow:0 0 0 0 rgba(19,128,116,0);}}
.slc-title{margin:12px 0 0;font-family:'Trebuchet MS','Segoe UI',sans-serif;font-size:34px;line-height:1.1;color:#122421;letter-spacing:.2px;}
.slc-title-hl{position:relative;white-space:nowrap;z-index:0;}
.slc-title-hl::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:9px;background:rgba(19,128,116,.28);z-index:-1;border-radius:3px;transform:skewX(-12deg);}
.slc-sub{margin:10px 0 0;max-width:520px;font-size:12.5px;line-height:1.6;color:#5c6f6a;}
.slc-date{flex:0 0 auto;text-align:right;background:#fff;border:1px solid #d9e4df;border-radius:12px;padding:9px 14px;line-height:1.25;box-shadow:0 3px 10px rgba(18,48,44,.07);}
.slc-date span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:#7d8f8a;}
.slc-date b{font-size:15px;color:#122421;}

.slc-cards{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:6px 26px 8px;}
.slc-card{position:relative;display:flex;flex-direction:column;min-height:232px;padding:20px 22px 18px;border-radius:16px;color:#fff;text-decoration:none;overflow:hidden;
transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;animation:slcUp .5s ease both;}
.slc-card:hover{transform:translateY(-5px);filter:brightness(1.05);color:#fff;text-decoration:none;}
.slc-baju{background:linear-gradient(135deg,#0c3b36 0%,#138074 78%,#1a9a70 100%);box-shadow:0 8px 22px rgba(12,59,54,.30);}
.slc-baju:hover{box-shadow:0 16px 34px rgba(12,59,54,.40);}
.slc-linen{background:linear-gradient(135deg,#14324f 0%,#2f6fb0 78%,#3f86c9 100%);box-shadow:0 8px 22px rgba(20,50,79,.30);animation-delay:.08s;}
.slc-linen:hover{box-shadow:0 16px 34px rgba(20,50,79,.40);}
@keyframes slcUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.slc-card::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.05) 0 13px,transparent 13px 28px);pointer-events:none;}
.slc-ghost{position:absolute;right:-6px;bottom:-36px;font-family:'Trebuchet MS','Segoe UI',sans-serif;font-size:170px;font-weight:900;line-height:1;opacity:.10;letter-spacing:-6px;pointer-events:none;transition:transform .25s ease,opacity .25s ease;}
.slc-card:hover .slc-ghost{transform:translateY(-8px) scale(1.04);opacity:.16;}
.slc-card-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.slc-ico{font-size:34px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));transition:transform .2s ease;}
.slc-card:hover .slc-ico{transform:rotate(-8deg) scale(1.12);}
.slc-chips{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.slc-chip{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.92);color:#0c3b36;}
.slc-linen .slc-chip{color:#14324f;}
.slc-chip-soft{background:rgba(255,255,255,.20);color:#fff;border:1px solid rgba(255,255,255,.35);}
.slc-name{position:relative;z-index:1;margin:16px 0 6px;font-family:'Trebuchet MS','Segoe UI',sans-serif;font-size:26px;letter-spacing:.6px;color:#fff;}
.slc-desc{position:relative;z-index:1;margin:0 0 18px;font-size:12.5px;line-height:1.55;opacity:.88;max-width:300px;}
.slc-cta{position:relative;z-index:1;margin-top:auto;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:#fff;color:#0c3b36;font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:11px;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease;}
.slc-linen .slc-cta{color:#14324f;}
.slc-card:hover .slc-cta{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.26);}
.slc-arr{transition:transform .15s ease;}
.slc-card:hover .slc-arr{transform:translateX(5px);}

.slc-hint{position:relative;z-index:1;display:flex;gap:10px;align-items:flex-start;margin:16px 26px 24px;padding:11px 14px;background:rgba(255,255,255,.8);border:1px dashed #bcd3cb;border-radius:12px;font-size:11.5px;line-height:1.6;color:#5c6f6a;}
.slc-hint kbd{background:#eef4f1;border:1px solid #c9dbd4;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:10.5px;font-family:inherit;color:#2c4a44;}
@media (max-width:700px){
.slc-cards{grid-template-columns:1fr;}
.slc-head{flex-direction:column;}
.slc-date{display:none;}
.slc-title{font-size:28px;}
}
</style>

<script>
(function(){
    function pick(type){ location.href = '<?php echo app_url(); ?>sales_transaction/add/' + type; }
    document.addEventListener('keydown', function(e){
        var t = (e.target && e.target.tagName) ? e.target.tagName.toLowerCase() : '';
        if (t === 'input' || t === 'select' || t === 'textarea') { return; }
        if (e.key === '1') { pick('baju'); }
        if (e.key === '2') { pick('linen'); }
    });
})();
</script>