@extends('layouts.app')

@section('content')

<link
    rel="stylesheet"
    href="{{ asset('css/panduan.css') }}"
>

<div class="panduan-page">

    {{-- =====================================================
         PAGE HEADER
    ====================================================== --}}
    {{-- <div class="panduan-page-header">

        <div class="panduan-page-title">

            <div class="panduan-title-icon">
                <i class="fa-solid fa-book-open"></i>
            </div>

            <div>
                <h1>Panduan Sistem</h1>

                <p>
                    Temukan panduan dan dokumentasi untuk membantu
                    memahami penggunaan sistem.
                </p>
            </div>

        </div>

    </div> --}}


    {{-- =====================================================
         MAIN CONTENT
    ====================================================== --}}
    <div class="panduan-panel">

        {{-- =================================================
             PANEL HEADER
        ================================================== --}}
        <div class="panduan-panel-header">

            <div>

                <h2>
                    Daftar Panduan
                </h2>

                <p>
                    Pilih panduan yang ingin Anda baca.
                </p>

            </div>


            {{-- SEARCH --}}
            <div class="panduan-search">

                <i class="fa-solid fa-magnifying-glass"></i>

                <input
                    type="text"
                    id="panduanSearch"
                    placeholder="Cari panduan..."
                    autocomplete="off"
                >

            </div>

        </div>


        {{-- =================================================
             TABLE / LIST HEADER
        ================================================== --}}
        <div class="panduan-list-header">

            <div class="panduan-column-document">
                Dokumen
            </div>

            <div class="panduan-column-type">
                Tipe
            </div>

            <div class="panduan-column-action">
                Aksi
            </div>

        </div>


        {{-- =================================================
             DOCUMENT LIST
        ================================================== --}}
        <div
            class="panduan-list"
            id="panduanList"
        >

            @forelse($panduan as $item)

                @php

                    $extension = $item->dokumen
                        ? strtolower(
                            pathinfo(
                                $item->dokumen,
                                PATHINFO_EXTENSION
                            )
                        )
                        : null;

                    $dokumenUrl = $item->dokumen
                        ? route('panduan.file', $item->id)
                        : null;

                @endphp


                <div
                    class="panduan-row"
                    data-title="{{ strtolower($item->judul) }}"
                >

                    {{-- =================================================
                         DOCUMENT
                    ================================================== --}}
                    <div class="panduan-document-info">

                        <div
                            class="panduan-file-icon
                            {{ $extension === 'pdf'
                                ? 'pdf'
                                : (
                                    $extension === 'doc' ||
                                    $extension === 'docx'
                                    ? 'word'
                                    : 'default'
                                ) }}"
                        >

                            @if($extension === 'pdf')

                                <i class="fa-solid fa-file-pdf"></i>

                            @elseif($extension === 'doc' || $extension === 'docx')

                                <i class="fa-solid fa-file-word"></i>

                            @else

                                <i class="fa-solid fa-file-lines"></i>

                            @endif

                        </div>


                        <div class="panduan-document-text">

                            <h3>
                                {{ $item->judul }}
                            </h3>

                            <p>

                                @if($item->deskripsi)

                                    {{ Str::limit($item->deskripsi, 140) }}

                                @else

                                    Dokumen panduan sistem.

                                @endif

                            </p>

                        </div>

                    </div>


                    {{-- =================================================
                         TYPE
                    ================================================== --}}
                    <div class="panduan-type">

                        @if($extension === 'pdf')

                            <span class="panduan-badge pdf">
                                <i class="fa-solid fa-file-pdf"></i>
                                PDF
                            </span>

                        @elseif($extension === 'doc' || $extension === 'docx')

                            <span class="panduan-badge word">
                                <i class="fa-solid fa-file-word"></i>
                                {{ strtoupper($extension) }}
                            </span>

                        @elseif($extension)

                            <span class="panduan-badge default">
                                <i class="fa-solid fa-file"></i>
                                {{ strtoupper($extension) }}
                            </span>

                        @else

                            <span class="panduan-badge default">
                                <i class="fa-solid fa-file-lines"></i>
                                Dokumen
                            </span>

                        @endif

                    </div>


                    {{-- =================================================
                         ACTION
                    ================================================== --}}
                    <div class="panduan-actions">

                        @if($dokumenUrl)

                            <a
                                href="{{ $dokumenUrl }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="panduan-button primary"
                            >

                                <i class="fa-solid fa-eye"></i>

                                <span>
                                    Baca
                                </span>

                            </a>


                            <a
                                href="{{ $dokumenUrl }}"
                                download="{{ Str::slug($item->judul) ?: 'panduan' }}.{{ $extension }}"
                                class="panduan-button secondary"
                                title="Download dokumen"
                            >

                                <i class="fa-solid fa-download"></i>

                            </a>

                        @else

                            <span class="panduan-unavailable">

                                <i class="fa-solid fa-circle-exclamation"></i>

                                Belum tersedia

                            </span>

                        @endif

                    </div>

                </div>

            @empty

                {{-- =================================================
                     EMPTY STATE
                ================================================== --}}
                <div class="panduan-empty">

                    <div class="panduan-empty-icon">

                        <i class="fa-solid fa-book-open"></i>

                    </div>

                    <h3>
                        Belum Ada Panduan
                    </h3>

                    <p>
                        Belum ada dokumen panduan yang tersedia saat ini.
                    </p>

                </div>

            @endforelse


            {{-- =================================================
                 SEARCH EMPTY STATE
            ================================================== --}}
            <div
                class="panduan-search-empty"
                id="panduanSearchEmpty"
                style="display: none;"
            >

                <div class="panduan-empty-icon">

                    <i class="fa-solid fa-magnifying-glass"></i>

                </div>

                <h3>
                    Panduan Tidak Ditemukan
                </h3>

                <p>
                    Tidak ada panduan yang sesuai dengan pencarian Anda.
                </p>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     SEARCH SCRIPT
========================================================= --}}
<script>

document.addEventListener('DOMContentLoaded', function () {

    const searchInput =
        document.getElementById('panduanSearch');

    const list =
        document.getElementById('panduanList');

    const searchEmpty =
        document.getElementById('panduanSearchEmpty');

    if (!searchInput || !list) {
        return;
    }


    searchInput.addEventListener('input', function () {

        const keyword =
            this.value
                .toLowerCase()
                .trim();

        const rows =
            list.querySelectorAll('.panduan-row');

        let visibleCount = 0;


        rows.forEach(function (row) {

            const title =
                row.dataset.title || '';

            if (title.includes(keyword)) {

                row.style.display = '';

                visibleCount++;

            } else {

                row.style.display = 'none';

            }

        });


        if (
            keyword !== '' &&
            visibleCount === 0
        ) {

            searchEmpty.style.display = 'block';

        } else {

            searchEmpty.style.display = 'none';

        }

    });

});

</script>

@endsection