@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="paymentcard-wrapper mt-30">
        <div class="box-white">
            <h5 class="">Choose payment method.</h5> 
            
         <div class="paymentcardarea">
                <form action="{{route('patient.payment.make')}}" method="POST">   
                    @csrf
                    <input type="hidden" name="gateway" value="{{$paymentGateway}}">
                    <input type="hidden" name="appointment_id" value="{{$appointment->id}}">
                    <input type="hidden" name="amount" value="{{$data['amount']}}">
                    <input type="hidden" name="notes" value="{{$data['notes']}}">
                    <input type="hidden" name="invoice_number" value="{{$data['invoice_number']}}">
                    <input type="hidden" name="payment_due" value="{{$data['payment_due']}}">
                    <input type="hidden" name="payment_type" value="{{$data['payment_type']}}">
                    <div class="cc-selector">
                        <ul class="area-visamaster">
                            @forelse ($cards as $card)
                            <li class="areavisa">
                                <input id="{{$card['card_number']}}" type="radio" name="card_token" value="{{$card['card_token']}}" @if($loop->first) checked @endif>
                                <label class="drinkcard-cc" for="{{$card['card_number']}}"><img src="{{$card['card_logo']}}"></label>
                                <h3 class="text-blue font-16 mb-3 font-bold text-capitalize">{{$card['card_holder']}}</h3>
                                <p><span class="pcardno">{{$card['card_number']}} </span> - {{\Carbon\Carbon::parse($card['card_expiry'])->format('m/y')}}</p>
                            </li>
                            @empty 
                            {{--@if($appointment->client->id == auth()->guard('practitioner_client')->id())
                              <p class="text-danger"> You do not have registered any payment card yet!</p>
                            @else 
                              <p class="text-danger"> Your family member do not have registered any payment card yet!</p>
                            @endif--}}    
                            @endforelse
                        </ul>
                    </div>
                    <button class="payment-btn-width btn-fill mt-20 @if(count($cards)<=0) btn btn-secondary @endif" @if(count($cards)<=0) disabled @endif>Proccess payment</button>
                </form>
                {{--@if($appointment->client->id == auth()->guard('practitioner_client')->id())
                    <button class="payment-btn-width btn-fill mt-20" data-toggle="modal" data-target="#paymentcard-modal">Add New Card</button>
                @endif --}}
            </div>
        </div>-->
         <div class="client-follow-popup customscroll openclickmodal quickaddModal addpaymentmethod processpayModal">
<div class="modal fade show" id="processpayModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" style="display: block; padding-right: 17px;">
 <div class="modal-dialog modal-dialog-centered" role="document">
 <form action="{{route('patient.payment.make')}}" method="POST">   
                    @csrf
                    <input type="hidden" name="gateway" value="{{$paymentGateway}}">
                    <input type="hidden" name="appointment_id" value="{{$appointment->id}}">
                    <input type="hidden" name="amount" value="{{$data['amount']}}">
                    <input type="hidden" name="notes" value="{{$data['notes']}}">
                    <input type="hidden" name="invoice_number" value="{{$data['invoice_number']}}">
                    <input type="hidden" name="payment_due" value="{{$data['payment_due']}}">
                    <input type="hidden" name="payment_type" value="{{$data['payment_type']}}">
    <div class="modal-content">
       <div class="popup-marg">
          <div class="modal-header">
             <h5 class="modal-title text-left eagle-font font-600" id="exampleModalLabel2">Choose Payment Method</h5>
             <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><a href="{{route('patient.appointment.index')}}"><img src="{{asset('assets/images/close-img.svg')}}" alt="" class="img-fluid closeimg"></a></span>
             </button> -->
          </div>
          <div class="modal-body p-0">
         <div class="comm-marg waitlist-modal small-bullet">
                           <div class="mt-30">
                           @forelse ($cards as $card)

                           <div class="media">
                              <div class="media-body">
                                 <div class="form-group usermastericon">
                                    <input readonly="" type="text" class="form-control" placeholder=".... .... .... 5678" value="{{$card['card_number']}}">  <span><img src="{{$card['card_logo']}}" alt="" class="img-fluid"></span>
                                 </div>
                              </div>
                              <div class="delete-check-icon checkedbox">
                                 <ul class="mb-0">
                                    <li>
                                       <div class="rdio rdio-primary radio-inline"> <input id="{{$card['card_number']}}" name="card_token" type="checkbox" class="card-list" @if($loop->first) checked @endif value="{{$card['card_token']}}">
                                          <label for="{{$card['card_number']}}"></label>
                                       </div>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                           @empty 
                           @endforelse
                           
                           <div class="addplus-icon text-center mt-10 mb-20">
                              <a href="{{route('patient.payment.add.card')}}"><img src="{{asset('assets/images/round-plus-img.png')}}" alt="" class="img-fluid mCS_img_loaded"></a>
                              
                           </div>
                            </div>
                        </div>  
          </div>
          <div class="modal-footer">
             <button class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer">Process payment</button>
          </div>
       </div>
    </div>
    </form>
 </div>
