custom/plugins/theme/src/Resources/views/storefront/component/review/review-modal-inline.html.twig line 1

Open in your IDE?
  1. {% block product_review_modal_inline %}
  2. <!-- Inline CSS for Review Modal -->
  3. <style>
  4. .product-review-modal .star-rating {
  5.     display: flex;
  6.     gap: 4px;
  7.     margin-bottom: 0.5rem;
  8. }
  10. .product-review-modal .star-rating .star {
  11.     font-size: 1.5rem;
  12.     color: #ddd;
  13.     cursor: pointer;
  14.     transition: color 0.2s ease;
  15.     user-select: none;
  16. }
  18. .product-review-modal .star-rating .star:hover,
  19. .product-review-modal .star-rating .star.active {
  20.     color: #ffc107;
  21. }
  23. .product-review-modal .modal-content {
  24.     border-radius: 0.75rem;
  25.     border: none;
  26.     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  27. }
  29. .product-review-modal .modal-header {
  30.     background: linear-gradient(135deg, var(--bs-primary), #0056b3);
  31.     color: white;
  32.     border-radius: 0.75rem 0.75rem 0 0;
  33.     border-bottom: none;
  34. }
  36. .product-review-modal .modal-header .modal-title {
  37.     font-weight: 600;
  38.     font-size: 1.25rem;
  39.     text-transform: uppercase;
  40. }
  42. .product-review-modal .modal-header .btn-close {
  43.     filter: invert(1);
  44.     opacity: 0.8;
  45. }
  47. .product-review-modal .modal-header .btn-close:hover {
  48.     opacity: 1;
  49. }
  51. .product-review-modal .modal-body {
  52.     padding: 2rem;
  53. }
  55. .product-review-modal .review-step {
  56.     min-height: 200px;
  57.     display: flex;
  58.     flex-direction: column;
  59.     justify-content: center;
  60. }
  62. .product-review-modal .review-step.active {
  63.     animation: fadeIn 0.3s ease-in;
  64. }
  66. .product-review-modal .review-step h3,
  67. .product-review-modal .review-step h6 {
  68.     font-weight: 600;
  69.     color: var(--bs-dark);
  70.     text-transform: uppercase;
  71. }
  73. .product-review-modal #review-step-satisfaction {
  74.     text-align: center;
  75. }
  77. .product-review-modal #review-step-satisfaction .btn {
  78.     min-width: 150px;
  79.     font-weight: 500;
  80.     border-radius: 2rem;
  81.     padding: 0.75rem 2rem;
  82.     transition: all 0.3s ease;
  83. }
  85. .product-review-modal #review-step-satisfaction .btn:hover {
  86.     transform: translateY(-2px);
  87.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  88. }
  90. .product-review-modal .form-label {
  91.     font-weight: 600;
  92.     color: var(--bs-dark);
  93.     margin-bottom: 0.5rem;
  94. }
  96. .product-review-modal .form-control {
  97.     border-radius: 0.5rem;
  98.     border: 2px solid #e9ecef;
  99.     transition: border-color 0.3s ease;
  100. }
  102. .product-review-modal .form-control:focus {
  103.     border-color: var(--bs-primary);
  104.     box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  105. }
  107. .product-review-modal .form-control.is-valid {
  108.     border-color: var(--bs-success);
  109. }
  111. .product-review-modal .form-control.is-invalid {
  112.     border-color: var(--bs-danger);
  113. }
  115. .product-review-modal #review-step-success,
  116. .product-review-modal #review-step-error {
  117.     text-align: center;
  118.     min-height: 250px;
  119. }
  121. .product-review-modal .review-footer {
  122.     width: 100%;
  123.     display: flex;
  124.     justify-content: space-between;
  125.     align-items: center;
  126. }
  128. .product-review-modal #footer-satisfaction {
  129.     justify-content: center;
  130. }
  132. @keyframes fadeIn {
  133.     from { opacity: 0; transform: translateY(10px); }
  134.     to { opacity: 1; transform: translateY(0); }
  135. }
  137. @media (max-width: 768px) {
  138.     .product-review-modal .modal-body {
  139.         padding: 1.5rem;
  140.     }
  142.     .product-review-modal #review-step-satisfaction .btn {
  143.         width: 100%;
  144.         margin-bottom: 0.5rem;
  145.     }
  147.     .product-review-modal .star-rating {
  148.         justify-content: center;
  149.     }
  151.     .product-review-modal .star-rating .star {
  152.         font-size: 2rem;
  153.     }
  154. }
  155. </style>
  157. <div class="modal fade product-review-modal" id="productReviewModal" tabindex="-1" aria-labelledby="productReviewModalLabel" aria-hidden="true">
  158.     <div class="modal-dialog modal-lg">
  159.         <div class="modal-content">
  160.             <div class="modal-header">
  161.                 <h5 class="modal-title" id="productReviewModalLabel">
  162.                     {{ "review.modal.title"|trans|sw_sanitize }}
  163.                 </h5>
  164.             </div>
  166.             <div class="modal-body">
  167.                 <!-- Step 1: Satisfaction Question -->
  168.                 <div id="review-step-satisfaction" class="review-step active">
  169.                     <h3 class="mb-4 text-center">{{ "review.modal.satisfaction.title"|trans|sw_sanitize }}</h3>
  170.                     <p class="text-muted mb-4 text-center">{{ "review.modal.satisfaction.subtitle"|trans|sw_sanitize }}</p>
  172.                     <div class="d-flex justify-content-center gap-4">
  173.                         <button type="button" class="btn btn-success btn-lg px-5" id="satisfaction-yes">
  174.                             <i class="fas fa-thumbs-up me-2"></i>
  175.                             {{ "review.modal.satisfaction.yes"|trans|sw_sanitize }}
  176.                         </button>
  177.                         <button type="button" class="btn btn-outline-danger btn-lg px-5" id="satisfaction-no">
  178.                             <i class="fas fa-thumbs-down me-2"></i>
  179.                             {{ "review.modal.satisfaction.no"|trans|sw_sanitize }}
  180.                         </button>
  181.                     </div>
  182.                 </div>
  184.                 <!-- Step 2: Review Form -->
  185.                 <div id="review-step-form" class="review-step d-none">
  186.                     <h6 class="mb-4">{{ "review.modal.form.title"|trans|sw_sanitize }}</h6>
  188.                     <form id="reviewForm" novalidate>
  189.                         <input type="hidden" id="productId" name="productId" value="{{ page.product.id }}">
  190.                         <input type="hidden" id="productNumber" name="productNumber" value="{{ page.product.productNumber }}">
  192.                         <!-- Star Rating -->
  193.                         <div class="mb-4">
  194.                             <label class="form-label">{{ "review.modal.form.rating"|trans|sw_sanitize }} *</label>
  195.                             <div class="star-rating" id="starRating">
  196.                                 <span class="star" data-rating="1">★</span>
  197.                                 <span class="star" data-rating="2">★</span>
  198.                                 <span class="star" data-rating="3">★</span>
  199.                                 <span class="star" data-rating="4">★</span>
  200.                                 <span class="star" data-rating="5">★</span>
  201.                             </div>
  202.                             <input type="hidden" id="rating" name="rating" required>
  203.                             <div class="invalid-feedback">{{ "review.modal.form.rating.required"|trans|sw_sanitize }}</div>
  204.                         </div>
  206.                         <!-- First Name and Last Name in one row -->
  207.                         <div class="row mb-3">
  208.                             <div class="col-md-6">
  209.                                 <label for="reviewerFirstName" class="form-label">{{ "review.modal.form.firstName"|trans|sw_sanitize }} *</label>
  210.                                 <input type="text" class="form-control" id="reviewerFirstName" name="reviewerFirstName" required maxlength="50">
  211.                                 <div class="invalid-feedback">{{ "review.modal.form.firstName.required"|trans|sw_sanitize }}</div>
  212.                             </div>
  213.                             <div class="col-md-6">
  214.                                 <label for="reviewerLastName" class="form-label">{{ "review.modal.form.lastName"|trans|sw_sanitize }} *</label>
  215.                                 <input type="text" class="form-control" id="reviewerLastName" name="reviewerLastName" required maxlength="50">
  216.                                 <div class="invalid-feedback">{{ "review.modal.form.lastName.required"|trans|sw_sanitize }}</div>
  217.                             </div>
  218.                         </div>
  220.                         <!-- Email -->
  221.                         <div class="mb-3">
  222.                             <label for="reviewerEmail" class="form-label">{{ "review.modal.form.email"|trans|sw_sanitize }} *</label>
  223.                             <input type="email" class="form-control" id="reviewerEmail" name="reviewerEmail" required>
  224.                             <div class="invalid-feedback">{{ "review.modal.form.email.required"|trans|sw_sanitize }}</div>
  225.                         </div>
  227.                         <!-- Order Number -->
  228.                         <div class="mb-3">
  229.                             <label for="orderNumber" class="form-label">{{ "review.modal.form.orderNumber"|trans|sw_sanitize }} *</label>
  230.                             <input type="text" class="form-control" id="orderNumber" name="orderNumber" required>
  231.                             <div class="invalid-feedback">{{ "review.modal.form.orderNumber.required"|trans|sw_sanitize }}</div>
  232.                         </div>
  234.                         <!-- Comment -->
  235.                         <div class="mb-4">
  236.                             <label for="reviewComment" class="form-label">{{ "review.modal.form.comment"|trans|sw_sanitize }}</label>
  237.                             <textarea class="form-control" id="reviewComment" name="reviewComment" rows="4" maxlength="500" placeholder="{{ "review.modal.form.comment.placeholder"|trans|sw_sanitize }}"></textarea>
  238.                             <div class="form-text" id="commentCounter">0/500 Zeichen</div>
  239.                         </div>
  241.                         <!-- Privacy Notice -->
  242.                         <div class="mb-4">
  243.                             <div class="form-check">
  244.                                 <input class="form-check-input" type="checkbox" id="privacyAccept" name="privacyAccept" required>
  245.                                 <label class="form-check-label" for="privacyAccept">
  246.                                     {{ "review.modal.form.privacy"|trans|sw_sanitize|raw }}
  247.                                 </label>
  248.                                 <div class="invalid-feedback">{{ "review.modal.form.privacy.required"|trans|sw_sanitize }}</div>
  249.                             </div>
  250.                         </div>
  251.                     </form>
  252.                 </div>
  254.                 <!-- Success Message -->
  255.                 <div id="review-step-success" class="review-step d-none text-center">
  256.                     <div class="text-success mb-3">
  257.                         <i class="fas fa-check-circle fa-3x"></i>
  258.                     </div>
  259.                     <h6 class="mb-3">{{ "review.modal.success.title"|trans|sw_sanitize }}</h6>
  260.                     <p class="text-muted">{{ "review.modal.success.message"|trans|sw_sanitize }}</p>
  261.                 </div>
  263.                 <!-- Error Message -->
  264.                 <div id="review-step-error" class="review-step d-none text-center">
  265.                     <div class="text-danger mb-3">
  266.                         <i class="fas fa-exclamation-circle fa-3x"></i>
  267.                     </div>
  268.                     <h6 class="mb-3">{{ "review.modal.error.title"|trans|sw_sanitize }}</h6>
  269.                     <p class="text-muted" id="error-message">{{ "review.modal.error.message"|trans|sw_sanitize }}</p>
  270.                 </div>
  271.             </div>
  273.             <div class="modal-footer">
  274.                 <div id="footer-satisfaction" class="review-footer active">
  275.                     <!-- No buttons needed for satisfaction step -->
  276.                 </div>
  278.                 <div id="footer-form" class="review-footer d-none">
  279.                     <button type="button" class="btn btn-secondary" id="backToSatisfaction">
  280.                         {{ "review.modal.button.back"|trans|sw_sanitize }}
  281.                     </button>
  282.                     <button type="button" class="btn btn-primary" id="submitReview">
  283.                         <span class="submit-text">{{ "review.modal.button.submit"|trans|sw_sanitize }}</span>
  284.                         <span class="spinner-border spinner-border-sm d-none" role="status">
  285.                             <span class="visually-hidden">Loading...</span>
  286.                         </span>
  287.                     </button>
  288.                 </div>
  290.                 <div id="footer-success" class="review-footer d-none">
  291.                     <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
  292.                         {{ "review.modal.button.close"|trans|sw_sanitize }}
  293.                     </button>
  294.                 </div>
  296.                 <div id="footer-error" class="review-footer d-none">
  297.                     <button type="button" class="btn btn-secondary" id="tryAgain">
  298.                         {{ "review.modal.button.tryAgain"|trans|sw_sanitize }}
  299.                     </button>
  300.                     <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
  301.                         {{ "review.modal.button.cancel"|trans|sw_sanitize }}
  302.                     </button>
  303.                 </div>
  304.             </div>
  305.         </div>
  306.     </div>
  307. </div>
  309. <!-- Inline JavaScript for Review Modal -->
  310. <script>
  311. document.addEventListener('DOMContentLoaded', function() {
  312.     const modal = document.querySelector('#productReviewModal');
  313.     const form = document.querySelector('#reviewForm');
  315.     let currentStep = 'satisfaction';
  316.     let selectedRating = 0;
  318.     // Event Listeners
  319.     const satisfactionYes = document.getElementById('satisfaction-yes');
  320.     const satisfactionNo = document.getElementById('satisfaction-no');
  321.     const backButton = document.getElementById('backToSatisfaction');
  322.     const submitButton = document.getElementById('submitReview');
  323.     const tryAgainButton = document.getElementById('tryAgain');
  325.     satisfactionYes?.addEventListener('click', () => showStep('form'));
  326.     satisfactionNo?.addEventListener('click', handleSatisfactionNo);
  327.     backButton?.addEventListener('click', () => showStep('satisfaction'));
  328.     submitButton?.addEventListener('click', handleSubmitReview);
  329.     tryAgainButton?.addEventListener('click', () => showStep('form'));
  331.     // Star Rating
  332.     const starContainer = document.querySelector('#starRating');
  333.     const stars = starContainer?.querySelectorAll('.star');
  335.     stars?.forEach((star, index) => {
  336.         star.addEventListener('click', () => setRating(index + 1));
  337.         star.addEventListener('mouseenter', () => highlightStars(index + 1));
  338.     });
  340.     starContainer?.addEventListener('mouseleave', () => highlightStars(selectedRating));
  342.     // Comment Counter
  343.     const commentTextarea = document.getElementById('reviewComment');
  344.     const counter = document.getElementById('commentCounter');
  346.     commentTextarea?.addEventListener('input', () => {
  347.         const currentLength = commentTextarea.value.length;
  348.         counter.textContent = `${currentLength}/500 Zeichen`;
  349.     });
  351.     // Form validation
  352.     form?.addEventListener('input', (e) => {
  353.         const input = e.target;
  354.         if (input.checkValidity()) {
  355.             input.classList.remove('is-invalid');
  356.             input.classList.add('is-valid');
  357.         } else {
  358.             input.classList.remove('is-valid');
  359.         }
  360.     });
  362.     // Preload Brevo widget when modal opens
  363.     modal?.addEventListener('shown.bs.modal', () => {
  364.         console.log('Modal opened, preloading Brevo widget');
  365.         // Only load if not already loaded
  366.         if (typeof window.BrevoConversations === 'undefined' && !window.brevoLoadingStarted) {
  367.             window.brevoLoadingStarted = true;
  368.             loadBrevoWidget();
  369.         }
  370.     });
  372.     // Modal reset
  373.     modal?.addEventListener('hidden.bs.modal', resetModal);
  375.     function setRating(rating) {
  376.         selectedRating = rating;
  377.         document.getElementById('rating').value = rating;
  378.         highlightStars(rating);
  379.         document.getElementById('rating').classList.remove('is-invalid');
  380.     }
  382.     function highlightStars(rating) {
  383.         stars?.forEach((star, index) => {
  384.             if (index < rating) {
  385.                 star.classList.add('active');
  386.             } else {
  387.                 star.classList.remove('active');
  388.             }
  389.         });
  390.     }
  392.     function showStep(stepName) {
  393.         document.querySelectorAll('.review-step').forEach(step => {
  394.             step.classList.remove('active');
  395.             step.classList.add('d-none');
  396.         });
  398.         document.querySelectorAll('.review-footer').forEach(footer => {
  399.             footer.classList.remove('active');
  400.             footer.classList.add('d-none');
  401.         });
  403.         const targetStep = document.getElementById(`review-step-${stepName}`);
  404.         const targetFooter = document.getElementById(`footer-${stepName}`);
  406.         if (targetStep) {
  407.             targetStep.classList.remove('d-none');
  408.             targetStep.classList.add('active');
  409.         }
  411.         if (targetFooter) {
  412.             targetFooter.classList.remove('d-none');
  413.             targetFooter.classList.add('active');
  414.         }
  416.         currentStep = stepName;
  417.     }
  419.     function handleSatisfactionNo() {
  420.         console.log('handleSatisfactionNo called');
  422.         // Close modal manually (Bootstrap 5 compatible)
  423.         try {
  424.             console.log('Closing modal');
  425.             modal.classList.remove('show');
  426.             modal.style.display = 'none';
  427.             modal.setAttribute('aria-hidden', 'true');
  428.             modal.removeAttribute('aria-modal');
  429.             modal.removeAttribute('role');
  431.             document.body.classList.remove('modal-open');
  432.             document.body.style.overflow = '';
  433.             document.body.style.paddingRight = '';
  435.             const backdrop = document.querySelector('.modal-backdrop');
  436.             if (backdrop) {
  437.                 backdrop.remove();
  438.             }
  439.         } catch (error) {
  440.             console.error('Error closing modal:', error);
  441.         }
  443.         // Load and open Brevo chat (if not already loaded from modal opening)
  444.         setTimeout(() => {
  445.             if (typeof window.BrevoConversations !== 'undefined') {
  446.                 console.log('Brevo already loaded, opening chat directly');
  447.                 openBrevoChat();
  448.             } else {
  449.                 console.log('Brevo not loaded yet, loading now');
  450.                 loadBrevoWidget(() => openBrevoChat());
  451.             }
  452.         }, 400);
  453.     }
  455.     function loadBrevoWidget(callback) {
  456.         console.log('Loading Brevo Conversations widget...');
  458.         // Check if Brevo is already loaded
  459.         if (typeof window.BrevoConversations !== 'undefined') {
  460.             console.log('Brevo already loaded');
  461.             if (callback) callback();
  462.             return;
  463.         }
  465.         // Check if script is already loading
  466.         if (window.brevoLoadingStarted) {
  467.             console.log('Brevo already loading, waiting...');
  468.             // Wait for it to load and then call callback
  469.             const checkInterval = setInterval(() => {
  470.                 if (typeof window.BrevoConversations !== 'undefined') {
  471.                     clearInterval(checkInterval);
  472.                     console.log('Brevo loaded (via waiting)');
  473.                     if (callback) callback();
  474.                 }
  475.             }, 200);
  476.             return;
  477.         }
  479.         window.brevoLoadingStarted = true;
  481.         // Load Brevo script dynamically
  482.         (function(d, w, c) {
  483.             w.BrevoConversationsID = '66755306756cb768ed6aa8bd';
  484.             w[c] = w[c] || function() {
  485.                 (w[c].q = w[c].q || []).push(arguments);
  486.             };
  487.             var s = d.createElement('script');
  488.             s.async = true;
  489.             s.src = 'https://conversations-widget.brevo.com/brevo-conversations.js';
  491.             s.onload = function() {
  492.                 console.log('Brevo script loaded successfully');
  493.                 // Wait a bit for widget to initialize
  494.                 setTimeout(() => {
  495.                     if (callback) callback();
  496.                 }, 500);
  497.             };
  499.             s.onerror = function() {
  500.                 console.error('Failed to load Brevo script');
  501.                 if (callback) {
  502.                     // Redirect to contact page if we were trying to open chat
  503.                     window.location.href = '/kontakt/';
  504.                 }
  505.             };
  507.             if (d.head) d.head.appendChild(s);
  508.         })(document, window, 'BrevoConversations');
  509.     }
  511.     function openBrevoChat(attempt = 0) {
  512.         console.log('Attempting to open Brevo chat (attempt ' + (attempt + 1) + ')');
  514.         // Method 1: Try Brevo API first (most reliable for opening)
  515.         if (typeof window.BrevoConversations === 'function') {
  516.             console.log('Trying Brevo API');
  517.             try {
  518.                 window.BrevoConversations('openChat', true);
  519.                 console.log('Successfully called openChat');
  521.                 // Wait longer for widget to fully open and initialize before sending message
  522.                 setTimeout(() => {
  523.                     try {
  524.                         // Set the message in the input field
  525.                         window.BrevoConversations('setUserMessage', 'Ich hatte ein Problem mit einem Produkt und benötige Unterstützung.');
  526.                         console.log('Successfully set user message');
  527.                     } catch (e) {
  528.                         console.log('setUserMessage not available, trying alternative:', e);
  529.                         // Alternative: try to find and fill the textarea directly
  530.                         try {
  531.                             const iframe = document.querySelector('iframe[title*="brevo" i]');
  532.                             if (iframe && iframe.contentWindow) {
  533.                                 const textarea = iframe.contentWindow.document.querySelector('textarea');
  534.                                 if (textarea) {
  535.                                     textarea.value = 'Ich hatte ein Problem mit einem Produkt und benötige Unterstützung.';
  536.                                     console.log('Filled textarea directly');
  537.                                 }
  538.                             }
  539.                         } catch (iframeError) {
  540.                             console.log('Cannot access iframe:', iframeError);
  541.                         }
  542.                     }
  543.                 }, 1500);
  545.                 return;
  546.             } catch (error) {
  547.                 console.error('Brevo API error:', error);
  548.             }
  549.         }
  551.         // Method 2: Try to find and click the launcher button
  552.         const launcherSelectors = [
  553.             '.brevo-conversations-launcher',
  554.             'button[class*="brevo"]',
  555.             'button[class*="launcher"]',
  556.             'div[class*="brevo"][class*="launcher"]',
  557.             '[role="button"][class*="brevo"]'
  558.         ];
  560.         for (const selector of launcherSelectors) {
  561.             const launcher = document.querySelector(selector);
  562.             if (launcher) {
  563.                 console.log('Found launcher button:', selector, launcher);
  564.                 launcher.click();
  565.                 return;
  566.             }
  567.         }
  569.         // Method 3: Look for iframe and find launcher nearby
  570.         const iframe = document.querySelector('iframe[title*="brevo" i]') ||
  571.                        document.querySelector('iframe[title*="chat" i]');
  573.         if (iframe) {
  574.             console.log('Found Brevo iframe, searching for launcher');
  576.             // Search in parent and siblings
  577.             const parent = iframe.parentElement;
  578.             if (parent) {
  579.                 // Look for siblings that might be the launcher
  580.                 const siblings = parent.parentElement?.children;
  581.                 if (siblings) {
  582.                     for (const sibling of siblings) {
  583.                         if (sibling !== parent &&
  584.                             (sibling.className.includes('launcher') ||
  585.                              sibling.className.includes('button'))) {
  586.                             console.log('Found launcher sibling:', sibling);
  587.                             sibling.click();
  588.                             return;
  589.                         }
  590.                     }
  591.                 }
  592.             }
  593.         }
  595.         console.log('BrevoConversations type:', typeof window.BrevoConversations);
  597.         // Method 4: Retry up to 10 times (wait for Brevo to load and initialize)
  598.         if (attempt < 10) {
  599.             console.log('Brevo not ready, retrying in 500ms...');
  600.             setTimeout(() => openBrevoChat(attempt + 1), 500);
  601.         } else {
  602.             console.error('Failed to open Brevo chat after 10 attempts, redirecting to contact page');
  603.             window.location.href = '/kontakt/';
  604.         }
  605.     }
  607.     async function handleSubmitReview(e) {
  608.         e.preventDefault();
  610.         if (!validateForm()) {
  611.             return;
  612.         }
  614.         const submitText = submitButton.querySelector('.submit-text');
  615.         const spinner = submitButton.querySelector('.spinner-border');
  617.         submitButton.disabled = true;
  618.         submitText.classList.add('d-none');
  619.         spinner.classList.remove('d-none');
  621.         try {
  622.             const formData = new FormData(form);
  623.             const data = Object.fromEntries(formData.entries());
  625.             // Combine first and last name into reviewerName field
  626.             const firstName = data.reviewerFirstName || '';
  627.             const lastName = data.reviewerLastName || '';
  628.             data.reviewerName = (firstName + ' ' + lastName).trim();
  630.             // Remove separate fields as they're not needed by the backend
  631.             delete data.reviewerFirstName;
  632.             delete data.reviewerLastName;
  634.             const response = await fetch('/product-review/submit', {
  635.                 method: 'POST',
  636.                 headers: {
  637.                     'Content-Type': 'application/json'
  638.                 },
  639.                 body: JSON.stringify(data)
  640.             });
  642.             const result = await response.json();
  644.             if (result.success) {
  645.                 showStep('success');
  646.             } else {
  647.                 showError(result.message || 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
  648.             }
  650.         } catch (error) {
  651.             console.error('Review submission error:', error);
  652.             showError('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
  653.         } finally {
  654.             submitButton.disabled = false;
  655.             submitText.classList.remove('d-none');
  656.             spinner.classList.add('d-none');
  657.         }
  658.     }
  660.     function validateForm() {
  661.         let isValid = true;
  663.         if (selectedRating === 0) {
  664.             document.getElementById('rating').classList.add('is-invalid');
  665.             isValid = false;
  666.         }
  668.         const requiredFields = form?.querySelectorAll('[required]');
  669.         requiredFields?.forEach(field => {
  670.             if (!field.checkValidity()) {
  671.                 field.classList.add('is-invalid');
  672.                 isValid = false;
  673.             }
  674.         });
  676.         if (!isValid) {
  677.             const firstInvalid = form?.querySelector('.is-invalid');
  678.             firstInvalid?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  679.         }
  681.         return isValid;
  682.     }
  684.     function showError(message) {
  685.         document.getElementById('error-message').textContent = message;
  686.         showStep('error');
  687.     }
  689.     function resetModal() {
  690.         form?.reset();
  692.         form?.querySelectorAll('.is-valid, .is-invalid').forEach(element => {
  693.             element.classList.remove('is-valid', 'is-invalid');
  694.         });
  696.         selectedRating = 0;
  697.         highlightStars(0);
  698.         document.getElementById('rating').value = '';
  700.         const counter = document.querySelector('.form-text');
  701.         if (counter) {
  702.             counter.textContent = '0/500 Zeichen';
  703.         }
  705.         showStep('satisfaction');
  706.     }
  707. });
  708. </script>
  709. {% endblock %}