@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>Edit 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">
                    <div class="bg-blue-400 p-2 text-white"><i class="bx bx-edit pe-3"></i>|<i class="ms-2 bx bx-file"></i>
                        File Upload</div>
                </li>
            </ul>
        </div>
        <div class="container col-12 d-md-flex">
            <div class="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.update', $theBook->doc->id) }}"
                            enctype="multipart/form-data">
                            @csrf @method('patch')
                            <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 ">
                                    @if (isset($theBook))
                                        <option value="{{ $theBook->id }}" selected>{{ $theBook->name }}</option>
                                    @endif
                                </select>
                            </div>

                            {{-- axios to check if this book already has a file, front cover or back cover --}}
                            <div class="mb-3">
                                <label for="book_file">eBook File </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 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">
                                <input type="hidden" name="book_file_url_hidden"
                                    value="{{ $theBook->doc?->presentFileUrl() }}">
                                <p><a href="{{ route('google-file.preview') }}" target="myGoogleFrame" name='googlelinktester'>Test
                                        Google file link</a>
                                </p>

                                @unless ($theBook->doc)
                                    <div class="text-red-400 text-sm fw-bold">This book does not have a file linked to it</div>
                                @endunless
                                <input type="hidden" name="current_book_file"
                                    value="{{ $theBook->doc->presentFileUrl('bk') or null }}">
                                <div> Current File: {{ $theBook->doc?->presentFileUrl() }} </div>
                            </div>

                            <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' />
                                @if ($theBook->doc->front_cover)
                                    <div> Current Front_ Cover: {{ $theBook->doc?->presentFileUrl('fc') }} </div>
                                @else
                                    <div class="text-blue-500 text-sm fw-bold">This book does not have a front cover</div>
                                @endif
                            </div>

                            {{-- <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' />
                                @if ($theBook->doc->back_cover)
                                    <div> Current Back Cover: {{ $theBook->doc?->presentFileUrl('bc') }} </div>
                                @else
                                    <div class="text-blue-400 text-sm">This book does not have a back cover</div>
                                @endif

                            </div> --}}
                            <button type="submit" class="btn btn-primary">Update</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>
        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 () {
         generateGoogleLink(demo_book_file_url, book_file_url, googlelinktester, myGoogleFrame);
        });
    </script>
@endpush