</div>
</div>
        </div>
      </div>
@endsection

{{--@section('modals')
    @include('front.patient.payment.modals.add-new-card')
@endsection--}}

@section('css')
<style>
.addpaymentmethod .form-group {
     position: relative;
 }
 .addpaymentmethod .form-group::after {
    content: "";
    position: absolute;
    top: 38px;
    left: 10px;
 }
 .usermastericon::after {
    background: url(../images/master-card.png);
    width: 40px;
    height: 24px;
    top: 6px !important;
    background-size: 40px;
    background-repeat: no-repeat;
 }

 .uservisaicon::after {
    background: url(../images/visa.png);
    width: 40px;
    height: 24px;
    top: 12px !important;
    background-size: 40px;
    background-repeat: no-repeat;
 }
 .addpaymentmethod .form-group .form-control {
     border: 1px solid #ccc !important;
     padding-left: 45px;
     color: #898989;
     font-size: 14px;
     height: 36px !important;
 }
 #processpayModal .media {
    margin: 0px;
    border-bottom: 0px;
    padding-bottom: 0px;
}

#processpayModal .media .checkedbox {
    top: 12px
}
#processpayModal .modal-content {
     background: #fff;
 }

 #processpayModal  .small-bullet .rdio label:before {
    width: 18px;
    height: 18px;
 }

 #processpayModal .small-bullet .rdio-primary input[type="checkbox"]:checked+label::after {
    background-size: 8px;
    left: 0px;
    top: 3px;
}

#processpayModal .comm-marg {
   padding: 0 20px;
}





.paymentcard-wrapper .box-white {
    background: #fff;
    border: 1px solid #ccc;
    padding: 30px;
    max-width: 700px;
    margin: auto;
}

.paymentcardarea .input-icon-wrap {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    position: relative;
}
#processpayModal .form-group span {
    position: absolute;
    top: 5px;
    left: 5px;
 }

 #processpayModal .form-group span img {
    width: 35px;
    height: auto;
 }

 #processpayModal .uservisaicon::after, #processpayModal .usermastericon::after {
     content: none;
 }

.paymentcardarea form {
    background-color: white;
    color: #888888;
    text-align: left;
}

.paymentcardarea label {
    color: #24303F;
}

.paymentcardarea input {
    padding-left: 10px;
    border-color: transparent;
    border-radius: 5px !important;
    box-shadow: none;
    border: 1px solid #ccc;
    padding-right: 30px;
    font-size: 14px;
}

.paymentcardarea .form-control:focus {
    border: 1px solid #ccc;
}

.paymentcardarea .icon {
    position: relative;
    float: right;
    margin-right: 8px;
    margin-top: -24px;
    z-index: 2;
    color: #222222;
}

.paymentcardarea .icon-textarea {
    float: left;
    margin-left: 8px;
    margin-top: -104px;
    position: relative;
    z-index: 2;
    color: #222222;
}

.area-visamaster {
    padding: 0
}

.area-visamaster li {
    display: inline-block;
    text-align: center;
    margin-right: 30px;
}

.area-visamaster li label {
    width: 200px;
    height: 60px;
    background: #24303f;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px !important;
}

.area-visamaster p {
    color: #24303f;
}

.cc-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.mastercard span, .visa span {
    position: absolute;
    bottom: -20px;
    color: #24303f;
    filter: brightness(1) grayscale(1) opacity(1);
    opacity: 1;
}

.mastercard {
    background-image: url(http://i.imgur.com/SJbRQF7.png);
}

.cc-selector input:active+.drinkcard-cc {
    opacity: .5;
}

.cc-selector input:checked+.drinkcard-cc {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.drinkcard-cc {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 70px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
    position: relative;
}

.drinkcard-cc:hover {
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.area-visamaster h3 {
    width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    margin: auto;
}
</style>
@endsection

@section('js')
<script>
    $('.card-list').on('change', function() {
        $('.card-list').not(this).prop('checked', false);  
    });
</script>
@endsection