<%- include('./includes/header', { title: `Home - Doors & Specialities` }) %>
<main>
  <div class="custom-order">
    <div class="container">
      <div class="form-wrap">
        <div class="row justify-content-center">
            <div class="col-lg-9 col-12">
                <h2 class="custom-order-title">Custom Order Form</h2>
                <div class="form-content">
                  <form action="/demo-custom/doors-specialties/api/quoteproduct/custom-order" method="POST">
                    <div class="row g-4">
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Customer Name</label>
                          <input type="text" name="customerName" placeholder="Enter your name" required>
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Company Name</label>
                          <input type="text" name="companyName" placeholder="Enter company name">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Job Name</label>
                          <input type="text" name="jobName" placeholder="Enter job name">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Email</label>
                          <input type="email" name="email" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Phone Number</label>
                          <input type="tel" name="phoneNumber" placeholder="Enter phone number">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Billing Address</label>
                          <input type="text" name="billingAddress" placeholder="Enter billing address">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Shipping Address</label>
                          <input type="text" name="shippingAddress" placeholder="Enter shipping address">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Door Model</label>
                          <input type="text" name="doorModel" placeholder="Enter door model">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Pair / Single</label><br>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="pairSingle" id="pair" value="Pair">
                            <label class="form-check-label" for="pair">Pair</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="pairSingle" id="single" value="Single">
                            <label class="form-check-label" for="single">Single</label>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Door Finish</label>
                          <input type="text" name="doorFinish" placeholder="Enter door finish">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Window Size</label>
                          <input type="text" name="windowSize" placeholder="Enter window size">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Additional Features</label>
                          <input type="text" name="additionalFeatures" placeholder="Enter additional features">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                        <label>Door Frame</label><br>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="doorFrame" id="frameYes" value="Y">
                          <label class="form-check-label" for="frameYes">Y</label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="doorFrame" id="frameNo" value="N">
                          <label class="form-check-label" for="frameNo">N</label>
                        </div>
                        <input type="text" name="frameType" class="mt-2" placeholder="If Yes, Frame Type">
                      </div>
        
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Finished / Rough</label><br>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="finishRough" id="finished" value="Finished">
                            <label class="form-check-label" for="finished">Finished</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="finishRough" id="rough" value="Rough">
                            <label class="form-check-label" for="rough">Rough</label>
                          </div>
                          <input type="text" name="openingSize" class="mt-2" placeholder="Opening Size">
                        </div>
                      </div>
                      <div class="col-lg-4 col-12">
                        <div class="input-fields">
                          <label>Wall Thickness</label>
                          <input type="text" name="wallThickness" placeholder="Enter wall thickness">
                        </div>
                      </div>
                      <button type="submit" class="submit-btn">Submit</button>
                    </div>
                  </form>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</main>
<%- include('./includes/footer') %>