@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/create/</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="container col-12 d-md-flex">
            <div class="col-11 col-md-5 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 --}}
                                    @if (isset($theBook))
                                        <option value="{{ $theBook->id }}" selected>{{ $theBook->name }}</option>
                                    @endif
                                </select>
                            </div>


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

                                <p><a href="{{ route('google-file.preview') }}" target="myGoogleFrame"
                                        name='googlelinktester'>Test
                                        Google file link</a>
                                </p>
                            </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 class="col-11 col-md-6 mx-4">
                <div class="card mb-4">
                    <style>
                        iframe {
                            width: 100%;
                            height: 500px;
                        }
                    </style>
                    <iframe src="{{ route('google-file.preview') }}" name="myGoogleFrame"></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('child-scripts')
    <script>
        // alert('fufuna')
        const demo_book_file_url = document.querySelector('[name="demo_book_file_url"]') //user input
        const book_file_url = document.querySelector('[name="book_file_url"]') //user input
        const googlelinktester = document.querySelector('[name="googlelinktester"]')
        const myGoogleFrame = document.querySelector('[name="myGoogleFrame"]')
        demo_book_file_url.addEventListener('change', function() {
            // alert('ddh')
            generateGoogleLink(demo_book_file_url, book_file_url, googlelinktester, myGoogleFrame);
        });
    </script>
@endpush