<!--
Copyright (C) 2022 Echedey López Romero <elr@disroot.org>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row mb-3">
        <h1 class="col-12 mb-0 text-center">Book creation</h1>
    </div>
    @if ($errors->any())
    <div class = "row mb-3">
        <div class="col-xl-6 col-lg-8 col-md-10 col-12 mx-auto alert alert-danger">
            <div class="container">
                <div class="row mb-2">
                    <span class="col-12 text-center"><strong>Whoops!</strong> There were some problems with your input.</span>
                </div>
                <div class="row">
                    <ul class="col-12 mb-0">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @endif
    <div class="row">
        <form class="col-xl-6 col-lg-8 col-md-10 col-12 mx-auto" action="{{ route('books.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="container">
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="isbn">ISBN</label>
                        <input class="form-control" type="text" id="isbn" name="isbn" value="{{ old('isbn') }}" required=""/>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="title">Title</label>
                        <input class="form-control" type="text" id="title" name="title" value="{{ old('title') }}" required=""/>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="authors">Authors</label>
                        <textarea class="form-control" rows="3" id="authors" name="authors" required="">{{ old('authors') }}</textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="year">Year</label>
                        <input class="form-control" type="number" id="year" name="year" step="1" min="0" value="{{ old('year') }}"/>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="editorial">Editorial</label>
                        <input class="form-control" type="text" id="editorial" name="editorial" value="{{ old('editorial') }}"/>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="image">Image</label>
                        <input class="form-control" type="file" id="image" name="image"/>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12 px-0">
                        <div class="container">
                            <div class="row mb-2">
                                <div class="col-12 px-0">
                                    <span class="fst-normal">Default image</span>
                                </div>
                            </div>
                            <div class="row">
                                <img src="{{ asset('/data/images/books/default_portrait.webp') }}" class="col-xl-8 col-lg-10 col-12 px-0 img-thumbnail" alt="Default book"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="document">Document</label>
                        <input class="form-control" type="file" id="document" name="document"/>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label" for="category">Category</label>
                        <select class="form-control" id="category" name="category_id">
                            <option value="">-- Choose --</option>
                            @foreach ($categories as $category)
                            @if ($category->id . '' === old('category_id'))
                            <option value="{{ $category->id }}" selected="">{{ $category->name }}</option>
                            @else
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-12 mb-lg-0 mb-2">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">Add</button>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="d-grid gap-2">
                            <button type="reset" class="btn btn-danger">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
