@extends('front.patient.inner-layout.app')
@section('page_tab_title' ,"My Familiy") 
@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"><span class="arca-font">My</span> Familiy</h1>
            </div>
             @include('front.patient.inner-layout.header')
         </div>
         {{-- @dump($familyMember->familyMembersname->full_name) --}}
         <div class="brdr-bttm mb-0"></div>
         @php $familyMembers =  $user->familyMembers()->paginate(10) @endphp

         <!-- 
             change familyMembers to familyMembers  (08-11-2021)
             change familyMembersname to familyMembersname  (08-11-2021)
         -->

         @forelse($familyMembers as $familyMember)
            @php if(empty($familyMember->familyMembersname)){ continue; } @endphp
            @if($loop->first)
                <div class="mydashboard-upcoming-area service-provider-area familiy-provider-area clientdas-familiy mt-45">
            @endif
                <div class="row">
                    <div class="col-xl-7 col-lg-12 col-md-12 main-row">
                        <div class="appointment-box">
                            <div class="media-checkin brdr-btm-none p-lr-24">
                                <div class="row align-items-center">
                                <div class="col-lg-8 col-md-8 col-sm-8">
                                    <div class="media h4-left-title">
                                        <div class="client-pic">
                                            <div class="client-pic-inner text-uppercase">
                                               @isset($familyMember->familyMembersname->photo)

                                               <img src='{{asset("storage/".$familyMember->familyMembersname->photo)}}' alt="" class="img-fluid name_photo newphoto" data-clientid="{{$familyMember->familyMembersname->id}}">
                                               @else
                                               {{ $familyMember->familyMembersname->name[0].$familyMember->familyMembersname->last_name[0] }}
                                               @endisset
                                            </div>
                                        </div>

                                        <div class="media-body">
                                            <h4 class="sub-title text-capitalize">{{$familyMember->familyMembersname->full_name ?? ""}}</h4>
                                            <span class="sub-title font-400 text-capitalize">{{$familyMember->relation ?? ""}}
                                             <span class="d-block font-400">Account balance ${{$familyMember->familyMembersname->account_balance ?? ""}}</span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4">
                                    <div class="btn-proflie-appoint">
                                        <button type="button" data-toggle="modal" data-target="#billyModal" class="btn-grreen btn-transp sub-title d-block ajax-modal-content"  data-url="{{ route('patient.familymember.edit',$familyMember->relation_client_id) }}">Edit Profile</button>
                                        <button type="button" class="btn-grreen btn-transp sub-title d-block btnappoint">Appointments</button>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-5 col-lg-12 col-md-5 next-row">
                        <div class="familiy-dahboard-area">
                        <div class="client-follow-popup customscroll openclickmodal appoint-upcoming rightbox">
                            <div class="mydashboard-upcoming-area">
                                <h2 class="sub-title mb-3">Upcoming Appointments</h2>
                                @forelse ($familyMember->familyMembersname->appointments()->select('*', DB::raw('concat(`date`," ", `time`)  as nextdate'))->having('nextdate', '>=', \Carbon\Carbon::now()->timezone(getAustraliaTimeZone())->format('Y-m-d H:i'))
               ->where('status','!=','cancelled')->get() as $appointment)
                                    <div class="appointment-box">
                                        <div class="month-year-text p-lr-24">
                                            <div class="row align-items-center">
                                                <div class="col-lg-12 col-md-7 col-9">
                                                    <h3 class="sub-title ml-0 font-bold mb-0" id="{{"appointment_date_title_".$appointment->id}}">{{ \Carbon\Carbon::parse($appointment->date)->format('D jS F Y,')}} {{\Carbon\Carbon::parse($appointment->time)->format('g:iA')}}</h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="media-checkin p-lr-24">
                                            <div class="row align-items-center">
                                                <div class="col-lg-7 col-md-7 col-sm-7">
                                                    <div class="media">
                                                    <div class="client-pic">
                                                        <div class="client-pic-inner">
                                                            <img src='{{ !empty($appointment->practitioner->personalProfile->profile_picture) ? asset('storage/practitioner_picture/'.$appointment->practitioner->personalProfile->profile_picture) : asset("assets/images/d-user-icon.png")}}' alt="Practitioner Picture" class="imageround img-fluid">
                                                        </div>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="sub-title text-capitalize">{{$appointment->practitioner->businessProfile->name ?? "Not specified"}}</h4>
                                                        <span class="sub-title text-capitalize">{{$appointment->practitioner->full_name ?? "Not specified" }}
                                                        <span class="d-block font-400 text-capitalize">{{$appointment->practitioner->personalProfile->practitionerProfession->name ?? "Not specified"}}</span></span>
                                                        <ul class="dash-icon mt-10">
                                                            <li><a target="_blank" href="{{route('patient.view.practitioner.location',$appointment->practitioner->id)}}"><img src='{{asset("assets/images/pointer-img.png")}}' alt=""></a></li>
                                                            <li><a  data-toggle="modal" data-target="#booknowModal" data-appointment-id="{{$appointment->id}}" data-practitioner-id="{{$appointment->practitioner->id}}"
                                                                    data-dismiss="modal"><img src='{{asset("assets/images/rescheduled.svg")}}' alt=""></a></li>
                                                            <li><a href="@if(isset($appointment->practitioner->phone)){{"tel:".$appointment->practitioner->phone}}"@endif><img src='{{asset("assets/images/phone.svg")}}' alt=""></a></li>
                                                        </ul>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-5 col-md-5 col-sm-5">
                                                    <div class="chek-pay-btn">
                                                    @if(in_array($appointment->pay_status,['paid','owing','credit']))     
                                                        @if($appointment->client_appointment_status == "arrived")
                                                            <button type="button" class="btn-grreen sub-title d-block">Checked in</button>
                                                        @elseif($appointment->client_appointment_status == '')
                                                            <button type="button" class="btn-grreen btn-transp sub-title d-block check-in-btn" data-appointment_id="{{$appointment->id}}">Check in</button>
                                                        @endif
                                                    @endif    
                                                    @if($appointment->pay_status == "pending")
                                                        <button type="button" data-toggle="modal" data-target="#invoicetemplatemodal" class="btn-grreen btn-l-grreen sub-title d-block ajax-invoice-fetch" data-url="{{route('patient.payment.invoice.fetch',['id'=>$appointment->id])}}">Pay now</button>
                                                    @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-lr-24">
                                            <div class="row align-items-center">
                                                <div class="col-lg-12 col-md-12">
                                                    <h3 class="sub-title font-15 ml-0 mb-0 font-bold text-capitalize appointment_type" >{{$appointment->appointment_type->appointment_type}}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="brdr-bttm"></div>
                                 @empty
                                    <div class="appointment-box">
                                       <div class="row align-items-center">
                                          <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                             <p class="person-name pl-3">No Upcoming Appointments</p>
                                          </div>
                                       </div>
                                    </div>
                                 @endforelse

                                 @forelse ($familyMember->familyMembersname->appointments()->select('*', DB::raw('concat(`date`," ", `time`)  as nextdate')) ->having('nextdate', '<', \Carbon\Carbon::now()->timezone(getAustraliaTimeZone())->format('Y-m-d H:i'))
               ->where('status', '!=', 'cancelled')->get() as $appointment)
                                    <div class="appointment-box">
                                       <div class="month-year-text p-lr-24">
                                          <div class="row align-items-center">
                                             <div class="col-lg-9 col-md-8 col-sm-8">
                                               <h3 class="sub-title ml-0 font-bold mb-0" id="{{"appointment_date_title_".$appointment->id}}">{{ \Carbon\Carbon::parse($appointment->date)->format('D jS F Y,')}} {{\Carbon\Carbon::parse($appointment->time)->format('g:iA')}}</h3>
                                             </div>
                                             <div class="col-lg-3 col-md-4 col-sm-4 appointment-paid-status-width">
                                                 <a href="javascript:" class="greenntext sub-title float-right float-mob paid-text greenbtn-text">{{ $appointment->pay_status  ?? "Pending"  }}</a>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="media-checkin p-lr-24 brdr-btttm pb-0 mb-0">
                                          <div class="row align-items-center">
                                             <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="media">
                                                   <div class="client-pic">
                                                      <div class="client-pic-inner">
                                                         <img src='{{ !empty($appointment->practitioner->personalProfile->profile_picture) ? asset('storage/practitioner_picture/'.$appointment->practitioner->personalProfile->profile_picture) : asset("assets/images/d-user-icon.png")}}' alt="Practitioner Picture"  class="img-fluid">
                                                      </div>
                                                   </div>
                                                   <div class="media-body">
                                                      <h4 class="sub-title text-capitalize">{{$appointment->practitioner->businessProfile->name ?? "Not specified"}}</h4>
                                                      <span class="sub-title text-capitalize">{{$appointment->practitioner->full_name ?? "Not specified" }}
                                                      <span class="d-block font-400 text-capitalize">{{$appointment->practitioner->personalProfile->practitionerProfession->name ?? "Not specified"}}</span></span>
                                                      <ul class="dash-icon mt-10">
                                                         <li><a href="javascript:" class="book-appointment-patient-btn" data-toggle="modal" data-target="#calenderModal"  data-practitioner-id="{{$appointment->practitioner->id}}"><img src='{{asset("assets/images/add-appointment-icon.svg")}}' alt=""></a>
                                                         </li>
                                                         <li><a href="@if(isset($appointment->practitioner->phone)){{"tel:".$appointment->practitioner->phone}}" @endif><img src='{{asset("assets/images/phone.svg")}}' alt=""></a></li>
                                                         <li><a data-toggle="modal" data-target="#dollartemplatemodal" class="cursor-pointer"><img src='{{asset("assets/images/dollar.svg")}}' alt=""></a></li>
                                                      </ul>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="brdr-bttm"></div>
                                 @empty
                                    <div class="appointment-box">
                                       <div class="row align-items-center">
                                          <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                             <p class="person-name pl-3">No Past Appointments</p>
                                          </div>
                                       </div>
                                    </div>
                                 @endforelse
                            </div>
                        </div>
                        </div>
                    </div>
                </div>

            @if($loop->last)
                {{$familyMembers->links()}}
                </div>
            @endif
         @empty
         <div class="mydashboard-upcoming-area appoint-box-center addfamiliy-member">
            <div class="appointment-empty-box appoint-emptybox-mob">
               <div class="img-calenderbox">
                   <img src='{{asset("assets/images/avtar-img-1.png")}}' alt="" class="img-fluid">
               </div>
                  <h3 class="sub-title">No family members added</h3>
                  <div class="customformcontrol-form addservice">
                  <a href="javascript:" class="btn-unfill" data-toggle="modal" data-target="#addfamliymodal">Add family member</a>
                  </div>
            </div>
         </div>
         @endforelse
      </div>
