@extends('layouts.app')

@section('styles')
<style>
    .pos-grid {
        display: grid;
        grid-template-columns: 380px 1fr 380px;
        gap: 30px;
        min-height: calc(100vh - 280px);
        align-items: start;
    }

    .card {
        background: var(--white);
        border-radius: 28px;
        padding: 24px;
        box-shadow: var(--shadow);
        border: 1px solid rgba(0,0,0,0.03);
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        overflow: hidden;
        height: 100%;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .card-header h2 {
        font-size: 20px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .card-header h2 i {
        color: var(--gold);
    }

    /* Service List */
    .service-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
        padding-right: 5px;
    }

    .service-item {
        background: var(--light-beige);
        border: 2px solid transparent;
        padding: 16px;
        border-radius: 20px;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
    }

    .service-item:hover {
        border-color: var(--sage-green);
        transform: scale(1.02);
        background: var(--white);
    }

    .service-item.selected {
        border-color: var(--gold);
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), var(--white));
        box-shadow: 0 10px 20px rgba(212, 175, 55, 0.1);
    }

    .service-icon {
        width: 48px; height: 48px;
        background: var(--white);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .service-info h3 {
        font-size: 16px; font-weight: 600; margin-bottom: 2px;
    }

    .service-info span {
        font-size: 12px; color: var(--text-light);
    }

    .service-price {
        margin-left: auto; font-weight: 700; color: var(--dark-gold);
    }

    /* Therapist Grid */
    .therapist-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 18px;
        overflow-y: auto;
        padding-bottom: 20px;
    }

    .therapist-card {
        background: var(--white);
        border: 2px solid var(--light-beige);
        border-radius: 24px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
    }

    .therapist-card:hover {
        border-color: var(--sage-green);
        transform: translateY(-5px);
    }

    .therapist-card.on-session {
        border-color: var(--warning);
        background: rgba(255, 152, 0, 0.03);
    }

    .therapist-card.selected {
        border-color: var(--gold);
        background: rgba(212, 175, 55, 0.05);
    }

    .status-dot {
        position: absolute; top: 12px; right: 12px;
        width: 12px; height: 12px; border-radius: 50%;
        border: 2px solid var(--white);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        z-index: 2;
    }

    .status-dot.available { 
        background: var(--success); 
        box-shadow: 0 0 15px var(--success);
        animation: status-pulse 2s infinite;
    }
    .status-dot.busy { background: var(--warning); }
    .status-dot.off { background: var(--danger); }

    @keyframes status-pulse {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.4); opacity: 0.5; }
        100% { transform: scale(1); opacity: 1; }
    }

    .therapist-card {
        background: var(--white);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 28px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

    .therapist-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
        opacity: 0;
        transition: var(--transition);
    }

    .therapist-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: var(--shadow-lg);
        border-color: var(--sage-green);
    }

    .therapist-card:hover::before { opacity: 1; }

    .therapist-card.on-session {
        background: linear-gradient(135deg, var(--white), rgba(255, 152, 0, 0.05));
    }

    .therapist-card.selected {
        border-color: var(--gold);
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), var(--white));
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2);
    }

    .session-badge {
        position: absolute;
        top: 15px; left: 15px;
        background: var(--light-beige);
        color: var(--text-light);
        font-size: 10px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }

    .therapist-avatar {
        width: 72px; height: 72px;
        border-radius: 50%;
        margin: 0 auto 12px;
        border: 3px solid var(--white);
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .therapist-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .therapist-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
    .therapist-skill { font-size: 11px; color: var(--text-light); text-transform: uppercase; }

    /* Timer Ring */
    .timer-ring {
        position: absolute; bottom: 8px; right: 8px;
        width: 24px; height: 24px;
    }

    /* Paging Status */
    .paging-card {
        background: linear-gradient(135deg, var(--sage-green), var(--dark-green));
        color: var(--white);
        padding: 20px;
        border-radius: 20px;
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Room Map */
    .room-map-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .room-box {
        aspect-ratio: 1;
        background: var(--white);
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        border: 2px solid var(--light-beige);
        transition: var(--transition);
        position: relative;
        cursor: pointer;
    }

    .room-box:hover {
        transform: scale(1.05);
        border-color: var(--sage-green);
    }

    .room-box.occupied {
        background: rgba(255, 152, 0, 0.05);
        border-color: var(--warning);
    }

    .room-number {
        position: absolute; top: 15px; left: 15px;
        font-weight: 800; color: var(--text-light); opacity: 0.3; font-size: 24px;
    }

    /* Commission Section */
    .comm-chart {
        height: 120px;
        display: flex;
        align-items: flex-end;
        gap: 20px;
        padding-top: 20px;
    }

    .comm-bar {
        flex: 1;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        position: relative;
        transition: var(--transition);
        min-height: 20px;
    }

    .comm-bar::after {
        content: attr(data-label);
        position: absolute; bottom: -25px; left: 50%;
        transform: translateX(-50%);
        font-size: 11px; white-space: nowrap;
        color: var(--text-light);
    }

    .comm-bar.therapist { background: var(--success); }
    .comm-bar.outlet { background: var(--gold); }
    .comm-bar.admin { background: var(--dark-green); }

    /* Custom Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-thumb { background: var(--sage-green); border-radius: 10px; }
</style>
@section('content')
<!-- TAB: DASHBOARD KASIR -->
<div id="dashboard" class="content-section active">
    <div class="pos-grid">
        <!-- Left: Services & Products -->
        <div class="card" style="display: flex; flex-direction: column; overflow: hidden;">
            @if($requireRoom)
            <!-- Mini Room Summary -->
            <div style="padding: 15px; background: var(--light-beige); border-radius: 20px; margin-bottom: 20px; border: 1px dashed var(--gold);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <h4 style="font-size: 11px; font-weight: 800; opacity: 0.6;">DASHBOARD RUANGAN</h4>
                    <span style="font-size: 10px; background: var(--success); color: white; padding: 2px 8px; border-radius: 10px;">LIVE</span>
                </div>
                <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;">
                    @foreach($rooms as $r)
                        <div id="mini-room-{{ $r->id }}" class="mini-room {{ $r->status }}" 
                             onclick="selectRoom({{ $r->id }}, '{{ $r->number }}', '{{ $r->status }}')"
                             title="Room {{ $r->number }} - {{ $r->status }}">
                            {{ $r->number }}
                        </div>
                    @endforeach
                </div>
            </div>

            <style>
                .mini-room { 
                    width: 100%; aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: white; transition: 0.3s;
                }
                .mini-room.available { background: var(--success); }
                .mini-room.occupied { background: var(--warning); animation: pulse 2s infinite; }
                .mini-room.maintenance { background: var(--danger); }
                @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
            </style>
            @endif

            <div class="card-header">
                <h2><i class="fas fa-spa"></i> Layanan Utama</h2>
                <div class="search-box">
                    <div style="display:flex; gap:10px; align-items:center;">
                        <input id="posSearch" type="text" placeholder="Cari layanan/produk/terapis…"
                               style="width: 220px; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); font-size: 13px; background: var(--white); outline: none;">
                        <button type="button" class="btn-circle" style="width: 36px; height: 36px; font-size: 14px;" onclick="focusSearch()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="service-list" id="serviceList">
                @foreach($services as $s)
                <div class="service-item" onclick="selectService({{ $s->id }}, '{{ $s->name }}', {{ $s->price }})">
                    <div class="service-icon">{{ $s->icon }}</div>
                    <div class="service-info">
                        <h3>{{ $s->name }}</h3>
                        <span>{{ $s->duration }} Menit • {{ $s->level }}</span>
                    </div>
                    <div class="service-price">Rp {{ number_format($s->price, 0, ',', '.') }}</div>
                </div>
                @endforeach
            </div>

            <!-- New: Retail Products -->
            <div class="card-header" style="margin-top: 25px;">
                <h2><i class="fas fa-shopping-bag"></i> Produk Tambahan</h2>
            </div>
            <div class="service-list" style="max-height: 200px;">
                @foreach($products as $p)
                <div class="service-item product-item" onclick="toggleProduct({{ $p->id }}, '{{ $p->name }}', {{ $p->price }})">
                    <div class="service-icon" style="background: var(--light-beige);"><i class="fas fa-box" style="font-size: 16px; color: var(--sage-green);"></i></div>
                    <div class="service-info">
                        <h3 style="font-size: 14px;">{{ $p->name }}</h3>
                        <span style="font-size: 11px;">Stok: {{ $p->stock }} • {{ $p->category }}</span>
                    </div>
                    <div class="service-price" style="font-size: 13px;">+Rp {{ number_format($p->price, 0, ',', '.') }}</div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Section: Therapists -->
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-user-friends"></i> Terapis Live</h2>
                <span class="badge" id="filterStatus">Semua Spesialis</span>
            </div>
            <div class="therapist-grid" id="therapistGrid">
                @foreach($therapists as $t)
                <div class="therapist-card {{ $t->status == 'busy' ? 'on-session' : '' }}" 
                     data-therapist-id="{{ $t->id }}"
                     data-status="{{ $t->status }}"
                     onclick="selectTherapist({{ $t->id }}, '{{ $t->name }}')">
                    <div class="status-dot {{ $t->status }}"></div>
                    <div class="session-badge">{{ $t->sessions_today ?? 0 }} Sesi</div>
                    <div class="therapist-avatar">
                        <img src="https://i.pravatar.cc/150?img={{ $t->image_id }}" alt="{{ $t->name }}">
                    </div>
                    <div class="therapist-name">{{ $t->name }}</div>
                    <div class="therapist-skill">{{ $t->skill }}</div>
                    <div class="therapist-remain" data-therapist-id="{{ $t->id }}" style="font-size:11px;margin-top:6px;color:var(--warning);font-weight:600;min-height:14px;"></div>
                    @if($t->status == 'busy')
                    <div class="timer-ring">
                        <svg viewBox="0 0 36 36" style="transform: rotate(-90deg); stroke-linecap: round;">
                            <circle cx="18" cy="18" r="16" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="3"></circle>
                            <circle cx="18" cy="18" r="16" fill="none" stroke="var(--warning)" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="30"></circle>
                        </svg>
                    </div>
                    @endif
                    @if(!$requireRoom && $t->status === 'busy')
                    <button type="button" onclick="event.stopPropagation(); finishTherapistSession({{ $t->id }})"
                            style="margin-top:10px;width:100%;padding:8px 10px;border:none;border-radius:10px;background:var(--dark-green);color:white;font-size:11px;font-weight:700;cursor:pointer;">
                        <i class="fas fa-check"></i> Selesai sesi
                    </button>
                    @endif
                </div>
                @endforeach
            </div>
            <div class="paging-card">
                <div>
                    <h4 style="font-size: 13px; opacity: 0.8; margin-bottom: 2px;">STATUS PAGING</h4>
                    <p style="font-size: 15px; font-weight: 600;">3 Terapis Menunggu Konfirmasi</p>
                </div>
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>

        <!-- Section: Checkout & Summary -->
        <div class="card" style="height: auto; min-height: calc(100vh - 300px);">
            <div class="card-header">
                <h2><i class="fas fa-shopping-cart"></i> Checkout Sesi</h2>
                <button class="btn-circle" style="width: 36px; height: 36px; font-size: 14px;">
                    <i class="fas fa-trash"></i>
                </button>
            </div>

            <!-- ALL inner content wrapped in a scrollable container -->
            <div style="flex: 1; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 10px;">

                <div id="checkoutSummary">
                    <div style="text-align: center; padding: 40px 0; opacity: 0.3;">
                        <i class="fas fa-receipt" style="font-size: 64px; margin-bottom: 16px; display: block;"></i>
                        <p>Pilih layanan & terapis<br>untuk mulai</p>
                    </div>
                </div>

                <!-- Customer CRM Module -->
                <div id="customerModule" style="padding: 15px; background: rgba(0,0,0,0.02); border-radius: 20px; display: none;">
                    <h4 style="font-size: 12px; font-weight: 700; color: var(--text-light); margin-bottom: 10px;">DATA PELANGGAN</h4>
                    <div style="display: grid; gap: 10px;">
                        <input type="text" id="customerName" placeholder="Nama Pelanggan" style="width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); font-size: 14px; background: var(--white);">
                        <input type="text" id="customerPhone" placeholder="No. WhatsApp (62...)" style="width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); font-size: 14px; background: var(--white);">
                    </div>
                </div>

                <!-- Payment Method Selection -->
                <div id="paymentModule" style="display: none;">
                    <h4 style="font-size: 12px; font-weight: 700; color: var(--text-light); margin-bottom: 8px;">METODE BAYAR</h4>
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                        <button class="btn-pay selected" onclick="setPayment('cash')">💵 Tunai</button>
                        <button class="btn-pay" onclick="setPayment('qris')">📱 QRIS</button>
                        <button class="btn-pay" onclick="setPayment('card')">💳 Kartu</button>
                    </div>
                </div>

                <style>
                    .btn-pay {
                        background: var(--white); border: 1px solid rgba(0,0,0,0.1); padding: 8px; border-radius: 12px; cursor: pointer; transition: 0.3s; font-size: 13px; font-weight: 600;
                    }
                    .btn-pay.selected { background: var(--sage-green); color: white; border-color: var(--sage-green); }
                </style>

                <!-- Corporate Wellness Toggle -->
                <div style="padding: 15px; background: rgba(0,0,0,0.02); border-radius: 16px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(0,0,0,0.05);">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <i class="fas fa-building" style="color: var(--text-light);"></i>
                        <span style="font-size: 13px; font-weight: 600;">Corporate Mode</span>
                    </div>
                    <label class="switch" style="position: relative; display: inline-block; width: 44px; height: 24px;">
                        <input type="checkbox" id="corporateToggle" onchange="toggleCorporate()" style="opacity: 0; width: 0; height: 0;">
                        <span style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px;"></span>
                    </label>
                </div>

                <style>
                    #corporateToggle:checked + span { background-color: var(--sage-green); }
                    #corporateToggle + span:before {
                        position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%;
                    }
                    #corporateToggle:checked + span:before { transform: translateX(20px); }
                </style>

                <!-- Total & Checkout -->
                <div style="background: var(--light-beige); padding: 20px; border-radius: 20px; margin-top: auto;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; opacity: 0.7;">
                        <span>Subtotal:</span>
                        <span id="subtotal">Rp 0</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 22px; font-weight: 800; font-family: 'Outfit';">
                        <span>Total:</span>
                        <span id="total" style="color: var(--dark-gold);">Rp 0</span>
                    </div>
                    <button class="btn-checkout" onclick="processCheckout()" style="width:100%; height: 60px; background: linear-gradient(135deg, var(--gold), var(--dark-gold)); border:none; border-radius: 18px; color:white; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);">
                        <i class="fas fa-print"></i> BAYAR & CETAK NOTA
                    </button>
                </div>

            </div><!-- end scrollable container -->
        </div>

    </div>
</div>

@if($requireRoom)
<!-- TAB: PETA RUANGAN -->
<div id="room-map" class="content-section">
    <div class="card">
        <div class="card-header">
            <h2><i class="fas fa-map"></i> Floor Plan & Live Occupancy</h2>
            <div class="legend" style="display: flex; gap: 15px; font-size: 13px;">
                <span style="display: flex; align-items: center; gap: 8px;"><div style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></div> Tersedia</span>
                <span style="display: flex; align-items: center; gap: 8px;"><div style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></div> Terisi</span>
                <span style="display: flex; align-items: center; gap: 8px;"><div style="width: 8px; height: 8px; border-radius: 50%; background: var(--danger);"></div> Perbaikan</span>
            </div>
        </div>
        <div class="room-map-grid" id="floorPlan">
                @foreach($rooms as $r)
                @php
                    $session = $transactions->where('room_id', $r->id)->where('status', 'pending')->sortByDesc('id')->first();
                    $duration = $session ? (int) ($session->service->duration ?? 60) : 0;
                    $startTime = $session ? $session->created_at->timestamp : 0;
                    $therapistId = $session ? $session->therapist_id : null;
                @endphp
                <div id="room-box-{{ $r->id }}" class="room-box {{ $r->status }}" 
                     onclick="selectRoom({{ $r->id }}, '{{ $r->number }}', '{{ $r->status }}')"
                     data-duration="{{ $duration }}" 
                     data-start="{{ $startTime }}"
                     data-therapist="{{ $therapistId ?? '' }}">
                    <div class="room-number">{{ $r->number }}</div>
                    <div style="font-size: 40px;">🛏️</div>
                    <div class="room-label" style="font-size: 14px; font-weight:700;">{{ $r->status == 'occupied' ? ($session->customer_name ?? 'Pelanggan') : 'KOSONG' }}</div>
                    @if($r->status == 'occupied')
                    <div class="room-timer" style="font-size: 11px; color: var(--warning); font-weight: 700; line-height: 1.35; text-align: center;">
                        @if($session)
                            ⏱️ Menghitung…
                        @else
                            <span style="color: var(--danger);">⚠ Ruang “terisi” tanpa transaksi aktif (pending). Sesuaikan di master atau klik Selesai.</span>
                        @endif
                    </div>
                    <button onclick="event.stopPropagation(); finishSession({{ $r->id }}, {{ $therapistId ? $therapistId : 'null' }})" class="btn-sm" style="margin-top:5px; background:rgba(0,0,0,0.05); border:none; border-radius:10px; padding:4px 8px; font-size:10px; cursor:pointer;">
                        <i class="fas fa-check-circle"></i> Selesai
                    </button>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif

@if(auth()->user()->canViewPosManagementTabs())
<!-- TAB: KOMISI & LAPORAN -->
<div id="reports" class="content-section">
    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 30px;">
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-list-ul"></i> Transaksi Terakhir</h2>
            </div>
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead style="text-align: left; background: var(--light-beige);">
                    <tr>
                        <th style="padding: 15px; border-radius: 10px 0 0 10px;">ID TRX</th>
                        <th style="padding: 15px;">Pelanggan</th>
                        <th style="padding: 15px;">Layanan</th>
                        <th style="padding: 15px;">Terapis</th>
                        <th style="padding: 15px; border-radius: 0 10px 10px 0;">Total</th>
                    </tr>
                </thead>
                <tbody style="border-top: 20px solid transparent;">
                    @foreach($transactions as $t)
                    <tr style="border-bottom: 1px solid rgba(0,0,0,0.03);">
                        <td style="padding: 15px; color: var(--text-light); font-weight: 500;">#TX98{{ $t->id }}</td>
                        <td style="padding: 15px; font-weight: 600;">{{ $t->customer_name ?: 'Guest' }}</td>
                        <td style="padding: 15px;">{{ $t->service->name ?? 'N/A' }}</td>
                        <td style="padding: 15px;">{{ $t->therapist->name ?? 'N/A' }}</td>
                        <td style="padding: 15px; color: var(--dark-gold); font-weight: 700;">Rp {{ number_format($t->total_price, 0, ',', '.') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div> <!-- End Card 1 -->
        
        <div class="card"> <!-- Start Card 2 -->
            <div class="card-header">
                <h2><i class="fas fa-coins"></i> Analisis Komisi</h2>
            </div>
            <div style="text-align: center; margin-bottom: 20px;">
                <h3 style="font-size: 32px; font-weight: 800; color: var(--success);">Rp {{ number_format($todayOmzet, 0, ',', '.') }}</h3>
                <span style="font-size: 13px; color: var(--text-light);">TOTAL OMZET HARI INI</span>
            </div>
            
            <div style="margin-bottom: 20px;">
                <h4 style="font-size: 12px; font-weight: 700; margin-bottom: 10px; opacity: 0.6;">📦 PERINGATAN STOK</h4>
                <div style="display: grid; gap: 8px;">
                    @foreach($products->where('stock', '<', 5) as $low)
                        <div style="padding: 10px; background: rgba(244, 67, 54, 0.05); border-radius: 10px; border: 1px solid rgba(244, 67, 54, 0.1); display: flex; justify-content: space-between; font-size: 12px;">
                            <span style="font-weight: 600;">{{ $low->name }}</span>
                            <span style="color: var(--danger);">SISA {{ $low->stock }}</span>
                        </div>
                    @endforeach
                    @if($products->where('stock', '<', 5)->count() == 0)
                        <div style="padding: 10px; background: rgba(76, 175, 80, 0.05); border-radius: 10px; font-size: 12px; color: var(--success);">Semua stok aman ✅</div>
                    @endif
                </div>
            </div>
            <div class="comm-chart">
                <div class="comm-bar therapist" style="height: 20%;" data-label="Therapist (20%)"></div>
                <div class="comm-bar outlet" style="height: 75%;" data-label="Outlet (75%)"></div>
                <div class="comm-bar admin" style="height: 5%;" data-label="Admin (5%)"></div>
            </div>
            <div style="margin-top: 60px; display: grid; gap: 15px;">
                <div style="display: flex; justify-content: space-between; padding: 15px; background: var(--light-beige); border-radius: 14px;">
                    <span>Komisi Terapis:</span>
                    <strong style="color: var(--success);">Rp {{ number_format($todayCommTherapist, 0, ',', '.') }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 15px; background: var(--light-beige); border-radius: 14px;">
                    <span>Kas Outlet:</span>
                    <strong style="color: var(--gold);">Rp {{ number_format($todayOutlet, 0, ',', '.') }}</strong>
                </div>
            </div>
        </div> <!-- End Card 2 -->
    </div> <!-- End Grid -->
</div> <!-- End Reports Section -->

<!-- TAB: MANAJEMEN TEMAN (THERAPIST CENTER) -->
<div id="therapists-center" class="content-section">
    <div style="display: grid; grid-template-columns: 1fr 350px; gap: 30px;">
        <!-- Left: Leaderboard & Stats -->
        <div style="display: flex; flex-direction: column; gap: 30px;">
            <div class="card" style="height: auto;">
                <div class="card-header">
                    <h2><i class="fas fa-crown" style="color: var(--gold);"></i> Performa Unggulan (Top Stars)</h2>
                    <div style="font-size: 13px; color: var(--text-light);">Bulan April 2026</div>
                </div>
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px;">
                    @foreach($therapists->sortByDesc('sessions_today')->take(3) as $key => $top)
                    <div style="background: var(--light-beige); padding: 25px; border-radius: 24px; position: relative; text-align: center; border: 1px solid rgba(0,0,0,0.03);">
                        <div style="position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 3px solid var(--white);">
                            {{ $key + 1 }}
                        </div>
                        <div style="width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--white); overflow: hidden; margin: 0 auto 15px; box-shadow: var(--shadow);">
                            <img src="https://i.pravatar.cc/150?img={{ $top->image_id }}" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <h3 style="font-size: 18px; font-weight: 700;">{{ $top->name }}</h3>
                        <p style="font-size: 12px; color: var(--text-light); margin-bottom: 15px;">{{ $top->skill }}</p>
                        <div style="display: flex; justify-content: center; gap: 15px;">
                            <div style="text-align: center;">
                                <div style="font-size: 18px; font-weight: 800; color: var(--sage-green);">{{ $top->sessions_today }}</div>
                                <div style="font-size: 9px; text-transform: uppercase; letter-spacing: 1px;">Sesi</div>
                            </div>
                            <div style="width: 1px; background: rgba(0,0,0,0.1);"></div>
                            <div style="text-align: center;">
                                <div style="font-size: 18px; font-weight: 800; color: var(--gold);">4.9</div>
                                <div style="font-size: 9px; text-transform: uppercase; letter-spacing: 1px;">Rating</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2><i class="fas fa-users"></i> Status & Kontrol Terapis</h2>
                    <button type="button" class="btn-circle" style="width: 36px; height: 36px; font-size: 14px;" onclick="pollStatus()" title="Refresh">
                        <i class="fas fa-sync"></i>
                    </button>
                </div>
                <div style="flex-grow: 1; overflow-y: auto;">
                    <table style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="text-align: left; font-size: 12px; color: var(--text-light); border-bottom: 1px solid rgba(0,0,0,0.05);">
                                <th style="padding: 15px;">TEMAN / SPESIALIS</th>
                                <th style="padding: 15px;">STATUS</th>
                                <th style="padding: 15px;">SISA</th>
                                <th style="padding: 15px;">AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($therapists as $t)
                            <tr style="border-bottom: 1px solid rgba(0,0,0,0.02);">
                                <td style="padding: 15px;">
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width:36px; height:36px; border-radius: 10px; overflow: hidden;">
                                            <img src="https://i.pravatar.cc/150?img={{ $t->image_id }}" style="width:100%; height:100%; object-fit:cover;">
                                        </div>
                                        <div>
                                            <div style="font-weight: 700; font-size: 14px;">{{ $t->name }}</div>
                                            <div style="font-size: 11px; opacity: 0.6;">{{ $t->skill }} • {{ (int) ($t->sessions_today ?? 0) }} sesi</div>
                                        </div>
                                    </div>
                                </td>
                                <td style="padding: 15px;">
                                    @if($t->status === 'available')
                                        <span class="badge badge-success">Tersedia</span>
                                    @elseif($t->status === 'busy')
                                        <span class="badge badge-warning">Sibuk</span>
                                    @else
                                        <span class="badge badge-danger">Off</span>
                                    @endif
                                </td>
                                <td style="padding: 15px;">
                                    <span class="therapist-remain" data-therapist-id="{{ $t->id }}" style="font-size:12px;color:var(--warning);font-weight:700;"></span>
                                </td>
                                <td style="padding: 15px;">
                                    <div style="display:flex; gap:8px; align-items:center;">
                                        <form method="POST" action="{{ route('admin.therapists.status', $t) }}">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="status" value="available">
                                            <button type="submit" style="border:none;background:rgba(56,161,105,0.12);color:#276749;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;" title="Set tersedia">Available</button>
                                        </form>
                                        <form method="POST" action="{{ route('admin.therapists.status', $t) }}">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="status" value="off">
                                            <button type="submit" style="border:none;background:rgba(229,62,62,0.12);color:#9b2c2c;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;" title="Set off">Off</button>
                                        </form>
                                        @if(!$requireRoom && $t->status === 'busy')
                                            <button type="button" onclick="finishTherapistSession({{ $t->id }})" style="border:none;background:rgba(0,0,0,0.06);color:var(--text-dark);padding:6px 10px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;" title="Selesaikan sesi aktif">Selesai</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right: Real-time Pulse & Mini Widgets -->
        <div style="display: flex; flex-direction: column; gap: 30px;">
            <div class="card" style="background: linear-gradient(135deg, var(--sage-green), var(--dark-green)); color: white; height: auto;">
                <h3 style="font-size: 14px; opacity: 0.8; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">Live Intensity Pulse</h3>
                <div style="font-size: 42px; font-weight: 800; font-family: 'Outfit'; margin-bottom: 5px;">{{ $therapists->where('status', 'busy')->count() }} / {{ $therapists->count() }}</div>
                <p style="font-size: 13px; opacity: 0.9;">Terapis Aktif Melayani</p>
                <div style="margin-top: 30px; height: 60px; display: flex; align-items: flex-end; gap: 4px;">
                    @foreach(range(1, 15) as $r)
                        <div style="flex: 1; background: rgba(255,255,255,0.3); border-radius: 2px; height: {{ rand(20, 100) }}%;"></div>
                    @endforeach
                </div>
            </div>

            <div class="card" style="height: auto;">
                <div class="card-header">
                    <h2><i class="fas fa-sliders-h"></i> Shortcut</h2>
                </div>
                <div style="display:grid; gap:12px;">
                    <a href="{{ route('admin.therapists') }}" class="btn btn-outline" style="justify-content:center;">
                        <i class="fas fa-user-friends"></i> Master Terapis
                    </a>
                    <a href="{{ route('admin.services') }}" class="btn btn-outline" style="justify-content:center;">
                        <i class="fas fa-spa"></i> Master Layanan
                    </a>
                    <a href="{{ route('admin.settings.pos.edit') }}" class="btn btn-outline" style="justify-content:center;">
                        <i class="fas fa-cash-register"></i> Pengaturan POS
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@section('scripts')
<script>
    const POS_REQUIRE_ROOM = @json($requireRoom ?? true);

    let selectedService = null;
    let selectedTherapist = null;
    let selectedRoom = null;
    let selectedProducts = [];
    let isCorporate = false;
    let paymentMethod = 'cash';

    function focusSearch() {
        const el = document.getElementById('posSearch');
        if (el) el.focus();
    }

    function applySearchFilter() {
        const q = (document.getElementById('posSearch')?.value || '').toLowerCase().trim();

        // Services & products (service-item termasuk produk karena class-nya sama)
        document.querySelectorAll('.service-item').forEach(el => {
            const text = (el.textContent || '').toLowerCase();
            el.style.display = q === '' || text.includes(q) ? '' : 'none';
        });

        // Therapists
        document.querySelectorAll('.therapist-card').forEach(el => {
            const text = (el.textContent || '').toLowerCase();
            el.style.display = q === '' || text.includes(q) ? '' : 'none';
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        const s = document.getElementById('posSearch');
        if (s) {
            s.addEventListener('input', applySearchFilter);
        }
    });

    function setPayment(method) {
        paymentMethod = method;
        document.querySelectorAll('.btn-pay').forEach(el => el.classList.remove('selected'));
        event.currentTarget.classList.add('selected');
    }

    function toggleProduct(id, name, price) {
        const index = selectedProducts.findIndex(p => p.id === id);
        if (index > -1) {
            selectedProducts.splice(index, 1);
            event.currentTarget.classList.remove('selected');
        } else {
            selectedProducts.push({ id, name, price });
            event.currentTarget.classList.add('selected');
        }
        updateSummary();
    }

    function toggleCorporate() {
        isCorporate = document.getElementById('corporateToggle').checked;
        if(isCorporate) {
            setPayment('corporate');
            document.getElementById('paymentModule').style.opacity = '0.5';
            document.getElementById('paymentModule').style.pointerEvents = 'none';
        } else {
            setPayment('cash');
            document.getElementById('paymentModule').style.opacity = '1';
            document.getElementById('paymentModule').style.pointerEvents = 'auto';
        }
        updateSummary();
    }

    // Live Room Timers Logic
    function updateRoomTimers() {
        const rooms = document.querySelectorAll('.room-box.occupied');
        const now = Math.floor(Date.now() / 1000);

        rooms.forEach(room => {
            const timerEl = room.querySelector('.room-timer');
            if (!timerEl) return;

            const start = parseInt(room.dataset.start, 10) || 0;
            const durationMin = parseInt(room.dataset.duration, 10) || 0;
            const durationSec = durationMin * 60;
            if (!start || !durationSec) {
                timerEl.textContent = '⏱️ Menghitung…';
                return;
            }

            const elapsed = now - start;
            const remaining = durationSec - elapsed;

            if (remaining <= 0) {
                timerEl.textContent = '✅ SELESAI';
                timerEl.style.color = 'var(--success)';
            } else {
                const mins = Math.floor(remaining / 60);
                const secs = remaining % 60;
                timerEl.textContent = `⏱️ Sisa: ${mins}:${secs.toString().padStart(2, '0')}`;
                timerEl.style.color = 'var(--warning)';
            }
        });

        // Dynamic Therapist Progress Rings (Lingkaran)
        document.querySelectorAll('.therapist-card.on-session').forEach(card => {
            const circle = card.querySelector('.timer-ring circle:last-child');
            if(circle) {
                // In this prototype, we simulate a slow decay for the visual effect
                let currentOffset = parseFloat(circle.getAttribute('stroke-dashoffset'));
                if(currentOffset > 0) {
                    circle.setAttribute('stroke-dashoffset', currentOffset - 0.1);
                }
            }
        });
    }

    setInterval(updateRoomTimers, 1000);

    function formatRemain(sec) {
        if (sec <= 0) return 'Selesai';
        const m = Math.floor(sec / 60);
        const s = sec % 60;
        return `Sisa ~${m}:${s.toString().padStart(2, '0')}`;
    }

    // Live Polling
    async function pollStatus() {
        try {
            const res = await fetch('{{ route('pos.status') }}');
            const data = await res.json();

            const sessionByRoom = {};
            (data.sessions || []).forEach(s => {
                if (s.room_id != null) {
                    sessionByRoom[s.room_id] = s;
                }
            });

            // Update Rooms
            data.rooms.forEach(room => {
                const boxes = document.querySelectorAll(`#room-box-${room.id}, #mini-room-${room.id}`);
                boxes.forEach(box => {
                    const base = box.classList.contains('mini-room') ? 'mini-room ' : 'room-box ';
                    box.className = base + room.status;

                    if (box.classList.contains('room-box')) {
                        const sess = sessionByRoom[room.id];
                        const label = box.querySelector('.room-label');
                        if (label) {
                            if (room.status === 'occupied' && sess && sess.customer_name) {
                                label.textContent = sess.customer_name;
                            } else if (room.status === 'occupied') {
                                label.textContent = 'TERISI';
                            } else {
                                label.textContent = 'KOSONG';
                            }
                        }
                        if (sess) {
                            box.dataset.start = String(sess.started_at);
                            box.dataset.duration = String(sess.duration_minutes);
                            if (sess.therapist_id) {
                                box.dataset.therapist = String(sess.therapist_id);
                            }
                        }
                    }
                });
            });

            // Update Therapists
            const remainByTherapist = {};
            (data.sessions || []).forEach(s => {
                if (s.therapist_id == null) return;
                if (remainByTherapist[s.therapist_id] === undefined) {
                    remainByTherapist[s.therapist_id] = s.remaining_seconds;
                }
            });

            data.therapists.forEach(t => {
                const card = document.querySelector(`.therapist-card[data-therapist-id="${t.id}"]`);
                if (card) {
                    card.className = 'therapist-card ' + (t.status === 'busy' ? 'on-session' : '');
                    card.dataset.status = t.status;
                    const dot = card.querySelector('.status-dot');
                    if (dot) dot.className = 'status-dot ' + t.status;
                    const remEl = card.querySelector('.therapist-remain');
                    if (remEl) {
                        if (t.status === 'busy' && remainByTherapist[t.id] !== undefined) {
                            remEl.textContent = formatRemain(remainByTherapist[t.id]);
                        } else {
                            remEl.textContent = '';
                        }
                    }
                }
            });

        } catch (e) { console.error('Poll failed', e); }
    }
    setInterval(pollStatus, 8000);
    pollStatus();

    function selectRoom(id, number, status) {
        if(status === 'occupied' || status === 'maintenance') {
            alert('Ruangan tidak tersedia!');
            return;
        }
        selectedRoom = { id, number };
        document.querySelectorAll('.room-box, .mini-room').forEach(el => el.classList.remove('selected'));
        
        document.querySelectorAll(`#room-box-${id}, #mini-room-${id}`).forEach(el => el.classList.add('selected'));
        
        updateSummary();
    }

    async function finishSession(roomId, therapistId) {
        if(!confirm('Selesaikan sesi untuk terapis dan ruangan ini?')) return;
        
        try {
            const res = await fetch('{{ route('pos.complete') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ room_id: roomId, therapist_id: therapistId })
            });
            const data = await res.json();
            if(data.success) {
                pollStatus();
            } else {
                alert(data.message || 'Gagal menyelesaikan sesi');
            }
        } catch (e) { alert('Gagal menyelesaikan sesi'); }
    }

    async function finishTherapistSession(therapistId) {
        if (!confirm('Selesaikan sesi terapis ini? (tanpa pemetaan ruangan)')) return;
        try {
            const res = await fetch('{{ route('pos.complete') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ therapist_id: therapistId })
            });
            const data = await res.json();
            if (data.success) {
                pollStatus();
            } else {
                alert(data.message || 'Gagal menyelesaikan sesi');
            }
        } catch (e) {
            alert('Gagal menyelesaikan sesi');
        }
    }

    function selectService(id, name, price) {
        selectedService = { id, name, price: parseFloat(price) };
        document.querySelectorAll('.service-item').forEach(el => el.classList.remove('selected'));
        
        // Find the clicked element via event
        let target = event.currentTarget || event.target.closest('.service-item');
        if(target) target.classList.add('selected');
        
        // Auto-filter therapist skill matching
        const grid = document.getElementById('therapistGrid');
        const badge = document.getElementById('filterStatus');
        
        // Basic matching logic
        let skill = 'Refleksi';
        if(name.toLowerCase().includes('body') || name.toLowerCase().includes('massage')) skill = 'Massage';
        if(name.toLowerCase().includes('aroma')) skill = 'Aroma';
        
        badge.textContent = 'Spesialis ' + skill;
        badge.style.background = 'var(--gold)';
        badge.style.color = 'white';
        badge.style.padding = '4px 12px';
        badge.style.borderRadius = '20px';

        document.querySelectorAll('.therapist-card').forEach(el => {
            if(el.textContent.includes(skill)) {
                el.style.opacity = '1';
                el.style.transform = 'scale(1)';
                el.style.pointerEvents = 'auto';
            } else {
                el.style.opacity = '0.3';
                el.style.transform = 'scale(0.95)';
                // el.style.pointerEvents = 'none'; // Keep clickable but faded
            }
        });

        updateSummary();
    }

    function selectTherapist(id, name) {
        const card = document.querySelector(`.therapist-card[data-therapist-id="${id}"]`);
        const status = card?.dataset?.status;
        if (status === 'busy' || status === 'off') {
            alert('Terapis sedang tidak tersedia!');
            return;
        }
        selectedTherapist = { id, name };
        document.querySelectorAll('.therapist-card').forEach(el => el.classList.remove('selected'));
        
        let target = event.currentTarget || event.target.closest('.therapist-card');
        if(target) target.classList.add('selected');
        
        updateSummary();
    }

    function updateSummary() {
        const summary = document.getElementById('checkoutSummary');
        const totalEl = document.getElementById('total');
        const subtotalEl = document.getElementById('subtotal');
        const crm = document.getElementById('customerModule');
        const pay = document.getElementById('paymentModule');

        if(selectedService && selectedTherapist) {
            crm.style.display = 'block';
            pay.style.display = 'block';
            
            let productTotal = selectedProducts.reduce((sum, p) => sum + p.price, 0);
            let baseTotal = selectedService.price + productTotal;
            let discount = isCorporate ? (baseTotal * 0.1) : 0;
            let finalPrice = baseTotal - discount;

            let productHtml = selectedProducts.map(p => `
                <div style="display: flex; justify-content: space-between; margin-top:5px; font-size: 13px; opacity: 0.8;">
                    <span>+ ${p.name}</span>
                    <span>Rp ${p.price.toLocaleString('id-ID')}</span>
                </div>
            `).join('');

            summary.innerHTML = `
                <div style="animation: slideIn 0.4s ease-out;">
                    <div style="padding: 15px; border-radius: 16px; border: 1px dashed var(--gold); margin-bottom: 15px;">
                        <h4 style="font-size: 14px; opacity:0.6;">DETAIL PESANAN</h4>
                        <div style="display: flex; justify-content: space-between; margin-top:10px;">
                            <strong>${selectedService.name}</strong>
                            <span>Rp ${selectedService.price.toLocaleString('id-ID')}</span>
                        </div>
                        ${productHtml}
                        <div style="margin-top:10px; font-size:13px; color: var(--sage-green);">
                            <i class="fas fa-user-check"></i> Terapis: ${selectedTherapist.name}
                        </div>
                        <div style="margin-top:5px; font-size:13px; color: var(--gold);">
                            ${POS_REQUIRE_ROOM
                                ? `<i class="fas fa-door-open"></i> Ruangan: ${selectedRoom ? selectedRoom.number : '<span style="color:var(--danger)">Pilih Ruangan!</span>'}`
                                : '<i class="fas fa-door-open"></i> Ruangan: <span style="opacity:0.65">Tidak digunakan (mode tanpa ruang)</span>'}
                        </div>
                        ${isCorporate ? `<div style="margin-top:10px; color: var(--danger); font-size:12px;">Corporate Discount (10%): -Rp ${discount.toLocaleString('id-ID')}</div>` : ''}
                    </div>
                </div>
            `;
            totalEl.textContent = `Rp ${finalPrice.toLocaleString('id-ID')}`;
            subtotalEl.textContent = `Rp ${baseTotal.toLocaleString('id-ID')}`;
        }
    }

    async function processCheckout() {
        if(!selectedService || !selectedTherapist) {
            alert('Silakan pilih layanan dan terapis terlebih dahulu!');
            return;
        }

        if (POS_REQUIRE_ROOM && !selectedRoom) {
            alert('Pilih ruangan di peta mini terlebih dahulu (atau nonaktifkan di Admin → Pengaturan POS).');
            return;
        }

        const customerName = document.getElementById('customerName').value;
        const customerPhone = document.getElementById('customerPhone').value;

        let productTotal = selectedProducts.reduce((sum, p) => sum + p.price, 0);
        let baseTotal = selectedService.price + productTotal;
        let discount = isCorporate ? (baseTotal * 0.1) : 0;
        let finalPrice = baseTotal - discount;
        
        try {
            const response = await fetch('/checkout', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    therapist_id: selectedTherapist.id,
                    service_id: selectedService.id,
                    room_id: selectedRoom ? selectedRoom.id : null,
                    total_price: finalPrice,
                    customer_name: customerName,
                    customer_phone: customerPhone,
                    payment_method: paymentMethod,
                    products: selectedProducts.map(p => p.id)
                })
            });

            const data = await response.json();

            if(data.success) {
                const receiptUrl = `{{ url('/pos/receipt') }}/${data.transaction_id}`;
                window.open(receiptUrl, 'reflexo_receipt', 'noopener,noreferrer,width=400,height=760,scrollbars=yes');
                setTimeout(function () { location.reload(); }, 1200);
            } else {
                alert('Gagal memproses transaksi: ' + data.message);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Terjadi kesalahan sistem.');
        }
    }
</script>
@endsection