@extends('elibrary.staff.layouts.app')
@section('styles')
    <style>
        .card-box {
            padding: 20px;
            box-shadow: 0 0 13px 1px #e3e3e3;
        }

        .card-title {
            border-bottom: 1px solid #e3e3e3;
        }

        .card-box h1 {
            color: #025fa2;
        }

        .card-box h3 {
            color: #5e5e5e;
        }
    </style>
@endsection
@section('content')
    <div class="col-md-12">
        <div class="dash-cards">
            <div class="container">
                <div class="card-title">
                    <h3>Welcome To Your Dashboard</h3>
                    <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos id, illo
                        iusto obcaecati optio perferendis suscipit voluptatem. Architecto beatae fugit ipsa magnam nihil
                        perspiciatis quas qui ratione sapiente sit.</p>
                </div>
                <div class="row mt-5">
                    <div class="col-md-4">
                        <div class="card-box text-center">
                            <h3>Staffs</h3>
                            <h1 class="mt-3">{{$staff}}</h1>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card-box text-center">
                            <h3>Students</h3>
                            <h1 class="mt-3">{{$student}}</h1>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card-box text-center">
                            <h3>Books</h3>
                            <h1 class="mt-3">{{$book}}</h1>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row mx-3 mt-5">
        @include('elibrary.components.heading', ['title' => 'Latest Books', 'viewUrl' => route('book.index')])
        <!-- </div> -->
        @forelse($books as $book)
        @php
        $created_by = \App\Models\Staff::where('id' , $book->created_by)->pluck('name')->first();
        @endphp
        <div class="col-lg-4 col-md-6">
            <div class="book-list">
                <a href="{{route('book.show', $book->id)}}">
                    <div class="book-image">
                        <img src="{{$book->image}}" class="w-100" alt="">
                    </div>
                </a>
                <div class="book-info">
                   <div class="d-flex justify-content-between align-items-center mt-2">
                       <div>
                           <a href="{{route('book.show', $book->id)}}">
                               <h3>{{$book->name}}</h3>
                           </a>
                           <p><i class='bx bx-user'></i> {{$created_by}}</p>
                       </div>
                       <div>
                           <a href="{{$book->doc}}">
                               <i class='bx bxs-download' style="font-size: 20px;"></i>
                           </a>
                       </div>
                   </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-md-12 mt-4 d-flex justify-content-center">
        <div class="no-product text-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="50" height="50"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 21v2h-2v-2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6a3.99 3.99 0 0 1 3 1.354A3.99 3.99 0 0 1 15 3h6a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-8zm7-2V5h-5a2 2 0 0 0-2 2v12h7zm-9 0V7a2 2 0 0 0-2-2H4v14h7z"/></svg>
        <h3>No Books found.</h3>
        </div>
        </div>
        @endforelse
    </div>
@endsection