@extends('layouts.app', ['title' => 'Panduan - SILONTAR'])

@php
    $guides = $guides ?? collect();
    $selectedGuide = $selectedGuide ?? $guides->first();
@endphp

@section('content')
<section class="guide-hero">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-7 mb-4 mb-lg-0">
                <span class="guide-badge">Panduan Gentaskin</span>
                <h1 class="guide-title">{{ $guideTitle ?? 'Panduan SILONTAR' }}</h1>
                <p class="guide-text">
                    @if(!empty($hasUploadedGuide))
                        Dashboard admin sekarang bisa menyimpan beberapa panduan PDF sekaligus. Pilih arsip yang ingin Anda buka, lalu preview akan langsung berganti.
                    @else
                        Belum ada panduan PDF internal yang diunggah dari dashboard admin, jadi halaman ini masih memakai tautan Google Drive cadangan.
                    @endif
                </p>
            </div>

            <div class="col-lg-5">
                <div class="guide-desk-card">
                    <div class="guide-desk-card__label">Akses Cepat</div>
                    <div class="guide-desk-card__meta">
                        <strong>{{ !empty($hasUploadedGuide) ? $guides->count() . ' arsip tersedia' : 'Mode cadangan aktif' }}</strong>
                        <span>{{ !empty($hasUploadedGuide) ? 'Panduan terbaru bisa dipilih dari daftar di bawah.' : 'Upload pertama dari admin akan otomatis muncul di halaman ini.' }}</span>
                    </div>
                    <a href="{{ $guideUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
                        <i class="fas fa-book-open mr-2"></i>
                        {{ !empty($hasUploadedGuide) ? 'Buka Panduan Terpilih' : 'Buka Panduan Google Drive' }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="guide-section pb-5">
    <div class="container">
        <div class="guide-notebook">
            <div class="guide-notebook__spiral" aria-hidden="true">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

            <div class="guide-notebook__paper">
                <div class="guide-notebook__margin" aria-hidden="true"></div>

                <div class="guide-notebook__content">
                    <div class="guide-section-heading">
                        <span class="guide-section-heading__eyebrow">Arsip Panduan</span>
                        <h2>{{ !empty($hasUploadedGuide) ? 'Pilih Panduan yang Ingin Dibuka' : 'Preview Panduan' }}</h2>
                    </div>

                    <div class="row">
                        <div class="col-lg-4 mb-4 mb-lg-0">
                            <div class="guide-library-card">
                                <div class="guide-library-card__head">
                                    <div class="guide-viewer-shell__label">Daftar File</div>
                                    <h3>{{ !empty($hasUploadedGuide) ? $guides->count() . ' panduan tersedia' : 'Belum ada upload' }}</h3>
                                </div>

                                @if(!empty($hasUploadedGuide))
                                    <div class="guide-library-card__list">
                                        @foreach($guides as $guide)
                                            <a
                                                href="{{ route('panduan', ['panduan' => $guide->id]) }}"
                                                class="guide-library-card__item {{ $selectedGuide && $selectedGuide->id === $guide->id ? 'is-active' : '' }}"
                                            >
                                                <span class="guide-library-card__pill">{{ $loop->first ? 'Terbaru' : 'Arsip' }}</span>
                                                <strong>{{ $guide->judul }}</strong>
                                                <small>{{ optional($guide->updated_at)->translatedFormat('d M Y H:i') ?? '-' }}</small>
                                            </a>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="guide-library-card__empty">
                                        Setelah admin mengunggah PDF panduan, semua file akan tampil di panel ini.
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="col-lg-8">
                            <div class="guide-viewer-shell">
                                <div class="guide-viewer-shell__top">
                                    <div>
                                        <div class="guide-viewer-shell__label">Preview PDF</div>
                                        <h3>{{ $guideTitle ?? 'Panduan SILONTAR' }}</h3>
                                    </div>
                                    <a href="{{ $guideUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary">
                                        <i class="fas fa-external-link-alt mr-2"></i>
                                        {{ !empty($hasUploadedGuide) ? 'Buka PDF Penuh' : 'Buka di Google Drive' }}
                                    </a>
                                </div>

                                <div class="guide-viewer-frame">
                                    <iframe
                                        src="{{ $guideEmbedUrl }}"
                                        title="{{ $guideTitle ?? 'Panduan SILONTAR' }}"
                                        loading="lazy"
                                        referrerpolicy="no-referrer"
                                        allowfullscreen
                                    ></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .guide-hero {
        background:
            radial-gradient(circle at top left, rgba(33, 150, 243, 0.12), transparent 24%),
            linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
        border-bottom: 1px solid rgba(13, 110, 253, 0.08);
    }

    .guide-badge {
        display: inline-block;
        padding: .55rem .95rem;
        border-radius: 999px;
        background: rgba(13, 110, 253, 0.10);
        color: #0d6efd;
        font-weight: 700;
        font-size: .86rem;
        margin-bottom: 1rem;
    }

    .guide-title {
        font-size: 2.45rem;
        font-weight: 800;
        line-height: 1.2;
        color: #1f2d3d;
    }

    .guide-text {
        font-size: 1.02rem;
        line-height: 1.9;
        color: #5c6773;
        max-width: 720px;
    }

    .guide-desk-card {
        padding: 1.5rem;
        border-radius: 24px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,252,255,.92)),
            #fff;
        border: 1px solid #dbe7f1;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .guide-desk-card__label {
        display: inline-block;
        margin-bottom: .85rem;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #118ab2;
    }

    .guide-desk-card__meta {
        display: grid;
        gap: .25rem;
        margin-bottom: 1rem;
    }

    .guide-desk-card__meta strong {
        font-size: 1.1rem;
        color: #1f2d3d;
    }

    .guide-desk-card__meta span {
        color: #6a7787;
        line-height: 1.7;
    }

    .guide-desk-card .btn {
        border-radius: 14px;
        font-weight: 700;
        box-shadow: 0 12px 28px rgba(13, 110, 253, 0.18);
    }

    .guide-section {
        background: linear-gradient(180deg, #eef4fb 0%, #f5f8fc 100%);
    }

    .guide-notebook {
        position: relative;
        padding-top: 1.1rem;
    }

    .guide-notebook__spiral {
        position: absolute;
        top: 0;
        left: 3rem;
        right: 3rem;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        z-index: 2;
    }

    .guide-notebook__spiral span {
        width: 18px;
        height: 28px;
        border: 4px solid #8794a5;
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        background: transparent;
    }

    .guide-notebook__paper {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        background:
            repeating-linear-gradient(
                to bottom,
                #fffef8 0,
                #fffef8 41px,
                #d7e7fb 42px
            );
        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.08);
        border: 1px solid #dbe7f1;
    }

    .guide-notebook__margin {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 86px;
        width: 3px;
        background: rgba(226, 75, 99, 0.35);
    }

    .guide-notebook__content {
        position: relative;
        padding: 3rem 2rem 2.25rem 7rem;
    }

    .guide-section-heading__eyebrow {
        display: inline-block;
        margin-bottom: .65rem;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #118ab2;
    }

    .guide-section-heading h2 {
        margin-bottom: 1.5rem;
        font-size: 2rem;
        font-weight: 800;
        color: #1f2d3d;
    }

    .guide-library-card,
    .guide-viewer-shell {
        height: 100%;
        padding: 1.35rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid #d7e5f3;
        backdrop-filter: blur(4px);
    }

    .guide-library-card__head {
        margin-bottom: 1rem;
    }

    .guide-library-card__head h3,
    .guide-viewer-shell h3 {
        font-size: 1.45rem;
        font-weight: 800;
        color: #1f2d3d;
        margin-bottom: 0;
    }

    .guide-library-card__list {
        display: grid;
        gap: .85rem;
    }

    .guide-library-card__item {
        display: block;
        padding: 1rem 1.05rem;
        border-radius: 18px;
        text-decoration: none;
        border: 1px solid #dbe7f1;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,249,255,.9));
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .guide-library-card__item:hover,
    .guide-library-card__item:focus {
        transform: translateY(-2px);
        box-shadow: 0 14px 24px rgba(17, 138, 178, 0.08);
        border-color: #b9dced;
        text-decoration: none;
    }

    .guide-library-card__item.is-active {
        border-color: #118ab2;
        box-shadow: 0 14px 24px rgba(17, 138, 178, 0.12);
        background: linear-gradient(180deg, #ffffff 0%, #ecf8fc 100%);
    }

    .guide-library-card__item strong {
        display: block;
        margin-bottom: .3rem;
        color: #1f2d3d;
    }

    .guide-library-card__item small {
        color: #6a7787;
    }

    .guide-library-card__pill,
    .guide-viewer-shell__label {
        display: inline-block;
        margin-bottom: .35rem;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #118ab2;
    }

    .guide-library-card__empty {
        color: #6a7787;
        line-height: 1.8;
    }

    .guide-viewer-shell__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .guide-viewer-frame {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid #dbe7f1;
        background: #f3f7fc;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }

    .guide-viewer-frame iframe {
        display: block;
        width: 100%;
        min-height: 880px;
        border: 0;
        background: #fff;
    }

    @media (max-width: 991.98px) {
        .guide-title {
            font-size: 2rem;
        }

        .guide-notebook__spiral {
            left: 1.5rem;
            right: 1.5rem;
        }

        .guide-notebook__spiral span:nth-child(n+5) {
            display: none;
        }

        .guide-notebook__content {
            padding: 2.5rem 1.35rem 1.75rem 4rem;
        }

        .guide-notebook__margin {
            left: 44px;
        }

        .guide-viewer-frame iframe {
            min-height: 640px;
        }
    }
</style>
@endsection