@extends('layouts.app')
@section('title')
Home
@endsection
@section('meta')
<meta property="og:image" content="{{ url('img/cover.jpg') }}">
@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="text-center p-4" style="font-style: italic;">
    <h4>"Perpustakaan digital berbahasa Indonesia terlengkap dengan lebih dari {{ \App\Models\Book::count() }} buku, {{ \App\Models\Author::count() }} penulis, {{ \App\Models\Publisher::count() }} penerbit. Tidak untuk dikomersialkan."</h4>
    - Buku diupdate berkala -
</div>
<div class="pt-3 pb-1">
    <h1>Pilihan Editor</h1>
</div>
<div class="row">
    @foreach($books as $book)
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 col-6">
        <div class="card">
            <a href="{{ route('guest.book', $book->slug) }}"><img src="{{ $book->cover_image->getUrl() ?? '/img/placeholder.jpg' }}" width=100% /></a>
            <div class="card-body">
                <div>
                    <h5><a href="{{ route('guest.book', $book->slug) }}">{{ $book->title }}</a></h5>
                </div>
                <div><strong>{{ $book->version }}</strong></div>
                <div class="pb-2"><i class="fa fa-user"></i> {{ $book->author->name ?? '' }}</div>
                @foreach($book->categories as $category)
                <span class="badge badge-info">{{ $category->name }}</span>
                @endforeach
                <div class="rating pt-2">
                    <span style="color: orange">
                        {!! $book->rating > 0 ? '<i class="fa fa-star"></i>' : '' !!}
                        {!! $book->rating > 1 ? '<i class="fa fa-star"></i>' : '' !!}
                        {!! $book->rating > 2 ? '<i class="fa fa-star"></i>' : '' !!}
                        {!! $book->rating > 3 ? '<i class="fa fa-star"></i>' : '' !!}
                        {!! $book->rating > 4 ? '<i class="fa fa-star"></i>' : '' !!}
                    </span>
                    <small>({{ $book->bookNotes->count() }} review)</small><br>
                    <small>{{ $book->view }} dilihat</small>
                </div>
            </div>
            <!-- <div class="card-footer">
                <a class="btn btn-block btn-info" href="#">Download</a>
            </div> -->
        </div>
    </div>
    @endforeach
</div>

<div class="pt-3 pb-1">
    <h1>Kategori</h1>
</div>
<div class="row">
    @foreach($categories as $category)
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 col-6">
        <form method="POST" action="{{ route("guest.queue") }}" enctype="multipart/form-data">
            @csrf
            <input type="text" name="categories[]" value="{{ $category->id }}" hidden>
            <button class="btn btn-block btn-outline-info mb-4" type="submit" style="font-size: 1rem; word-wrap: break-word;">{{ $category->name ?? '' }} <small>({{ $category->categoryBooks()->count() }})</small></button>
        </form>
    </div>
    @endforeach
</div>

<div class="pt-3">
    <h1>Buku Baru</h1>
</div>
<div class="row">
    <!-- <table class="table table-stripped">
        @foreach($latest_books as $book)
        <tr>
            <td style="width: auto; white-space: nowrap;">
                <a href="{{ route('guest.book', $book->slug) }}">
                    <img src="{{ $book->cover_image ? $book->cover_image->getUrl('preview') : '/img/placeholder.jpg' }}" width="70" height="100" style="margin-left: 3px;">
                </a>
            </td>
            <td>
                <a href="{{ route('guest.book', $book->slug) }}">
                    <h5>{{ $book->title }}</h5>
                </a>
                <div><strong>{{ $book->version }}</strong></div>
                <div class="pb-2"><i class="fa fa-user"></i> {{ $book->author->name ?? '' }}</div>
                @foreach($book->categories as $category)
                <span class="badge badge-info">{{ $category->name }}</span>
                @endforeach
            </td>
        </tr>
        @endforeach
    </table> -->
    <table id="data_temp" class="table table-stripped"></table>
    <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>
</div>

@endsection

@section('scripts')
<script>
    let pages = 2;
    let current_page = 0;
    let bool = false;
    let lastPage = 1;
    $(window).scroll(function() {
        let height = $(document).height();
        if ($(window).scrollTop() + $(window).height() >= height && bool == false && lastPage > pages - 2) {
            bool = true;
            $('.ajax-load').show();
            lazyLoad(pages)
                .then(() => {
                    bool = false;
                    pages++;
                    if (pages - 2 == lastPage) {
                        $('.no-data').show();
                    }
                })
        }
    })

    function lazyLoad(page) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: '?page=' + page,
                type: 'GET',
                beforeSend: function() {
                    $('.ajax-load').show();
                },
                success: function(response) {
                    lastPage = response.data.last_page;
                    $('.ajax-load').hide();
                    let html = '';
                    let img = '';
                    for (let i = 0; i < response.data.data.length; i++) {
                        // console.log(response.data.data[i]);
                        if (response.data.data[i].cover_image) {
                            img = response.data.data[i].cover_image.preview;
                        } else {
                            img = '/img/placeholder.jpg';
                        }
                        let categories = '';
                        response.data.data[i].categories.forEach(function(category){
                            categories += `<span class="badge badge-info">` + category.name + `</span> `
                        });
                        // console.log(categories)
                        html += `
                            <tr>
                                <td style="width: auto; white-space: nowrap;">
                                    <a href="{{ route('guest.book', '') }}/` + response.data.data[i].slug + `">
                                        <img src="` + img + `" width="70" height="100" style="margin-left: 3px;">
                                    </a>
                                </td>
                                <td>
                                    <a href="{{ route('guest.book', '') }}/` + response.data.data[i].slug + `">
                                        <h5>` + response.data.data[i].title + `</h5>
                                    </a>
                                    <div><strong>` + (response.data.data[i].version ?? '') + `</strong></div>
                                    <div class="pb-2"><i class="fa fa-user"></i> ` + (response.data.data[i].author ? response.data.data[i].author.name : '-') + `</div>
                                    ` + categories + `
                                </td>
                            </tr>
                        `;
                    }
                    $('#data_temp').append(html);
                    resolve();
                }
            });
        })
    }

    lazyLoad(1)
</script>
@endsection