<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도서 등록</title>
<style>
/* CSS 스타일은 여기에 작성하십시오. */
</style>
</head>
<body>
<form th:action="@{/book/create}" th:object="${bookForm}" method="post" enctype="multipart/form-data">
<table style="table-layout:fixed; word-wrap:break-word;clear:both;">
<div class="article-detail" style="width: 1000px;">
<div class="card-header" style="width: 1000px;">
<!-- 카테고리 선택 버튼 -->
<button class="btn btn-sm btn-outline-secondary" onclick="toggleCategoryModal()" type="button">카테고리 선택</button>
<div class="mb-3">
<label for="subject" class="form-label">제목</label>
<input type="text" th:field="*{subject}" class="form-control">
<span th:if="${#fields.hasErrors('subject')}" th:errors="*{subject}" class="text-danger"></span>
</div>
<div class="mb-3">
<label for="content" class="form-label">내용</label>
<textarea th:field="*{content}" class="form-control" rows="10"></textarea>
<span th:if="${#fields.hasErrors('content')}" th:errors="*{content}" class="text-danger"></span>
</div>
<div class="mb-3">
<label for="price" class="form-label">가격</label>
<input type="number" th:field="*{price}" class="form-control">
<span th:if="${#fields.hasErrors('price')}" th:errors="*{price}" class="text-danger"></span>
</div>
<div class="mb-3">
<label for="publisher" class="form-label">출판사</label>
<input type="text" th:field="*{publisher}" class="form-control">
<span th:if="${#fields.hasErrors('publisher')}" th:errors="*{publisher}" class="text-danger"></span>
</div>
<div class="mb-3">
<label for="bookIntroduce" class="form-label">책 소개</label>
<textarea th:field="*{bookIntroduce}" class="form-control" rows="5"></textarea>
<span th:if="${#fields.hasErrors('bookIntroduce')}" th:errors="*{bookIntroduce}" class="text-danger"></span>
</div>
<div class="mb-3">
<label for="discount" class="form-label">할인율</label>
<input type="number" th:field="*{discount}" class="form-control">
<span th:if="${#fields.hasErrors('discount')}" th:errors="*{discount}" class="text-danger"></span>
</div>
<div class="mb-3">
<label for="image" class="form-label">이미지 업로드</label>
<input type="file" id="image" name="file" accept="image/*">
<!-- 이미지 미리보기 -->
<img id="preview" src="#" alt="미리보기" style="max-width: 200px; max-height: 200px; display: none;">
</div>
<input type="submit" value="저장하기" class="btn btn-primary my-2">
</div>
</div>
</table>
</form>
<!-- 모달 부트스트랩 시작 -->
<div aria-hidden="true" aria-labelledby="reportModalArticle" class="modal fade" id="reportArticleModal" tabindex="-1" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="reportModalArticle">카테고리 선택</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="was-validated" method="post" th:action="@{/book/category}">
<div class="modal-body">
<div class="mb-3">
<label class="col-form-label" for="validationTextareaArticle">내용</label>
<textarea class="form-control" id="validationTextareaArticle" name="categoryForm.category" placeholder="내용을 입력해주세요." required></textarea>
</div>
<!-- 라디오 버튼에 이벤트 리스너 추가 -->
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault1" name="categoryType" onchange="handleRadioSelection()" type="radio" value="베스트셀러">
<label class="form-check-label" for="flexRadioDefault1">베스트셀러</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault2" name="categoryType" onchange="handleRadioSelection()" type="radio" value="외국도서">
<label class="form-check-label" for="flexRadioDefault2">외국도서</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault3" name="categoryType" onchange="handleRadioSelection()" type="radio" value="국내도서">
<label class="form-check-label" for="flexRadioDefault3">국내도서</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault4" name="categoryType" onchange="handleRadioSelection()" type="radio" value="무료도서">
<label class="form-check-label" for="flexRadioDefault4">무료도서</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault5" name="categoryType" onchange="handleRadioSelection()" type="radio" value="신간도서">
<label class="form-check-label" for="flexRadioDefault5">신간도서</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" onclick="handleRadioSelection()" type="submit">카테고리 저장</button>
</div>
</form>
</div>
</div>
</div>
<script>
function toggleCategoryModal() {
var modal = document.getElementById("reportArticleModal");
if (modal.style.display === "none" || modal.style.display === "") {
modal.style.display = "block";
} else {
modal.style.display = "none";
}
}
</script>
</body>
</html>
good