File: /var/www/html/Siyum_old/wp-content/themes/siyum-old/page-order-book.php
<?php /* Template Name: Order Book Page */
get_header();
?>
<section class="order-book-banner" style="background-color: #0047a0;">
<div class="container custom-container">
<div class="row justify-content-center">
<div class="book-inner-sec">
<div class="left-img-sec">
<img src="<?php echo get_template_directory_uri(); ?>/img/book-order.png" alt="Book" style="max-height: 300px;">
</div>
<div class="rt-content-sec">
<div class="content-inner">
<h3 class="title">Infuse Your Life with the <br>Splendor of Shabbos</h3>
<p class="content">Deepen Your Connection To The Most Cherished Of Days – <br>And Experience The Beauty of Its Blessing</p>
</div>
<h5 class="price-txt">Price : $100</h5>
</div>
</div>
</div>
</div>
</section>
<section class="book-form">
<div class="container custom-container">
<div class="form-section px-4">
<div class="form-content">
<h2 class="title">Order Book</h2>
<p class="text-sec">A famous quote related to Order Books or trading</p>
</div>
<form id="orderForm" data-parsley-validate>
<div class="row mb-3">
<div class="col-md-6 mb-3 mb-md-0">
<input type="text" class="form-control" maxlength="50" placeholder="First Name*" name="firstName" required
data-parsley-required-message="First name is required."
data-parsley-minlength="2"
data-parsley-maxlength="50"
data-parsley-minlength-message="First name must be at least 2 characters long."
data-parsley-maxlength-message="First name cannot exceed 50 characters."
oninput="this.value = this.value.replace(/[^A-Za-z'-]/g, '')">
</div>
<div class="col-md-6">
<input type="text" class="form-control" maxlength="50" placeholder="Last Name*" name="lastName" required
data-parsley-required-message="Last name is required." data-parsley-minlength="2" data-parsley-maxlength="50" data-parsley-minlength-message="Last name must be at least 2 characters long." oninput="this.value = this.value.replace(/[^A-Za-z'-]/g, '')">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 mb-3 mb-md-0">
<input type="email" class="form-control" minlength="2" maxlength="50" placeholder="Email*" name="email" required
data-parsley-type="email"
data-parsley-required-message="Email is required."
data-parsley-type-message="Please enter a valid email address">
</div>
<div class="col-md-6">
<input type="tel" class="form-control" maxlength="10" inputmode="numeric" placeholder="Phone*" name="phone" required
data-parsley-pattern="^\d{10}$"
data-parsley-required-message="Phone number is required."
data-parsley-pattern-message="Phone number must be 10 digits">
</div>
</div>
<div class="mb-5">
<input type="text" class="form-control" minlength="2" placeholder="Address*" maxlength="250" name="address" required
data-parsley-required-message="Address is required.">
</div>
<div class="row mb-3">
<div class="col-md-4 mb-3 mb-md-0">
<input type="text" class="form-control" minlength="2" maxlength="50" placeholder="City*" name="city" required
data-parsley-required-message="City is required.">
</div>
<div class="col-md-4 mb-3 mb-md-0">
<select class="form-select custom-select-arrow" name="state" required
data-parsley-required-message="State is required.">
<option value="">State*</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" inputmode="numeric" minlength="2" maxlength="8" placeholder="Zip*" name="zip" required
data-parsley-pattern="^\d{5}$"
data-parsley-required-message="Zip is required."
data-parsley-pattern-message="Zip code must be 5 digits">
</div>
</div>
<div class="mb-3">
<input type="number" class="form-control" placeholder="Quantity*" required>
</div>
<div class="mb-3">
<div class="input-group apply-grp">
<input type="text" class="form-control" placeholder="Enter Coupon Code">
<button type="button" class="btn btn-outline-primary apply-btn">Apply</button>
</div>
</div>
<div class="bborder-top pt-3 mt-4 mb-3">
<h5 class="sub-title-total">Summary</h5>
<div class="subtotal">
<span>Subtotal:</span>
<span>$1,000.00</span>
</div>
<div class="subtotal">
<span>Discount:</span>
<span>-$100.00</span>
</div>
<div class="subtotal">
<span>Total:</span>
<span>$900.00</span>
</div>
</div>
<div class="credit-card-box">
<h5 class="text1">Credit Card Info</h5>
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<input type="text" inputmode="numeric" class="form-control" minlength="2" maxlength="16" placeholder="Card Number" name="cardNumber" required
data-parsley-pattern="^\d{16}$"
data-parsley-required-message="Card number is required."
data-parsley-pattern-message="Card number must be 16 digits">
</div>
<div class="col-md-4 mb-3 mb-md-0">
<input type="text" inputmode="numeric" class="form-control" minlength="2" maxlength="4" placeholder="CVV" name="cvv" required
data-parsley-pattern="^\d{3,4}$"
data-parsley-required-message="CVV is required."
data-parsley-pattern-message="CVV must be 3 or 4 digits">
</div>
<div class="col-md-4">
<input type="text" class="form-control" minlength="2" placeholder="Expiry (MM/YY)" name="expiry" required
maxlength="5"
data-parsley-pattern="^(0[1-9]|1[0-2])\/\d{2}$"
data-parsley-required-message="Expiry date is required."
data-parsley-pattern-message="Expiry must be in MM/YY format"
data-parsley-expiry-notpast
oninput="formatExpiry(this)">
</div>
</div>
</div>
<div class="btn-sec mt-3">
<!-- <button type="button" class="btn back">Back</button> -->
<button type="submit" class="btn order-now">Order Now</button>
</div>
</form>
</div>
</div>
</section>
<?php get_footer(); ?>