<!DOCTYPE html>
<html lang="en">

<head>
  <title> EMSO - Permit App </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- ------ Meta Contents Start ----------------------------- -->
  <meta name="description" content="" />
  <meta name="keywords" content="">
  <meta name="copyright" content="">
  <!-- ------ Meta Contents End ----------------------------- -->

  <?php include 'includes/header.php'; ?>
  <?php include 'includes/main-menu.php'; ?>
  

  <!-- ........... Page-Payment-Method Start ..................  -->
  <section class="page-main-wrapper">
    <div class="custom-container">

      <div class="mainFlexWrapper">
        <!-------------- Main Wrapper ---------------->
        <div class="body-container my-container menu-wrapper-container active">                  

          <!-------- Start Profile-head --->
          <?php include 'includes/profile-head.php'; ?>
          <!-------- End Profile-head ----->
          
          <!-------- Start body-content-area-wrap --->
          <div class="body-content-area-wrap payment-method">
            <div class="head">
              <h3 class="title">Payment Method</h3>              
            </div>
            <div class="payment-area-wrapper"> 

              <div class="form-sec">
                <div class="row-div ">

                  <div class="overview-head">
                    
                    <div class="purchase-section flex-fill flex-vertical">

                      <ul class="detail-item">
                        <li>
                          <div class="label">Company Name : </div>
                          <div class="value">ABC Company</div>
                        </li>

                        <li>
                          <div class="label">Competition Name : </div>
                          <div class="value">ABC Competition</div>
                        </li>

                        <li>
                          <div class="label">Start Date : </div>
                          <div class="value">10 Apr 2026</div>
                        </li>
                        <li>
                          <div class="label">End Date : </div>
                          <div class="value">10 May 2026</div>
                        </li>
                        <li>
                          <div class="label">Competition category : </div>
                          <div class="value">Moto </div>
                        </li>
                        <li>
                          <div class="label">Competition Status : </div>
                          <div class="value">Club </div>
                        </li>
                        <!-- <li>
                          <div class="label">Pricelist  : </div>
                          <div class="value">Club – 1653,75 AED (including VAT)</div>
                        </li>
                        <li>
                          <div class="label">Discipline</div>
                          <div class="value">MOTO – Motocross</div>
                        </li>
                        <li>
                          <div class="label">location</div>
                          <div class="value">Al Ain Raceway</div>
                        </li> -->                  
                      </ul>  
                      
                    </div>

                   
                    <div class="total-section">                      
                      <form action="">
                        <div class="coupon-wrapper">
                          <p class="hd">Coupon Code/ Gift Card</p>
                          <div class="coupon-info">
                            <div class="coupon-txt-fld">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Code" required>                              
                            </div>
                            <a class="coupon-btn" href=""> Apply </a>
                          </div>
                          <p class="apply-coupon-code"> <img src="images/icon-check.svg" alt=""> Applied coupon code </p>                          
                        </div>
                      </form>                      
                      
                      <div class="total-label "> Total total payable amount</div>
                      <div class="value"> <span>AED</span> 1000 </div>
                    </div>

                    </div>


                  <!-- CARD FORM -->
                  <div class="data-wrapper">
                    <form action="" method="POST" class="custom-form input-bg-white">
                    
                      <!-- ======== TAB-MENU START-HERE =================== -->
                      <ul class="nav nav-tabs border-bottom border-primary mt-2" 
                          id="payment-tab" role="tablist">                        
                        <li class="nav-item" role="presentation">
                          <button class="nav-link active " 
                                  id="card-payment-tab" 
                                  data-bs-toggle="tab" data-bs-target="#card-payment" 
                                  type="button" role="tab" 
                                  aria-controls="card-payment" aria-selected="true">Card Payment
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" 
                                  id="bank-transfer-tab" 
                                  data-bs-toggle="tab" data-bs-target="#bank-transfer" 
                                  type="button" role="tab" 
                                  aria-controls="bank-transfer" aria-selected="false">Bank Transfer
                          </button>
                        </li>
                        
                      </ul>
                      <!-- ======== TAB-MENU END-HERE =================== -->

                      <!-- ======== TAB-CONTTENT-WRAPPER START-HERE =================== -->
                      <div class="tab-content" id="payment-tab-content-wrapper">

                        <!-- =====Tab-content 01 start ============= -->
                        <div class="tab-pane fade show active " id="card-payment" role="tabpanel" aria-labelledby="card-payment">
                          <div class="card-data flex-fill flex-vertical">
                            <!-- Card Number -->
                            <div class="flex-between flex-vertical-center">
                              <div class="card-property-title">
                                Card Number
                                <span>Enter 16-digit card number on the card</span>
                              </div>
                            </div>

                            <!-- Card Field -->
                            <div class="flex-between">
                              <div class="card-number flex-vertical-center flex-fill">
                                <div class="card-number-field flex-vertical-center flex-fill">
                                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
                                    <path fill="#ff9800" d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" />
                                    <path fill="#d50000" d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" />
                                    <path fill="#ff3d00" d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z" />
                                  </svg>
                                  <input type="text" placeholder="Card Number" class="form-control" id="cardNumber" onkeypress="return onlyNumberKey(event)" maxlength="19" name="cardNumber" data-bound="carddigits_mock" data-def="0000 0000 0000 0000" required />
                                </div>
                                <i class="fa fa-credit-card" aria-hidden="true"></i>
                              </div>
                            </div>

                            <!-- Expiry Date -->
                            <div class="flex-between">
                              <div class="card-property-title">
                                Expiry Date
                                <span>Enter the expiration date of the card</span>
                              </div>
                              <div class="card-property-value flex-vertical-center">
                                <div class="input-container half-width">
                                  <input class="numbers month-own" data-def="00" type="text" data-bound="mm_mock" placeholder="MM" />
                                </div>
                                <span class="m-md">/</span>
                                <div class="input-container half-width">
                                  <input class="numbers year-own" data-def="01" type="text" data-bound="yy_mock" placeholder="YYYY" />
                                </div>
                              </div>
                            </div>

                            <!-- CCV Number -->
                            <div class="flex-between">
                              <div class="card-property-title">
                                CVC Number
                                <span>Enter card verification code from the back of the
                                  card</span>
                              </div>
                              <div class="card-property-value">
                                <div class="input-container">
                                  <input id="cvc" placeholder="Card CVV" maxlength="3" onkeypress="return onlyNumberKey(event)" type="password" />
                                  <i class="fa fa-eye" aria-hidden="true"></i>
                                </div>
                              </div>
                            </div>

                            <!-- Name -->
                            <div class="flex-between">
                              <div class="card-property-title">
                                Cardholder Name
                                <span>Enter cardholder's name</span>
                              </div>
                              <div class="card-property-value">
                                <div class="input-container">
                                  <input id="name" data-bound="name_mock" data-def="Mr. Cardholder" type="text" class="uppercase" placeholder="CARDHOLDER NAME" />
                                  <i class="fa fa-user-o" aria-hidden="true"></i>
                                </div>
                              </div>
                            </div>                 

                            <div class="flex-between">
                              <div class="card-property-title">
                                Mobile No.
                                <span>Enter Mobile No.</span>
                              </div>
                              <div class="card-property-value">
                                <div class="input-container">
                                  <input id="phone" type="text" placeholder="Your Mobile No." />
                                  <i class="fa fa-phone" aria-hidden="true"></i>
                                </div>
                              </div>
                            </div>

                            <div class="flex-between">
                              <div class="card-property-title">
                                Amount 
                                <span>Total Payable Amount</span>
                              </div>
                              <div class="card-property-value">
                                <div class="input-container">
                                  <input id="phone" type="text" placeholder="1000" />                                 
                                </div>
                              </div>
                            </div>

                            
                          </div>
                          <div class="action ">                        
                              <a class="button btn theme-btn large green" href="" data-bs-toggle="modal" data-bs-target=".form-payment-modal">  <img src="images/icon-check.svg" alt=""><span class="text">Pay Now</span> </a>
                          </div>
                        </div>
                        <!-- =====Tab-content 01 End ============= -->


                        <!-- =====Tab-content 02 start ============= -->
                        <div class="tab-pane fade" id="bank-transfer" role="tabpanel" aria-labelledby="bank-transfer">
                          <div class="common-form-wrapper ">                 

                            <ul class="detail-item">
                              <li>
                                <div class="label">Bank Name </div>
                                <div class="value">ABC-Sample Bank</div>
                              </li>
                              <li>
                                <div class="label">Bank Account Owner Name </div>
                                <div class="value">Joseph</div>
                              </li>
                              <li>
                                <div class="label">IBAN Number </div>
                                <div class="value">AL35202111090000000001234567</div>
                              </li>
                              <li>
                                <div class="label">Amount </div>
                                <div class="value">AED 1000</div>
                              </li>                                                
                            </ul>

                            <div class="doc-upload-row">
                              <div class="form-group col-md-12">
                                  <label for="name" class="form-label">Proof of Document* </label>
                                  <input class="form-control" type="file" id="formFile">
                                  <div class="note"> <img src="images/info-circle.svg" alt=""> Accepted file types: pdf, doc, docx, jpg, png, jpeg.</div>
                              </div>
                            </div>


                            

                             <div class="form-group action">
                              <a class="button btn theme-btn large green" href="">  <img src="images/icon-check.svg" alt=""><span class="text">Submit</span> </a>
                             </div>



                          </div>
                          
                        </div>
                        <!-- =====Tab-content 02 End ============= -->
                      </div>
                      <!-- ======== TAB-CONTTENT-WRAPPER END-HERE =================== -->

                    </form>
                  </div>
                  <!-- Card Form End -->

                  
                  
                </div>
              </div>
            </div>
          </div>
          <!-------- End body-content-area-wrap --->
          
        </div>
        <!-------------- Main Wrapper ---------------->
      </div>

    </div> 
  </section>
  <!-- ........... Page-Payment-Method End .................. -->


  <!-- Payment Popup start ------>
  <div  class="modal fade form-payment-modal common-modal" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close close-btn" data-bs-dismiss="modal">&times;</button>
                   
        </div>
        <div class="modal-body">                                  
           <div class="payment-message">

            <h3 class="hd">Your Payment was sucsessfully!</h3>
            <p>Payment has been received successfully. Thank you for your payment</p>
            <p class="highlight">We will Confirm and Organized the license soon</p>
             <div class="input-btn-wrapper multi-btn-wrap">
               <button type="submit" class="theme-btn close small" data-bs-dismiss="modal">
                <span class="text">Close</span>
              </button>
              <button type="submit" class="btn theme-btn green small">
                <span class="text">OK</span>
              </button>
             </div>
           </div>                        
        </div>
        
      </div>
    </div>
  </div>      
  <!-- Payment Popup end   ------->

 


  <?php include 'includes/footer.php'; ?>
       
