@extends('layouts.app')
@section('title')
Penulis
@endsection
@section('content')
<div class="subnavbar pt-3">
    <form method="POST" action="{{ route('guest.queue') }}" enctype="multipart/form-data">
        @csrf
        <div class="input-group mb-3">
            <input style="font-size: 1.5rem; padding: 1rem;" class="form-control shadow-lg bg-white rounded" type="text" name="title" placeholder="Judul Buku">
            <div class="input-group-append" style="font-size: 1.5rem;">
                <button class="btn btn-info" type="submit"><i class="fa fa-search"></i> Cari</button>
            </div>
        </div>
    </form>
</div>

<div class="pt-3 pb-1 d-flex align-items-center justify-content-between">
    <h1 class="mb-0">Penulis</h1>
    <small class="text-muted">Total {{ \App\Models\Author::count() }} penulis</small>
</div>

<div class="row" id="authors-grid">
    @foreach ($authors as $author)
        <div class="col-xxl-2 col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 mb-4">
            <div class="card h-100 text-center">
                <a href="{{ route('guest.author', $author->slug) }}" class="card-body d-flex flex-column justify-content-center" style="min-height: 120px;">
                    <i class="fa fa-user fa-2x text-muted mb-2"></i>
                    <h6 class="card-title text-truncate mb-1">{{ $author->name }}</h6>
                    <small class="text-muted">{{ $author->author_books_count ?? $author->authorBooks()->count() }} buku</small>
                </a>
            </div>
        </div>
    @endforeach
</div>

<div class="row">
    <div class="ajax-load text-center" style="display:none">
        <i class="mdi mdi-48px mdi-spin mdi-loading"></i> Loading ...
    </div>
    <div class="no-data text-center mb-4" style="display:none">
        <b>Tidak ada data lagi</b>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let authorPages = 2;
    let authorCurrentPage = 0;
    let authorLoading = false;
    let authorLastPage = 1;
    let authorExhausted = false;

    function authorRowHtml(a) {
        const slug = a.slug || '';
        const name = a.name || '';
        const count = (a.author_books_count ?? 0);
        return `
            <div class="col-xxl-2 col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 mb-4">
                <div class="card h-100 text-center">
                    <a href="{{ route('guest.author', '') }}/${slug}" class="card-body d-flex flex-column justify-content-center" style="min-height: 120px;">
                        <i class="fa fa-user fa-2x text-muted mb-2"></i>
                        <h6 class="card-title text-truncate mb-1">${name}</h6>
                        <small class="text-muted">${count} buku</small>
                    </a>
                </div>
            </div>
        `;
    }

    function authorLazyLoad(page) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: window.location.pathname + '?page=' + page,
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {
                    $('.ajax-load').show();
                },
                success: function (response) {
                    $('.ajax-load').hide();
                    authorLastPage = response.data.last_page;
                    const items = response.data.data || [];
                    let html = '';
                    for (let i = 0; i < items.length; i++) {
                        html += authorRowHtml(items[i]);
                    }
                    $('#authors-grid').append(html);
                    resolve();
                },
                error: function () {
                    $('.ajax-load').hide();
                    reject();
                }
            });
        });
    }

    // The server already rendered page 1; capture its last_page before we begin.
    authorLastPage = {{ $authors->lastPage() }};

    $(window).scroll(function () {
        if (authorLoading || authorExhausted) return;
        const height = $(document).height();
        if ($(window).scrollTop() + $(window).height() >= height - 200) {
            if (authorPages > authorLastPage) {
                if (!authorExhausted) {
                    $('.no-data').show();
                    authorExhausted = true;
                }
                return;
            }
            authorLoading = true;
            $('.ajax-load').show();
            authorLazyLoad(authorPages)
                .then(() => {
                    authorLoading = false;
                    authorPages++;
                })
                .catch(() => { authorLoading = false; });
        }
    });
</script>
@endsection