Untitled

jQuery(document).ready(function ($) {
    const apiUrl = 'https://uk1.ukvehicledata.co.uk/api/datapackage/VehicleData?v=2&api_nullitems=1&auth_apikey=';
    const apiKey = 'ebae681d-26b5-4244-95c5-e3fd94505297';

    const loader = $('#loader');

    // Flag to check if VRM has passed real-time validation
    let vrmValidated = false;

    // Real-time validation for VRM as the user types
    $('[name="my-vrm"]').on('input', function () {
        const vrm = $(this).val().toUpperCase();
        const vrmRegex = /^(^[A-Z]{2}[0-9]{2}\s?[A-Z]{3}$)|(^[A-Z][0-9]{1,3}[A-Z]{3}$)|(^[A-Z]{3}[0-9]{1,3}[A-Z]$)|(^[0-9]{1,4}[A-Z]{1,2}$)|(^[0-9]{1,3}[A-Z]{1,3}$)|(^[A-Z]{1,2}[0-9]{1,4}$)|(^[A-Z]{1,3}[0-9]{1,3}$)|(^[A-Z]{1,3}[0-9]{1,4}$)|(^[0-9]{3}[DX]{1}[0-9]{3}$)/;
        const errorContainer = $('#vrm-error');

        if (!vrm || !vrmRegex.test(vrm)) {
            // Display error message
            errorContainer.text('Please enter a valid UK Vehicle Registration Number.').show();
            vrmValidated = false;
        } else {
            errorContainer.hide();
            vrmValidated = true;
        }
    });

    // Real-time validation for name as the user types
    $('#my-name').on('input', function () {
        const name = $(this).val();
        const errorContainer = $('#name-error');

        if (!name) {
            // Display error message
            errorContainer.text('Please enter your name.').show();
        } else {
            errorContainer.hide();
        }
    });

    // Real-time validation for email as the user types
    
$('[name="my-email"]').on('input', function () {
    const email = $(this).val();
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    const errorContainer = $('#email-error');

    if (!email || !emailRegex.test(email)) {
        // Display error message
        errorContainer.text('Please enter a valid email address.').show();
    } else {
        errorContainer.hide();
    }
});

    // Real-time validation for phone number as the user types
    $('[name="my-phone"]').on('input', function () {
        const phoneNumber = $(this).val();
        const phoneNumberRegex = /^\s*(\+44\s?|0)?(?:\(\d{4}\)|\d{4})\s?\d{3}\s?\d{3}\s*$/;
        const errorContainer = $('#phone-error');
    
        if (!phoneNumber || !phoneNumberRegex.test(phoneNumber)) {
            // Display error message
            errorContainer.text('Please enter a valid UK phone number.').show();
        } else {
            errorContainer.hide();
        }
    });
    
    function handleGetQuote(e) {
        e.preventDefault();

        // Validate VRM before proceeding
        if (!vrmValidated) {
            // Display error message
            $('#vrm-error').text('Please enter a valid UK Vehicle Registration Number.').show();
            return;
        }

        const vrm = $('[name="my-vrm"]').val().toUpperCase();
        showLoader(true);
        fetchVehicleData(apiUrl, apiKey, vrm);
    }

    function fetchVehicleData(apiUrl, apiKey, vrm) {
        $.ajax({
            url: `${apiUrl}${apiKey}&user_tag=&key_VRM=${vrm}`,
            method: 'GET',
            dataType: 'json',
            success: handleVehicleDataSuccess,
            error: handleVehicleDataError,
            complete: function () {
                showLoader(false);
            },
        });
    }

    function handleVehicleDataSuccess(data) {
        const make = data.Response.DataItems.ClassificationDetails.Dvla.Make;
        const model = data.Response.DataItems.ClassificationDetails.Dvla.Model;
        const weight = data.Response.DataItems.TechnicalDetails.Dimensions.KerbWeight;
        const fuelTankCapacity = data.Response.DataItems.TechnicalDetails.Dimensions.FuelTankCapacity;
        const colour = data.Response.DataItems.VehicleRegistration.Colour;
        const fuelType = data.Response.DataItems.SmmtDetails.FuelType;

        calculateAndPopulateFields(make, model, weight, fuelTankCapacity, colour, fuelType);
        showHideParts('#part-2', '#part-1');
    }

    function handleVehicleDataError(error) {
        console.error('Error occurred while fetching vehicle data:', error);
        // Provide user-friendly error message on the webpage
    }

    function calculateAndPopulateFields(make, model, weight, fuelTankCapacity, colour, fuelType) {
        const convertedWeight = weight / 1000;
        const valuationRate = 150;
        const valuation = Math.round(convertedWeight * valuationRate);

        $('#vehicle-make').val(make);
        $('#vehicle-model').val(model);
        $('#vehicle-valuation').val(valuation);
        $('#vehicle-wieght').val(weight);
        $('#vehicle-fueltype').val(fuelTankCapacity);
        $('#vehicle-colour').val(colour);
        $('#vehicle-fuelType').val(fuelType);

        $('#make').text(make);
        $('#model').text(model);
        $('#valuation').text(valuation);
        $('#weight').text(weight);
        $('#fueltype').text(fuelType);
        $('#colour').text(colour);
        $('#fueltankcapacity').text(fuelTankCapacity);
    }

    function showHideParts(showPart, hidePart) {
        $(hidePart).fadeOut(300, function () {
            $(showPart).fadeIn(300);
        });
    }

    function showLoader(show) {
        if (show) {
            loader.show();
        } else {
            loader.hide();
        }
    }

    $('#get-quote').click(handleGetQuote);

    $('#accept-quote').click(function (e) {
        e.preventDefault();
        showHideParts('#part-3', '#part-2');
    });

    $('#submit-button').click(function (e) {
        // Validate name, email, and phone number before proceeding
        const name = $('#my-name').val();
        const email = $('#my-email').val();
        const phone = $('#my-phone').val();

        if (!name) {
            $('#name-error').text('Please enter your name.').show();
            return;
        } else {
            $('#name-error').hide();
        }

        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!email || !emailRegex.test(email)) {
            $('#email-error').text('Please enter a valid email address.').show();
            return;
        } else {
            $('#email-error').hide();
        }

        const phoneRegex = /^\s*(\+44\s?|0)?(?:\(\d{4}\)|\d{4})\s?\d{3}\s?\d{3}\s*$/;
        if (!phone || !phoneRegex.test(phone)) {
            $('#phone-error').text('Please enter a valid UK phone number.').show();
            return;
        } else {
            $('#phone-error').hide();
        }

        // If all validations pass, proceed with the submission
        showHideParts('#part-4', '#part-3');
    });
});