<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-normal.php'; ?>

<div class="uk-container">

    <!-- Contact Information Cards -->
    <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-margin-small-bottom" uk-grid>
        <div>
            <div class="contact-box">
                <div class="icon-circle"> <span uk-icon="icon: phone; ratio: .8" class="uk-icon uk-text-primary"></span></div>
                <div class="cb-title">Phone</div>
                <p>+966 50 123 4567</p>
            </div>
        </div>
        <div>
            <div class="contact-box">
                <div class="icon-circle"> <span uk-icon="icon: mail; ratio: .8" class="uk-icon uk-text-primary"></span></div>
                <div class="cb-title">Email</div>
                <p>info@consultations.sa</p>
            </div>
        </div>
        <div>
            <div class="contact-box">
                <div class="icon-circle"> <span uk-icon="icon: clock; ratio: .8" class="uk-icon uk-text-primary"></span></div>
                <div class="cb-title">Working Hours</div>
                <p>Sunday - Thursday <small>(9:00 AM - 6:00 PM)</small></p>
            </div>
        </div>
    </div>

    <!-- Contact Form -->
    <div class="uk-container uk-container-xsmall">
        <div class="contact-form-box uk-margin-medium-top">

            <h2 class="uk-h3 f600">Send Us a Message</h2>

            <!-- Success Message -->
            <div class="uk-alert-success uk-margin" uk-alert id="successMessage" style="display: none;">
                <a class="uk-alert-close" uk-close></a>
                <p>Your message has been sent successfully! We'll get back to you soon.</p>
            </div>

            <!-- Error Message -->
            <div class="uk-alert-danger uk-margin" uk-alert id="errorMessage" style="display: none;">
                <a class="uk-alert-close" uk-close></a>
                <p id="errorText">An error occurred while sending the message. Please try again.</p>
            </div>

            <form class="uk-form-stacked" id="contactForm">
                <!-- Name and Phone Row -->
                <div class="uk-child-width-1-2@m" uk-grid>
                    <div>
                        <label class="form-label" for="name">Name <span class="uk-text-danger">*</span></label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="name" name="name" type="text" placeholder="Enter your full name" required>
                        </div>
                    </div>
                    <div>
                        <label class="form-label" for="phone">Phone Number <span class="uk-text-danger">*</span></label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="phone" name="phone" type="tel" placeholder="+966 5X XXX XXXX" required>
                        </div>
                    </div>
                </div>

                <!-- Email -->
                <div class="uk-margin">
                    <label class="form-label" for="email">Email Address <span class="uk-text-danger">*</span></label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="email" name="email" type="email" placeholder="example@email.com" required>
                    </div>
                </div>

                <!-- Message Type -->
                <div class="uk-margin">
                    <label class="form-label" for="messageType">Message Type <span class="uk-text-danger">*</span></label>
                    <div class="uk-form-controls">
                        <select class="uk-select" id="messageType" name="messageType" required>
                            <option value="">Select message type</option>
                            <option value="question">Question</option>
                            <option value="complaint">Complaint</option>
                            <option value="suggestion">Suggestion</option>
                        </select>
                    </div>
                </div>

                <!-- Message -->
                <div class="uk-margin">
                    <label class="form-label" for="message">Message</label>
                    <div class="uk-form-controls">
                        <textarea class="uk-textarea" id="message" name="message" rows="5" placeholder="Write your message here..."></textarea>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="uk-margin-small-top">
                    <button class="uk-button uk-button-primary uk-width-1-1" type="submit" id="submitBtn">
                        Send Message
                    </button>
                </div>
            </form>
        </div>
    </div>

</div><!-- .uk-container -->


<script>
    document.getElementById('contactForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // Get form data
        const formData = {
            name: document.getElementById('name').value.trim(),
            phone: document.getElementById('phone').value.trim(),
            email: document.getElementById('email').value.trim(),
            messageType: document.getElementById('messageType').value,
            message: document.getElementById('message').value.trim()
        };

        // Basic validation
        if (!formData.name || !formData.phone || !formData.email || !formData.messageType || !formData.message) {
            showError('Please fill in all required fields');
            return;
        }

        // Email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            showError('Please enter a valid email address');
            return;
        }

        // Phone validation (Saudi format)
        const phoneRegex = /^(\+966|0)?[5][0-9]{8}$/;
        if (!phoneRegex.test(formData.phone.replace(/\s/g, ''))) {
            showError('Please enter a valid Saudi phone number');
            return;
        }

        // Submit form
        submitForm(formData);
    });

    function submitForm(formData) {
        // Show loading state
        const submitBtn = document.getElementById('submitBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<div uk-spinner="ratio: 0.6"></div> Sending...';
        submitBtn.disabled = true;

        // Simulate API call
        setTimeout(() => {
            // Reset button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;

            // Show success message
            showSuccess();

            // Reset form
            document.getElementById('contactForm').reset();

            // Log form data (in real implementation, send to server)
            console.log('Contact form submitted:', formData);
        }, 2000);
    }

    function showSuccess() {
        const successMsg = document.getElementById('successMessage');
        const errorMsg = document.getElementById('errorMessage');

        // Hide error and show success
        errorMsg.style.display = 'none';
        successMsg.style.display = 'block';

        // Scroll to message
        successMsg.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
        });

        // Hide success message after 5 seconds
        setTimeout(() => {
            successMsg.style.display = 'none';
        }, 5000);
    }

    function showError(message) {
        const successMsg = document.getElementById('successMessage');
        const errorMsg = document.getElementById('errorMessage');
        const errorText = document.getElementById('errorText');

        // Hide success and show error
        successMsg.style.display = 'none';
        errorText.textContent = message;
        errorMsg.style.display = 'block';

        // Scroll to message
        errorMsg.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
        });

        // Hide error message after 5 seconds
        setTimeout(() => {
            errorMsg.style.display = 'none';
        }, 5000);
    }

    // Real-time phone number formatting
    document.getElementById('phone').addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');

        // Handle different input formats
        if (value.startsWith('966')) {
            value = '+' + value;
        } else if (value.startsWith('0')) {
            value = '+966' + value.substring(1);
        } else if (value.startsWith('5') && value.length > 1) {
            value = '+966' + value;
        }

        // Format as +966 5X XXX XXXX
        if (value.startsWith('+966') && value.length > 4) {
            const numbers = value.substring(4);
            if (numbers.length <= 2) {
                value = '+966 ' + numbers;
            } else if (numbers.length <= 5) {
                value = '+966 ' + numbers.substring(0, 2) + ' ' + numbers.substring(2);
            } else {
                value = '+966 ' + numbers.substring(0, 2) + ' ' + numbers.substring(2, 5) + ' ' + numbers.substring(5, 9);
            }
        }

        e.target.value = value;
    });

    // Form field validation styling
    const inputs = document.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (this.checkValidity()) {
                this.classList.remove('uk-form-danger');
                this.classList.add('uk-form-success');
            } else {
                this.classList.remove('uk-form-success');
                this.classList.add('uk-form-danger');
            }
        });

        input.addEventListener('input', function() {
            if (this.classList.contains('uk-form-danger') && this.checkValidity()) {
                this.classList.remove('uk-form-danger');
                this.classList.add('uk-form-success');
            }
        });
    });
</script>

<?php include 'footer.php'; ?>