@extends('snit.layouts.app')
@section('content')
    <div class="">
        <h4 class="fw-bold py-3 mb-4 m-4"><span class="text-muted fw-light">Books /</span>Upload eBook</h4>
        <div class="col-md-12 px-4">
            <ul class="nav nav-pills flex-column flex-md-row mb-3">
                <li class="nav-item">
                    <a class="nav-link active" href="javascript:void(0);"><i class="bx bx-book me-1"></i> Upload A file for {{ ucfirst($theBook->name) }}</a>
                </li>
            </ul>
        </div>
        <div class="col-xl mx-4">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"></h5>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <x-input-errors :messages="$errors->all()" />
                        </div>
                    @endif
                    {{-- form begins here --}}
                    <form class="" method="post" action="{{ route('docs.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" for="book_id">Select The Book Title</label>
                            <select name="book_id" id="book_id" class="form-select ">

                              {{-- make the requested book default --}}
                                <option value="{{ 00 }}">Select ---</option>
                                @if (isset($theBook))
                                    <option value="{{ $theBook->id }}" selected>{{ $theBook->name }}</option>
                                @endif
                                {{-- remove it from the rest of the options --}}
                                @foreach ($all_books as $item)
                                    @if (isset($theBook) and $theBook->id == $item->id)
                                        @continue
                                    @endif
                                    <option value="{{ $item->id }}">{{ $item->title }}</option>
                                @endforeach
                            </select>
                        </div>


                        {{-- the main eBook file (pdf) --}}
                        <div class="mb-3">
                            <label for="book_file">eBook File11 </label>
                            {{-- <span class="text-muted">(Your main book. Only PDF or Word Document files are accepted)</span> --}}
                            {{-- <x-input-file-doc name='book_file' /> --}}
                            {{-- <span class="text-muted">(Upload your PDF eBook to Google Drive and insert the generated link here)</span> --}}
                            <input type="text">
                        </div>

                        {{-- the front cover of the book --}}
                        <div class="mb-3">
                            <label for="front_cover">eBook Front Cover</label>
                            <span class='text-muted'> (jpg, jpeg and png are accepted)</span>
                            <x-input-file-img name='front_cover' />
                          
                        </div>

                        {{-- the back cover of the book --}}
                        <div class="mb-3">
                            <label for="back_cover">eBook Back Cover</label>
                            <span class='text-muted'> (jpg, jpeg and png are accepted)</span>
                            <x-input-file-img name='back_cover' />
                            @unless($theBook->back_cover)
                                <div class="text-blue-400 text-sm">This book does not have a back cover</div>
                            @endunless
                        </div>

                        {{-- submit btn --}}
                        <button type="submit" class="btn btn-primary">Upload File</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection