{{-- this store lists all the books on the platform regardless of institution or instructor  --}}

@extends('snit.layouts.app')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="d-flex justify-between">
            <h4 class=" py-1 mb-1 mx-3">
                <span class="text-gray-100 fw-light">Book Store</span>
            </h4>
            <x-cart-icon />
        </div>
        <div class="w-100 m-3">
            <span class="block my-1 text-white h6">
                Want to check if you've bought a book? Use this <br>
                'client search' to view all your purchases as a student
            </span>
            <form class="flex" method="post" action="{{ route('clients.show-all-purchases') }}">@csrf
                <div class="w-3/5 md:w-1/5 bg-white rounded-3xl ">
                    <input type="search"
                        class="h-10 w-full md:text-sm  px-2 rounded-2xl rounded-tr-none rounded-br-none uppercase placeholder:lowercase"
                        name="mat_num" placeholder="Enter Mat. No to scan our records">
                </div>
                <div class="">
                    <button type="submit"
                        class="-ml-1 h-10 btn btn-primary px-2 capitalize text-gray-100 rounded-tl-none rounded-bl-none">
                        Client Search
                    </button>

                </div>
                {{-- <input type="search" class="w-3/5 md:w-1/4 text-red-700" name="mat_num" placeholder="Enter Mat. No to scan our records"> --}}
            </form>
        </div>
        <div class="row mb-5 pl-3">
            @foreach ($allbooks as $book)
                <div class="col-md-6 col-lg-4 my-1">
                    <div class="card h-100">
                        <div class="single_result_container p-0 ">
                            {{-- refactor : make everything a component --}}
                            @include('snit.guest.search.partials.bookImage')
                            <div class="information_container mx-2 p-1">
                                @include('snit.guest.search.partials.bookInfo')
                                <div class="relative book_types_container grid grid-cols-2 ">
                                    @include('snit.guest.search.partials.hardCopyVersion')
                                    @include('snit.guest.search.partials.ebookVersion')
                                </div>
                                <div class="text-right">
                                    @include('snit.guest.search.partials.authorImageForthisBook')
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            @endforeach



        </div>
    </div>
    <!-- / Content -->
@endsection

@push('child-scripts')
    <script>
        // alert('bado')
    </script>
@endpush