custom.php

<?php 
    $title = 'شخصی‌دوزی';
    require_once 'includes/header.php';
?>

<!-- Hero -->
<section class="custom-hero">
    <div class="custom-hero-content">
        <h1>ثبت سفارش شخصی‌دوزی</h1>
        <h3>لباس شما بازتابی از شخصیت، زیبایی و سبک خاص شما خواهد بود</h3>
    </div>
</section>

<!-- Process -->
 <section class="custom-process">
    <h2>با فرآیندی ساده، گام به گام همراهتان هستیم</h2>
    <div class="process-container">
        <div class="process-step">
            <img src="images/custom-process-step1.svg">
            <p>ثبت درخواست آنلاین</p>
        </div>
        <div class="process-step">
            <img src="images/custom-process-step2.svg">
            <p>جلسه مشاوره اختصاصی</p>
        </div>
        <div class="process-step">
            <img src="images/custom-process-step3.svg">
            <p>تایید طراحی نهایی</p>
        </div>
        <div class="process-step">
            <img src="images/custom-process-step4.svg">
            <p>دوخت و پرو لباس</p>
        </div>
        <div class="process-step">
            <img src="images/custom-process-step5.svg">
            <p>تحویل لباس رویایی شما</p>
        </div>
    </div>
 </section>

 <!-- Custom Form Section -->
<section class="custom-form-section">
    <h2>جلسه مشاوره اختصاصی خود را حالا رزرو کنید.</h2>
    <form id="customForm" action="custom_form.php" method="POST">
        <div class="form-row">
          <input type="text" id="name" name="name" placeholder="نام" required>
          <select id="type" name="type" required>
            <option value="">انتخاب نوع جلسه</option>
            <option value="online">آنلاین</option>
            <option value="inPerson">حضوری</option>
          </select>
        </div>
        <div class="form-row">
          <input type="tel" id="phone" name="phone" placeholder="شماره تلفن همراه" pattern="^09[0-9]{9}$" required>
          <input type="email" id="email" name="email" placeholder="ایمیل" required>
        </div>
        <div class="form-row">
          <textarea id="message" name="message" placeholder="پیام شما"></textarea>
        </div>
        <div class="form-row">
          <button type="submit" class="secondary-btn">ثبت و ارسال درخواست</button>
        </div>
    </form>
</section>

<!-- Customer Reviews Carousel -->
<section class="customer-reviews">
    <h2>نظرات مشتریان عزیز</h2>
    <div class="carousel-container">
        <div class="review-carousel-track">
            <?php include 'db/reviews-carousel.php'; ?>

            <?php if ($reviews->num_rows > 0) {
                  while ($row = $reviews->fetch_assoc()) { ?>
                      <div class="review-card">
                        <div class="review-content">
                            <p><?php echo $row['نظر_مشتری']; ?></p>
                            <h4><?php echo $row['نام_مشتری']; ?></h4>
                        </div>
                        <img src='images/reviews/<?php echo $row['تصویر_نظر']; ?>'>
                      </div>
            <?php }
                } else {
                    echo '<p>در حال حاضر چیزی برای نمایش وجود ندارد!</p>';
                }
            ?>
        </div>
    </div>
</section>

<!-- js code for form validation -->
<script>
    document.getElementById('customForm').addEventListener('submit', function(e) {
        var name = document.getElementById('name').value;
        var type = document.getElementById('type').value;
        var phone = document.getElementById('phone').value;
        var email = document.getElementById('email').value;
        var message = document.getElementById('message').value;

        if (name.trim() === '' || phone.trim() === '' || email.trim() === '') {
            alert('لطفا تمام فیلدها را پر کنید.');
            e.preventDefault();
        }
        if (type.trim() === '') {
            alert('لطفا نوع جلسه را انتخاب کنید.');
            e.preventDefault();
        }

        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert('لطفا یک آدرس ایمیل معتبر وارد کنید.');
            e.preventDefault();
        }
    });
</script>

<!-- Review carousel -->
<script>
    document.addEventListener("DOMContentLoaded", () => {
    const carousels = document.querySelectorAll('.carousel-container'); // Select all carousel containers

    carousels.forEach(carousel => {
        const track = carousel.querySelector('.carousel-track');
        const prevButton = carousel.querySelector('.prev');
        const nextButton = carousel.querySelector('.next');

        // Check if the elements exist for this carousel
        if (!track || !prevButton || !nextButton) {
            console.warn('Carousel elements are missing in one of the containers.');
            return;
        }

        // Scroll amount
        const scrollAmount = 300;

        // Move carousel left
        prevButton.addEventListener('click', () => {
            track.scrollBy({ left: scrollAmount, behavior: 'smooth' });
        });

        // Move carousel right
        nextButton.addEventListener('click', () => {
            track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
        });

        // Disable buttons when at start or end
        const updateButtonState = () => {
            const maxScrollLeft = track.scrollWidth - track.clientWidth;
            prevButton.disabled = track.scrollLeft === 0;
            nextButton.disabled = track.scrollLeft >= maxScrollLeft;
        };

        // Attach the scroll event to update button state
        track.addEventListener('scroll', updateButtonState);

        // Initialize button state
        updateButtonState();
    });
});
</script>

<?php require_once 'includes/footer.php'; ?>