//this is my functions.php

// Enqueue Styles
function meraboiler_enqueue_styles() {
    wp_enqueue_style('google-fonts', ' [], null);
    wp_enqueue_style('tailwind-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css', [], null);
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', [], null);
    wp_enqueue_style('font-awesome', ' [], null);
    wp_enqueue_style('owl-carousel-css', ' [], null);
    wp_enqueue_style('owl-theme-css', ' [], null);
    wp_enqueue_style('main-style', get_template_directory_uri() . '/assets/css/main.css', [], filemtime(get_template_directory() . '/assets/css/main.css'));
}
add_action('wp_enqueue_scripts', 'meraboiler_enqueue_styles');

// Enqueue Scripts
function meraboiler_enqueue_scripts() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', ' [], null, true);
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', ['jquery'], null, true);
    wp_enqueue_script('owl-carousel-js', ' ['jquery'], null, true);
    wp_enqueue_script('p5-js', ' [], null, true);
    wp_enqueue_script('custom-scripts', get_template_directory_uri() . '/assets/js/scripts.js', ['jquery', 'owl-carousel-js', 'bootstrap-js'], filemtime(get_template_directory() . '/assets/js/scripts.js'), true);
    wp_enqueue_script('wave-js', get_template_directory_uri() . '/assets/js/wave.js', ['p5-js'], filemtime(get_template_directory() . '/assets/js/wave.js'), true);
}
add_action('wp_enqueue_scripts', 'meraboiler_enqueue_scripts');

// Enqueue Custom Scripts
function meraboiler_enqueue_custom_scripts() {
    wp_enqueue_script('parsley', ' array('jquery'), '2.9.2', true);
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/assets/js/custom-script.js', array('jquery', 'parsley'), '1.0.0', true);
    wp_localize_script('custom-script', 'ajaxurl', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'meraboiler_enqueue_custom_scripts');


// Handle form submission
// AJAX Form Handler
function submit_quote_form() {
    if ($_SERVER["REQUEST_METHOD"] !== "POST") {
        wp_send_json_error(['message' => 'Invalid request method.']);
        return;
    }

    if (empty($_POST['cust_fullname']) || empty($_POST['cust_email']) || empty($_POST['cust_mobile'])) {
        wp_send_json_error(['message' => 'Required fields are missing.']);
        return;
    }

    $fullName = sanitize_text_field($_POST["cust_fullname"]);
    $email = sanitize_email($_POST["cust_email"]);
    $mobile = sanitize_text_field($_POST["cust_mobile"]);

    // Log form data for debugging
    error_log("Form Data: FullName=$fullName, Email=$email, Mobile=$mobile");

    // Load PHPMailer
    require_once ABSPATH . WPINC . '/PHPMailer/PHPMailer.php';
    require_once ABSPATH . WPINC . '/PHPMailer/SMTP.php';
    require_once ABSPATH . WPINC . '/PHPMailer/Exception.php';

    $mail = new PHPMailer\PHPMailer\PHPMailer();

    try {
        // Server settings
        $mail->isSMTP();
        $mail->Host="localhost";
        $mail->SMTPAuth = false;
        $mail->Username = null;
        $mail->Password = null;
        $mail->SMTPSecure="";
        $mail->Port = 25;

        // Recipients
        $mail->setFrom('[email protected]');
        $mail->addAddress('[email protected]'); 

        // Content
        $mail->isHTML(true);
        $mail->Subject = "Enquiry from $fullName";
        $mail->Body    = "
        <table width="80%" align='center' cellpadding='0' cellspacing='0' style="font-family:Verdana, Geneva, sans-serif; font-size:13px; border:dotted 1px #186ea9; border-bottom:solid 3px #0037ff;">
          <tr>
            <td style="background:#0037ff; padding:10px 0; font-weight:bold; color:#fff; font-size:16px;" colspan='2' align='center' valign='middle'>Homepage Contact Form Quote</td>
          </tr>
          <tr>
            <td width="50%" style="background:#ffffff; padding:10px; border-right:solid 1px #ddd; font-weight:bold; color:#555;">Full Name</td>
            <td width="50%" style="background:#ffffff; padding:10px; border-right:solid 1px #ddd; color:#555;">$fullName</td>
          </tr>
          <tr>
            <td width="50%" style="background:#f2f2f2; padding:10px; border-right:solid 1px #ddd; font-weight:bold; color:#555;">Email</td>
            <td width="50%" style="background:#f2f2f2; padding:10px; border-right:solid 1px #ddd; color:#555;">$email</td>
          </tr>
          <tr>
            <td width="50%" style="background:#ffffff; padding:10px; border-right:solid 1px #ddd; font-weight:bold; color:#555;">Telephone</td>
            <td width="50%" style="background:#ffffff; padding:10px; border-right:solid 1px #ddd; color:#555;">$mobile</td>
          </tr>
        </table>";

        if (!$mail->send()) {
            error_log("Mailer Error: " . $mail->ErrorInfo); // Log mailer error
            wp_send_json_error(['message' => 'Failed to send your message.']);
        } else {
            wp_send_json_success(['message' => 'Thank you! Your message has been sent.']);
        }
    } catch (Exception $e) {
        error_log("Exception: " . $e->getMessage()); // Log exception
        wp_send_json_error(['message' => 'Mailer Error: ' . $mail->ErrorInfo]);
    }
}
add_action('wp_ajax_nopriv_submit_quote_form', 'submit_quote_form');
add_action('wp_ajax_submit_quote_form', 'submit_quote_form');

//this is custom-scripts.js
// Define the AJAX URL
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
console.log("Ajax URL:", ajaxurl);

jQuery(function($) {
    $("#getStartedForm")
        .parsley()
        .on("form:submit", function () {
            const form = document.getElementById("getStartedForm");

            // Check if the form is valid according to Parsley
            if ($(form).parsley().isValid()) {
                const formData = $(form).serialize(); // No need to append the action parameter here
                const submitButton = $("#submitFormButton");
                const loader = $("#loader");

                // Show loader and hide submit button text
                submitButton.prop("disabled", true); // Disable the button
                loader.removeClass("d-none").addClass("d-inline-block");

                console.log("Sending AJAX request with data:", formData);

                // Send form data using AJAX
                $.post(ajaxurl, {
                    action: 'submit_quote_form', // Add action parameter as a separate key-value pair
                    formData: formData
                })
                .done(function(response) {
                    console.log("Success:", response); // Log response

                    // Hide loader and show submit button text
                    submitButton.prop("disabled", false); // Enable the button again
                    loader.removeClass("d-inline-block").addClass("d-none");

                    if (response.success) {
                        // Redirect to the quote page
                        window.location.href = "quote";
                    } else {
                        alert(response.data.message);
                    }
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    console.log("Error:", jqXHR, textStatus, errorThrown); // Log error

                    // Hide loader and show submit button text
                    submitButton.prop("disabled", false); // Enable the button again
                    loader.removeClass("d-inline-block").addClass("d-none");
                    alert("An error occurred. Please try again.");
                });
            }

            return false; // Prevent form submission
        });
});

//this is the form
        <div class="getstarted_quote_form">
              <div class="form_wrapper">
                <!--<h1 class="text-white">Get An Instant Quote For Your New Boiler or Heat Pump</h1>-->
              <form id="getStartedForm" method="POST" class="contact__form form-row" data-parsley-validate="">
                  <input type="hidden" name="action" value="submit_quote_form">
                   <!--Form fields here -->
                  <div class="row">
                    <div class="col-sm col-md-6 col-lg-12 mb-3">
                      <div class="form-group">
                        <input type="text" id="custFullName" name="cust_fullname" class="form-control"
                          placeholder="Your Full Name*" required="">
                      </div>
                    </div>
                     <!--name -->
                    <div class="col-sm col-md-6 col-lg-12 mb-3">
                      <div class="form-group">
                        <input type="email" name="cust_email" id="custEmail" class="form-control"
                          placeholder="Your Email Address*" data-parsley-trigger="change" required="">
                      </div>
                    </div>
                     <!--email -->
                    <div class="col-sm-12 col-md-6 col-lg-12 mb-3">
                      <div class="form-group">
                        <input type="tel" id="custMobile" inputmode="numeric" name="cust_mobile"
                          class="form-control intl-phone-form-control" placeholder="07400123456" minlength="10"
                          maxlength="15" autocomplete="off" data-intl-tel-input-id="0" data-parsley-trigger="input"
                          data-parsley-pattern="^(?:(?:\+44)|(?:0))(?:(?:(?:1\d{3})|(?:7[1-9]\d{2})|(?:20\d{2})|(?:3(?:0[0-5]|[68]\d)\d)|(?:4[0-4]\d{2})|(?:5[0-5]\d{2})|(?:9(?:6[0-9]|7[0-2])\d))\s?\d{6,8}|((?:(?:1\d{2}|20\d{1}|3(?:0[0-5]|[68]\d{1})|4[0-4]\d{1}|5[0-5]\d{1}|9(?:6[0-9]|7[0-2])\d{1}))\s?\d{3,4}\s?\d{3,4}))$"
                          data-parsley-error-message="Invalid phone number" required>
                      </div>
                    </div>
                     <!--Telephone -->
                    <div class="col-sm-12">
                      <div class="cta-wrapper">
                        <button type="submit" id="submitFormButton" class="btn btn-danger btn-lg rounded-pill mt-3">
                          <span id="buttonText" class="text-black">Quick Contact</span>
                          <img id="loader" src="<?php echo get_template_directory_uri(); ?>/assets/imgs/loader.svg" width="30px" height="30px" alt="Loader" class="d-none">
                        </button>
                      </div>
                    </div>
                  </div>
                   <!--row -->
                </form>

              </div>
            </div>
            <!--get started form-->