Subversion Repositories SmartDukaan

<style>
.row{
        margin:0 auto;
}
.modal-content{
                background : white;
        }
        .modelHeaderCustom{
                font-size:14px;
                font-weight:bold;
        }
        .border-highlight{
                border : 3px solid red;
        }
        hr{
                background-color:#007aff;
                border:none;
                height:1px;
                background:#007aff;
        }
        .control-label {
                margin-top: 0;
        margin-bottom: 0;
        padding-top: 7px;
        font-weight:bold;
        font-size:14px;
        }
        .form-group{
                border-bottom: 1px solid #eff2f7;
        padding-bottom: 15px;
        margin-bottom: 15px;
        }
        .right{
                float:right;
        }
        .form-control{
                color:black;
                text-transform:uppercase;
        }
}
</style>
<section class="wrapper">
<div class="row">
                <div class="col-lg-12">
                        <h3 class="page-header"><i class="icon_table"></i>Order</h3>
                        <ol class="breadcrumb">
                                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                                <li><i class="icon_table"></i>ORDER</li>                                                        
                        </ol>
                </div>
</div>
<form id="cd">
<div id="customer-details" style="background:white;background-color:white;padding:1%;">
        <h4 class="modelHeaderCustom" style="text-align:center;font-size:22px;margin-bottom:3%;">Customer Information</h4>
        <div class="row">
                <div class="col-lg-6">
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Customer Name</label>
                                        <div class="col-lg-6">
                                          <input id="name" name="name" type="text" value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Phone</label>
                                        <div class="col-lg-6">
                                          <input id="phone" name="phone" type="text" value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Email</label>
                                        <div class="col-lg-6">
                                          <input id="email" name="email" type="text" value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Alternate Phone Number</label>
                                        <div class="col-lg-6">
                                          <input id="alternatePhone" name="alternatePhone" type="text"  value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Address Line1</label>
                                        <div class="col-lg-6">
                                          <input id="line1" name="line1" type="text" size="50" value="" class="form-control">
                                        </div>
                                </div>
                </div>
                <div class="col-lg-6">
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Address Line2</label>
                                        <div class="col-lg-6">
                                          <input  id="line2" name="line2" type="text" value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Landmark</label>
                                        <div class="col-lg-6">
                                          <input  id="landmark" name="landmark" type="text" value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">City</label>
                                        <div class="col-lg-6">
                                          <input id="city" name="city" type="text" value="" class="form-control">
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">State</label>
                                        <div class="col-lg-6">
                                                <select class="form-control" name = "state" placeholder="State">
                                <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                            <option value="Andhra Pradesh">Andhra Pradesh</option>
                            <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                            <option value="Assam">Assam</option>
                            <option value="Bihar">Bihar</option>
                            <option value="Chandigarh">Chandigarh</option>
                            <option value="Chhattisgarh">Chhattisgarh</option>
                            <option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
                            <option value="Daman and Diu">Daman and Diu</option>
                            <option value="Delhi">Delhi</option>
                            <option value="Goa">Goa</option>
                            <option value="Gujarat">Gujarat</option>
                            <option value="Haryana">Haryana</option>
                            <option value="Himachal Pradesh">Himachal Pradesh</option>
                            <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                            <option value="Jharkhand">Jharkhand</option>
                            <option value="Karnataka">Karnataka</option>
                            <option value="Kerala">Kerala</option>
                            <option value="Lakshadweep">Lakshadweep</option>
                            <option value="Madhya Pradesh">Madhya Pradesh</option>
                            <option value="Maharashtra">Maharashtra</option>
                            <option value="Manipur">Manipur</option>
                            <option value="Meghalaya">Meghalaya</option>
                            <option value="Mizoram">Mizoram</option>
                            <option value="Nagaland">Nagaland</option>
                            <option value="Orissa">Orissa</option>
                            <option value="Pondicherry">Pondicherry</option>
                            <option value="Punjab">Punjab</option>
                            <option value="Rajasthan">Rajasthan</option>
                            <option value="Sikkim">Sikkim</option>
                            <option value="Tamil Nadu">Tamil Nadu</option>
                            <option value="Tripura">Tripura</option>
                            <option value="Telangana">Telangana</option>
                            <option value="Uttaranchal">Uttaranchal</option>
                            <option value="Uttar Pradesh">Uttar Pradesh</option>
                            <option value="West Bengal">West Bengal</option>
                        </select>
                                        </div>
                                </div>
                                <div class="row form-group">
                                        <label class="control-label col-lg-6">Pincode</label>
                                        <div class="col-lg-6">
                                          <input id="pincode" name="pincode" type="text" value="" class="form-control">
                                        </div>
                                </div>
                </div>
     </div>
</div>
<div id="order-details" style="background:white;background-color:white;">
#if($cartObj.size()==0)
        <div class="card row"
                <p>Your Cart is Empty.</p>      
        </div>
