@extends('front.patient.inner-layout.app')
@section('content')
  <div class="page-content dashboard-wrapper mdashboard-wrapper space-bttm-n small-sc-relative">
    <div class="row align-items-center">
      <div class="col-lg-6 col-md-6 col-sm-4">
        <h1 class="page-title eagle-font font-400">Find <span class="arca-font">My</span> Appointment</h1>
      </div>
      @include('front.patient.inner-layout.header')
    </div>
    <div class="brdr-bttm mb-0"></div>

    <div class="client-follow-popup customscroll openclickmodal quickaddModal addpaymentmethod blockmodal">
      <div class="modal fade show" id="addpaymentpop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
         <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <form id="save-payment-card">
               <div class="popup-marg">
                  <div class="modal-header">
                     <h5 class="modal-title eagle-font font-bold text-left" id="exampleModalLabel2">Add Payment Method</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src='{{asset("assets/images/close-img.svg")}}' alt="" class="img-fluid closeimg"></span>
                     </button>
                  </div>
                  <div class="modal-body p-0">
                 
                     <div class="mCustomScrollbar">
                        <div class="comm-marg">
                           <div class="mt-10">
                              <div class="form-group usericon">
                                 <label>Name on card</label> 
                                 <input type="text" class="form-control require-input" placeholder="Name" id="card_holder" name="card_holder" maxlength="100">
                                 <span class="invalid-feedback d-block"></span>
                              </div>
                              <div class="form-group usercardicon">
                                 <label>Card Number</label> 
                                 <input type="text" class="form-control require-input" placeholder="0000 0000 0000 0000" id="card_number" name="card_number" maxlength="16">
                                 <span class="invalid-feedback d-block"></span>
                              </div>
                              <div class="row">
                                 <div class="col-lg-6 col-md-6">
                                    <div class="form-group expiryicon" id="open_from_date">
                                       <label>Expiry</label> 
                                       <!-- <input type="text" class="form-control" placeholder="MM/YY"> -->
                                       <div id="datepicker-group" class="input-group date filter-dropdown-three"
                                            data-date-format="mm-dd-yyyy">
                                            <input class="form-control border-0 box-shadow-none day-datepicker pt-0 pb-0 require-input"
                                            id="card_expiry" name="card_expiry" type="text" placeholder="05/2025" />
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-lg-6 col-md-6">
                                    <div class="form-group expiryicon">
                                       <label>CCV</label> 
                                       <input type="text" class="form-control require-input" id="cvv" name="cvv" maxlength="3" placeholder="000">
                                       <span class="invalid-feedback d-block"></span>
                                    </div>
                                 </div>
                              </div>

                           </div>
                        </div>
                     </div>
                  
                  </div>
                  <div class="modal-footer">
                  <button type="submit" class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer">Add Card</button>
                     <!-- <a data-toggle="modal" data-target="#processpayModal" data-dismiss="modal" class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer">Add Card</a> -->
                  </div>
               </div></form>
            </div>
         </div>
      </div>
      </div>



    <!-- Margi Code Start ---> 
    <div class="paymentcard-wrapper mt-30 patient-paymethod addpaymentmethod" style="display: none;">    
      <div class="box-white">
        <!-- Add payment method start -->
        <div class="paymentcard-modal">

        <div class="" id="paymentcard-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <!-- <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><img src='{{asset("assets/images/close-img.svg")}}' alt="" class="img-fluid closeimg"></span>
                </button>
              </div> -->
              <div class="modal-body">
                <form id="save-payment-card">
                  <div class="boxwhite paymentmethod">
                    <h3 class="ml-0">Add Payment method </h3>
                    <div class="collapse show" id="intakepaymenthod" data-parent="#accordion-client1">
                      <div class="claims-area mt-10">
                         <h4 class="font-15 text-blue mb-20">Name on card</h4>
                         <div class="row">
                            <div class="col-lg-12 col-md-6">
                               <div class="form-group boxs-none usericon">
                                  <input type="text" class="form-control required-input" id="card_holder" name="card_holder" placeholder="Name" maxlength="100">
                                  <span class="invalid-feedback d-block"></span>
                               </div>
                            </div>
                         </div>
                      </div>
                      <div class="claims-area">
                         <div class="row">
                            <div class="col-lg-9 col-md-6">
                               <div class="form-group boxs-none usercardicon">
                                  <label>Card Number</label>
                                  <input type="text" class="form-control required-input"  id="card_number" name="card_number" placeholder="0000 0000 0000 0000" maxlength="16">
                                  <span class="invalid-feedback d-block"></span>
                               </div>
                            </div>
                         </div>
                      </div>
                      <div class="claims-area">
                      <div class="row">
                        <div class="col-md-6">                          
                            <h4 class="font-15 text-blue mb-20">Expiry</h4>
                            <div class="form-group boxs-none expiryicon">
                              <input type="text" class="form-control required-input" id="card_expiry" name="card_expiry" placeholder="05/2025" maxlength="7">
                              <span class="invalid-feedback d-block"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h4 class="font-15 text-blue mb-20">CCV</h4>
                            <div class="form-group boxs-none expiryicon">
                              <input type="text" class="form-control required-input"  id="cvv" name="cvv" placeholder="000" maxlength="3">
                              <span class="invalid-feedback d-block"></span>
                            </div>
                        </div>
                      </div>
                      </div>
                      <div class="text-right mb-20">
                        <button type="submit" class="btn-fill w-100 h-33 br-10 font-15">Add Card</button>
                      </div>
                    
                  </div>
                </form>
              </div>
                <!-- <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
            </div>
          </div>
        </div>
        </div>
        <!-- Add payment method end-->
      </div>
    </div>
    <!-- Margi Code End--->

    

  </div>
@endsection