@props([
    'url' => '',
    'title' => 'Dokumen PDF',
    'height' => '415px'
])

<div class="pdf-inline-viewer card border shadow-sm rounded-3 overflow-hidden my-2" data-pdf-url="{{ $url }}" data-pdf-title="{{ $title }}">
    <!-- Card Header with Clean Button Styling -->
    <div class="card-header bg-white border-bottom px-3 py-2.5 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <!-- PDF Icon & Title (Spaced) -->
        <div class="d-flex align-items-center gap-3 overflow-hidden me-2" style="max-width: 60%;">
            <div class="badge bg-label-danger p-2 rounded-2 flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
                <i class="fa-solid fa-file-pdf text-danger fs-5"></i>
            </div>
            <span class="fw-bold text-dark text-truncate" style="font-size: 0.875rem;">{{ $title }}</span>
        </div>

        <!-- Controls & Proper Screen Button -->
        <div class="d-flex align-items-center gap-2">
            <!-- Page Navigation -->
            <div class="d-flex align-items-center bg-light rounded-pill px-2.5 py-1 border shadow-xs">
                <button type="button" class="btn btn-sm btn-icon btn-outline-secondary border-0 rounded-circle py-0 btn-pdf-prev" title="Halaman Sebelumnya" style="width: 26px; height: 26px;">
                    <i class="fa-solid fa-chevron-left fs-7"></i>
                </button>
                <span class="px-2 fs-7 text-muted">
                    Hal <span class="pdf-page-num fw-bold text-dark">1</span> / <span class="pdf-page-count">--</span>
                </span>
                <button type="button" class="btn btn-sm btn-icon btn-outline-secondary border-0 rounded-circle py-0 btn-pdf-next" title="Halaman Selanjutnya" style="width: 26px; height: 26px;">
                    <i class="fa-solid fa-chevron-right fs-7"></i>
                </button>
            </div>

            <!-- Direct Download Button -->
            <a href="{{ $url }}" target="_blank" download class="btn btn-sm btn-label-success rounded-2 px-3 py-1.5 fw-semibold shadow-xs d-inline-flex align-items-center gap-1.5" style="font-size: 0.8rem;" title="Unduh Dokumen PDF">
                <i class="fa-solid fa-download"></i> <span>Unduh</span>
            </a>

            <!-- Standard Clean Fullscreen Button (No Purple Badge Look) -->
            <button type="button" class="btn btn-sm btn-primary rounded-2 px-3 py-1.5 btn-pdf-fullscreen btn-pdf-preview ms-1 fw-semibold shadow-xs d-inline-flex align-items-center gap-2" data-pdf-preview data-src="{{ $url }}" data-title="{{ $title }}" style="font-size: 0.8rem;">
                <i class="fa-solid fa-expand me-1.5"></i> Layar Penuh
            </button>
        </div>
    </div>

    <!-- Canvas Body Container (Continuous Scroll) -->
    <div class="card-body p-0 position-relative overflow-auto d-flex flex-column align-items-center justify-content-start" style="height: {{ $height }}; min-height: 250px; background-color: #f8f9fa;">
        <div class="pdf-inline-loading position-absolute top-50 start-50 translate-middle text-center py-2 px-3 rounded-3 bg-white shadow border text-dark" style="z-index: 10;">
            <div class="spinner-border spinner-border-sm text-primary mb-1" role="status"></div>
            <div class="fw-semibold" style="font-size: 0.8rem;">Memuat PDF...</div>
        </div>
        <div class="pdf-inline-error alert alert-danger m-3 d-none text-center rounded-3" style="z-index: 10; font-size: 0.85rem;">
            <i class="fa-solid fa-triangle-exclamation mb-1 d-block text-danger"></i>
            Gagal memuat PDF. <a href="{{ $url }}" target="_blank" download class="alert-link">Unduh File</a>
        </div>
        <div class="pdf-inline-pages-container w-100 py-2">
            <canvas class="pdf-inline-canvas shadow-sm rounded-3 border bg-white mx-auto d-block my-2" style="max-width: 98%; transition: width 0.2s; cursor: pointer;" title="Klik untuk Layar Penuh"></canvas>
        </div>
    </div>
</div>