@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

<style>
    /* ── Video card ── */
    .video-card {
        border-left: 4px solid #0d9b9f !important;
        background: linear-gradient(135deg, #f8ffff 0%, #edfafa 100%);
    }

    .video-card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        min-height: 72px;
        padding: .75rem 1.5rem;
        gap: 1rem;
    }

    .btn-video {
        background: linear-gradient(135deg, #0d9b9f, #0a7a7e);
        color: #fff !important;
        border: none;
        border-radius: 8px;
        font-size: .875rem;
        letter-spacing: .3px;
        box-shadow: 0 3px 12px rgba(13, 107, 110, .35);
        text-decoration: none;
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        gap: .5rem;
        padding: .8rem 1.5rem;
        font-weight: 600;
        flex-shrink: 0;
        line-height: 1;
    }

    .btn-video:hover {
        background: linear-gradient(135deg, #0bbfc4, #0d9b9f);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(13, 107, 110, .45);
        color: #fff !important;
    }

    .video-icon-wrap {
        width: 40px;
        height: 40px;
        background: rgba(13, 155, 159, .12);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* ── Toolbar ── */
    .pdf-toolbar {
        background: #fff;
        border-bottom: 1px solid #ddd;
        height: 46px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        gap: 8px;
        flex-shrink: 0;
    }

    .pdf-title {
        color: #333;
        font-size: .78rem;
        letter-spacing: .8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .btn-icon-toolbar {
        background: transparent;
        border: none;
        color: #999;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: .82rem;
        padding: 0;
        cursor: pointer;
        transition: background .15s, color .15s;
        text-decoration: none;
        flex-shrink: 0;
    }

    .btn-icon-toolbar:hover {
        background: #3d3d3d;
        color: #fff;
    }

    .toolbar-divider {
        width: 1px;
        height: 20px;
        background: #ddd;
        flex-shrink: 0;
    }

    /* ── PDF viewer inner ── */
    .pdf-body-inner {
        position: relative;
        width: 100%;
        height: 520px;
        /* ← tinggi viewer PDF */
        background: #1a1a1a;
        overflow: hidden;
    }

    /* Loading overlay */
    .pdf-loading {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #1a1a1a;
        z-index: 5;
        gap: 12px;
    }

    .pdf-loading .spinner-border {
        color: #0d9b9f;
        width: 2.2rem;
        height: 2.2rem;
        border-width: 3px;
    }

    .pdf-loading p {
        color: rgba(255, 255, 255, .5);
        font-size: .8rem;
        margin: 0;
    }

    .pdf-loading.hidden {
        display: none !important;
    }

    .pdf-error {
        position: absolute;
        inset: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #1a1a1a;
        z-index: 4;
        gap: 14px;
        padding: 24px;
        text-align: center;
    }

    .pdf-error.show {
        display: flex;
    }

    .pdf-error i {
        font-size: 2.5rem;
        color: rgba(255, 255, 255, .2);
    }

    .pdf-error p {
        color: rgba(255, 255, 255, .5);
        font-size: .82rem;
        margin: 0;
        line-height: 1.6;
    }

    .btn-retry {
        background: #0d9b9f;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 7px 18px;
        font-size: .82rem;
        cursor: pointer;
        transition: background .15s;
    }

    .btn-retry:hover {
        background: #0bbfc4;
    }

    /* iframe — pakai class, bukan ID */
    .pdf-iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        opacity: 0;
        transition: opacity .4s;
        z-index: 1;
    }

    .pdf-iframe.loaded {
        opacity: 1;
    }

    /* Status bar */
    .pdf-statusbar {
        background: #2a2a2a;
        border-top: 1px solid #333;
        height: 28px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        flex-shrink: 0;
    }

    .status-text {
        color: rgba(255, 255, 255, .35);
        font-size: .68rem;
        letter-spacing: .4px;
    }

    /* ── Doc card list ── */
    .doc-list {
        display: flex;
        flex-direction: column;
        gap: .65rem;
        position: relative;
        z-index: 1;
        background: transparent;
        border-radius: 12px;
        padding-bottom: .5rem;
    }

    .doc-card {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        overflow: hidden;
        transition: border-color .2s;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    }

    .doc-card.open {
        border-color: #0d9b9f;
    }

    .doc-header {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .85rem 1.25rem;
        cursor: pointer;
        user-select: none;
    }

    .doc-header:hover {
        background: #fafffe;
    }

    .doc-file-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(13, 155, 159, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #0d9b9f;
        font-size: 1.1rem;
    }

    .doc-title-wrap {
        flex: 1;
        min-width: 0;
    }

    .doc-title-main {
        font-size: .82rem;
        font-weight: 600;
        color: #333;
    }

    .doc-subtitle {
        font-size: .7rem;
        color: #999;
        margin-top: 2px;
    }

    .role-badge {
        display: inline-block;
        background: rgba(13, 155, 159, .1);
        color: #0d9b9f;
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .4px;
        border-radius: 4px;
        padding: 2px 7px;
        margin-left: 7px;
        vertical-align: middle;
    }

    .btn-toggle {
        width: 34px;
        height: 34px;
        background: #0d9b9f;
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;
        transition: background .15s;
    }

    .btn-toggle:hover {
        background: #0bbfc4;
    }

    .btn-toggle i {
        color: #fff;
        font-size: .85rem;
        transition: transform .25s ease;
    }

    .doc-card.open .btn-toggle i {
        transform: rotate(180deg);
    }

    .doc-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }

    .doc-card.open .doc-body {
        max-height: 650px;
    }

    @media (max-width: 767px) {
        .doc-card.open .doc-body {
            max-height: 520px;
        }

        .btn-video span {
            display: none;
        }
    }
</style>

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container-fluid px-4 py-4">

    {{-- ════════ VIDEO TUTORIAL ════════ --}}
    @foreach($videos as $video)
    <div class="card border-0 shadow-sm mb-3 rounded-3 overflow-hidden video-card">
        <div class="card-body video-card-body">
            <div class="video-icon-wrap">
                <i class="fas fa-play-circle" style="color:#0d9b9f;font-size:1.2rem;"></i>
            </div>
            <div style="flex:1;">
                <div class="fw-semibold text-dark" style="font-size:.85rem;">
                    Video Tutorial
                    @if($roleKey === 'admins')
                    <span class="role-badge">{{ $video['role_label'] }}</span>
                    @endif
                </div>
                <div class="text-muted" style="font-size:.75rem;">{{ $video['label'] }}</div>
            </div>
            <a href="{{ $video['url'] }}" target="_blank" rel="noopener noreferrer" class="btn-video">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M6 3.5l7 4.5-7 4.5V3.5z" />
                </svg>
                <span>Tonton Sekarang</span>
            </a>
        </div>
    </div>
    @endforeach

    {{-- ════════ DOKUMEN PER CARD ════════ --}}
    <div class="doc-list mt-4">
        @forelse($docs as $idx => $doc)
        @php $cid = 'docCard' . $idx; @endphp

        <div class="doc-card" id="{{ $cid }}">

            <div class="doc-header" onclick="toggleDoc('{{ $cid }}')">
                <div class="doc-file-icon">
                    <i class="fas fa-file-pdf"></i>
                </div>
                <div class="doc-title-wrap">
                    <div class="doc-title-main">
                        {{ $doc['title'] }}
                        @if($roleKey === 'admins')
                        <span class="role-badge">{{ $doc['role_label'] }}</span>
                        @endif
                    </div>
                    <!-- <div class="doc-subtitle">{{ $doc['file'] }}</div> -->
                </div>
                <button class="btn-toggle"
                    aria-label="Tampilkan / sembunyikan dokumen"
                    onclick="event.stopPropagation(); toggleDoc('{{ $cid }}')">
                    <i class="fas fa-chevron-down"></i>
                </button>
            </div>

            <div class="doc-body">
                <div class="pdf-toolbar">
                    <span class="pdf-title fw-bold text-uppercase">{{ $doc['title'] }}</span>
                    <div class="d-flex align-items-center gap-1 ms-auto">
                        <button class="btn-icon-toolbar" title="Muat Ulang"
                            onclick="reloadPdf('{{ $cid }}', '{{ $doc['url'] }}', this)">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <div class="toolbar-divider mx-1"></div>
                        <a href="{{ $doc['url'] }}" target="_blank"
                            class="btn-icon-toolbar" title="Buka di Tab Baru">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>

                <div class="pdf-body-inner">
                    <div class="pdf-loading hidden" id="loading_{{ $cid }}">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p>Memuat dokumen…</p>
                    </div>

                    <div class="pdf-error" id="error_{{ $cid }}">
                        <i class="fas fa-exclamation-circle"></i>
                        <p>Dokumen gagal dimuat.<br>Coba buka di tab baru.</p>
                        <button class="btn-retry"
                            onclick="reloadPdf('{{ $cid }}', '{{ $doc['url'] }}', null)">
                            <i class="fas fa-redo me-1"></i> Coba Lagi
                        </button>
                    </div>

                    <iframe
                        id="iframe_{{ $cid }}"
                        class="pdf-iframe"
                        data-src="{{ $doc['url'] }}"
                        allowfullscreen>
                    </iframe>
                </div>
                <div class="pdf-statusbar">
                    <span class="status-text" id="status_{{ $cid }}">Klik untuk membuka dokumen.</span>
                </div>
            </div>
        </div>

        @empty
        <div class="alert alert-warning rounded-3">Tidak ada dokumen untuk role Anda.</div>
        @endforelse
    </div>
</div>

<script>
    function toggleDoc(cid) {
        const card = document.getElementById(cid);
        const isOpen = card.classList.toggle('open');
        const iframe = document.getElementById('iframe_' + cid);
        const loading = document.getElementById('loading_' + cid);
        const status = document.getElementById('status_' + cid);

        if (!isOpen) return;

        if (iframe.src && iframe.src !== window.location.href) return;

        const src = iframe.dataset.src;
        if (!src) {
            status.textContent = 'URL dokumen tidak ditemukan.';
            return;
        }

        loading.classList.remove('hidden');
        iframe.classList.remove('loaded');
        status.textContent = 'Memuat dokumen…';

        iframe.onload = function() {
            loading.classList.add('hidden');
            iframe.classList.add('loaded');
            status.textContent = 'Dokumen berhasil dimuat.'
        };

        setTimeout(function() {
            if (!iframe.classList.contains('loaded')) {
                loading.classList.add('hidden');
                iframe.classList.add('loaded');
                status.textContent = 'Dokumen dimuat.';
            }
        }, 6000);

        iframe.src = src;
    }

    function reloadPdf(cid, url, btn) {
        if (btn) {
            const icon = btn.querySelector('i');
            icon.style.transition = 'transform .5s';
            icon.style.transform = 'rotate(360deg)';
            setTimeout(() => icon.style.transform = '', 500);
        }

        const iframe = document.getElementById('iframe_' + cid);
        const loading = document.getElementById('loading_' + cid);
        const status = document.getElementById('status_' + cid);

        iframe.classList.remove('loaded');
        loading.classList.remove('hidden');
        status.textContent = 'Memuat ulang…';

        iframe.src = '';
        setTimeout(() => {
            iframe.src = url;
        }, 80);
    }
</script>
@endsection