@section('title', 'Digital Library | University Cambridge School')
@section('description', 'Browse our digital library with books and educational resources for students.')@extends('frontend.layouts.app')
@push('head-scripts')
    <script type="application/ld+json">
        {
            "@context":"https://schema.org",
            "@type":"CollectionPage",
            "name":"Digital Library - University Cambridge School",
            "description":"Browse books and educational resources.",
            "url":"{{ route('front.library') }}",
    "mainEntity":{
        "@type":"CollegeOrUniversity",
        "name":"University Cambridge School Faisalabad",
        "url":"{{ url('/') }}"
    }
}
    </script>
@endpush
@section('content')
    <style>
        /* search bar */
        .search-wrapper {
            position: relative;
        }

        .search-wrapper input {
            width: 100%;
            padding: 14px 45px;
            border-radius: 30px;
            border: 1px solid #ddd;
            font-size: 16px;
        }

        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }

        .clear-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: red;
            cursor: pointer;
            display: none;
        }

        /* blog cards */
        .blog-card {
            /*border-radius:12px;*/
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
            background: #fff;
            transition: .3s;
        }

        .blog-card:hover {
            transform: translateY(-5px);
        }

        .blog-title {
            font-size: 16px;
            font-weight: 700;
            font-family: sans-serif !important;
        }

        .read-btn {
            color: #0d6efd;
            font-weight: 600;
        }

        /* Search input focus red outline */
        .search-wrapper input:focus {
            outline: none;
            border: 2px solid red;
            box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15);
        }

        .library-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 90px;
        }

        .library-heading {
            text-align: center;
        }

        .library-heading h1 {
            font-weight: 700;
            margin-bottom: 8px;
        }

        .library-heading p {
            color: #6c757d;
        }

        .logout-form {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .library-logout-btn {
            border: none;
            background: #ed0645;
            color: #fff;
            padding: 11px 22px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .library-logout-btn i {
            margin-right: 7px;
        }

        .library-logout-btn:hover {
            background: #c9003a;
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(237, 6, 69, 0.2);
        }

        @media (max-width: 767px) {

            .library-header {
                flex-direction: column;
                gap: 18px;
            }

            .logout-form {
                position: static;
                transform: none;
            }

            .library-heading h1 {
                font-size: 30px;
            }

            .library-heading p {
                font-size: 15px !important;
            }

            .library-logout-btn {
                padding: 9px 20px;
            }
        }

    </style>
    <div class="breadcumb-wrapper " data-bg-src="{{asset('frontend/coreui/assets/img/breadcumb/breadcumb-bg.jpg')}}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Library</h1>
                <p class="breadcumb-text">Digital Learning Resources</p>

                <ul class="breadcumb-menu">
                    <li><a href="{{ route('front.home') }}">Home</a></li>
                    <li>Library</li>
                </ul>
            </div>
        </div>
    </div>
    <section class="space-top space-extra-bottom">
        <div class="container">
            <div class="library-header mb-5">
            <div class="library-heading mb-5">
                <h1 class="fs-1">Digital Library</h1>
                <p class="fs-5 text-center">
                    Browse our collection of books and educational resources.
                </p>
            </div>
            <form action="{{ route('logout') }}" method="POST" class="logout-form">
                @csrf

                <button type="submit" class="library-logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    Logout
                </button>
            </form>
            </div>
            <div class="row justify-content-center mb-4">
                <div class="col-md-4">
                    <label class="form-label">Category</label>
                    <select id="filter_category" class="form-select">
                        <option value="">All Categories</option>

                        @foreach($parentCategories as $category)
                            <option value="{{ $category->id }}">
                                {{ $category->category_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Sub Category</label>
                    <select id="filter_sub_category" class="form-select">
                        <option value="">All Sub Categories</option>

                        @foreach($childCategories as $category)
                            <option value="{{ $category->id }}">
                                {{ $category->category_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row justify-content-center mb-5">
                <div class="col-lg-6 col-md-8 col-12">
                    <form action="{{ route('front.library') }}" method="GET">
                        <div class="search-wrapper">
                            <i class="fa fa-search search-icon"></i>
                            <input type="text" name="search" id="searchInput"
                                   value="{{request('search')}}"
                                   placeholder="Search Books..."/>
                            <i class="fa fa-times clear-icon" id="clearSearch"></i>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row" id="book-container">
                @include('frontend.partials.book_cards')
            </div>
            <div id="loading" class="text-center mt-4" style="display:none">
                <h4>Loading more Books...</h4>
            </div>
        </div>
    </section>
@endsection
@push('footer-scripts')
    <script>
        let input = document.getElementById('searchInput');
        let clearBtn = document.getElementById('clearSearch');

        input.addEventListener('input', () => {
            clearBtn.style.display = input.value ? 'block' : 'none';
        });

        clearBtn.addEventListener('click', () => {
            input.value = '';
            clearBtn.style.display = 'none';
        });
    </script>
    <script>
        let page = 2;
        let loading = false;
        let lastPage = {{ $books->lastPage() }};
        function loadBooks(reset = true) {
            if (loading) return;

            loading = true;
            $('#loading').show();

            let url = new URL("{{ route('front.library') }}");

            url.searchParams.set('search', $('#searchInput').val());
            url.searchParams.set('parent_category_id', $('#filter_category').val());
            url.searchParams.set('child_category_id', $('#filter_sub_category').val());

            if (!reset) {
                url.searchParams.set('page', page);
            }

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(res => res.text())
                .then(data => {

                    if (reset) {

                        $('#book-container').html(data);
                        page = 2;
                        let totalPages = $(data).filter('#last-page').data('last-page');
                        if (totalPages) {
                            lastPage = totalPages;
                        }

                    } else {
                        if ($.trim(data) === '') {
                            $('#loading').html('No more books');
                            loading = false;
                            return;
                        }
                        $('#book-container').append(data);
                        page++;
                    }
                    loading = false;
                    $('#loading').hide();

                })
                .catch(function () {
                    loading = false;
                    $('#loading').hide();
                });
        }

        $('#filter_category').on('change', function () {

            let categoryId = $(this).val();
            $('#filter_sub_category').html('<option value="">All Sub Categories</option>');

            if (!categoryId) {
                loadBooks();
                return;
            }

            let childUrl = "{{ route('front.book-categories.children', ['parent' => '__ID__']) }}";
            childUrl = childUrl.replace('__ID__', categoryId);

            $.ajax({
                url: childUrl,
                type: "GET",
                dataType: "json",
                success: function (response) {
                    let options = '<option value="">All Sub Categories</option>';
                    $.each(response, function (index, item) {
                        options += `<option value="${item.id}">
                        ${item.category_name}
                    </option>`;
                    });
                    $('#filter_sub_category').html(options);
                    loadBooks();
                }
            });

        });

        $('#filter_sub_category').on('change', function () {
            loadBooks();
        });

        $(window).on('scroll', function () {

            if (loading) return;

            if (page > lastPage) {
                $('#loading').html('You have reached the end of the library.').show();
                return;
            }
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 150) {
                loadBooks(false);
            }

        });
    </script>
@endpush