QueueList2.txt

@{
    ViewData["Title"] = "Kuyruk Yönetim Sistemi";
    Layout = "~/Areas/Admin/Views/AdminLayout/Index.cshtml";
}

<main id="app-content">

<style>
    @@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap');

    :root {
        --q-blue-950: #020F2B;
        --q-blue-900: #041433;
        --q-blue-800: #0A2149;
        --q-blue-700: #103068;
        --q-blue-600: #1A4598;
        --q-blue-500: #1E56C8;
        --q-blue-400: #3B7DE8;
        --q-blue-300: #6FA3F5;
        --q-blue-200: #A8C8FA;
        --q-blue-100: #DCEEFF;
        --q-cyan:  #00D4FF;
        --q-mint:  #00E8B5;
        --q-amber: #FFB020;
        --q-red:   #FF4D6A;
        --q-white: #F4F8FF;
        --q-glass: rgba(255,255,255,.07);
        --q-glass-border: rgba(255,255,255,.13);
        --q-glow-cyan: rgba(0,212,255,.25);
        --q-font-mono: 'Space Mono', monospace;
        --q-font-body: 'DM Sans', sans-serif;
        --q-font-serif: 'Instrument Serif', serif;
    }

    /* ── Canvas ── */
    #app-content {
        font-family: var(--q-font-body);
        background: var(--q-blue-950);
        min-height: 100vh;
        padding: 0; margin: 0;
        position: relative;
        overflow-x: hidden;
    }
    #app-content::before {
        content: '';
        position: fixed; inset: 0;
        background:
            radial-gradient(ellipse 80% 50% at 20% 10%, rgba(26,69,152,.45) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0,212,255,.12) 0%, transparent 55%),
            radial-gradient(ellipse 50% 60% at 50% 50%, rgba(2,15,43,1) 0%, transparent 100%);
        z-index: 0; pointer-events: none;
    }
    #app-content::after {
        content: '';
        position: fixed; inset: 0;
        background-image:
            linear-gradient(rgba(59,125,232,.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(59,125,232,.04) 1px, transparent 1px);
        background-size: 48px 48px;
        z-index: 0; pointer-events: none;
    }

    .q-wrap { position: relative; z-index: 1; padding-bottom: 0; }

    /* ── HEADER ── */
    .q-header {
        background: rgba(4,20,51,.9);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--q-glass-border);
        padding: 0 20px;
        height: 60px;
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 100;
        box-shadow: 0 4px 24px rgba(0,0,0,.4);
    }
    .q-header-left  { display: flex; align-items: center; gap: 12px; }
    .q-logo-mark {
        width: 36px; height: 36px; border-radius: 10px;
        background: linear-gradient(135deg, var(--q-blue-500), var(--q-cyan));
        display: flex; align-items: center; justify-content: center;
        font-size: 17px; box-shadow: 0 0 16px var(--q-glow-cyan); flex-shrink: 0;
    }
    .q-header-title {
        font-size: 14px; font-weight: 700;
        color: var(--q-white); letter-spacing: -.02em; line-height: 1.2;
    }
    .q-header-title span {
        display: block; font-size: 10px; font-weight: 400;
        color: var(--q-blue-300); letter-spacing: .1em; text-transform: uppercase;
    }
    .q-header-right { display: flex; align-items: center; gap: 14px; }

    .q-clock-block { text-align: right; }
    .q-clock-time {
        font-family: var(--q-font-mono); font-size: 18px; font-weight: 700;
        color: var(--q-white); letter-spacing: .05em; line-height: 1;
    }
    .q-clock-date { font-size: 10px; color: var(--q-blue-300); margin-top: 2px; }

    .q-live-badge {
        display: flex; align-items: center; gap: 6px;
        background: rgba(0,232,181,.1); border: 1px solid rgba(0,232,181,.25);
        border-radius: 20px; padding: 5px 11px;
        font-size: 10px; font-weight: 700; color: var(--q-mint);
        letter-spacing: .1em; text-transform: uppercase;
    }
    .q-live-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--q-mint); box-shadow: 0 0 8px var(--q-mint);
        animation: qPulse 1.6s ease-in-out infinite; flex-shrink: 0;
    }
    @@keyframes qPulse {
        0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 8px var(--q-mint); }
        50%      { opacity:.6; transform:scale(.7); box-shadow:0 0 4px var(--q-mint); }
    }

    .q-conn-bar {
        background: rgba(0,0,0,.3); border: 1px solid var(--q-glass-border);
        border-radius: 10px; padding: 6px 12px;
        display: flex; align-items: center; gap: 7px;
        font-size: 10px; font-weight: 600; color: var(--q-blue-300);
    }
    .q-conn-dot {
        width: 6px; height: 6px; border-radius: 50%; background: var(--q-blue-400);
        transition: background .3s, box-shadow .3s;
    }
    .q-conn-dot.connected    { background: var(--q-mint); box-shadow: 0 0 8px var(--q-mint); animation: qPulse 2s infinite; }
    .q-conn-dot.disconnected { background: var(--q-red);  box-shadow: 0 0 8px var(--q-red); }
    .q-conn-dot.connecting   { background: var(--q-amber); box-shadow: 0 0 8px var(--q-amber); animation: qPulse .8s infinite; }

    /* ════════════════════════════════
       MAIN GRID
       Sol: mevcut hasta (kompakt)
       Orta: istatistikler (sabit 200px)
       Sağ: sıra listesi (geniş)
    ════════════════════════════════ */
    .q-grid {
        display: grid;
        grid-template-columns: minmax(0,1.1fr) 200px minmax(0,1.6fr);
        gap: 14px;
        padding: 16px 16px 0;
        align-items: start;
    }

    /* Orta sütun breakpoint */
    @@media(max-width:1100px) {
        .q-grid {
            grid-template-columns: 1fr 1fr;
        }
        .q-center-col { grid-column: 1 / -1; }
    }
    @@media(max-width:700px) {
        .q-grid { grid-template-columns: 1fr; }
    }

    /* ── CURRENT PATIENT CARD ── */
    .q-current-card {
        background: linear-gradient(145deg, rgba(10,33,73,.92) 0%, rgba(26,69,152,.4) 100%);
        border: 1px solid rgba(59,125,232,.35);
        border-radius: 18px;
        padding: 22px 20px;
        backdrop-filter: blur(20px);
        position: relative; overflow: hidden;
        box-shadow: 0 0 50px rgba(30,86,200,.2), inset 0 1px 0 rgba(255,255,255,.07);
        transition: all .5s cubic-bezier(.34,1.56,.64,1);
    }
    .q-current-card.q-flash {
        border-color: var(--q-cyan);
        box-shadow: 0 0 70px rgba(0,212,255,.4), inset 0 1px 0 rgba(0,212,255,.15);
        animation: qFlash .8s ease;
    }
    @@keyframes qFlash {
        0%   { background: linear-gradient(145deg, rgba(0,212,255,.25) 0%, rgba(30,86,200,.5) 100%); }
        100% { background: linear-gradient(145deg, rgba(10,33,73,.92) 0%, rgba(26,69,152,.4) 100%); }
    }
    .q-current-card::before {
        content: ''; position: absolute;
        width: 260px; height: 260px; border-radius: 50%;
        border: 1px solid rgba(59,125,232,.1);
        top: -70px; right: -70px; pointer-events: none;
    }
    .q-current-card::after {
        content: ''; position: absolute;
        width: 160px; height: 160px; border-radius: 50%;
        border: 1px solid rgba(0,212,255,.07);
        top: -10px; right: -10px; pointer-events: none;
    }

    .q-scanline {
        position: absolute; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, transparent, var(--q-cyan), transparent);
        opacity: .3; animation: qScan 3s linear infinite; pointer-events: none;
    }
    @@keyframes qScan {
        0%   { top:0; opacity:0; }
        5%   { opacity:.3; }
        95%  { opacity:.3; }
        100% { top:100%; opacity:0; }
    }

    .q-curr-label {
        font-size: 9.5px; font-weight: 700;
        letter-spacing: .16em; text-transform: uppercase;
        color: var(--q-cyan);
        display: flex; align-items: center; gap: 7px;
        margin-bottom: 16px;
    }
    .q-curr-label::before {
        content: ''; display: inline-block;
        width: 16px; height: 2px;
        background: var(--q-cyan); border-radius: 2px;
    }

    /* ── Sıra numarası: clamp ile admin panel içine sığacak boyut ── */
    .q-queue-num {
        font-family: var(--q-font-mono);
        font-size: clamp(48px, 5.5vw, 88px);   /* ← önceki 10vw/120px'di */
        font-weight: 700; color: var(--q-white);
        line-height: 1; letter-spacing: -.02em;
        display: inline-block;
        text-shadow: 0 0 28px rgba(0,212,255,.5), 0 0 56px rgba(30,86,200,.4);
        animation: qNumIn .6s cubic-bezier(.34,1.56,.64,1) both;
    }
    @@keyframes qNumIn {
        from { opacity:0; transform:scale(.7) translateY(16px); }
        to   { opacity:1; transform:scale(1) translateY(0); }
    }
    .q-queue-num-prefix {
        font-size: .38em; color: var(--q-blue-300);
        vertical-align: top; margin-top: 10px;
        display: inline-block; font-weight: 400;
    }

    .q-patient-name {
        font-family: var(--q-font-serif);
        font-size: clamp(17px, 2vw, 26px);
        font-style: italic; color: var(--q-white);
        margin-top: 6px; opacity: .92;
    }

    .q-room-badge {
        display: inline-flex; align-items: center; gap: 7px;
        background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25);
        border-radius: 24px; padding: 8px 16px;
        font-size: 12px; font-weight: 600; color: var(--q-cyan);
        margin-top: 14px; letter-spacing: .01em;
        flex-wrap: wrap;
    }
    .q-room-badge i { font-size: 14px; flex-shrink: 0; }

    .q-prev-block {
        margin-top: 18px; padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.07);
    }
    .q-prev-label {
        font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
        color: var(--q-blue-300); font-weight: 700; margin-bottom: 8px;
    }

    /* ── CENTER STATS ── */
    .q-stats-col { display: flex; flex-direction: column; gap: 10px; }

    .q-stat-card {
        background: var(--q-glass); border: 1px solid var(--q-glass-border);
        border-radius: 14px; padding: 14px 16px;
        backdrop-filter: blur(16px);
        position: relative; overflow: hidden;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    .q-stat-card:hover { transform: translateY(-2px) scale(1.02); }
    .q-stat-card::before {
        content: ''; position: absolute;
        bottom: 0; left: 0; right: 0; height: 2px;
        border-radius: 0 0 14px 14px;
    }
    .q-stat-card.waiting::before { background: linear-gradient(90deg,var(--q-amber),transparent); }
    .q-stat-card.called::before  { background: linear-gradient(90deg,var(--q-cyan),transparent); }
    .q-stat-card.done::before    { background: linear-gradient(90deg,var(--q-mint),transparent); }

    .q-stat-num {
        font-family: var(--q-font-mono);
        font-size: 32px; font-weight: 700; line-height: 1; color: var(--q-white);
    }
    .q-stat-card.waiting .q-stat-num { text-shadow: 0 0 18px rgba(255,176,32,.5); }
    .q-stat-card.called  .q-stat-num { text-shadow: 0 0 18px rgba(0,212,255,.5); }
    .q-stat-card.done    .q-stat-num { text-shadow: 0 0 18px rgba(0,232,181,.5); }

    .q-stat-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
    .q-stat-card.waiting .q-stat-lbl { color: var(--q-amber); }
    .q-stat-card.called  .q-stat-lbl { color: var(--q-cyan); }
    .q-stat-card.done    .q-stat-lbl { color: var(--q-mint); }

    .q-stat-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 26px; opacity: .1; }
    .q-stat-card.waiting .q-stat-icon { color: var(--q-amber); }
    .q-stat-card.called  .q-stat-icon { color: var(--q-cyan); }
    .q-stat-card.done    .q-stat-icon { color: var(--q-mint); }

    .q-stat-bar { height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 10px; overflow: hidden; }
    .q-stat-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }
    .q-stat-card.waiting .q-stat-bar-fill { background: var(--q-amber); }
    .q-stat-card.called  .q-stat-bar-fill { background: var(--q-cyan); }
    .q-stat-card.done    .q-stat-bar-fill { background: var(--q-mint); }

    .q-doctor-card {
        background: var(--q-glass); border: 1px solid var(--q-glass-border);
        border-radius: 14px; padding: 14px 16px;
        backdrop-filter: blur(16px); margin-top: 2px;
    }

    /* ── WAITING TABLE ── */
    .q-wait-card {
        background: var(--q-glass); border: 1px solid var(--q-glass-border);
        border-radius: 18px; backdrop-filter: blur(16px);
        overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.2);
    }
    .q-card-header {
        padding: 13px 18px 11px;
        border-bottom: 1px solid var(--q-glass-border);
        display: flex; align-items: center; gap: 9px;
    }
    .q-card-icon {
        width: 28px; height: 28px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; flex-shrink: 0;
    }
    .q-card-icon.amber { background: rgba(255,176,32,.15); color: var(--q-amber); }
    .q-card-title {
        font-size: 11px; font-weight: 700;
        color: var(--q-blue-200); letter-spacing: .1em; text-transform: uppercase;
    }

    .q-tbl { width: 100%; border-collapse: collapse; }
    .q-tbl thead th {
        padding: 9px 14px;
        font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
        color: var(--q-blue-300); background: rgba(255,255,255,.03);
        border-bottom: 1px solid var(--q-glass-border); white-space: nowrap;
    }
    .q-tbl tbody tr {
        border-bottom: 1px solid rgba(255,255,255,.04);
        transition: background .2s ease;
        animation: qRowIn .4s ease both;
    }
    .q-tbl tbody tr:last-child { border-bottom: none; }
    .q-tbl tbody tr:hover { background: rgba(255,255,255,.04); }
    @@keyframes qRowIn {
        from { opacity:0; transform:translateX(10px); }
        to   { opacity:1; transform:translateX(0); }
    }
    .q-tbl td { padding: 10px 14px; font-size: 12px; color: var(--q-white); vertical-align: middle; }

    /* nth-child delays */
    .q-tbl tbody tr:nth-child(1)  { animation-delay:.04s; }
    .q-tbl tbody tr:nth-child(2)  { animation-delay:.08s; }
    .q-tbl tbody tr:nth-child(3)  { animation-delay:.12s; }
    .q-tbl tbody tr:nth-child(4)  { animation-delay:.16s; }
    .q-tbl tbody tr:nth-child(5)  { animation-delay:.20s; }
    .q-tbl tbody tr:nth-child(6)  { animation-delay:.24s; }
    .q-tbl tbody tr:nth-child(7)  { animation-delay:.28s; }
    .q-tbl tbody tr:nth-child(8)  { animation-delay:.32s; }
    .q-tbl tbody tr:nth-child(9)  { animation-delay:.36s; }
    .q-tbl tbody tr:nth-child(10) { animation-delay:.40s; }

    .q-ticket-num {
        font-family: var(--q-font-mono); font-size: 12px; font-weight: 700;
        color: var(--q-blue-300);
        background: rgba(59,125,232,.1); border: 1px solid rgba(59,125,232,.2);
        border-radius: 5px; padding: 2px 7px; display: inline-block;
    }
    .q-ticket-num.active {
        color: var(--q-cyan); background: rgba(0,212,255,.1);
        border-color: rgba(0,212,255,.3); box-shadow: 0 0 8px rgba(0,212,255,.2);
    }

    .q-pill {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 9px; border-radius: 20px;
        font-size: 10px; font-weight: 700; letter-spacing: .04em;
    }
    .q-pill::before {
        content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
    }
    .q-pill.waiting { background: rgba(255,176,32,.12); color: var(--q-amber); border: 1px solid rgba(255,176,32,.25); }
    .q-pill.waiting::before { background: var(--q-amber); box-shadow: 0 0 5px var(--q-amber); animation: qPulse 2s infinite; }
    .q-pill.called  { background: rgba(0,212,255,.12);  color: var(--q-cyan);  border: 1px solid rgba(0,212,255,.25); }
    .q-pill.called::before  { background: var(--q-cyan); }
    .q-pill.done    { background: rgba(0,232,181,.12);  color: var(--q-mint);  border: 1px solid rgba(0,232,181,.25); }
    .q-pill.done::before    { background: var(--q-mint); }

    /* ── TICKER ── */
    .q-ticker {
        background: rgba(4,20,51,.9); border-top: 1px solid var(--q-glass-border);
        padding: 0 20px; height: 38px;
        display: flex; align-items: center; gap: 20px;
        margin-top: 16px; overflow: hidden;
    }
    .q-ticker-label {
        font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
        color: var(--q-cyan); white-space: nowrap;
        display: flex; align-items: center; gap: 7px; flex-shrink: 0;
    }
    .q-ticker-label::after {
        content: ''; display: block; width: 1px; height: 16px;
        background: var(--q-glass-border);
    }
    .q-ticker-track {
        overflow: hidden; flex: 1;
        mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
    }
    .q-ticker-inner {
        display: flex; gap: 44px; white-space: nowrap;
        animation: qTick 30s linear infinite;
    }
    @@keyframes qTick {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .q-ticker-item { font-size: 11.5px; font-weight: 500; color: var(--q-blue-200); display: inline-flex; align-items: center; gap: 9px; }
    .q-ticker-item i { color: var(--q-blue-400); font-size: 10px; }

    /* ── Counter anim ── */
    @@keyframes qCountUp {
        from { opacity:0; transform:translateY(6px); }
        to   { opacity:1; transform:translateY(0); }
    }
    .q-count-animate { animation: qCountUp .4s cubic-bezier(.34,1.56,.64,1) both; }
</style>

<div class="q-wrap">

    <!-- HEADER -->
    <header class="q-header">
        <div class="q-header-left">
            <div class="q-logo-mark"><i class="bi bi-hospital" style="color:#fff"></i></div>
            <div class="q-header-title">
                Hastane Sıra Yönetim Sistemi
                <span>Poliklinik Sıra Takip Ekranı</span>
            </div>
        </div>
        <div class="q-header-right">
            <div class="q-conn-bar">
                <div class="q-conn-dot connecting" id="q-conn-dot"></div>
                <span id="q-conn-text">Bağlanıyor...</span>
            </div>
            <div class="q-live-badge">
                <div class="q-live-dot"></div> Canlı
            </div>
            <div class="q-clock-block">
                <div class="q-clock-time" id="q-time">--:--:--</div>
                <div class="q-clock-date" id="q-date">—</div>
            </div>
        </div>
    </header>

    <!-- MAIN GRID -->
    <div class="q-grid">

        <!-- SOL: Şu Anki Hasta -->
        <div>
            <div class="q-current-card" id="q-current-card">
                <div class="q-scanline"></div>
                <div class="q-curr-label">Şu An Çağrılan Hasta</div>
                <div>
                    <div class="q-queue-num" id="q-queue-num">
                        <span class="q-queue-num-prefix">No</span>
                        <span id="q-queue-num-val">042</span>
                    </div>
                    <div class="q-patient-name" id="q-patient-name">Ayşe Fatma Kaya</div>
                </div>
                <div class="q-room-badge" id="q-room-badge">
                    <i class="bi bi-door-open"></i>
                    Lütfen <strong style="margin:0 4px">3 Numaralı Muayene Odası</strong>'na geçiniz
                </div>
                <div class="q-prev-block">
                    <div class="q-prev-label">Önceki Çağrı</div>
                    <div style="display:flex;align-items:center;gap:10px">
                        <span style="font-family:var(--q-font-mono);font-size:18px;font-weight:700;color:rgba(255,255,255,.38)" id="q-prev-num">No 039</span>
                        <span style="font-size:12px;color:rgba(255,255,255,.38)" id="q-prev-name">Mehmet Ali Demir</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ORTA: İstatistikler -->
        <div class="q-stats-col q-center-col">
            <div class="q-stat-card waiting">
                <div class="q-stat-num" id="q-stat-waiting">14</div>
                <div class="q-stat-lbl">Bekleyen Hasta</div>
                <div class="q-stat-bar"><div class="q-stat-bar-fill" id="q-bar-waiting" style="width:56%"></div></div>
                <div class="q-stat-icon"><i class="bi bi-hourglass-split"></i></div>
            </div>
            <div class="q-stat-card called">
                <div class="q-stat-num" id="q-stat-called">7</div>
                <div class="q-stat-lbl">Çağrılan Hasta</div>
                <div class="q-stat-bar"><div class="q-stat-bar-fill" id="q-bar-called" style="width:28%"></div></div>
                <div class="q-stat-icon"><i class="bi bi-megaphone"></i></div>
            </div>
            <div class="q-stat-card done">
                <div class="q-stat-num" id="q-stat-done">21</div>
                <div class="q-stat-lbl">Tamamlanan</div>
                <div class="q-stat-bar"><div class="q-stat-bar-fill" id="q-bar-done" style="width:84%"></div></div>
                <div class="q-stat-icon"><i class="bi bi-check2-all"></i></div>
            </div>
            <div class="q-doctor-card">
                <div style="font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--q-blue-300);margin-bottom:8px">Nöbetçi Doktor</div>
                <div style="font-size:13px;font-weight:700;color:var(--q-white)">Dr. Selin Arslan</div>
                <div style="font-size:10.5px;color:var(--q-blue-300);margin-top:3px">Kardiyoloji Uzmanı</div>
                <div style="display:flex;align-items:center;gap:5px;margin-top:9px;font-size:10.5px;color:var(--q-mint)">
                    <div class="q-live-dot" style="width:5px;height:5px"></div>
                    Aktif Nöbet
                </div>
            </div>
        </div>

        <!-- SAĞ: Sıra Listesi -->
        <div>
            <div class="q-wait-card">
                <div class="q-card-header">
                    <div class="q-card-icon amber"><i class="bi bi-list-ol"></i></div>
                    <div class="q-card-title">Sıra Listesi</div>
                    <div style="margin-left:auto;font-size:10.5px;font-weight:600;color:var(--q-blue-300)">
                        Bugün · <span id="q-tbl-count">10</span> kayıt
                    </div>
                </div>
                <div style="overflow-y:auto;max-height:420px">
                    <table class="q-tbl">
                        <thead>
                            <tr>
                                <th>Sıra No</th>
                                <th>Hasta Adı</th>
                                <th>Branş</th>
                                <th>Durum</th>
                            </tr>
                        </thead>
                        <tbody id="q-tbody">
                            <tr>
                                <td><span class="q-ticket-num active">No 042</span></td>
                                <td style="font-weight:600">Ayşe Fatma Kaya</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Kardiyoloji</td>
                                <td><span class="q-pill called">Çağrıldı</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 043</span></td>
                                <td style="font-weight:600">Mustafa Çelik</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Dahiliye</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 044</span></td>
                                <td style="font-weight:600">Zeynep Arslan</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Nöroloji</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 045</span></td>
                                <td style="font-weight:600">Hasan Yıldız</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Ortopedi</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 046</span></td>
                                <td style="font-weight:600">Fatma Nur Öztürk</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Kardiyoloji</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 047</span></td>
                                <td style="font-weight:600">İbrahim Koç</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Dahiliye</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 048</span></td>
                                <td style="font-weight:600">Elif Şahin</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Dermatoloji</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 049</span></td>
                                <td style="font-weight:600">Ahmet Berk Demir</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Nöroloji</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 050</span></td>
                                <td style="font-weight:600">Seda Kara</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Ortopedi</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                            <tr>
                                <td><span class="q-ticket-num">No 051</span></td>
                                <td style="font-weight:600">Cem Yılmaz</td>
                                <td style="font-size:11px;color:var(--q-blue-300)">Dahiliye</td>
                                <td><span class="q-pill waiting">Bekliyor</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div><!-- /.q-grid -->

    <!-- TICKER -->
    <div class="q-ticker">
        <div class="q-ticker-label"><i class="bi bi-broadcast"></i> Duyuru</div>
        <div class="q-ticker-track">
            <div class="q-ticker-inner" id="q-ticker-inner">
                <span class="q-ticker-item"><i class="bi bi-heart-pulse"></i> Acil durumlarda lütfen görevli personele başvurunuz.</span>
                <span class="q-ticker-item"><i class="bi bi-clock"></i> Randevu saatinizden 15 dakika önce kayıt yaptırmanız gerekmektedir.</span>
                <span class="q-ticker-item"><i class="bi bi-telephone"></i> İletişim: 0 212 XXX XX XX</span>
                <span class="q-ticker-item"><i class="bi bi-wifi"></i> Hastane misafir Wi-Fi: HealthNet_Guest</span>
                <span class="q-ticker-item"><i class="bi bi-info-circle"></i> Çocuklu aileler için öncelikli sıra alımı danışma masasından yapılabilir.</span>
                <span class="q-ticker-item"><i class="bi bi-calendar-check"></i> Online randevu için hastane uygulamasını indirin.</span>
            </div>
        </div>
    </div>

</div><!-- /.q-wrap -->

<!-- SignalR CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js"
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Saat & Tarih -->
<script>
(function(){
    const timeEl=document.getElementById('q-time');
    const dateEl=document.getElementById('q-date');
    const MONTHS=['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'];
    const DAYS=['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'];
    function tick(){
        const n=new Date();
        timeEl.textContent=`${String(n.getHours()).padStart(2,'0')}:${String(n.getMinutes()).padStart(2,'0')}:${String(n.getSeconds()).padStart(2,'0')}`;
        dateEl.textContent=`${DAYS[n.getDay()]}, ${n.getDate()} ${MONTHS[n.getMonth()]} ${n.getFullYear()}`;
    }
    tick(); setInterval(tick,1000);
})();
</script>

<!-- Ticker loop -->
<script>
(function(){
    const inner=document.getElementById('q-ticker-inner');
    if(inner) inner.innerHTML+=inner.innerHTML;
})();
</script>

<!-- Queue UI Controller -->
<script>
const QueueUI=(()=>{
    const els={
        card:document.getElementById('q-current-card'),
        queueNum:document.getElementById('q-queue-num-val'),
        patientName:document.getElementById('q-patient-name'),
        roomBadge:document.getElementById('q-room-badge'),
        prevNum:document.getElementById('q-prev-num'),
        prevName:document.getElementById('q-prev-name'),
        statWaiting:document.getElementById('q-stat-waiting'),
        statCalled:document.getElementById('q-stat-called'),
        statDone:document.getElementById('q-stat-done'),
        barWaiting:document.getElementById('q-bar-waiting'),
        barCalled:document.getElementById('q-bar-called'),
        barDone:document.getElementById('q-bar-done'),
        tbody:document.getElementById('q-tbody'),
        connDot:document.getElementById('q-conn-dot'),
        connText:document.getElementById('q-conn-text'),
    };
    let state={currentNum:'042',currentName:'Ayşe Fatma Kaya',currentRoom:'3',waiting:14,called:7,done:21};

    function updateCurrentPatient(data){
        const prevNum=state.currentNum, prevName=state.currentName;
        state.currentNum  = data.queueNumber ?? state.currentNum;
        state.currentName = data.patientName ?? state.currentName;
        state.currentRoom = data.roomNumber  ?? state.currentRoom;
        state.waiting     = data.waiting     ?? state.waiting;
        state.called      = data.called      ?? state.called;
        state.done        = data.done        ?? state.done;
        // Queue Number update
        els.queueNum.textContent=String(state.currentNum).padStart(3,'0');
        // Patient Name update
        els.patientName.textContent=state.currentName;
        // Room badge update
        els.roomBadge.innerHTML=`<i class="bi bi-door-open"></i> Lütfen <strong style="margin:0 4px">${state.currentRoom} Numaralı Muayene Odası</strong>'na geçiniz`;
        // Previous patient
        els.prevNum.textContent='No '+String(prevNum).padStart(3,'0');
        els.prevName.textContent=prevName;
        // Statistics update
        updateStats(state.waiting,state.called,state.done);
        // Highlight animation
        highlightCard();
        updateTableRow(state.currentNum);
    }

    function updateStats(waiting,called,done){
        const total=waiting+called+done;
        animateCounter(els.statWaiting,waiting);
        animateCounter(els.statCalled,called);
        animateCounter(els.statDone,done);
        els.barWaiting.style.width=total?Math.round((waiting/total)*100)+'%':'0%';
        els.barCalled.style.width =total?Math.round((called/total)*100)+'%':'0%';
        els.barDone.style.width   =total?Math.round((done/total)*100)+'%':'0%';
    }

    function animateCounter(el,target){
        if(!el)return;
        const start=parseInt(el.textContent)||0,diff=target-start,steps=20;
        let step=0;
        el.classList.remove('q-count-animate'); void el.offsetWidth; el.classList.add('q-count-animate');
        const t=setInterval(()=>{step++;el.textContent=Math.round(start+diff*(step/steps));if(step>=steps){el.textContent=target;clearInterval(t);}},600/steps);
    }

    function highlightCard(){
        els.card.classList.remove('q-flash'); void els.card.offsetWidth; els.card.classList.add('q-flash');
        setTimeout(()=>els.card.classList.remove('q-flash'),2000);
    }

    function updateTableRow(queueNum){
        if(!els.tbody)return;
        const formatted='No '+String(queueNum).padStart(3,'0');
        els.tbody.querySelectorAll('.q-pill.called').forEach(pill=>{
            pill.className='q-pill done'; pill.textContent='Tamamlandı';
            pill.closest('tr')?.querySelector('.q-ticket-num')?.classList.remove('active');
        });
        els.tbody.querySelectorAll('.q-ticket-num').forEach(ticket=>{
            if(ticket.textContent.trim()===formatted){
                ticket.classList.add('active');
                const pill=ticket.closest('tr')?.querySelector('.q-pill');
                if(pill){pill.className='q-pill called';pill.textContent='Çağrıldı';}
            }
        });
    }

    function setConnectionStatus(status){
        if(!els.connDot||!els.connText)return;
        els.connDot.className='q-conn-dot '+status;
        els.connText.textContent=status==='connected'?'Bağlı':status==='disconnected'?'Bağlantı Kesildi':'Bağlanıyor...';
    }

    return{updateCurrentPatient,updateStats,setConnectionStatus,highlightCard};
})();
</script>

<!-- SignalR Bağlantısı -->
<script>
(function(){
    // SignalR Hub URL will be added here
    const HUB_URL="https://localhost:7012/queuehub";

    const connection=new signalR.HubConnectionBuilder()
        .withUrl(HUB_URL)
        .withAutomaticReconnect({
            nextRetryDelayInMilliseconds:ctx=>{
                if(ctx.elapsedMilliseconds<10000)return 2000;
                if(ctx.elapsedMilliseconds<60000)return 5000;
                return 10000;
            }
        })
        .configureLogging(signalR.LogLevel.Information)
        .build();

    // PatientCalled event — Hub: await Clients.All.SendAsync("PatientCalled", queueNumber, patientName);
    connection.on("PatientCalled",function(queueNumber,patientName){
        // Queue Number update
        // Patient Name update
        QueueUI.updateCurrentPatient({queueNumber:queueNumber,patientName:patientName});
    });

    // StatisticsUpdated event (opsiyonel)
    connection.on("StatisticsUpdated",function(data){
        QueueUI.updateStats(data.waiting,data.called,data.done);
    });

    connection.onreconnecting(()=>{QueueUI.setConnectionStatus('connecting');});
    connection.onreconnected(()=>{QueueUI.setConnectionStatus('connected');});
    connection.onclose(()=>{QueueUI.setConnectionStatus('disconnected');});

    async function startConnection(){
        try{
            QueueUI.setConnectionStatus('connecting');
            await connection.start();
            QueueUI.setConnectionStatus('connected');
            console.log("[Queue] SignalR bağlandı:",HUB_URL);
        }catch(err){
            QueueUI.setConnectionStatus('disconnected');
            console.error("[Queue] Bağlantı hatası:",err);
            setTimeout(startConnection,5000);
        }
    }
    startConnection();
    window._queueConnection=connection;
})();
</script>

<!-- Demo: bağlantı timeout -->
<script>
setTimeout(function(){
    if(window._queueConnection&&window._queueConnection.state!==signalR.HubConnectionState.Connected){
        QueueUI.setConnectionStatus('disconnected');
    }
},8000);
</script>

</main>