<?php
require_once(rtrim($_SERVER['DOCUMENT_ROOT'], '/') . '/wp-load.php');
?>



<html>

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-140324885-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-140324885-1');
    </script>

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&display=swap" rel="stylesheet">


    <!-- meta charec set -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Powerplus Mobility Inc.</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>


    <style>
        .custom-frame {
            display: none;
        }
    </style>

</head>

<body class="url">

    <div>

        <?php

        get_header();

        ?>
    </div>
    
    <div>
         <?php
         
            echo do_shortcode('[elementor-template id="3249"]');
        ?>
    </div>

    <div class="container mt-5 mb-5">
        <div class="row mb-5">
            <h1>Custermize & Buy</h1>
        </div>
    </div>

    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-6">

            </div>

            <div class="col-md-6">

            </div>
        </div>
    </div>

    <div class="container mt-5 mb-5">
        <div class="row">
            <form action='http://action.powerplusmobility.org/gly.php' method='POST' onsubmit="return validateForm()">
                <div class="row">
                    <div class="col-md-6" style="padding-right: 50px;">
                        <div class="form-group">
                            <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">CLIENT WEIGHT</label>
                            <select name="q5_chooseWeight" id="q5_chooseWeight" class="form-select form-select-lg mb-3" required aria-label="Large select example">

                                <option value="" >Please select Option</option>
                                <option value="Weight Capacity 250 Lbs $2195" data-cal="2195">Weight Capacity 250 Lbs $2195</option>
                                <option value="Weight Capacity 350 Lbs $2495 (Also includes: 18” X 18” Easy to Clean Urethane Seat, Seat Width By Frame 20”, Overall Width 22”, Heavy Duty Construction)" data-cal="2495">Weight Capacity 350 Lbs $2495 (Also includes: 18” X 18” Easy to Clean Urethane Seat, Seat Width By Frame 20”, Overall Width 22”, Heavy Duty Construction)</option>
                                <option value="Weight Capacity 450 Lbs $2695 (Also includes: 21” X 18” Easy to Clean Urethane Seat, Seat Width By Frame 22”, Overall With 24”, Extra Heavy Duty Construction)" data-cal="2695">Weight Capacity 450 Lbs $2695 (Also includes: 21” X 18” Easy to Clean Urethane Seat, Seat Width By Frame 22”, Overall With 24”, Extra Heavy Duty Construction)</option>
                            </select>
                            <br><br>
                        </div>
                        <div class="form-group">
                            <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">Optional Seat Width:</label>
                            <select id="q8_optionalSeat8" name="q8_optionalSeat8" class="form-select form-select-lg mb-3" aria-label="Large select example" required onchange="toggleCustomFrame1()">
                                <option value="" >Please select Option</option>
                                <option value="HRZT14W  14&quot; Seat  Width    $480" data-cal="480">HRZT14W  14&quot; Seat  Width    $480</option>
                                <option value="HRZT15W  15&quot; Seat  Width    $480" data-cal="480">HRZT15W  15&quot; Seat  Width    $480</option>
                                <option value="HRZT16W  16&quot; Seat  Width    $480" data-cal="480">HRZT16W  16&quot; Seat  Width    $480</option>
                                <option value="HRZT17W  17&quot; Seat  Width    $480" data-cal="480">HRZT17W  17&quot; Seat  Width    $480</option>
                                <option value="HRZT23W  23&quot; Seat  Width    $680" data-cal="680">HRZT23W  23&quot; Seat  Width    $680</option>
                                <option value="HRZT24W  24&quot; Seat  Width    $680" data-cal="680">HRZT24W  24&quot; Seat  Width    $680</option>
                                <option value="HRZT25W  25&quot; Seat  Width    $680" data-cal="680">HRZT25W  25&quot; Seat  Width    $680</option>
                                <option value="HRZT26W  26&quot; Seat  Width    $680" data-cal="680">HRZT26W  26&quot; Seat  Width    $680</option>
                            </select>
                            <br><br>
                        </div>
                        <div class="form-group custom-frame" id="customFrameBlock1">
                            <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">If custom seat width: </label><br>
                            <input id="input_9" name="q9_ifCustom9" class="form-control form-control-lg" type="text" placeholder="Custom seat width" value="" aria-label=".form-control-lg example">
                            <br><br>
                        </div>
                        <div class="form-group">
                            <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">Optional Seat Depth:</label><br>
                            <select id="q7_optionalSeat" name="q7_optionalSeat" class="form-select form-select-lg mb-3" aria-label="Large select example" onchange="toggleCustomFrame2()" required>
                                <option value="" >Please select Option</option>
                                <option value="HRZT14D  14&quot; Seat Depth $480" data-cal="480">HRZ14D 14&quot;Seat Depth $480</option>
                                <option value="HRZT15D  15&quot; Seat  Depth    $480" data-cal="480">HRZT15D  15&quot; Seat  Depth    $480</option>
                                <option value="HRZT16D  16&quot; Seat  Depth    $480" data-cal="480">HRZT16D  16&quot; Seat  Depth    $480</option>
                                <option value="HRZT17D  17&quot; Seat  Depth    $480" data-cal="480">HRZT17D  17&quot; Seat  Depth    $480</option>
                                <option value="HRZT18D  18&quot; Seat  Depth    $480" data-cal="480">HRZT18D  18&quot; Seat  Depth    $480</option>
                                <option value="HRZT19D  19&quot; Seat  Depth    $480" data-cal="480">HRZT19D  19&quot; Seat  Depth    $480</option>
                                <option value="HRZT20D  20&quot; Seat  Depth    $480" data-cal="480">HRZT20D  20&quot; Seat  Depth    $480</option>
                                <option value="HRZT21D  21&quot; Seat  Depth    $680" data-cal="680">HRZT21D  21&quot; Seat  Depth    $680</option>
                                <option value="HRZT21D  22&quot; Seat  Depth    $680" data-cal="680">HRZT22D  22&quot; Seat  Depth    $680</option>
                                <option value="HRZT21D  23&quot; Seat  Depth    $680" data-cal="680">HRZT23D  23&quot; Seat  Depth    $680</option>
                                <option value="HRZT21D  24&quot; Seat  Depth    $680" data-cal="680">HRZT24D  24&quot; Seat  Depth    $680</option>
                                <option value="HRZT21D  25&quot; Seat  Depth    $680" data-cal="680">HRZT25D  25&quot; Seat  Depth    $680</option>
                                <option value="HRZT21D  26&quot; Seat  Depth    $680" data-cal="680">HRZT26D  26&quot; Seat  Depth    $680</option>
                            </select>
                            <br><br>
                        </div>
                          <div class="form-group custom-frame" id="customFrameBlock2">
                            <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">If custom seat depth:* </label><br>
                            <input id="input_11" name="q11_ifCustom11" class="form-control form-control-lg" type="text" placeholder="Custom seat depth" value="" aria-label=".form-control-lg example">
                            <br><br>
                        </div>

                        <div class="form-group validation">
                            
                            <label style="font-size: 24px; margin-bottom: 10px;text-transform: uppercase" for="FRAME TYPE">Additional Options:</label> &nbsp&nbsp  <div class="error-message" style="color: red; font-size: 13px; display: inline-block; margin-left: 10px;"></div><br>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_1" name="q46_additionalOptions461" value="HRZTBH  Custom Back  Height    $240 " data-cal="240">HRZTBH  Custom Back  Height    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_2" name="q46_additionalOptions462" value="HRZTWC Capacity 750 To 1000 Lbs $1,000" data-cal="1000"> HRZTWC Capacity 750 To 1000 Lbs $1,000
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_3" name="q46_additionalOptions463" value="HRZTTC  Tension Back    $240" data-cal="240">HRZTTC  Tension Back    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_4" name="q46_additionalOptions464" value="HRZTLD  Lock Down Flip  Back Arms    $240" data-cal="240">HRZTLD  Lock Down Flip  Back Arms    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_5" name="q46_additionalOptions465" value="HRZTCOS  Closed Oval  Soft Seat 18 To 22  $300" data-cal="300">HRZTCOS  Closed Oval  Soft Seat 18 To 22  $300
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_6" name="q46_additionalOptions466" value="HRZTKHS  Key Hole Soft  Seat 18 To 22    $300" data-cal="300"> HRZTKHS  Key Hole Soft  Seat 18 To 22    $300
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_7" name="q46_additionalOptions467" value="HRZT60F  60° Footrest    $240" data-cal="240"> HRZT60F  60° Footrest    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_8" name="q46_additionalOptions468" value="HRZT70F  70° Footrest N/C" data-cal="0"> HRZT70F  70° Footrest N/C
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_9" name="q46_additionalOptions469" value="HRZT80F  80° Footrest    $240" data-cal="240"> HRZT80F  80° Footrest    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_10" name="q46_additionalOptions4610" value="HRZT90F  90° Footrest    $240" data-cal="240"> HRZT90F  90° Footrest    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_11" name="q46_additionalOptions4611" value="HRZTEL   Elevating Legrest (Not waterproof)    $480" data-cal="480" onchange="toggleCustomField3()">HRZTEL   Elevating Legrest (Not waterproof)    $480
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_12" name="q46_additionalOptions4612" value="HRZTAAF  Angle  Adjustable Footplates (Not waterproof)    $240" data-cal="240" onchange="toggleCustomField3()">HRZTAAF  Angle  Adjustable Footplates (Not waterproof)    $240
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_13" name="q46_additionalOptions4614" value="HRZTOPF  One Piece  Footboard    $120" data-cal="120">HRZTOPF  One Piece  Footboard    $120
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_14" name="q46_additionalOptions4615" value="HRZTSB  Seat Belt  (Plastic)    $26" data-cal="26"> HRZTSB  Seat Belt  (Plastic)    $26
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_15" name="q46_additionalOptions4616" value="HRZTAC  Height  Adjustable Casters    $480" data-cal="480">HRZTAC  Height  Adjustable Casters    $480
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_33_16" name="q46_additionalOptions4617" value="HRZTWH1  24 inch  Wheels with 5 inch Casters    $480" data-cal="480"> HRZTWH1  24 inch  Wheels with 5 inch Casters    $480
                                </label>
                            </div>
                             <div class="form-group">
                                <label for="item1" class="checkbox-labels">
                                    <input type="checkbox" id="input_46_17" name="q46_additionalOptions4613" value="HRZTSTF  Special Seat  To Floor Height     $480" data-cal="480"> HRZTSTF  Special Seat  To Floor Height     $480
                                </label>
                            </div>
                            <br><br>
                        </div>
                        <div class="form-group">
                            <label style="font-size: 24px; margin-bottom: 10px;" for="exampleTextarea">Additional Notes</label><br>
                            <textarea class="form-control" id="input_38"  name="q38_notes" rows="8"></textarea>
                        </div>
                </div>
                <div class="col-md-6">
                    <br><br>

                    <p style="font-size: 24px; color: #3E70E8; margin-botom:-20px"> <b>Final Total</b> </p>
                    <p style="font-size: 24px;"><input style="border: none;font-size: 40px; color:black;margin-top:-20px" type="text" id="total" value="0" name="q31_totalWith" readonly></p>
                    <br>
                    <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">Full Name</label>
                    <input id="q2_namef" name="q2_namef" class="form-control form-control-lg" type="text" required placeholder="Full Name" aria-label=".form-control-lg example">
                    <br>
                    <label style="font-size: 24px; margin-bottom: 10px;" for="FRAME TYPE">Email</label>
                    <input id="q29_enterEmail29" name="q29_enterEmail29" class="form-control form-control-lg" required type="text" placeholder="Email" aria-label=".form-control-lg example"><br>
                    <br><br>
                    <div class="row center buttons">
                        <input type="submit" class="button" name="Submit" value="Get Quote" />
                        <div class="clear"> </div>
                    </div>
                    <input type='hidden' id='campaign_id' name='campaign_id' value='71036858-9940-bfe5-4ac8-5aa9434a2536'>
                    <input name="redirect_url" id="redirect_url" type="hidden" value="https://powerplusblog.powerplusmobility.com/wp-content/themes/astra/stp/" />
                    <input type='hidden' id='assigned_user_id' name='assigned_user_id' value='1'>
                    <input type='hidden' id='bool_id' name='bool_id' value='do_not_call;'>
                    <input type='hidden' id='moduleDir' name='moduleDir' value='Leads'>
                </div>
            </form>
        </div>
    </div>
    
     <div>
         <?php
            echo do_shortcode('[elementor-template id="3257"]');
         ?>
    </div>

    <?php get_footer(); ?>

    <script type='text/javascript'>
        function submit_form() {
            if (typeof(validateCaptchaAndSubmit) != 'undefined') {
                validateCaptchaAndSubmit();
            } else {
                check_webtolead_fields();
                //document.WebToLeadForm.submit();
            }
        }

        function check_webtolead_fields() {
            if (document.getElementById('bool_id') != null) {
                var reqs = document.getElementById('bool_id').value;
                bools = reqs.substring(0, reqs.lastIndexOf(';'));
                var bool_fields = new Array();
                var bool_fields = bools.split(';');
                nbr_fields = bool_fields.length;
                for (var i = 0; i < nbr_fields; i++) {
                    if (document.getElementById(bool_fields[i]).value == 'on') {
                        document.getElementById(bool_fields[i]).value = 1;
                    } else {
                        document.getElementById(bool_fields[i]).value = 0;
                    }
                }
            }
        }
        
         function validateForm() {
             alert("edd");
    var groups = $(".form-group.validation");
    var isValid = true;
    var invalidGroups = [];

    // Clear previous error messages
    $(".error-message").empty();
    $("#error").empty();

    groups.each(function () {
      var checkboxes = $(this).find("input[type='checkbox']");
      var isChecked = checkboxes.filter(":checked").length > 0;

      if (!isChecked) {
        isValid = false;
        invalidGroups.push($(this).find("label").text().replace(/\*/g, '').trim());
        $(this).find(".error-message").text('Please select at least one option.');
      }
    });

    if (!isValid) {
        alert("Please select at least one option in the each groups");
      $("#error").text('Please select at least one option in the following groups: ' + invalidGroups.join(', '));
    }

    return isValid;
  }

  // Add event listener to checkboxes to remove error message when checked
  $("input[type='checkbox']").on("change", function() {
    $(this).closest(".form-group.validation").find(".error-message").empty();
  });
    </script>

    <!-- Pinterest -->
    <script type="text/javascript">
        (function(w, d, load) {
            var script,
                first = d.getElementsByTagName('SCRIPT')[0],
                n = load.length,
                i = 0,
                go = function() {
                    for (i = 0; i < n; i = i + 1) {
                        script = d.createElement('SCRIPT');
                        script.type = 'text/javascript';
                        script.async = true;
                        script.src = load[i];
                        first.parentNode.insertBefore(script, first);
                    }
                }
            if (w.attachEvent) {
                w.attachEvent('onload', go);
            } else {
                w.addEventListener('load', go, false);
            }
        }(window, document,
            ['//assets.pinterest.com/js/pinit.js']
        ));

        function toggleCustomFrame() {
            var select = document.getElementById("frame_colour_c");
            var customFrameBlock = document.getElementById("customFrameBlock");

            if (select.value === "GLYC Frame - Custom") {
                customFrameBlock.style.display = "block";
            } else {
                customFrameBlock.style.display = "none";
            }
        }

        function toggleCustomFrame1() {
            var select1 = document.getElementById("seat_width_c");
            var customFrameBlock1 = document.getElementById("customFrameBlock1");

            if (select1.value === "GLYSWC Custom Seat Width") {
                customFrameBlock1.style.display = "block";
            } else {
                customFrameBlock1.style.display = "none";
            }
        }
        
         function toggleCustomFrame2() {
            var select2 = document.getElementById("seat_depth_c");
            var customFrameBlock2 = document.getElementById("customFrameBlock2");

            if (select2.value === "GLYSDC Custom Seat Depth") {
                customFrameBlock2.style.display = "block";
            } else {
                customFrameBlock2.style.display = "none";
            }
        }
        
        function toggleCustomField3() {
        var isChecked = $('#input_33_12').is(':checked'); // Change the checkbox ID to match your actual 
        var isChecked1 = $('#input_33_13').is(':checked');

        // If the checkbox is checked, show the custom field, otherwise hide it
        if (isChecked || isChecked1) {
            $('#customFrameBlock3').show();
        } else {
            $('#customFrameBlock3').hide();
        }
    }
    
    function toggleCustomField4() {
        var isChecked = $('#input_40_16').is(':checked'); // Change the checkbox ID to match your actual 
        

        // If the checkbox is checked, show the custom field, otherwise hide it
        if (isChecked) {
            $('#customFrameBlock6').show();
            $('#customFrameBlock5').hide();
        } else {
            $('#customFrameBlock6').hide();
             $('#customFrameBlock5').show();
        }
    }
    
     function toggleCustomField5() {
        var isChecked = $('#input_40_17').is(':checked'); // Change the checkbox ID to match your actual 
        

        // If the checkbox is checked, show the custom field, otherwise hide it
        if (isChecked) {
            $('#customFrameBlock7').show();
             $('#customFrameBlock5').hide();
        } else {
            $('#customFrameBlock7').hide();
             $('#customFrameBlock5').show();
        }
    }
    
     function toggleCustomField6() {
         
          var select8 = document.getElementById("q47_backHeight");
            var customFrameBlock8 = document.getElementById("customFrameBlock8");

            if (select8.value === "GLYBHC Back Height Custom") {
                customFrameBlock8.style.display = "block";
            } else {
                customFrameBlock8.style.display = "none";
            }
    }
    </script>

    <!-- Scripts -->
    

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var totalCal = 0;
            var totalInput = $('#total');
            var selectedCal = 0;

            function updateTotalCal() {
                totalInput.val('$' + totalCal);
            }

            $('#q5_chooseWeight,#q8_optionalSeat8,#q7_optionalSeat,#frame_colour_c,#client_weight_c,#seat_width_c,#seat_depth_c,#input_33_0,#input_33_1,#input_33_2,#input_33_3,#input_33_4,#input_33_5,#input_33_6,#input_33_7,#input_33_8,#input_33_9,#input_33_10,#input_33_11,#input_33_12,#input_33_13,#input_33_14,#input_33_15,#input_34_0,#input_34_1,#input_34_2,#input_46_0,#input_46_1,#input_46_2,#input_46_3,#input_46_4,#input_46_5,#input_46_6,#input_46_7,#input_46_8,#input_46_9,#input_36_0,#input_36_1,#input_36_4,#rear_wheel_c,#caster_c,#input_35_0,#input_35_1,#input_35_2,#input_35_3,#input_35_4,#input_35_5,#input_35_6,#input_35_7,#input_35_8,#input_35_9,#input_40_0,#input_40_1,#input_40_2,#input_40_3,#input_40_4,#input_40_5,#input_40_6,#input_40_7,#input_40_8,#input_40_9,#input_40_10,#input_40_11,#input_40_12,#input_40_13,#input_40_14,#input_40_15,#input_40_16,#input_40_17,#input_40_18,#input_42_0,#input_42_1,#input_42_2,#input_42_3,#input_42_4,#input_42_5,#input_42_6,#input_42_7,#input_42_8,#input_42_9,#input_26_1,#input_26_2,#input_26_3,#input_26_4,#input_26_5,#input_26_6,#input_26_7,#input_26_8,#input_26_9,#input_26_10,#input_26_11,#input_26_12,#input_26_13,#input_26_14,#input_26_15,#input_26_16,#input_26_17,#input_26_18,#input_26_19').change(function() {

                var selectedOption = $(this).find(':selected');

                if (selectedOption.length && selectedOption.data('cal')) {
                    selectedCal = parseInt(selectedOption.data('cal'));
                } else {
                    // Handle missing or invalid data-cal
                }

                if (this.checked) {
                    selectedCal = parseInt(this.dataset.cal);
                    console.log(selectedCal);
                    // Do something with the dataCalValue, e.g., update a total cost
                }
                // var selectedCal = parseInt($(this).find(':selected').data('cal'));
                totalCal += selectedCal;
                console.log(totalCal);
                updateTotalCal();
            });
        });
    </script>
</body>

</html>