@extends('layouts.memberapp')

@section('content')


   <!-- ============================================================== -->
   <!-- Bread crumb and right sidebar toggle -->
   <!-- ============================================================== -->
   <div class="row page-titles">
      <div class="col-md-5 align-self-center">
         <h3 class="tmComColor">{{ __('lng.Profile') }}</h3>
      </div>
      <div class="col-md-7 align-self-center">
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)" class="tmComColor">{{ __('lng.Home') }}</a></li>
            <li class="breadcrumb-item">{{ __('lng.Profile') }}</li>
         </ol>
      </div>
      <div>
         <button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i
               class="ti-settings text-white"></i></button>
      </div>
   </div>

   <div class="container">
    <x-app-flash />
   </div>
   {{-- <button class="tst3 btn btn-success">Success Message</button> --}}
   <!-- ============================================================== -->
   <!-- End Bread crumb and right sidebar toggle -->
   <!-- ============================================================== -->
   <!-- ============================================================== -->
   <!-- Container fluid  -->
   <!-- ============================================================== -->
   <div class="container-fluid">
      <!-- ============================================================== -->
      <!-- Start Page Content -->
      <!-- ============================================================== -->
      <!-- Row -->
      <div class="row">
         <!-- Column -->
         <div class="col-lg-4 col-xlg-3 col-md-5">
            <div class="card card-default">
               <div class="card-header">
                   <div class="card-actions">
                       <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                       <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                       <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                   </div>
                   {{-- <h4 class="card-title m-b-0">Product Overview</h4> --}}
               </div>
               <div class="card-body">
                  <center class="m-t-30">
                     <a data-toggle="modal"  data-target="#ChangeProfile">
                        @if ($Member->photo)
                           <img src="{{ asset('storage/Member/Photo/' . $Member->photo) }}" class="img-circle"
                              width="150" />
                        @else
                           <img src="{{ asset('MemberAssets/assets/images/users/profile.jpg') }}" class="img-circle"
                              width="150" />
                        @endif
                     </a>
                     <h4 class="card-title m-t-10">{{ auth()->user()->name }}</h4>
                     <h6 class="card-subtitle">{{ auth()->user()->email }}</h6>
                     <div class="row text-center justify-content-md-center">
                        {{-- <div class="col-4"><a href="javascript:void(0)" class="link"><i class="icon-people"></i> <font class="font-medium">254</font></a></div>
                                        <div class="col-4"><a href="javascript:void(0)" class="link"><i class="icon-picture"></i> <font class="font-medium">54</font></a></div> --}}
                     </div>
                  </center>
               </div>
               <div>
                  <hr>
               </div>
               <div class="card-body">
                  <small class="text-muted mb-2">{{ __('lng.Emailaddress') }} </small>
                  <h6>{{ auth()->user()->email }}</h6>
                  <small class="text-muted p-t-30 db mb-2">{{ __('lng.Phone') }}</small>
                  <h6>+91 {{ auth()->user()->mobile }}</h6>
                  <small class="text-muted p-t-30 db mb-2">{{ __('lng.Address') }}</small>
                  <h6>{{ $Member->house->name }},<br> {{ $Member->house->place }},{{ $Member->house->post }}</h6>
                  <div class="map-box">
                     {{-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d470029.1604841957!2d72.29955005258641!3d23.019996818380896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C+Gujarat!5e0!3m2!1sen!2sin!4v1493204785508" width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe> --}}
                  </div> <small class="text-muted p-t-30 db">{{ __('lng.SocialProfile') }}</small>
                  <br />
                  <button class="btn btn-circle btn-secondary"><i class="fa fa-facebook"></i></button>
                  <button class="btn btn-circle btn-secondary"><i class="fa fa-twitter"></i></button>
                  <button class="btn btn-circle btn-secondary"><i class="fa fa-youtube"></i></button>
               </div>
            </div>
         </div>
         <!-- Column -->
         <!-- Column -->
         <div class="col-lg-8 col-xlg-9 col-md-7">
            <div class="card card-default">
               <div class="card-header">
                   <div class="card-actions">
                       {{-- <a class="" data-action="collapse"><i class="ti-minus"></i></a> --}}
                       <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                       <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                   </div>
                   {{-- <h4 class="card-title m-b-0">Product Overview</h4> --}}
               </div>
               <!-- Nav tabs -->
               <ul class="nav nav-tabs profile-tab" role="tablist">
                  <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home"
                        role="tab">{{ __('lng.Family') }}</a> </li>
                        <li class="nav-item"> <a class="nav-link " data-toggle="tab" href="#Profile"
                              role="tab">{{ __('lng.Address') }}</a> </li>
                  {{-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings"
                        role="tab">{{ __('lng.EditProfile') }}</a> </li> --}}
               </ul>
               <!-- Tab panes -->
               <div class="tab-content">
                  <div class="tab-pane active" id="home" role="tabpanel">
                     <div class="card-body">
                        <div class="profiletimeline">
                           @foreach ($Member->house->members as $Fam)
                              <div class="sl-item">
                                 <div class="sl-left">
                                    @if ($Fam->photo)
                                    <img src="{{ asset('storage/Member/Photo/' . $Fam->photo) }}" class="img-circle"
                                       width="150" />

                                    @else
                                       <img src="{{ asset('MemberAssets/assets/images/users/profile.jpg') }}" alt="user"
                                          class="img-circle" />
                                    @endif

                                 </div>
                                 <div class="sl-right">
                                    <div>
                                       <p><a class="link">{{ $Fam->name }}</a> <a
                                             class="link pl-2">{{ $Fam->nickname }}</a></p>
                                       <p>{{__('lng.Phone')}} :<a class="link"> {{ $Fam->contact }}</a></p>
                                       <p>{{__('lng.Email')}} :<a class="link"> {{ $Fam->email }}</a></p>
                                       <p>{{__('lng.DOB')}} :<a class="link">
                                             {{ date('F - d - Y', strtotime($Fam->dob)) }}</a></p>
                                       {{-- <div class="like-comm"> <a href="javascript:void(0)" class="link m-r-10">2
                                             comment</a> <a href="javascript:void(0)" class="link m-r-10"><i
                                                class="fa fa-heart text-danger"></i> 5 Love</a> 
                                          
                                       </div> --}}
                                    </div>
                                 </div>
                              </div>
                              <hr>
                           @endforeach
                        </div>
                     </div>
                  </div>
                  <!--second tab-->
                  <div class="tab-pane" id="Profile" role="tabpanel">
                      <div class="card-body">
                          <div class="row">
                              <div class="col-md-3 col-xs-6 b-r "> <strong class="pb-2">{{__('lng.HouseName')}}</strong>
                                  <br>
                                  <p class="text-muted">{{ $Member->house->name }}</p>
                              </div>
                              <div class="col-md-3 col-xs-6 b-r"> <strong>{{__('lng.RegisterNo')}}</strong>
                                  <br>
                                  <p class="text-muted">{{ $Member->house->registernumber }}</p>
                              </div>
                              <div class="col-md-3 col-xs-6 b-r"> <strong>{{__('lng.Place')}}</strong>
                                  <br>
                                  <p class="text-muted">{{ $Member->house->place }}</p>
                              </div>
                              <div class="col-md-3 col-xs-6"> <strong>{{__('lng.District')}}</strong>
                                  <br>
                                  <p class="text-muted">{{ $Member->house->district }}</p>
                              </div>
                          </div>
                          <hr>
                      </div>
                  </div>
                  <div class="tab-pane" id="settings" role="tabpanel">
                     <div class="card-body">
                        <form class="form-horizontal form-material" method="POST" action="{{route('MemberProfileEdit',$Member->id)}}">
                            @csrf
                           <div class="form-group">
                              <label class="col-md-12"> {{ __('lng.Name') }}</label>
                              <div class="col-md-12">
                                 <input type="text"  class="form-control form-control-line" value="{{$Member->name}}">
                              </div>
                           </div>
                           <div class="form-group">
                              <label for="example-email" class="col-md-12">{{ __('lng.Email') }}</label>
                              <div class="col-md-12">
                                 <input type="email" value="{{$Member->email}}"
                                    class="form-control form-control-line" name="example-email" id="example-email">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-12">{{ __('lng.Phone') }}</label>
                              <div class="col-md-12">
                                 <input type="text" value="{{$Member->contact}}" class="form-control form-control-line">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-12">{{__('lng.DateOfBirth')}}</label>
                              <div class="col-md-12">
                                 <input type="date" value="{{ date('Y-m-d', strtotime($Member->dob)) }}" class="form-control form-control-line">
                              </div>
                           </div>
                           <div class="form-group">
                              <label class="col-md-12">{{__('lng.Message')}}</label>
                              <div class="col-md-12">
                                 <textarea rows="5" class="form-control form-control-line">
                                    {{$Member->narration}}
                                 </textarea>
                              </div>
                           </div>
                           {{-- <div class="form-group">
                              <label class="col-sm-12">Select Country</label>
                              <div class="col-sm-12">
                                 <select class="form-control form-control-line">
                                    <option>London</option>
                                    <option>India</option>
                                    <option>Usa</option>
                                    <option>Canada</option>
                                    <option>Thailand</option>
                                 </select>
                              </div>
                           </div> --}}
                           <div class="form-group">
                              <div class="col-sm-12">
                                 <button type="submit" class="btn btn-success">{{__('lng.UpdateProfile')}}</button>
                              </div>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- Column -->
      </div>
      <!-- Row -->
      <!-- ============================================================== -->
      <!-- End PAge Content -->
      <!-- ============================================================== -->
      <!-- End Right sidebar -->
      <!-- ============================================================== -->
   </div>


   
<!-- Logout Modal-->
<div class="modal fade" id="ChangeProfile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <form id="logout-form" action="{{route('ChangeProfileImage',$Member->id)}}" method="POST"  enctype="multipart/form-data">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">{{__('lng.ChangeProfile')}}</h5>
         <button class="close" type="button" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">×</span>
         </button>
       </div>
       <div class="modal-body">
         <div class="row">
         <div class="col-sm-3">
         <img src="{{asset('assets/images/imgicon.png')}}" alt="avatar" width="100px" id="imgImage{{$Member->id}}"/>
         </div>
         <div class="col-sm-9" style="margin-top:26px;" >
         <div class="input-group mb-3">
                         <div class="custom-file">
                             <input type="file" class="custom-file-input" name="photo" id="inputGroupFile02" onchange="
                                         var input=this;
                                         if (input.files && input.files[0]) {
                                             var reader = new FileReader();
                                             var size=(Math.round(input.files[0].size/1024));
                                             if(size>2024)
                                             {
                                                 alert('Please Upload file lesthan 1MB\nControl load time');
                                                 input.value='';
                                             }
                                             else{
                                             reader.onload = function (e) {
                                                 $('#imgImage{{$Member->id}}').attr('src', e.target.result); 
                                             }
                                             reader.readAsDataURL(input.files[0]);
                                         }
                                         }">
                             <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">{{__('lng.Choosefile')}}</label>
                         </div>
                         </div>
 
         </div>
         </div> 
         </div>
       <div class="modal-footer">
         <button class="btn btn-secondary" type="button" data-dismiss="modal">{{__('lng.Cancel')}}</button>
           @csrf
           <input type="hidden" name="">
           <input class="btn btn-primary" type="submit" value="{{__('lng.Save')}}">
       </div>
     </div>
   </div>
</form>
 </div>

@endsection