<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QR Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
:root{
    --green:#10b981;
    --bg:#020617;
    --card:#0f172a;
    --border:rgba(255,255,255,.08);
    --text:#f1f5f9;
    --muted:#94a3b8;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
    background:radial-gradient(circle at top, #0f172a, #020617);
    font-family:Inter,system-ui,sans-serif;
    color:var(--text);
    padding:16px;
    height:100vh;
    display:flex;
    flex-direction:column;
}

/* HEADER */
.header{
    text-align:center;
    margin-bottom:16px;
    flex-shrink:0;
}

.header h1{
    font-size:22px;
    font-weight:800;
}

.header span{
    font-size:13px;
    color:var(--muted);
}

/* 🔥 GRID WRAPPER (HEIGHT CONTROL HERE) */
.grid-wrapper{
    flex:1;
    height:calc(200vh - 200px); /* 🔥 increase/decrease this */
    overflow-y:auto;
    padding-right:6px;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:16px;
}

/* CARD */
.customer{
    height:400px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );
    border:1px solid var(--border);
    border-radius:16px;
    padding:10px;
}

/* INFO */
.info-box{
    height:56px;
    background:var(--card);
    border-radius:12px;
    padding:8px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.info-box h4{
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.info-box span{
    font-size:11px;
    color:var(--muted);
}

/* QR */
.qr-box{
    flex:1;
    background:#fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.qr-box img{
    width:120%;
    max-width:130px;
    aspect-ratio:1/1;
}

/* RESPONSIVE */
@media(max-width:1400px){
    .grid{grid-template-columns:repeat(5,1fr);}
}
@media(max-width:1024px){
    .grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:600px){
    .grid-wrapper{
        height:calc(100vh - 140px); /* mobile safe */
    }
    .grid{grid-template-columns:repeat(2,1fr);}
}
</style>
</head>
<body>

<div class="header">
    <h1>QR Gallery</h1>
    <span>Scroll down and scan your QR code</span>
</div>

<!-- 🔥 SCROLLABLE GRID AREA -->
<div class="grid-wrapper">
    <div class="grid">
        @foreach($customers as $customer)
            <div class="customer">
                <div class="info-box">
                    <h4>{{ $customer->name }}</h4>
                    <span>{{ $customer->invoice_number }}</span>
                </div>
                <div class="qr-box">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{ urlencode($customer->invoice_number) }}">
                </div>
            </div>
        @endforeach
    </div>
</div>

</body>
</html>
