vb_book/app/Views/book_form.php

247 lines
14 KiB
PHP
Executable File

<style>
/* CSS for the preview image */
.preview-image {
display: block;
/* Ensure the image is displayed as a block element */
width: 120px;
/* Set the desired width for passport size */
height: 160px;
/* Set the desired height for passport size */
object-fit: cover;
/* Maintain the aspect ratio and fill the container */
margin-top: 10px;
/* Add a top margin for spacing */
}
</style>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title"><?= $page_name; ?></h4>
<?php if (session()->getFlashdata('success') || session()->getFlashdata('error')) : ?>
<?php if (session()->getFlashdata('success')) : ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<?= session('success') ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php endif; ?>
<?php if (session()->getFlashdata('error')) : ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<?= session('error') ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php endif; ?>
<?php endif; ?>
<p class="sub-header"> </p>
<?php if (session()->getFlashdata('success')) : ?>
<div class="alert alert-success"><?= session()->getFlashdata('success') ?></div>
<?php endif; ?>
<form class="parsley-examples needs-validation" novalidate method="post" enctype="multipart/form-data" action="<?= base_url() . "insert_books"; ?>" id="myForm">
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<label for="title" class="col-form-label">Book Name<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="title" name="title" value="<?= isset($details['title']) ? $details['title'] : '' ?>" placeholder="Book Name" required />
</div>
<div class="form-group col-md-6">
<label for="author" class="col-form-label">Author </label>
<input type="text" class="form-control" id="author" name="author" value="<?= isset($details['author']) ? $details['author'] : '' ?>" placeholder="Author" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="publisher" class="col-form-label">Publisher Name</label>
<input type="text" class="form-control" id="publisher" name="publisher" placeholder="Publisher Name" value="<?= isset($details['publisher']) ? $details['publisher'] : '' ?>" />
</div>
<div class="form-group col-md-6">
<label for="publication_date" class="col-form-label">Publication Date</label>
<input type="date" class="form-control" id="publication_date" name="publication_date" value="<?= isset($details['publication_date']) ? $details['publication_date'] : '' ?>" max="<?= date('Y-m-d'); ?>" placeholder="Publication Date">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="publishers_code" class="col-form-label">Publisher Code <span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="publishers_code" name="publishers_code" placeholder="Publisher Code" value="<?= isset($details['publishers_code']) ? $details['publishers_code'] : '' ?>" required />
</div>
<div class="form-group col-md-6">
<label for="isbn_code" class="col-form-label">ISBN Code</label>
<input type="text" class="form-control" id="isbn_code" name="isbn_code" value="<?= isset($details['isbn_code']) ? $details['isbn_code'] : '' ?>" placeholder="ISBN Code" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="language" class="col-form-label">Language</label>
<input type="text" class="form-control" id="language" name="language" placeholder="Language" value="<?= isset($details['language']) ? $details['language'] : '' ?>" />
</div>
<div class="form-group col-md-4">
<label for="page_count" class="col-form-label">Page Count<span class="text-danger"></span></label>
<input type="number" class="form-control" id="page_count" name="page_count" placeholder="Page Count" value="<?= isset($details['page_count']) ? $details['page_count'] : '' ?>" />
</div>
<div class="form-group col-md-4">
<label for="price" class="col-form-label">Price<span class="text-danger"> *</span></label>
<input type="number" class="form-control" id="price" name="price" placeholder="Price" required value="<?= isset($details['price']) ? $details['price'] : '' ?>" />
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label for="description" class="col-form-label">Description</label>
<textarea class="form-control" id="description" name="description" placeholder="Description" rows="6"><?= isset($details['description']) ? $details['description'] : '' ?></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="tax" class="col-form-label">TAX</label>
<input type="text" class="form-control" id="tax" name="tax" placeholder="TAX" value="<?= isset($details['tax']) ? $details['tax'] : '' ?>" />
</div>
<div class="form-group">
<label for="category_id" class="col-form-label">Category</label>
<select class="form-control" id="category_id" name="category_id">
<option>Select the Category of the Book</option>
<?php foreach ($categories as $category) { ?>
<option value="<?php echo $category['id']; ?>" <?php if (isset($details['category_id']) && ($details['category_id'] === $category['id'])) echo "selected"; ?>>
<?php echo $category['name']; ?>
</option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="form-row">
<?php if (!empty($details['img_name'])) { ?>
<div class="form-group col-md-4 mt-3">
<div class="media">
<img src="<?= base_url('public/uploads/' . $details['img_name']) ?>" alt="Image Cover" height="50" class="preview-image d-flex align-self-start rounded mr-2">
<div class="media-body">
<h5 class="mt-0">Existing Image</h5>
<p class="mb-1"><?= $details['img_name']; ?></p>
<input type="hidden" id="existing_img_name" name="existing_img_name" placeholder="hidden Field for Image Cover name" readonly value="<?= $details['img_name']; ?>" />
</div>
</div>
</div>
<?php } ?>
<div class="form-group col-md-4">
<label for="img_name" class="col-form-label">Image</label>
<input type="file" name="img_name" value="<?= isset($details['img_name']) ? $details['img_name'] : '' ?>" accept="image/*" onchange="validateFile(this)" />
<div id="error_message" style="color: red;"></div>
</div>
</div>
</div>
<input type="hidden" id="book_id" name="book_id" placeholder="hidden for book id" value="<?= isset($details['book_id']) ? $details['book_id'] : '' ?>" />
<input type="hidden" id="business_id" name="business_id" placeholder="hidden for business id" value="<?= $session_bid ?>" />
<?php if (!empty($details)) { ?>
<div class="form-group text-right m-b-0 checkbox checkbox-purple">
<input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($details) && $details['isactive'] == 1 ? 'checked' : '' ?>>
<label for="isactive"> Is Active</label>
</div>
<br>
<?php } ?>
<div class="form-group text-right m-b-0">
<button class="btn btn-success waves-effect waves-light mr-1" id="submitBtn" type="submit">
Submit
</button>
<button type="reset" class="btn btn-primary waves-effect mr-1">
Reset
</button>
<a href="<?= base_url() . "book_list"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
</div>
</div>
</form>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div><!-- end row -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const coverPictureInput = documenxt.getElementById("cover_picture");
const imagePreviewContainer = document.querySelector(".image-previews");
coverPictureInput.addEventListener("change", function(event) {
// imagePreviewContainer.innerHTML = ""; // Clear previous previews
const selectedImages = Array.from(event.target.files);
selectedImages.forEach(function(image, index) {
const imageWrapper = document.createElement("div");
imageWrapper.classList.add("mr-3");
const imagePreview = document.createElement("img");
imagePreview.src = URL.createObjectURL(image);
imagePreview.classList.add("preview-image");
imagePreview.style.width = "120px"; // Set width as needed
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.classList.add("image-checkbox");
checkbox.checked = false; // Set default as unchecked
imageWrapper.appendChild(checkbox);
imageWrapper.appendChild(imagePreview);
imagePreviewContainer.appendChild(imageWrapper);
});
});
});
</script>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var form = event.target;
if (!form.checkValidity()) {
event.preventDefault();
form.reportValidity();
$('#submitBtn').prop('disabled', false);
alert('Please fill out all required fields correctly.');
} else {
$('#submitBtn').prop('disabled', true);
}
});
</script>
<script>
const DateInput = document.getElementById("publication_date");
// Get the current date
const currentDate = new Date();
// Calculate the min and max date strings
const minDate = "YYYY-MM-DD"; // Replace with your desired minimum date
const maxDate = currentDate.toISOString().split("T")[0]; // Today's date in YYYY-MM-DD format
// Set the min and max date attributes
DateInput.setAttribute("max", maxDate);
</script>
<script>
function validateFile(input) {
const file = input.files[0];
const errorMessage = document.getElementById("error_message");
if (file) {
if (file.type.startsWith("image/")) {
// It's an image file, no error
errorMessage.textContent = "";
} else {
// Invalid file type
errorMessage.textContent = "Invalid file type. Please select an image.";
input.value = ""; // Clear the input field
}
}
}
</script>