File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090028/Shop/views/reviews/edit.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/reviews') ?>" 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-pencil-square text-primary me-2"></i>แก้ไขรีวิวสินค้า</h4> <p class="text-muted small mb-0">คุณสามารถปรับปรุงคะแนน ความคิดเห็น หรือรูปภาพประกอบได้</p> </div> <a href="<?= url('/account/reviews') ?>" class="btn btn-outline-secondary btn-sm"> <i class="bi bi-arrow-left me-1"></i> กลับไปรายการรีวิว </a> </div> <!-- 1. Product Summary --> <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($review['product_main_image'])): ?> <img src="<?= asset('/' . ltrim($review['product_main_image'], '/')) ?>" alt="<?= e($review['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($review['store_name']) ?> </span> <h6 class="fw-bold text-dark mb-1 text-truncate"><?= e($review['product_name']) ?></h6> <?php if (!empty($review['variation_summary'])): ?> <p class="text-muted small mb-0">ตัวเลือก: <?= e($review['variation_summary']) ?></p> <?php endif; ?> <small class="text-muted">คำสั่งซื้อ: <code>#<?= e($review['order_no']) ?></code></small> </div> </div> <!-- 2. Edit Form --> <form action="<?= url('/reviews/' . (int)$review['id'] . '/update') ?>" method="POST" enctype="multipart/form-data" id="editReviewForm"> <?= Security::csrfField() ?> <!-- 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 <?= $s <= (int)$review['rating'] ? 'bi-star-fill' : '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="<?= (int)$review['rating'] ?>" required> <div class="fw-semibold text-primary" id="ratingLabel"><?= (int)$review['rating'] ?> ดาว</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"><?= mb_strlen($review['review_text'] ?? '') ?> / 2,000</span> </div> <textarea name="review_text" id="reviewTextInput" class="form-control" rows="4" maxlength="2000" placeholder="แชร์ประสบการณ์การใช้งาน..."><?= e($review['review_text'] ?? '') ?></textarea> </div> <!-- Existing Images Management --> <?php if (!empty($review['images'])): ?> <div class="mb-4"> <label class="form-label fw-bold text-dark d-block mb-2"> <i class="bi bi-images me-1 text-primary"></i> รูปภาพปัจจุบัน <span class="text-muted fw-normal small">(คลิกที่กากบาทเพื่อลบรูปที่ไม่ต้องการ)</span> </label> <div class="d-flex flex-wrap gap-3"> <?php foreach ($review['images'] as $img): ?> <div class="position-relative rounded-2 overflow-hidden border bg-white" style="width: 90px; height: 90px;"> <img src="<?= asset('/' . ltrim($img['image_path'], '/')) ?>" class="w-100 h-100 object-fit-cover"> <label class="position-absolute top-0 end-0 m-1 bg-danger text-white rounded-circle p-1 d-flex align-items-center justify-content-center cursor-pointer shadow-sm" style="width: 22px; height: 22px; cursor: pointer;" title="ลบรูปนี้"> <input type="checkbox" name="delete_image_ids[]" value="<?= (int)$img['id'] ?>" class="d-none delete-img-check"> <i class="bi bi-trash-fill" style="font-size: 0.65rem;"></i> </label> </div> <?php endforeach; ?> </div> </div> <?php endif; ?> <!-- New Image Uploads --> <div class="mb-4"> <label class="form-label fw-bold text-dark d-block mb-1"> <i class="bi bi-plus-circle me-1 text-primary"></i> เพิ่มรูปภาพใหม่ <span class="text-muted fw-normal small">(รวมไม่เกิน 5 รูปภาพ)</span> </label> <div class="border rounded-3 p-3 bg-light"> <input type="file" name="new_images[]" id="newImagesInput" class="form-control" accept="image/jpeg,image/png,image/webp" multiple> <div id="newPreviewContainer" class="d-flex flex-wrap gap-2 mt-3"></div> </div> </div> <!-- Anonymous 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" <?= !empty($review['is_anonymous']) ? 'checked' : '' ?>> <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="btnUpdateReview"> <i class="bi bi-check-circle me-1"></i> บันทึกการเปลี่ยนแปลง </button> <a href="<?= url('/account/reviews') ?>" 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 newImagesInput = document.getElementById('newImagesInput'); const newPreviewContainer = document.getElementById('newPreviewContainer'); const editForm = document.getElementById('editReviewForm'); const btnUpdate = document.getElementById('btnUpdateReview'); 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 + ' ดาว'); } 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'; }); } // Delete image visual feedback document.querySelectorAll('.delete-img-check').forEach(chk => { chk.addEventListener('change', function() { const container = this.closest('.position-relative'); if (this.checked) { container.style.opacity = '0.35'; container.style.filter = 'grayscale(100%)'; } else { container.style.opacity = '1'; container.style.filter = 'none'; } }); }); // New images preview if (newImagesInput && newPreviewContainer) { newImagesInput.addEventListener('change', function() { newPreviewContainer.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">'; newPreviewContainer.appendChild(thumb); }; reader.readAsDataURL(file); }); }); } // Submit state if (editForm && btnUpdate) { editForm.addEventListener('submit', function() { btnUpdate.disabled = true; btnUpdate.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.25 | proxy | phpinfo | Settings