@endsection

@section('modals')
<!-- BL Modal Start -->
<div class="client-follow-popup login-modal  bulk-popup customscroll clientabpopup profiledit-modal client-dahsboardfamiliy footer-brdr" id="myclienthide">
    <div class="modal fade " id="billyModal"  role="dialog" aria-labelledby="exampleModalLabel13"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="popup-marg">
                <div class="modal-header">
                    <h5 class="modal-title text-center font-400" id="exampleModalLabel13">Edit Profile</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid"></span>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <div class="mCustomScrollbar">
                        <div class="accordion pt-0" id="accordion-client">
                             <!-- AJAX content -->
                        </div>
                    </div>
                </div>
               <!--  <div class="modal-footer">
                    <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100 font-15 save-family-member">Update and save</a>
                </div> -->
            </div>
        </div>
        </div>
    </div>
</div>
<!-- BL Modal End -->

@include('front.patient.family.modals.invoice-filter')
@include('front.patient.family.modals.reschedule-appointment')
@include('front.patient.family.modals.send-single-test')
@include('front.patient.family.modals.send-multiple-reports')
@include('front.patient.family.modals.send-invoices')
@include('front.patient.family.modals.test-result-filter')
@endsection

@section('css')
<style>
   .wlistpopup .btn-fill {
         min-width: auto;
         width: 100%;
    }
    .wlistpopup .boxwhite {
         padding: 15px 20px !important;
    }
    .wlistpopup .form-control {
         box-shadow: none;
    }
    @media (max-width:575px){
        .datepicker.dropdown-menu{
          position: fixed !important;
          top: 35% !important;
      } 
    }
   
</style>      
@endsection
@section('js')
    <script type="text/javascript">   
        var iamgeurl = "{{route('patient.client.image.upload')}}";
    </script>
<script src="{{ asset('assets/patient/js/family-member/family-member.js')}}"></script>
@endsection