<?php /* Template Name: Contact Us Page */
get_header();
?>

 <section class="innerpage-banner conmtact-banner" style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/contact-us.png);">
         <div class="container">
            <h1 class="title">
               Contact Us
            </h1>
         </div>
      </section>
      <div class="contact-wrap">
         <div class="container custom-container">
            <div class="head-wrap">
               <h2 class="sub-title-wrap">Let’s Start a conversation</h2>
               <p class="para-wrap">Reach out to our team for assistance, quotes, or inquiries</p>
            </div>
            <div class="form-wrap">
               <form id="custom-contact-form" data-parsley-validate>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="input-wrap">
                        <label for="first_name" class="value">Full Name</label>
                        <input type="text" id="first_name" name="first_name" placeholder="Full Name" class="txt"
                           required
                           maxlength="50"
                           data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
                           data-parsley-minlength="2"
                           data-parsley-required-message="Full name is required."
                           data-parsley-minlength-message="Full name must be at least 2 characters long."
                           data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
                           data-parsley-errors-container="#first-name-error">
                        <div class="error" id="first-name-error"></div>
                        </div>
                     </div>

                     <div class="col-md-6">
                        <div class="input-wrap">
                        <label for="email" class="value">Email</label>
                        <input type="email" id="email" name="email" placeholder="Email" class="txt"
                           required
                           maxlength="50"
                           data-parsley-type="email"
                           data-parsley-required-message="Email is required."
                           data-parsley-type-message="Enter a valid email address."
                           data-parsley-errors-container="#email-error">
                        <div class="error" id="email-error"></div>
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="input-wrap">
                           <label for="fname" class="value">Phone Number</label>
                                 <div class="d-flex custom-phone-wrapper">
                                 <div class="select-wrap">
                                    <select class="form-select custom-select-code">
                                    <?php foreach ($country_codes as $code => $label): ?>
                                       <option value="<?php echo esc_attr($code); ?>" <?php selected($code, '+1'); ?>>
                                          <?php echo esc_html($code); ?>
                                       </option>
                                    <?php endforeach; ?>
                                    </select>
                                    </div>
                                    <input type="text" id="phone" name="phone" placeholder="Phone Number" class="form-control custom-phone-input txt"
                                    required
                                    maxlength="14"
                                    data-parsley-pattern="^[0-9]+$"
                                    data-parsley-length="[8,14]"
                                    data-parsley-required-message="Phone number is required."
                                    data-parsley-pattern-message="Only numeric values are allowed."
                                    data-parsley-length-message="Insert a valid Phone number."
                                    data-parsley-errors-container="#phone-error"
                                    onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                    inputmode="numeric">
                                    <div class="error" id="phone-error"></div>
                           </div>
                     </div>
                     </div>

                     <div class="col-md-6">
                        <div class="input-wrap">
                        <label for="subject" class="value">Subject</label>
                        <input type="text" id="subject" name="subject" placeholder="Subject" class="txt"
                           maxlength="50"
                           data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
                           data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
                           data-parsley-errors-container="#subject-error">
                        <div class="error" id="subject-error"></div>
                        </div>
                     </div>

                     <div class="col-md-12">
                        <div class="input-wrap">
                        <label for="description" class="value">Description</label>
                        <textarea name="description" id="description" class="txtarea"
                           required
                           maxlength="250"
                           data-parsley-minlength="10"
                           data-parsley-required-message="Description is required."
                           data-parsley-minlength-message="Description must be at least 10 characters long."
                           data-parsley-errors-container="#description-error"
                           placeholder="Enter your description"></textarea>
                        <div class="error" id="description-error"></div>
                        </div>
                     </div>

                     <div class="col-md-12">
                        <div class="btn-wrap">
                        <button type="button" class="btn link saveContactUs"><span>Submit</span></button>
                        </div>
                     </div>
                  </div>
               </form>

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

<?php get_footer(); ?>