<?php

declare(strict_types=1);

require_once __DIR__ . '/../library/auth.php';

allow_roles(['admin', 'teacher']);

$page_title = 'Add New Book';

require_once __DIR__ . '/../include/header.php';
require_once __DIR__ . '/../include/sidebar.php';

?>

<div class="content-wrapper">

    <!-- ============================================== -->
    <!-- PAGE HEADER -->
    <!-- ============================================== -->

    <section class="content-header">

        <div class="container-fluid">

            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">

                <div class="mb-2 mb-md-0">

                    <h1>

                        <i class="fas fa-book-medical text-primary"></i>

                        Add New Book

                    </h1>

                    <small class="text-muted">

                        Add books to library inventory

                    </small>

                </div>

                <div>

                    <a
                        href="list_books.php"
                        class="btn btn-info"
                    >

                        <i class="fas fa-list"></i>

                        View Books

                    </a>

                </div>

            </div>

        </div>

    </section>

    <!-- ============================================== -->
    <!-- MAIN CONTENT -->
    <!-- ============================================== -->

    <section class="content">

        <div class="container-fluid">

            <!-- RESPONSE -->

            <div
                id="responseMessage"
                style="display:none;"
            ></div>

            <div class="row justify-content-center">

                <div class="col-12 col-xl-10">

                    <div class="card card-outline card-primary shadow-sm">

                        <div class="card-header">

                            <h3 class="card-title">

                                Book Information

                            </h3>

                        </div>

                        <!-- FORM -->

                        <form
                            id="bookForm"
                            autocomplete="off"
                        >

                            <div class="card-body">

                                <div class="row">

                                    <!-- BOOK TITLE -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                Book Title *

                                            </label>

                                            <input
                                                type="text"
                                                name="book_title"
                                                id="book_title"
                                                class="form-control"
                                                maxlength="255"
                                                placeholder="Enter book title"
                                                required
                                            >

                                        </div>

                                    </div>

                                    <!-- BOOK NO -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                Book Number

                                            </label>

                                            <input
                                                type="text"
                                                name="book_no"
                                                id="book_no"
                                                class="form-control"
                                                maxlength="100"
                                                placeholder="Enter book number"
                                            >

                                        </div>

                                    </div>

                                    <!-- ISBN -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                ISBN Number

                                            </label>

                                            <input
                                                type="text"
                                                name="isbn_no"
                                                id="isbn_no"
                                                class="form-control"
                                                maxlength="100"
                                                placeholder="Enter ISBN number"
                                            >

                                        </div>

                                    </div>

                                    <!-- PUBLISHER -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                Publisher

                                            </label>

                                            <input
                                                type="text"
                                                name="publish"
                                                id="publish"
                                                class="form-control"
                                                maxlength="255"
                                                placeholder="Enter publisher name"
                                            >

                                        </div>

                                    </div>

                                    <!-- AUTHOR -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                Author

                                            </label>

                                            <input
                                                type="text"
                                                name="author"
                                                id="author"
                                                class="form-control"
                                                maxlength="255"
                                                placeholder="Enter author name"
                                            >

                                        </div>

                                    </div>

                                    <!-- SUBJECT -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                Subject

                                            </label>

                                            <input
                                                type="text"
                                                name="subject"
                                                id="subject"
                                                class="form-control"
                                                maxlength="255"
                                                placeholder="Enter subject"
                                            >

                                        </div>

                                    </div>

                                    <!-- RACK -->

                                    <div class="col-md-4">

                                        <div class="form-group">

                                            <label>

                                                Rack Number

                                            </label>

                                            <input
                                                type="text"
                                                name="rack_no"
                                                id="rack_no"
                                                class="form-control"
                                                maxlength="50"
                                                placeholder="Rack number"
                                            >

                                        </div>

                                    </div>

                                    <!-- QTY -->

                                    <div class="col-md-4">

                                        <div class="form-group">

                                            <label>

                                                Quantity *

                                            </label>

                                            <input
                                                type="number"
                                                name="qty"
                                                id="qty"
                                                class="form-control"
                                                min="0"
                                                value="1"
                                                required
                                            >

                                        </div>

                                    </div>

                                    <!-- PRICE -->

                                    <div class="col-md-4">

                                        <div class="form-group">

                                            <label>

                                                Price

                                            </label>

                                            <input
                                                type="number"
                                                step="0.01"
                                                name="perunitcost"
                                                id="perunitcost"
                                                class="form-control"
                                                min="0"
                                                value="0"
                                            >

                                        </div>

                                    </div>

                                    <!-- DATE -->

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>

                                                Purchase Date

                                            </label>

                                            <input
                                                type="date"
                                                name="postdate"
                                                id="postdate"
                                                class="form-control"
                                                value="<?= date('Y-m-d') ?>"
                                            >

                                        </div>

                                    </div>

                                    <!-- DESCRIPTION -->

                                    <div class="col-12">

                                        <div class="form-group">

                                            <label>

                                                Description

                                            </label>

                                            <textarea
                                                name="description"
                                                id="description"
                                                class="form-control"
                                                rows="4"
                                                placeholder="Write description..."
                                            ></textarea>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <!-- FOOTER -->

                            <div class="card-footer text-right">

                                <button
                                    type="submit"
                                    class="btn btn-primary"
                                    id="saveBtn"
                                >

                                    <i class="fas fa-save"></i>

                                    Save Book

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </section>

</div>

<!-- ============================================== -->
<!-- SCRIPTS -->
<!-- ============================================== -->

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="assets/js/books.js"></script>

<?php require_once __DIR__ . '/../include/footer.php'; ?>