@extends('layouts.master')
@section('title', 'Books - Resources - Mentor')
@section('pagetitle', 'Books - Resources - Mentor')

@section('content')
    @include('layouts.partials.breadcrumbs', ['breadcrumbs' => [
         ['url' => route('dashboard'), 'title' => __('Home')],
         ['url' => route('mentor.resources'), 'title' => __('Resources')],
         ['url' => route('mentor.resources.books'), 'title' => __('Book')]
            ]])
    <div class="main">
        @include('layouts.partials.messages')
        <div class="r-heading">
            <h1 class="hd mb-30">{{ __("Books") }}</h1>
            <button class="r-edit">edit</button>
        </div>

{{--        <div class="books-project">--}}
{{--            @foreach($books as $book)--}}

{{--                <div class="book">--}}
{{--                    <a href="{{asset("storage/pdfs/".$book->url)}}"--}}
{{--                       target="_blank">--}}
{{--                        <img width="189px" height="267px"--}}
{{--                             src="{{asset("storage/pdfs/thumbnails/".$book->details['pdf_image'])}}" alt=""/>--}}
{{--                    </a>--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-10"><h2>{{$book->name}}</h2></div>--}}
{{--                        <div class="col-2">--}}
{{--                            <div class="dropdown">--}}
{{--                                <a href="#" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true"--}}
{{--                                   aria-expanded="false">--}}
{{--                                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>--}}
{{--                                </a>--}}
{{--                                <div class="dropdown-menu float-right" aria-labelledby="dropdownMenuButton">--}}
{{--                                    <a class="dropdown-item"--}}
{{--                                       href="{{asset("storage/pdfs/".$book->url)}}"--}}
{{--                                       target="_blank"--}}
{{--                                    >--}}
{{--                                        <i class="fa fa-eye" aria-hidden="true"></i>--}}
{{--                                        View--}}
{{--                                    </a>--}}
{{--                                    <a class="dropdown-item text-danger js-remove-list-item"--}}
{{--                                       href="{{route('mentor.resources.delete',$book->id)}}"--}}
{{--                                       data-url="{{route('mentor.resources.delete',$book->id)}}"--}}
{{--                                       data-method="DELETE"--}}
{{--                                       data-confirm-title="@lang('Please Confirm')"--}}
{{--                                       data-confirm-text="@lang('Are you sure that you want to delete this resource?')"--}}
{{--                                       data-confirm-delete="@lang('Yes, delete!')"--}}
{{--                                    >--}}
{{--                                        <i class="fa fa-trash" aria-hidden="true"></i>--}}
{{--                                        Delete--}}
{{--                                    </a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <p>{{$book->description}}</p>--}}

{{--                </div>--}}
{{--            @endforeach--}}
{{--            <div class="book text-center">--}}
{{--                <a href="#" data-modal-target="#addbookModal" class="createModal save">--}}
{{--                    <span class="material-icons-sharp mb-30 modal-view-close">add</span>--}}
{{--                    <p>@forelse($books as $book)@empty--}}
{{--                            No books yet.--}}
{{--                        @endforelse Click to add a new book</p>--}}
{{--                </a>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="books-project">
            @foreach($books as $book)
                <div class="book">
                    <a href="{{ asset("storage/pdfs/" . $book->url) }}" target="_blank">
                        <img width="189px" height="267px" src="{{ asset("storage/pdfs/thumbnails/" . $book->details['pdf_image']) }}" alt=""/>
                    </a>
                    <div class="row">
                        <div class="col-10">
                            <h2>{{ $book->name }}</h2>
                        </div>
                        <div class="col-2">
                            <div class="dropdown">
                                <!-- Use 'data-bs-toggle' instead of 'data-toggle' in Bootstrap 5 -->
                                <a href="#" id="dropdownMenuButton{{ $book->id }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                </a>
                                <!-- Attach the dropdown menu to the correct ID -->
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $book->id }}">
                                    <li>
                                        <a class="dropdown-item" href="{{ asset("storage/pdfs/" . $book->url) }}" target="_blank">
                                            <i class="fa fa-eye" aria-hidden="true"></i> View
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-danger js-remove-list-item" href="{{ route('mentor.resources.delete', $book->id) }}"
                                           data-url="{{ route('mentor.resources.delete', $book->id) }}" data-method="DELETE"
                                           data-confirm-title="@lang('Please Confirm')" data-confirm-text="@lang('Are you sure that you want to delete this resource?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fa fa-trash" aria-hidden="true"></i> Delete
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <p>{{ \Illuminate\Support\Str::limit($book->description, 50) }}</p>
                </div>
            @endforeach

            <div class="book text-center">
                <a href="#" data-modal-target="#addbookModal" class="createModal save">
                    <span class="material-icons-sharp mb-30 modal-view-close">add</span>
                    <p>@forelse($books as $book)@empty No books yet. @endforelse Click to add a new book</p>
                </a>
            </div>
        </div>
    </div>
    <div id="addbookModal" class="modal addnewres-modal">
        <div>
            <div class="reschedule-h1">
                <h1>Add a new book</h1>
            </div>
            <span class="material-icons-sharp modal-view-close" data-bs-dismiss="modal" aria-label="Close">close</span>
        </div>

        <form action="{{route("mentor.resources.books.create")}}" id="resource-form" method="POST"
              enctype="multipart/form-data">
            @csrf
            <div class="menteeInfo form-group">
                <label for="usergender">Book Title</label>
                <input type="text" class="form-control" name="pdf_title" required/>
            </div>
            <div class="menteeInfo form-group">
                <label for="usergender">Book Upload</label>
                <input type="file" class="form-control" name="pdf" required/>
            </div>
            <div class="menteeInfo form-group">
                <label for="usergender">Book Cover Upload</label>
                <input type="file" class="form-control" name="pdf_cover" required/>
            </div>
            <div class="menteeInfo form-group">
                <label for="time">Book Description</label>
                <textarea name="pdf_description" id="time" class="form-control" required cols="30"
                          rows="10"></textarea>
            </div>
            <div class="next">
                <input type="submit" class="btn save">
            </div>
        </form>
    </div>
@endsection


@section('scripts')
    <script src="{{ asset('assets/js/resources.js') }}