@extends('snit.layouts.app')
@section('content')
        <div class="mt-16 offset-sm-4 col-sm-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="my-0">
                        <span class="block mb-2">Add New Book</span>
                        <small class="text-xs text-blue-300">Carefully fill this form</small>
                    </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('books.store') }}">@csrf
                        <div class="mb-3">
                            <label class="my-0" for="book-name">Book Name
                            </label>
                            <input type="text" class="form-control text-xs" id="book-name" name="name"
                                value="{{ old('title') }}" placeholder="eg. A good day to die hard" />
                            <x-input-single-error name="name" />
                        </div>
                        <div class="mb-3">
                            <label class="my-0" for="ISBN"> ISBN
                                <span class="text-muted">(International Standard
                                    Book Number)</span>
                            </label>
                            <input type="text" class="form-control text-xs" id="ISBN" name="ISBN"
                                value="{{ old('ISBN') }}" placeholder="038593496594" />
                            <x-input-single-error name="ISBN" />
                        </div>

                        <div class="mb-3">
                            <label class="my-0" for="publisher">Publisher</label>

                            <input class="form-control" id="publisher" name="publisher" list="publishers"
                                value="{{ old('publisher') }}" placeholder="Enter a new publisher name eg.ACME Inc." />
                            {{-- <x-input-single-error name="publisher" /> --}}

                            <datalist id='publishers'>
                                @foreach ($all_publishers as $publisher)
                                    <option value="{{ $publisher->coy_name }}">
                                        {{ $publisher->coy_name }}</option>
                                @endforeach
                            </datalist>
                        </div>
                        <div class="flex gap-1">

                            <div class="mb-3">
                                <label class="my-0" for="pub_year">
                                    Year of Publication
                                </label>
                                <input type="number" class="form-control text-xs" id="pub_year" name="pub_year"
                                    value="{{ old('pub_year') }}" placeholder="eg. 2020" />
                                <x-input-single-error name="pub_year" />
                            </div>

                            <div class="mb-3">
                                <label class="my-0" for="price">Price</label>
                                <input type="number" class="form-control text-xs" id="price" name="price"
                                    value="{{ old('price') }}" placeholder="eg. 3000.00" />
                                <x-input-single-error name="price" />
                            </div>

                            <div class="mb-3">
                                <label class="my-0" for="price">Qty</label>
                                <input type="number" class="form-control text-xs" id="inventory" name="inventory"
                                    value="{{ old('inventory') }}" placeholder="eg. 200" min="0" />
                                <x-input-single-error name="inventory" />
                            </div>
                        </div>


                        <div class="mb-3">
                            <label class="my-0" for="message">Message <span class="text-muted">(Leave a
                                    desciptive message for this book)</span>
                            </label>
                            <textarea id="message" class="form-control" name="message"
                                placeholder="eg. This book is for COM111 intended for ND1 students?">{{ old('message') }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-sm form-control btn-outline-primary">Proceed</button>
                    </form>
                </div>
            </div>
        </div>
@endsection