<!--add card modal-->
<div class="modal fade add-card-modal" id="addCard" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Card</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="icon-cross"></i>
</button>
</div>
<div class="modal-body">
<div class="row col-custom-padding">
<div class="col-md-12 d-flex align-items-center mb-2">
<label class="modal-label">Card Information</label>
<ul class="modal-action-link ml-auto">
<li><a href="javascript:void(0);">Manage Cards</a></li>
<li><a href="javascript:void(0);">Clear</a></li>
</ul>
</div>
<div class="col-md-6 mb-2">
<label>Card Number</label>
<div class="search-input-col">
<img class="visa-img" src="images/visa.png">
<input type="text" value="4062 3143 2637 3837" class="form-control" >
</div>
</div>
<div class="col-md-6 mb-2">
<div class="row col-custom-padding">
<div class="col-md-8">
<label>Expiry Date</label>
<div class="clearfix"></div>
<div class="expiry-yearTxt">
<div class="search-input-col form-control-padding custom-dropdown ml-0">
<i class="icon-arrow-bottom"></i>
<select class="form-control">
<option>07</option>
</select>
</div>
<div class="search-input-col form-control-padding custom-dropdown">
<i class="icon-arrow-bottom"></i>
<select class="form-control">
<option>2025</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<label>Enter CCV</label>
<div class="search-input-col">
<input type="text" value="xxx" class="form-control" >
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-3 mb-2">
<label class="modal-label">Card Holder</label>
</div>
<div class="col-md-6 mb-2">
<label>First Name</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="Richard" >
</div>
</div>
<div class="col-md-6 mb-2">
<label>Last Name</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="Guo">
</div>
</div>
<div class="col-md-6 mb-2">
<label>Phone</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="+1 7711234567">
</div>
</div>
<div class="col-md-6 mb-2">
<label>Email</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="richard@synnex.com">
</div>
</div>
<div class="col-md-12 mt-3 mb-2">
<label class="modal-label">Billing Address</label>
</div>
<div class="col-md-6 mb-2">
<label>Address</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="300 Rock RD">
</div>
</div>
<div class="col-md-6 mb-2">
<div class="row col-custom-padding">
<div class="col-md-6">
<label>City </label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="Greer">
</div>
</div>
<div class="col-md-6">
<label>Zip Code</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" value="29651">
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<label>State/Province</label>
<div class="custom-dropdown">
<i class="icon-arrow-bottom"></i>
<select class="form-control">
<option>South Carolina</option>
</select>
</div>
</div>
<div class="col-md-6 mb-2">
<label>Country</label>
<div class="custom-dropdown">
<i class="icon-arrow-bottom"></i>
<select class="form-control">
<option>United States</option>
</select>
</div>
</div>
<div class="col-md-12 term-policy">
<div class="customer-type">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="agreement1" name="examples1" checked="checked">
<label class="custom-control-label" for="agreement1">By selecting you confirm you agree to T&C and Token Policy outlined for this and any future
transactions <span>for this card</span></label>
</div>
</div>
<div class="customer-type">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="agreement2" name="examples1" >
<label class="custom-control-label" for="agreement2">Card info will be saved for future usage</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="set-default-btn mr-auto">
<span class="toggle-btn">
<label class="switch"><input type="checkbox"><span class="slider round"></span></label>
</span><span class="set-default-lbl">Set as Default</span>
</div>
<button type="button" class="btn btn-outline" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary addCard" data-dismiss="modal">Add Card</button>
</div>
</div>
</div>
</div>
<!--Add card modal end-->
