{{-- <div class="card my-4 pt-2 mt-0">
    <div class="card-body">

        <!-- Adjusted margin top div -->
        <div class="row">
            <div class="col-md-6">
                <p style="text-align:left;" class="mt-0 text-dark ps-1">
                    Add new resource, then click Submit.&nbsp;
                    <span style="color:red">*</span> - required fields.
                </p>
            </div>
            <!-- PRINT EXCEL UPLOAD -->
            <div class="col-md-6 d-flex justify-content-end">
                @include('section.upload-excel-nonprint')
            </div>
        </div>

        <div class="container pt-2" id="container-content">
            <div class="container mt-0" style="max-width: 1000px;">
                <p id="title_message" class="col-12" style="display:none;color:red;"></p>
                <form id="add_form" method="post" class="row g-3" autocomplete="off">
                    @csrf
                    <!-- Include Cropper.js -->
                     <!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="" -->
                     <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

                   <!-- Image Cover -->
                   <div class="col-md-6">
                        <label for="coverImage" class="form-label">Book Cover</label>

                        <!-- Clickable Container -->
                        <div id="imageContainer" class="mb-3" style="width: 400px; height: 600px; overflow: hidden; border: 1px solid #ccc; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;">
                            <i id="previewImage" class="fas fa-image" style="font-size: 50px; color: gray;"></i>
                            <img id="imagePreview" src="" alt="Image preview" style="max-width: 100%; max-height: 100%; display: none;">
                            <p style="margin-top: 10px; color: black; text-decoration: none;">Click to add a book cover image.</p>
                            <div id="imgtypaddlr" class="imgtype">Image file types accepted only: .jpg, .jpeg, and .png</div>

                        </div>

                        <input type="file" name="image" id="coverImageUpload" accept="image/*" class="form-control d-none" />
                    </div>

                    <!-- Modal for Cropping -->
                    <div id="cropModal" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Crop and Rotate Image</h5>
                                    <button type="button" class="close" id="closeModal" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="img-container">
                                        <img name = "cropImage" id="cropImage" style="max-width: 100%;">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" id="cancelModal" data-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-warning" id="rotateLeft">Rotate Left</button>
                                    <button type="button" class="btn btn-warning" id="rotateRight">Rotate Right</button>
                                    <button type="button" class="btn btn-primary" id="cropAndSave">Crop & Save</button>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Title to Link/URL inputs -->
                    <div class="col-md-6">

                        @if (session('authority_level') == 3)
                            <div class="col-md-12">
                                <!-- Input for Library , required field -->
                                <label for="library" class="form-label">Library Hub<span class="text-danger">*</span></label>
                                <select type="text" class="form-select" id="library" name="library" required>
                                    <option value="" selected disabled>Select Library</option>
                                </select>
                            </div>
                        @endif

                        <div class="col-md-12">
                            <!-- Input for Title Name (Required) -->
                            <label for="title_name" class="form-label">Title<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title_name" name="title_name"
                                placeholder="Start typing..." required>
                        </div>

                        <!-- Hidden input to store Title ID -->
                        <input type="hidden" id="title_id" name="title_id">

                        <!-- Container for title suggestions -->
                        <div id="title_suggestions" class="col-12"></div>

                        <div class="col-md-12 mt-3">
                            <!-- Dropdown for selecting Type (Required) -->
                            <label for="type" class="form-label">Type<span class="text-danger">*</span></label>
                            <select id="type" name="type" class="form-select" required>
                                <option value="" selected disabled>Select Type</option>
                            </select>
                        </div>

                        <div class="col-md-12 mt-3">
                            <!-- Input for Brand Name -->
                            <label for="brand" class="form-label">Brand<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="brand_name" name="brand_name"
                                placeholder="Brand">

                            <!-- Hidden input to store Brand ID -->
                            <input type="hidden" id="brand_id" name="brand_id">

                            <!-- Container for brand suggestions with scrollable area -->
                            <div id="brand_suggestions" style="max-height: 200px; overflow-y: auto;" class="col-12">
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <!-- Input for Version Number -->
                            <label for="version" class="form-label">Version Number<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="version" name="version"
                                placeholder="Version Number">
                        </div>

                        <div class="col-md-12 mt-3">
                            <!-- Input for Model -->
                            <label for="model" class="form-label">Model</label>
                            <input type="text" class="form-control" id="model" name="model"
                                placeholder="Model">
                        </div>

                        <div class="col-md-12 mt-3">
                            <!-- Input for Code (Number type) -->
                            <label for="code" class="form-label">Code</label>
                            <input type="number" class="form-control" id="code" name="code"
                                placeholder="Code">
                        </div>

                        <div class="col-md-12 mt-3">
                            <!-- Input for Size/Dimension -->
                            <label for="size" class="form-label">Size/Dimension</label>
                            <input type="text" class="form-control" id="size" name="size"
                                placeholder="Size/Dimension">
                        </div>

                        <div class="col-md-12 mt-3">
                            <!-- Input for Link/URL -->
                            <label for="link" class="form-label">Link/URL</label>
                            <input type="text" class="form-control" id="link" name="link"
                                placeholder="Link/URL">
                        </div>
                    </div>

                    <div class="col-12">
                        <label for="subject_gradelevel" class="form-label">
                            Subjects and Grade Levels<span class="text-danger">*</span>
                        </label>

                        <!-- Scrollable Nav Tabs -->
                        <div class="overflow-auto" style="white-space: nowrap;">
                            <ul class="nav nav-tabs d-none d-md-flex flex-nowrap" id="subjectGradeLevelTabs"
                                role="tablist" style="display: inline-flex; min-width: 100%;">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="early-grade-tab" data-bs-toggle="tab"
                                        data-bs-target="#early-grade" type="button" role="tab"
                                        aria-controls="early-grade" aria-selected="true">Early Grade</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="intermediate-tab" data-bs-toggle="tab"
                                        data-bs-target="#intermediate" type="button" role="tab"
                                        aria-controls="intermediate" aria-selected="false">Intermediate</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="junior-high-tab" data-bs-toggle="tab"
                                        data-bs-target="#junior-high" type="button" role="tab"
                                        aria-controls="junior-high" aria-selected="false">Junior High School</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="senior-high-tab" data-bs-toggle="tab"
                                        data-bs-target="#senior-high" type="button" role="tab"
                                        aria-controls="senior-high" aria-selected="false">Senior High School</button>
                                </li>
                            </ul>
                        </div>

                        <!-- Tab Content -->
                        <div class="tab-content d-none" id="subjectGradeLevelContent">
                            <div class="tab-pane fade show active text-center" id="early-grade" role="tabpanel"
                                aria-labelledby="early-grade-tab">
                                <div id="subject-gradelevel-container-1"></div>
                            </div>
                            <div class="tab-pane fade text-center" id="intermediate" role="tabpanel"
                                aria-labelledby="intermediate-tab">
                                <div id="subject-gradelevel-container-2"></div>
                            </div>
                            <div class="tab-pane fade text-center" id="junior-high" role="tabpanel"
                                aria-labelledby="junior-high-tab">
                                <div id="subject-gradelevel-container-3"></div>
                            </div>
                            <div class="tab-pane fade text-center" id="senior-high" role="tabpanel"
                                aria-labelledby="senior-high-tab">
                                <div id="subject-gradelevel-container-4-wrapper"
                                    style="overflow-x: auto; white-space: nowrap;">
                                    <div id="subject-gradelevel-container-4"
                                        style="display: inline-block; min-width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" id="subject_gradelevel_ids" name="subject_gradelevel_ids" readonly
                        required />

                    <div class="col-12 p-2 mb-0">
                        <div class="col-12 p-4"
                            style="border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9;">
                            <label class="form-label">Acquisition and Delivery</label>
                            <hr style="border: 1px solid #ccc; margin: 10px 0;">
                            <div class="row">
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="date_acquired" class="form-label">Date Acquired/Delivered<span
                                            class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="date_acquired"
                                        name="date_acquired" required>
                                    <script>
                                        $(document).ready(function() {
                                            var today = new Date().toISOString().split('T')[0];
                                            $('#date_acquired').attr('max', today);
                                        });
                                    </script>
                                </div>
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="source" class="form-label">Source<span
                                            class="text-danger">*</span></label>
                                    <select id="source" name="source" class="form-select" required>
                                        <option value="" selected disabled>Select Source</option>
                                    </select>
                                </div>
                            </div>
                            <div id="status-container"
                                class="d-flex flex-column flex-md-row align-items-start gap-3 mt-3 w-100"></div>
                            <div class="col-12 mt-3">
                                <label for="remarks" class="form-label">Remarks</label>
                                <textarea class="form-control" id="remarks" name="remarks"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 d-flex justify-content-center">
                        <button id="add-button" type="submit" class="shadow-dark submitbtn mx-2">Submit</button>
                        <button id="cancel-button" type="button" class="shadow-dark loginbtn">Cancel</button>
                        <script>
                            document.getElementById("cancel-button").addEventListener("click", function(event) {
                                location.reload();
                            });
                        </script>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> --}}

<div class="card my-4 pt-2 mt-0">
    <div class="card-body">
              <div class="px-2 py-5 text-center">
                    <h4 class="text-muted">Future Feature</h4>
                    <p>This section is under development and will be available in a future update.</p>
                </div>
                {{-- Form is temporarily removed while the feature is unavailable --}}
                {{--
                <p id="title_message" class="col-12" style="display:none;color:red;"></p>
                <form id="add_form" method="post" class="row g-3" autocomplete="off">
                    @csrf
                    @include('section.add-resource-nonprint-form')
                </form>
                --}}
    </div>
</div>




<style>
    #subjectGradeLevelContent table th {
        text-align: center;
    }

    .table tbody tr:last-child td {
        border-width: 0 1px !important;
    }

    .previewImagecss {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
</style>