File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090028/Shop/views/reviews/create.php

Back
<!-- Breadcrumb --> <nav aria-label="breadcrumb" class="mb-4"> <ol class="breadcrumb small"> <li class="breadcrumb-item"><a href="<?= url('/') ?>" class="text-decoration-none">หน้าแรก</a></li> <li class="breadcrumb-item"><a href="<?= url('/account/orders') ?>" class="text-decoration-none">คำสั่งซื้อของฉัน</a></li> <li class="breadcrumb-item active" aria-current="page">เขียนรีวิวสินค้า</li> </ol> </nav> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="cargoo-card p-4 p-md-5 mb-4"> <div class="d-flex align-items-center justify-content-between pb-3 mb-4 border-bottom"> <div> <h4 class="fw-bold text-dark mb-1"><i class="bi bi-star-fill text-warning me-2"></i>ให้คะแนนและรีวิวสินค้า</h4> <p class="text-muted small mb-0">ความคิดเห็นของคุณช่วยให้ผู้ซื้อท่านอื่นตัดสินใจได้ดียิ่งขึ้น</p> </div> <a href="<?= url('/account/orders/' . e($item['order_no'])) ?>" class="btn btn-outline-secondary btn-sm"> <i class="bi bi-arrow-left me-1"></i> กลับไปคำสั่งซื้อ </a> </div> <!-- 1. Purchased Item Showcase Card --> <div class="p-3 bg-light rounded-3 border d-flex align-items-center gap-3 mb-4"> <div class="rounded-2 overflow-hidden border bg-white d-flex align-items-center justify-content-center flex-shrink-0" style="width: 72px; height: 72px;"> <?php if (!empty($item['product_main_image'])): ?> <img src="<?= asset('/' . ltrim($item['product_main_image'], '/')) ?>" alt="<?= e($item['product_name']) ?>" class="w-100 h-100 object-fit-contain"> <?php else: ?> <i class="bi bi-box-seam text-secondary fs-3"></i> <?php endif; ?> </div> <div class="flex-grow-1 min-w-0"> <span class="badge bg-primary-subtle text-primary border border-primary-subtle small px-2 py-0 mb-1"> <i class="bi bi-shop me-1"></i><?= e($item['store_name']) ?> </span> <h6 class="fw-bold text-dark mb-1 text-truncate"><?= e($item['product_name']) ?></h6> <?php if (!empty($item['variation_summary'])): ?> <p class="text-muted small mb-0">ตัวเลือก: <?= e($item['variation_summary']) ?></p> <?php endif; ?> <small class="text-muted">คำสั่งซื้อ: <code>#<?= e($item['order_no']) ?></code></small> </div> </div> <!-- 2. Review Form --> <form action="<?= url('/reviews/store') ?>" method="POST" enctype="multipart/form-data" id="reviewForm"> <?= Security::csrfField() ?> <input type="hidden" name="order_item_id" value="<?= (int)$item['id'] ?>"> <!-- Star Rating Widget --> <div class="mb-4 text-center p-4 bg-white border rounded-3"> <label class="form-label fw-bold text-dark d-block mb-2">คุณภาพสินค้าโดยรวม <span class="text-danger">*</span></label> <div class="star-rating-widget d-inline-flex gap-2 mb-2" id="starRatingContainer"> <?php for ($s = 1; $s <= 5; $s++): ?> <i class="bi bi-star star-icon cursor-pointer fs-2 text-warning" data-rating="<?= $s ?>" style="cursor: pointer; transition: transform 0.15s ease;" title="<?= $s ?> ดาว"></i> <?php endfor; ?> </div> <input type="hidden" name="rating" id="ratingInput" value="5" required> <div class="fw-semibold text-primary" id="ratingLabel">5 ดาว - ยอดเยี่ยมมาก</div> </div> <!-- Review Text --> <div class="mb-4"> <div class="d-flex justify-content-between align-items-center mb-2"> <label for="reviewTextInput" class="form-label fw-bold text-dark mb-0"> รายละเอียดความประทับใจ <span class="text-muted fw-normal small">(ไม่บังคับ)</span> </label> <span class="text-muted small" id="charCounter">0 / 2,000</span> </div> <textarea name="review_text" id="reviewTextInput" class="form-control" rows="4" maxlength="2000" placeholder="แชร์ประสบการณ์การใช้งาน เช่น คุณภาพสินค้า, ความคุ้มค่า, การจัดส่ง หรือบริการจากร้านค้า..."></textarea> </div> <!-- Multi-image Upload Area --> <div class="mb-4"> <label class="form-label fw-bold text-dark d-block mb-1"> <i class="bi bi-camera me-1 text-primary"></i> แนบรูปภาพประกอบ <span class="text-muted fw-normal small">(สูงสุด 5 รูปภาพ, ขนาดไม่เกิน 5MB ต่อรูป)</span> </label> <div class="border rounded-3 p-3 bg-light"> <input type="file" name="images[]" id="reviewImagesInput" class="form-control" accept="image/jpeg,image/png,image/webp" multiple> <div id="imagePreviewContainer" class="d-flex flex-wrap gap-2 mt-3"></div> </div> </div> <!-- Anonymous Review Option --> <div class="form-check mb-4 p-3 bg-light rounded-3 border"> <input class="form-check-input ms-0 me-2" type="checkbox" name="is_anonymous" value="1" id="isAnonymousInput"> <label class="form-check-label small text-dark fw-medium" for="isAnonymousInput"> <i class="bi bi-incognito me-1 text-secondary"></i> รีวิวแบบไม่ระบุชื่อ (ระบบจะซ่อนชื่อจริงของคุณในการแสดงผลสาธารณะ) </label> </div> <!-- Action Buttons --> <div class="d-flex gap-3 pt-2"> <button type="submit" class="btn btn-cargoo-primary px-5 py-2 fw-bold flex-grow-1" id="btnSubmitReview"> <i class="bi bi-check-circle me-1"></i> ส่งรีวิวสินค้า </button> <a href="<?= url('/account/orders/' . e($item['order_no'])) ?>" class="btn btn-outline-secondary px-4 py-2"> ยกเลิก </a> </div> </form> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const starIcons = document.querySelectorAll('.star-icon'); const ratingInput = document.getElementById('ratingInput'); const ratingLabel = document.getElementById('ratingLabel'); const textInput = document.getElementById('reviewTextInput'); const charCounter = document.getElementById('charCounter'); const imagesInput = document.getElementById('reviewImagesInput'); const previewContainer = document.getElementById('imagePreviewContainer'); const reviewForm = document.getElementById('reviewForm'); const btnSubmit = document.getElementById('btnSubmitReview'); const ratingDescriptions = { 1: '1 ดาว - ควรปรับปรุง', 2: '2 ดาว - พอใช้', 3: '3 ดาว - ปานกลาง', 4: '4 ดาว - ดี', 5: '5 ดาว - ยอดเยี่ยมมาก' }; function updateStars(rating) { starIcons.forEach(icon => { const starVal = parseInt(icon.getAttribute('data-rating')); if (starVal <= rating) { icon.classList.remove('bi-star'); icon.classList.add('bi-star-fill'); } else { icon.classList.remove('bi-star-fill'); icon.classList.add('bi-star'); } }); ratingLabel.textContent = ratingDescriptions[rating] \|\| (rating + ' ดาว'); } // Initial 5 stars updateStars(5); starIcons.forEach(icon => { icon.addEventListener('mouseenter', function() { const hoverVal = parseInt(this.getAttribute('data-rating')); updateStars(hoverVal); }); icon.addEventListener('click', function() { const chosenVal = parseInt(this.getAttribute('data-rating')); ratingInput.value = chosenVal; updateStars(chosenVal); }); }); document.getElementById('starRatingContainer').addEventListener('mouseleave', function() { updateStars(parseInt(ratingInput.value) \|\| 5); }); // Character counter if (textInput && charCounter) { textInput.addEventListener('input', function() { charCounter.textContent = this.value.length + ' / 2,000'; }); } // Image preview handler if (imagesInput && previewContainer) { imagesInput.addEventListener('change', function() { previewContainer.innerHTML = ''; const files = Array.from(this.files).slice(0, 5); files.forEach((file) => { if (!file.type.startsWith('image/')) return; const reader = new FileReader(); reader.onload = function(e) { const thumb = document.createElement('div'); thumb.className = 'position-relative rounded-2 overflow-hidden border bg-white'; thumb.style.width = '80px'; thumb.style.height = '80px'; thumb.innerHTML = '<img src="' + e.target.result + '" class="w-100 h-100 object-fit-cover">'; previewContainer.appendChild(thumb); }; reader.readAsDataURL(file); }); }); } // Form submission state if (reviewForm && btnSubmit) { reviewForm.addEventListener('submit', function() { btnSubmit.disabled = true; btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>กำลังบันทึกรีวิว...'; }); } }); </script>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.26 | proxy | phpinfo | Settings