#else
<h4 class="modelHeaderCustom" style="text-align:center;font-size:22px;margin-bottom:3%;">Product Information</h4>
        #foreach ($cartItem in $cartObj)
                <div class="row">
                        <div class="col-sm-4">
                                <h4 class="grnProductInfo modelHeaderCustom">Product Details : <span>$cartItem.getDisplayName()</span></h4>
                        </div>
                        <div class="col-sm-2">
                                <h4 class="grnProductInfo modelHeaderCustom">Quantity : <span>$cartItem.getQuantity()</span></h4>
                        </div>
                        <div class="col-sm-3">
                                <h4 class="grnProductInfo modelHeaderCustom">Unit Price : <input type="number" class="unitPrice" name="unitPrice" quantity="$cartItem.getQuantity()" value="0" itemId="$cartItem.getItemId()"></h4>
                        </div>
                        <div class="col-sm-3">
                                <h4 class="grnProductInfo modelHeaderCustom">Total Price : <input name="totalPrice" class="totalPrice" itemId="$cartItem.getItemId()" type="number" value="0" readonly></h4>
                        </div>
                </div>
                #if($cartItem.getItemType() =="SERIALIZED")
                                <div class="row">
                                        <div class="col-sm-4">
                                                <h4 class="modal-title">Enter Serial Numbers</h4>
                                        </div>
                                </div>
                                <div class="row">
                                        #foreach ($number in [1..$cartItem.getQuantity()])
                                                <div class="col-sm-3"><div class="input-group"><input type="text" itemId="$cartItem.getItemId()" name="serialNumber" class="serialNumber form-control"></div></div>
                                        #end
                                </div>
                        #end
                        <hr>            
        #end
</div>
#end

<div id="payment-details" style="background:white;background-color:white;">
        <div class="row">
                <div class="col-lg-6 right">
                        <div class="col-lg-6">
                                <h4 class="grnProductInfo modelHeaderCustom right">Net Payable Amount :</h4>
                        </div>
                        <div class="col-lg-6">
                                <input type="number" class="netPayableAmount form-control" name="" value="0" readonly class="form-control">
                        </div>
                </div>
        </div>
        <p></p>
        <div class="row">
                <div class="col-lg-6 right">
                        <div class="col-lg-6">
                                <h4 class="grnProductInfo modelHeaderCustom right">Cash Amount:</h4>
                        </div>
                        <div class="col-lg-6">
                                <input type="number" name="CASH" class="form-control cashAmount amount" value="0">
                        </div>
                </div>
        </div>
        <p></p>
        <div class="row">
                <div class="col-lg-6 right">
                        <div class="col-lg-6">
                                <h4 class="grnProductInfo modelHeaderCustom right">Debit/Credit Card Amount:</h4>
                        </div>
                        <div class="col-lg-6">
                                <input type="number" name="CARD" class="form-control cardAmount amount" value="0">
                        </div>
                </div>
        </div>
        <p></p>
        <div class="row">
                <div class="col-lg-6 right">
                        <div class="col-lg-6">
                                <h4 class="grnProductInfo modelHeaderCustom right">PayTm Amount:</h4>
                        </div>
                        <div class="col-lg-6">
                                <input type="number" name="PAYTM" class="form-control walletAmount amount" value="0">
                        </div>
                </div>
        </div>
        </div>
</div>
<div id="create-order" style="padding:10px;">
        <div class="row">
                <div class="col-xs-3" style="float:right;">
                        <button class="btn btn-primary order-checkout" type="submit" style="width:100%;border-radius:0px;">Create Order</button>        
                </div>
        </div>
</div>
</form>
</section>
<script>
$().ready(function() {
        $("form#cd input").each(function(){
                $(this).attr('autocomplete', 'off');
        });
});
</script>
<script>
$().ready(function() {
        // validate the comment form when it is submitted
        $('#cd').validate({
                rules:{
                        name:{
                                required:true
                        },
                        email:{
                                required:true,
                                email:true
                                
                        },
                        line1:{
                                required:true
                        },
                        state:{
                                required:true
                        },
                        city:{
                                required:true
                        },
                        pincode:{
                                required:true,
                                digits:true,
                                minlength: 6,
                maxlength: 6,
                        },
                        phone:{
                                required:true,
                                minlength:10,
                                maxlength:10,
                                digits:true
                        },
                },
                messages:{
                        name:{
                                required:"Please enter the name"
                        },
                        line1:{
                                required:"Please enter the address"
                        },
                        state:{
                                required: "Please select a state"
                        },
                        city:{
                                required: "Please enter the city"
                        },
                        email:{
                                require: "Please enter a valid email address"
                        },
                        pincode:{
                                required: "Please enter the pincode",
                                digits:"Please enter a valid pincode"
                        },
                        phone:{
                                required: "Please enter the phone number",
                                digits:"Please enter a valid number",
                                minlength:"Number should be of 10 digits"
                        }
                },
                submitHandler: function (form, event) {
                        event.preventDefault();
                        var payload = orderDetailsPayload();
                        if(!validateOrderDetails()){
                                alert("Please fix highlighted errors");
                                return false;
                        }
             $.ajax({
                 type: "POST",
                 url: "create-order",
                 data: payload,
                 contentType:'application/json',
                                async: false,
                                success: function (data) {
                                        emptyBag();
                                        $('#main-content').html(data);
                                },
                                error : function() {
                                        alert("OOPS!!!Failed to do changes.Try Again.",'ERROR');
                                },
                                cache: false,
                                processData: false
             });
             return false; // required to block normal submit since you used ajax
         }
        });
});
</script>