@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">


                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                        <strong>Add new book</strong>
                        <br> <br>

                        <script>
                        function checkforblank(e) {
                            if (document.getElementById('title').value == "") {
                                alert('please enter title');
                                e.preventDefault();//stopt ervoor dat het form sumbmit
                            }
                            if (document.getElementById('description').value == "") {
                                alert('please enter description');
                                e.preventDefault();//stopt ervoor dat het form sumbmit
                            }
                            if (document.getElementById('copies').value == "") {
                                alert('please enter copies');
                                e.preventDefault();//stopt ervoor dat het form sumbmit
                            }
     
     
                        }

                        
                        </script>

                        <form  action="{{route('books.store')}}" method="post" onsubmit="return checkforblank(event)">
                            @csrf

                            Title <br>
                            <input type="text"  id="title" name="title" >
                            <br><br>
                            

                            Description <br>
                            <input name="description"  id="description" >

                            <br> <br>

                            Copies <br>
                            <input type="number" min="0" max="1000" name="copies" id="copies" >

                            <br><br>

                            <input  type="submit">
                        </form>

 



                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection