@extends('layouts.app')

@section('content')
<style>
.vo-stage { background:#142c35; border-radius:16px; padding:14px; margin-bottom:24px; }
.vo-canvas { position:relative; width:100%; aspect-ratio: 960 / 620; min-height:360px; overflow:hidden; border-radius:12px; }
.vo-canvas canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.vo-facility-label { position:absolute; transform:translate(-50%,-100%); color:#fff; background:#234b61; padding:4px 8px; border-radius:5px; font-size:10px; letter-spacing:1px; white-space:nowrap; }
.vo-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.vo-worker-label { position:absolute; transform:translate(-50%,-100%); max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #a6cfc0; border-radius:7px; background:#f5fff5ed; color:#23453e; font-size:11px; padding:5px 8px; pointer-events:auto; cursor:pointer; }
.vo-worker-label[aria-pressed="true"], .vo-worker-label:focus-visible { outline:2px solid #65e5b1; background:#d4ffe9; }
.vo-worker-label { white-space:pre-line; line-height:1.4; }
.vo-activity-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; margin:12px 0; }
.vo-activity-log { max-height:150px; overflow:auto; font-size:12px; }
.vo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#fff; padding:10px 4px; }
.vo-detail { margin:auto; width:calc(100% - 32px); max-width:900px; max-height:85vh; overflow:auto; background:#fff; color:#203b35; border:0; border-radius:14px; padding:24px; box-shadow:0 24px 80px #0005; }
.vo-detail::backdrop { background:rgba(10,27,34,.65); }
.vo-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
body.vo-modal-open { overflow:hidden; }
.vo-detail h2 { font-size:20px; overflow-wrap:anywhere; }
.vo { padding: 28px 0; color: #203b35; }
.vo-muted { color:#62756f; }
.vo-panel { background:#fff; border:1px solid #dce7e1; border-radius:14px; padding:22px; }
.vo-empty { text-align:center; padding:42px 20px; }
.vo-logs { margin-top:20px; border-top:1px solid #dce7e1; padding-top:18px; }
.vo-logs-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.vo-logs td, .vo-logs th { white-space:nowrap; }
</style>
<div class="vo">
    @if($error)
        <div class="alert alert-warning" role="alert">{{ $error }}</div>
    @endif
    @if(!$error)
        @if($employees->isNotEmpty())
        <section class="vo-stage" aria-label="Kantor virtual interaktif">
            <div class="vo-toolbar"><strong>OFFICE FLOOR / DIGIFARM</strong><span>Drag untuk memutar · Klik employee untuk detail</span></div>
            <p id="vo-loading" class="text-white" role="status">Memuat kantor interaktif…</p>
            <div id="vo-canvas" class="vo-canvas" aria-label="Kantor 3D interaktif">
                <canvas id="vo-webgl" tabindex="0" aria-label="Kantor 3D. Drag atau gunakan tombol panah untuk memutar. Klik karyawan untuk detail."></canvas>
                <div id="vo-facilities" class="vo-labels" aria-hidden="true"></div>
                <div id="vo-labels" class="vo-labels" role="group" aria-label="Karyawan di ruang ini"></div>
            </div>
            <div class="vo-toolbar">
                <button type="button" id="vo-prev" class="btn btn-light" disabled>← Ruang sebelumnya</button>
                <span id="vo-room" aria-live="polite"></span>
                <button type="button" id="vo-next" class="btn btn-light" disabled>Ruang berikutnya →</button>
                <button type="button" id="vo-camera-reset" class="btn btn-light">Reset kamera</button>
                <button type="button" id="vo-motion" class="btn btn-light" aria-pressed="false">Jeda animasi</button>
            </div>
            <dialog id="vo-detail" class="vo-detail" aria-labelledby="vo-name">
                <div class="vo-detail-head">
                    <h2 id="vo-name">Detail karyawan</h2>
                    <button id="vo-detail-close" type="button" class="btn btn-light" aria-label="Tutup detail karyawan" autofocus>Tutup ×</button>
                </div>
                <div id="vo-activity-info" class="vo-activity-info" aria-live="polite"></div>
                @if(app()->environment('local', 'development'))
                <div id="vo-activity-debug" class="mb-3">
                    <p>Development: simulasi lokal (tidak menjalankan workflow n8n). Status polling berikutnya tetap mengutamakan n8n.</p>
                    @foreach(['Work', 'Idle', 'Get Water', 'Toilet', 'Walk', 'Talk', 'Return Desk', 'Success', 'Error'] as $command)
                    <button type="button" class="btn btn-sm btn-outline-success" data-activity-command="{{ $command }}">{{ $command }}</button>
                    @endforeach
                    <p id="vo-debug-message" role="status"></p>
                </div>
                @endif
                <details><summary>Log aktivitas visual</summary><ul id="vo-activity-log" class="vo-activity-log"></ul></details>
                <section id="vo-logs" class="vo-logs" data-url="{{ route('virtual-office.logs', ['employee' => '__employee__']) }}" hidden>
                    <div class="vo-logs-head"><h3 style="font-size:18px">Log pekerjaan</h3><button id="vo-logs-refresh" type="button" class="btn btn-outline-success">Muat ulang log</button></div>
                    <p class="vo-muted">Riwayat eksekusi yang disimpan n8n. Waktu mengikuti zona waktu browser.</p>
                    <p id="vo-logs-message" role="status"></p>
                    <div class="table-responsive">
                        <table class="table" id="vo-logs-table" hidden>
                            <thead><tr><th>Eksekusi</th><th>Status</th><th>Mulai</th><th>Durasi</th></tr></thead>
                            <tbody id="vo-logs-body"></tbody>
                        </table>
                    </div>
                    <button id="vo-logs-more" type="button" class="btn btn-outline-success" hidden>Muat log sebelumnya</button>
                    <div id="vo-execution-error" class="alert alert-warning mt-3" role="status" hidden data-url="{{ route('virtual-office.execution', ['employee' => '__employee__', 'execution' => '__execution__']) }}" style="white-space:pre-wrap;overflow-wrap:anywhere"><strong id="vo-error-title"></strong><p id="vo-error-message" class="mb-0"></p></div>
                </section>
            </dialog>
        </section>
        <script id="vo-employees" type="application/json">{!! json_encode($employees->values()->all(), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
        <span id="vo-work-state-source" data-url="{{ route('virtual-office.work-state', ['employee' => '__employee__']) }}" hidden></span>
        <script defer src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.4/build/playcanvas.js"></script>
        <script defer src="{{ asset('assets/js/virtual-office/activity-config.js') }}"></script>
        <script defer src="{{ asset('assets/js/virtual-office/employee-brain.js') }}"></script>
        <script defer src="{{ asset('assets/js/virtual-office/employee-avatar.js') }}"></script>
        <script defer src="{{ asset('assets/js/virtual-office/office-facilities.js') }}"></script>
        <script defer src="{{ asset('assets/js/virtual-office/office.js') }}"></script>
        @endif
        @if($employees->isEmpty())
            <div class="vo-panel vo-empty"><h2>{{ $total ? 'Tidak ada hasil yang cocok' : 'Belum ada karyawan virtual' }}</h2><p class="vo-muted">{{ $total ? 'Buka kembali halaman Virtual Office tanpa parameter pencarian.' : 'Tambahkan tag '.config('services.n8n.employee_tag').' pada workflow di n8n, lalu muat ulang halaman ini.' }}</p></div>
        @endif
    @endif
</div>
@endsection