<turbo-stream action="update" target="remote_modal"><template>
  <turbo-frame id="remote_modal">
  <div class="modal fade" data-controller="modal"
       data-action="turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#closeBackground">
    <div class="modal-dialog modal-xl">
      <div class="modal-content rounded-0 border shadow-sm position-relative" style="border-width: 10px !important; border-color: #C0C0C0 !important;">
        <button type="button" class="btn-close btn-sm position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1050;"></button>
        <div class="modal-body remote_modal_body " id="remote_modal_body">
          
    <div class="mb-4">
  <h2 class="fw-semibold mb-2">REQUEST YOUR RING SIZER</h2>
  <p class="text-muted">Please provide us your contact information</p>
</div>

<form data-turbo-frame="remote_modal" data-controller="form-validation" id="frm-ring-sizer-request" action="/store/ring_sizer" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="voEoTMVQ49X4UGfNZzqEsa1lS_0LAUD5m_O6uMTX9vScC8PdglLUClEFlSPsTSSrGFblMwaQjLkDkMnBSF24Jg" autocomplete="off" />


  <div class="card border-0">
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-6">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_first_name">First Name*</label>
            <input class="form-control " required="required" type="text" name="store_ring_sizer_request[first_name]" id="store_ring_sizer_request_first_name" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_last_name">Last Name*</label>
            <input class="form-control " required="required" type="text" name="store_ring_sizer_request[last_name]" id="store_ring_sizer_request_last_name" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_email">Email Address*</label>
            <input class="form-control" required="required" type="email" value="" name="store_ring_sizer_request[email]" id="store_ring_sizer_request_email" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_phone">Phone Number*</label>
            <input class="form-control" required="required" type="tel" value="" name="store_ring_sizer_request[phone]" id="store_ring_sizer_request_phone" />
          </div>
        </div>
        <div class="col-12">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_street">Street*</label>
            <input class="form-control" required="required" type="text" value="" name="store_ring_sizer_request[street]" id="store_ring_sizer_request_street" />
          </div>
        </div>
        <div class="col-md-5">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_city">City*</label>
            <input class="form-control" required="required" type="text" value="" name="store_ring_sizer_request[city]" id="store_ring_sizer_request_city" />
          </div>
        </div>
        <div class="col-md-4">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_state">State*</label>
            <input class="form-control" required="required" type="text" value="" name="store_ring_sizer_request[state]" id="store_ring_sizer_request_state" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_zipcode">Zipcode*</label>
            <input class="form-control" required="required" type="text" name="store_ring_sizer_request[zipcode]" id="store_ring_sizer_request_zipcode" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_category">Planning To Purchase:*</label>
            <select class="form-select" required="required" name="store_ring_sizer_request[category]" id="store_ring_sizer_request_category"><option value="">Select...</option>
<option value="Wedding Rings">Wedding Rings</option>
<option value="Engagement Rings">Engagement Rings</option>
<option value="Women&#39;s Diamond Rings">Women&#39;s Diamond Rings</option>
<option value="Men&#39;s Diamond Rings">Men&#39;s Diamond Rings</option>
<option value="Other">Other</option></select>
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_styles">Style numbers you are interested?*</label>
            <textarea class="form-control" rows="2" required="required" name="store_ring_sizer_request[styles]" id="store_ring_sizer_request_styles">
</textarea>
          </div>
        </div>
        <div class="col-12">
          <div class="mb-2">
            <label class="form-label" for="store_ring_sizer_request_notes">Is there anything we can help you with?</label>
            <textarea class="form-control" rows="3" name="store_ring_sizer_request[notes]" id="store_ring_sizer_request_notes">
</textarea>
          </div>
        </div>
      </div>

      <div class="d-flex gap-2 justify-content-center mt-4">
        <input type="submit" name="commit" value="SEND REQUEST" class="btn btn-primary px-5" data-disable-with="SEND REQUEST" />
      </div>
    </div>
  </div>

  <div class="mt-2 text-center text-muted small">
    <p class="mb-1"><span class="text-danger">*</span> = required field</p>
    <p class="mb-0">The personal information provided above will not be collected or used for any other purposes. Please
      see our privacy policy.</p>
  </div>

</form>

        </div>
      </div>
    </div>
  </div>
</turbo-frame></template></turbo-stream>