@extends('layouts.admin', [
    'title' => 'Kelola Panduan',
    'header' => 'Panduan'
])

@php
    $guides = $guides ?? collect();
    $latestGuide = $latestGuide ?? $guides->first();
    $guideCount = $guides->count();
    $isPanduanStorageReady = $isPanduanStorageReady ?? false;
    $latestGuideUrl = $latestGuide ? route('panduan', ['panduan' => $latestGuide->id]) : route('panduan');
@endphp

@section('admin_content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-11">
            <div class="card guide-admin-shell border-0 shadow-sm">
                <div class="card-header bg-white border-0 guide-admin-shell__header">
                    <div>
                        <span class="guide-admin-shell__eyebrow">Panduan Publik</span>
                        <h3 class="mb-1">Kelola Arsip Panduan SILONTAR</h3>
                        <p class="text-muted mb-0">Setiap upload PDF akan ditambahkan sebagai arsip baru. File lama tetap tersedia sampai Anda hapus sendiri.</p>
                    </div>
                </div>

                <div class="card-body guide-admin-shell__body">
                    @if(!$isPanduanStorageReady)
                        <div class="alert alert-warning guide-admin-shell__alert">
                            Tabel `panduan` belum tersedia, jadi upload belum bisa dipakai.
                            Jalankan `php artisan migrate` pada environment server yang aktif agar modul panduan siap digunakan.
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-lg-4 mb-4 mb-lg-0">
                            <div class="guide-status-card">
                                <span class="guide-status-card__label">Ringkasan</span>
                                <h4>{{ $guideCount > 0 ? $guideCount . ' panduan tersimpan' : 'Belum ada arsip PDF' }}</h4>
                                <p class="mb-3">
                                    @if($guideCount > 0)
                                        Panduan terbaru akan tampil otomatis di halaman publik, tetapi semua arsip lama tetap bisa dibuka dan diunduh.
                                    @else
                                        Jika belum ada PDF internal, halaman publik masih memakai tautan Google Drive cadangan.
                                    @endif
                                </p>

                                <div class="guide-status-card__meta">
                                    <div>
                                        <small>Panduan aktif</small>
                                        <strong>{{ $latestGuide->judul ?? \App\Models\Panduan::DEFAULT_TITLE }}</strong>
                                    </div>
                                    <div>
                                        <small>Sumber publik</small>
                                        <strong>{{ $guideCount > 0 ? 'Arsip upload admin' : 'Google Drive' }}</strong>
                                    </div>
                                    <div>
                                        <small>Jumlah arsip</small>
                                        <strong>{{ $guideCount }}</strong>
                                    </div>
                                    @if($latestGuide)
                                        <div>
                                            <small>Upload terakhir</small>
                                            <strong>{{ optional($latestGuide->updated_at)->translatedFormat('d M Y H:i') ?? '-' }}</strong>
                                        </div>
                                    @endif
                                </div>

                                <div class="guide-status-card__actions">
                                    <a href="{{ $latestGuideUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary rounded-pill">
                                        <i class="fas fa-external-link-alt mr-2"></i>Lihat Halaman Publik
                                    </a>
                                    @if($latestGuide)
                                        <a href="{{ route('panduan.download', ['panduan' => $latestGuide]) }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary rounded-pill">
                                            <i class="fas fa-file-download mr-2"></i>Unduh Terbaru
                                        </a>
                                    @else
                                        <a href="{{ $fallbackGuideUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary rounded-pill">
                                            <i class="fab fa-google-drive mr-2"></i>Buka Cadangan
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-8">
                            <form action="{{ route('admin.panduan.update') }}" method="POST" enctype="multipart/form-data" class="guide-form-card">
                                @csrf
                                @method('PUT')

                                <div class="guide-form-card__section">
                                    <span class="guide-form-card__eyebrow">Upload Baru</span>
                                    <h4>Tambah Panduan PDF</h4>

                                    <div class="form-group">
                                        <label for="judul">Judul Panduan</label>
                                        <input
                                            type="text"
                                            id="judul"
                                            name="judul"
                                            class="form-control @error('judul') is-invalid @enderror"
                                            value="{{ old('judul') }}"
                                            placeholder="Kosongkan jika ingin memakai nama file PDF"
                                            @disabled(!$isPanduanStorageReady)
                                        >
                                        @error('judul')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="file_pdf">Upload PDF Panduan</label>
                                        <input
                                            type="file"
                                            id="file_pdf"
                                            name="file_pdf"
                                            class="form-control-file @error('file_pdf') is-invalid @enderror"
                                            accept="application/pdf"
                                            @disabled(!$isPanduanStorageReady)
                                        >
                                        @error('file_pdf')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                                        <small class="form-text text-muted">Format PDF, maksimal 10MB. Setiap upload akan membuat arsip baru dan tidak menimpa file sebelumnya.</small>
                                    </div>
                                </div>

                                <div class="guide-form-card__footer">
                                    <button type="submit" class="btn btn-primary rounded-pill px-4" @disabled(!$isPanduanStorageReady)>
                                        <i class="fas fa-upload mr-2"></i>Tambah Panduan
                                    </button>
                                </div>
                            </form>

                            <div class="guide-preview-card mt-4">
                                <div class="guide-preview-card__head">
                                    <div>
                                        <span class="guide-form-card__eyebrow">Preview</span>
                                        <h4 class="mb-0">{{ $latestGuide ? 'Preview panduan terbaru' : 'Preview cadangan Google Drive' }}</h4>
                                    </div>
                                </div>

                                <div class="guide-preview-card__frame">
                                    <iframe
                                        src="{{ $latestGuide ? route('panduan.preview', ['panduan' => $latestGuide]) : $fallbackGuideEmbedUrl }}"
                                        title="{{ $latestGuide->judul ?? 'Preview Panduan SILONTAR' }}"
                                        loading="lazy"
                                        referrerpolicy="no-referrer"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="guide-library mt-4">
                        <div class="guide-library__head">
                            <div>
                                <span class="guide-form-card__eyebrow">Arsip</span>
                                <h4 class="mb-1">Daftar Semua Panduan</h4>
                                <p class="text-muted mb-0">Setiap item bisa dibuka di halaman publik, diunduh, atau dihapus satu per satu.</p>
                            </div>
                        </div>

                        @if($guideCount === 0)
                            <div class="guide-library__empty">
                                Belum ada file panduan yang diunggah. Arsip PDF akan muncul di sini setelah upload pertama.
                            </div>
                        @else
                            <div class="guide-library__list">
                                @foreach($guides as $guide)
                                    <div class="guide-library__item">
                                        <div class="guide-library__main">
                                            <div class="guide-library__pill">{{ $loop->first ? 'Terbaru' : 'Arsip' }}</div>
                                            <h5>{{ $guide->judul }}</h5>
                                            <p class="mb-2">
                                                Diunggah {{ optional($guide->updated_at)->translatedFormat('d M Y H:i') ?? '-' }}
                                                oleh {{ $guide->uploadedBy->name ?? 'Administrator' }}
                                            </p>
                                            <small>{{ \App\Support\PrivateDocumentStorage::displayName($guide->file_pdf) }}</small>
                                        </div>

                                        <div class="guide-library__actions">
                                            <a href="{{ route('panduan', ['panduan' => $guide->id]) }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary btn-sm rounded-pill">
                                                <i class="fas fa-eye mr-2"></i>Lihat
                                            </a>
                                            <a href="{{ route('panduan.download', ['panduan' => $guide]) }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary btn-sm rounded-pill">
                                                <i class="fas fa-download mr-2"></i>Unduh
                                            </a>
                                            <form action="{{ route('admin.panduan.remove-file', ['panduan' => $guide]) }}" method="POST" onsubmit="return confirm('Hapus panduan ini dari arsip?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill">
                                                    <i class="far fa-trash-alt mr-2"></i>Hapus
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .guide-admin-shell { border-radius: 24px; overflow: hidden; }
    .guide-admin-shell__header {
        padding: 2rem;
        background:
            radial-gradient(circle at top right, rgba(17, 138, 178, 0.12), transparent 30%),
            linear-gradient(180deg, #fbfcfe 0%, #f4f8fc 100%);
    }
    .guide-admin-shell__eyebrow, .guide-form-card__eyebrow {
        display: inline-block;
        margin-bottom: .55rem;
        font-size: .74rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 700;
        color: #118ab2;
    }
    .guide-admin-shell__body {
        padding: 2rem;
        background: #f7f9fc;
    }
    .guide-admin-shell__alert {
        border-radius: 18px;
        border: 0;
        margin-bottom: 1.5rem;
    }
    .guide-status-card,
    .guide-form-card,
    .guide-preview-card,
    .guide-library {
        background: #fff;
        border: 1px solid #e7edf5;
        border-radius: 22px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
    }
    .guide-status-card {
        padding: 1.5rem;
        height: 100%;
        background:
            radial-gradient(circle at top right, rgba(17, 138, 178, 0.08), transparent 35%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }
    .guide-status-card__label {
        display: inline-block;
        margin-bottom: .8rem;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #118ab2;
    }
    .guide-status-card h4 {
        margin-bottom: .65rem;
        font-weight: 800;
        color: #1f2d3d;
    }
    .guide-status-card__meta {
        display: grid;
        gap: .85rem;
        margin: 1.25rem 0;
    }
    .guide-status-card__meta div {
        padding: .9rem 1rem;
        border-radius: 16px;
        background: rgba(248, 251, 255, 0.9);
        border: 1px solid #e2ebf4;
    }
    .guide-status-card__meta small {
        display: block;
        margin-bottom: .2rem;
        color: #6c7a89;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .guide-status-card__meta strong {
        color: #1f2d3d;
    }
    .guide-status-card__actions,
    .guide-form-card__footer,
    .guide-library__actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }
    .guide-form-card__section,
    .guide-library__head {
        padding: 1.5rem;
    }
    .guide-form-card h4,
    .guide-preview-card h4,
    .guide-library h4 {
        margin-bottom: 1rem;
        font-weight: 800;
        color: #1f2d3d;
    }
    .guide-form-card label {
        font-weight: 700;
        color: #22313f;
    }
    .guide-form-card .form-control {
        min-height: 48px;
        border-radius: 14px;
        border: 1px solid #d8e2ee;
    }
    .guide-form-card .form-control:focus {
        border-color: #118ab2;
        box-shadow: 0 0 0 .2rem rgba(17, 138, 178, 0.12);
    }
    .guide-form-card .form-control-file {
        display: block;
        width: 100%;
        padding: .7rem .85rem;
        border: 1px solid #d8e2ee;
        border-radius: 14px;
        background: #fff;
        min-height: 50px;
    }
    .guide-form-card__footer {
        padding: 0 1.5rem 1.5rem;
    }
    .guide-preview-card {
        overflow: hidden;
    }
    .guide-preview-card__head {
        padding: 1.25rem 1.5rem 0;
    }
    .guide-preview-card__frame {
        padding: 1.25rem 1.5rem 1.5rem;
    }
    .guide-preview-card__frame iframe {
        display: block;
        width: 100%;
        min-height: 540px;
        border: 1px solid #dbe7f1;
        border-radius: 18px;
        background: #fff;
    }
    .guide-library {
        overflow: hidden;
    }
    .guide-library__head {
        border-bottom: 1px solid #eef3f8;
    }
    .guide-library__list {
        display: grid;
        gap: 1rem;
        padding: 1.5rem;
    }
    .guide-library__item {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        padding: 1.2rem 1.25rem;
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #e2ebf4;
    }
    .guide-library__main h5 {
        margin-bottom: .35rem;
        font-weight: 800;
        color: #1f2d3d;
    }
    .guide-library__main p,
    .guide-library__main small {
        color: #66768a;
    }
    .guide-library__pill {
        display: inline-block;
        margin-bottom: .65rem;
        padding: .3rem .7rem;
        border-radius: 999px;
        background: rgba(17, 138, 178, 0.1);
        color: #118ab2;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .guide-library__empty {
        padding: 1.5rem;
        color: #6c7a89;
    }
    @media (max-width: 991.98px) {
        .guide-library__item {
            flex-direction: column;
            align-items: flex-start;
        }
    }
    @media (max-width: 767.98px) {
        .guide-admin-shell__header,
        .guide-admin-shell__body,
        .guide-form-card__section,
        .guide-form-card__footer,
        .guide-preview-card__head,
        .guide-preview-card__frame,
        .guide-library__head,
        .guide-library__list {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
        .guide-admin-shell__header,
        .guide-admin-shell__body {
            padding-top: 1.25rem;
            padding-bottom: 1.25rem;
        }
        .guide-preview-card__frame iframe {
            min-height: 420px;
        }
    }
</style>
@endsection