@extends('frontend.layouts.master')
@section('content')
<nav class="navbar navbar-inverse navbar-fixed-top profile-nav navigation" id="mainNav">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <div class="container">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navigation nav navbar-nav" id="mainNav">
            <a class="navigation__link" href="#1">About Me</a>
            <a class="navigation__link" href="#2">Contact Details</a>
            @if(!empty($membersRate))
            <a class="navigation__link" href="#3">Rates</a>
            @endif
            @if(!empty($membersAvailability))
            <a class="navigation__link" href="#4">Availability</a>
            @endif

            @if(!empty($servicesList))
            <a class="navigation__link" href="#5">Services</a>
            @endif
            @if(!empty($travelList))
            <a class="navigation__link" href="#6">Tours</a>
            @endif
            <a class="navigation__link" data-toggle="modal" data-target="#modelbookingform"  href="#">Make a Booking</a>
        </ul>
    </div>
</div>
</nav>
<div class="main-page-01"  data-spy="scroll" data-target=".navbar" data-offset="50">
   <section class="made-section">
      <div class="container">
         <div class="row responsive-row">
            <div class="col-md-12 top-content-r">
               <div class="row">
                  <div class="col-md-4">
                                      </div>
                 <div class="col-md-4 nopadding">
                  <h3 class="name-titel text-center r-cenetr">
                    {{$memberData->first_name.' '.$memberData->last_name}}  
                    @if($memberData->profile_on_off == 1)
                    <img src="{{asset('images/members/online.png')}}" />
                    @endif
                </h3>
                <p class="text-center r-cenetr"> 
                    <i class="fa fa-map-marker"></i> {{$memberData->name}}  {{rand(1, 15)}} KM away
                </p>
            </div>
            <div class="col-md-4">
              <p class="text-right r-cenetr"> 
                            </p>
        </div>
    </div>
</div>
<div class="col-md-12 nopadding">
   <div class="row">

     <div class="profile-like-btn">

       <div class="col-md-6 pull-left">
         <img class="img-responsive" width="100%" src="{{ asset('images/members/'.$memberData->profile)}} " />
     </div>
     <div class="col-md-6">
      @php
      $gemsecprofile = ($memberData->profile_thumbnail == '') ? 'default.png' : $memberData->profile_thumbnail;
      @endphp
      <img class="img-responsive" width="100%" src="{{ asset('images/members/gallary/'.$gemsecprofile)}} " />
  </div>
</div>
</div>
</div>
<div class="col-md-12">
   <div class="row">
      <div class="col-md-12 nopadding">
        <h3 class="detail-titel"> Profile Summary </h3>
    </div>

    @if(!empty($memberData->countries_name) ||
    !empty($memberData->state_name) || 
    !empty($memberData->ethnicity)  || 
    !empty($memberData->languages_spoken) ||
    !empty($memberData->hair_color)
    ) 


    <div class="col-md-5 nopadding">
        <ul class="list nopadding">
          @if(!empty($memberData->countries_name) && !empty($memberData->state_name) )
          <li>
            <img src="{{asset('images/profile_summary/location.png')}}" alt="Location">
            Location: {{$memberData->city_name}}, {{$memberData->suburb}} 
        </li>
        @endif

        @if(!empty($memberData->birth_date))    
        <li>
          <img src="{{asset('images/profile_summary/Age.png')}}" alt="Location">
          Age: {{$memberData->birth_date}}</li>
          @endif

          @if(!empty($memberData->rates))    
          <li>
            <i class="fa fa-dollar" style="font-size: 24px;text-align: center;margin: 0 13px 0 0;"></i> Rate: {{storecurrency().$memberData->rates}}</li>
            @endif

            @if(!empty($memberData->place_of_residence) && $memberData->place_of_residence != 'No answer')    
            <li>
              <!--i class="fa fa-home" aria-hidden="true"></i--> 
              <img src="{{asset('images/profile_summary/Place.png')}}" alt="Place"> Place of services: {{$memberData->place_of_residence}}</li>
              @endif

              <!-- show only if Show contact from the profile -->
              @if( $memberData->mobile_hide_show == '1' && !empty($memberData->phone))    
              <li>
                <!--i class="fa fa-phone" aria-hidden="true"></i--> 
                <img src="{{asset('images/profile_summary/Phone.png')}}" alt="Phone"> Phone : {{$memberData->phone}}</li>
                @endif
            </ul>
        </div>
        @endif

        @if(!empty($memberData->cupsize || $memberData->email || $memberData->build || $memberData->height || $memberData->weight))
        <div class="col-md-4 nopadding">
           <ul class="list nopadding" >
              @if(!empty($memberData->email))
              <li>
                <!--i class="fa fa-envelope" aria-hidden="true"></i-->  
                <img src="{{asset('images/profile_summary/Email.png')}}" alt="Email"> Email : <a href="mailto:{{$memberData->email}}">{{$memberData->email}}</a></li>
                @endif
                @if(!empty($memberData->cupsize))
                <li> 
                  <!--i class="fa fa-universal-access" aria-hidden="true"></i--> 
                  <img src="{{asset('images/profile_summary/Cup.png')}}" alt="Cub"> Cub Size: {{($memberData->cupsize) ? $memberData->cupsize : '-'}}</li>
                  @endif

                  @if(!empty($memberData->build))
                  <li> 
                    <!--i class="fa fa-blind" aria-hidden="true"></i-->  
                    <img src="{{asset('images/profile_summary/Build.png')}}" alt="Build"> Build: {{($memberData->build) ? $memberData->build : '-'}} </li>
                    @endif
                    @if(!empty($memberData->height))
                    <li> 
                      <!--i class="fa fa-arrows-v" aria-hidden="true"></i--> 
                      <img src="{{asset('images/profile_summary/Height.png')}}" alt="Height">  Height: {{($memberData->height) ? $memberData->height : '-'}}</li>
                      @endif
                      @if(!empty($memberData->weight))
                      <li> 
                        <!--i class="fa fa-qq" aria-hidden="true"></i-->  
                        <img src="{{asset('images/profile_summary/Weight.png')}}" alt="Weight">  Weight: {{($memberData->weight) ? $memberData->weight : '-'}}</li>
                        @endif
                    </ul>
                </div>
                @endif

                @if(!empty($memberData->hair_length) || !empty($memberData->ethnicity) || !empty($memberData->hair_color) || !empty($memberData->hair_length))
                <div class="col-md-3 nopadding">
                   <ul class="list nopadding">
                     @if(!empty($memberData->ethnicity))    
                     <li><!--i class="fa fa-home" aria-hidden="true"></i--> 
                        <img src="{{asset('images/profile_summary/Ethnicity.png')}}" alt="Ethnicity">  Ethnicity: {{$memberData->ethnicity}}</li>
                    </li>
                    @endif
                    <!-- @if(!empty($memberData->languages_spoken)) @endif  NOT REQ-->    
                    <li>
                      <img src="{{asset('images/profile_summary/Languages.png')}}" alt="Languages">  Languages: {{$memberData->languages_spoken}},
                      @if(!empty($memberData->languages_spoken_other))
                      {{$memberData->languages_spoken_other}}
                      @else
                      -
                      @endif
                  </li>

                  @if(!empty($memberData->hair_color))    
                  <li> <!--i class="fa fa-eye" aria-hidden="true"></i-->
                      <img src="{{asset('images/profile_summary/Hair-Color.png')}}" alt="Hair-Color">  Hair Color: {{$memberData->hair_color}}</li>
                      @endif
                      @if(!empty($memberData->hair_length))
                      <li><!--i class="fa fa-scissors" aria-hidden="true"></i-->
                         <img src="{{asset('images/profile_summary/Hair-Length.png')}}" alt="Hair-Length"> Hair Length : {{($memberData->hair_length) ? $memberData->hair_length : '-'}}</li>
                         @endif
                     </ul>
                 </div>

                 @endif
             </div>
         </div>


         <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300i,400,700" rel="stylesheet">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/fonts/icomoon/style.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/magnific-popup.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/jquery-ui.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/owl.carousel.min.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/owl.theme.default.min.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/lightgallery.min.css">    
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/fonts/flaticon/font/flaticon.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/swiper.css">
         <link rel="stylesheet" href="https://colorlib.com/preview/theme/photon/css/aos.css">  


         <script src="https://colorlib.com/preview/theme/photon/js/jquery-3.3.1.min.js"></script>  
         <script src="https://colorlib.com/preview/theme/photon/js/jquery-migrate-3.0.1.min.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/jquery-ui.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/jquery.magnific-popup.min.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/swiper.min.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/aos.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/picturefill.min.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/lightgallery-all.min.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/jquery.mousewheel.min.js"></script>
         <script src="https://colorlib.com/preview/theme/photon/js/main.js"></script>

         <script>
          $(document).ready(function(){
            $('#lightgallery').lightGallery(); 
            $('#selfiegallery').lightGallery();
            $('#mediagallery').lightGallery(); 
        });
    </script>  



    @if(!empty($membersMediaItems))
    <div class="col-md-12 mt-4 nopadding"> 
      <div class="row" id="mediagallery">
        @foreach($membersMediaItems['photo'] as $t)
        <div class="col-md-6 mt-4 item" data-aos="fade" data-src="{{$t['media']}}" data-sub-html="<h4></h4><p></p>">
            <img src="{{$t['media']}}" alt="IMage" class="img-fluid model-img">
        </div>
        @endforeach
    </div>
</div>
@endif

@if(!empty($membersMediaItems) && !empty($membersMediaItems['selfy']))
<div class="col-md-12 mt-2 nopadding">
   <div class="row " id="selfiegallery">
      <div class="col-md-12"> 
        <h3 class="detail-titel"> Selfie Gallery </h3> </div>
        @foreach($membersMediaItems['selfy'] as $t)
        <div class="col-md-6 mt-4 item" data-aos="fade" data-src="{{$t['media']}}" data-sub-html="<h4></h4><p></p>">
            <img src="{{$t['media']}}" alt="IMage" class="img-fluid model-img">
        </div> 
        @endforeach
    </div>
</div>
@endif


      @if(!empty($membersMediaItems) && !empty($membersMediaItems['video']))
      <div class="col-md-12 mt-2 nopadding">
        <div class="row">
          <div class="col-md-12"> <h3 class="detail-titel">  Videos Gallery </h3></div>
          @foreach($membersMediaItems['video'] as $t) 
          <div class="col-md-6 ">
             <video width="100%" controls>
                <source src="{{$t['media']}}" data-image="video/{{$t['media']}}" type="video/mp4" />
                Your browser does not support the video tag.
            </video>
        </div>
        @endforeach
    </div>
</div>
@endif
<div class="col-md-12 mt-2 about-text page-section" id="1">
   <div class="row">
      <div class="col-md-12 nopadding"> <h3 class="detail-titel"> About Me </h3></div>
      <div class="col-md-12 nopadding"> {!!$memberData->about_you!!} </div>
  </div>
</div>


<div class="col-md-12 mt-2 about-text page-section" id="2">
  <div class="row">
    <div class="col-md-12 nopadding">  <h3 class="detail-titel"> Contact Details </h3></div>
    @if(!empty($memberData->phone))
    <div class="col-md-4 nopadding"> 
      <i class="fa fa-phone"></i> Phone : <a href="tel:{{$memberData->phone}}">{{$memberData->phone}}</a>  
  </div>  
  @endif
  @if(!empty($memberData->whatsapp))
  <div class="col-md-4 nopadding"> 
      <i class="fa fa-whatsapp"></i> Whatsapp : {{($memberData->phone) ? $memberData->whatsapp : ':-'}} 
  </div> 
  @endif
  @if(!empty($memberData->email))
  <div class="col-md-4 nopadding"> 
      <i class="fa fa-envelope"></i> Email : <a href="mailto:{{$memberData->email}}">{{$memberData->email}}</a>
  </div>  
  @endif

  @if(!empty($memberData->instagram))
  <div class="col-md-4 nopadding"> 
      <i class="fa fa-instagram"></i> Instagram : <a href="{{$memberData->instagram}}" target="_blank">{{$memberData->instagram}}</a>
  </div>  
  @endif

  @if(!empty($memberData->website))
  <div class="col-md-4 nopadding"> 
      <i class="fa fa-link"></i> Website: <a href="{{$memberData->website}}" target="_blank"> {{$memberData->website}} </a>
  </div>  
  @endif
  @if(!empty($memberData->twitter))
  <div class="col-md-4 nopadding"> 
      <i class="fa fa-twitter"></i> Twitter : <a href="{{$memberData->twitter}}" target="_blank"> {{$memberData->twitter}} </a> 
  </div>  
  @endif

  @if(!empty($memberData->preferred_contact_method))
  <br/>
  <div class="col-md-12 mt-2 about-text page-section">
      <div class="row">
        <h4 class="" style="font-size: 16px; font-weight: bold"> Preferred contact method</h4>
        <div class="col-md-12 nopadding" style="font-size: 18px;">
          -
          @foreach(explode(",",$memberData->preferred_contact_method) as $pcm)   
          {{$pcm}},
          @endforeach
      </div>
  </div>
</div>
@endif


</div>
</div>



@if(!empty($membersRate))
<div class="col-md-12 mt-2 about-text page-section" id="3">
   <div class="row">
      <div class="col-md-12 nopadding">
         <h3 class="detail-titel"> Rates</h3>
         <div class="clearfix"></div>
         <div class=" table-responsive">
            <table class="table table_template darklinks">
               <thead>
                  <tr>
                     <th>Duration</th>
                     <th class="text-center">Incall</th>
                     <th class="text-right">Outcall</th>
                 </tr>
             </thead>
             <tbody>
               <tbody class="grey">
                 @foreach($membersRate as $r)
                 <tr>
                    <td>{{$r['time']}}</td>
                    <td class="text-center">{{storecurrency().$r['incall']}}</td>
                    <td class="text-right">{{storecurrency().$r['outcall']}}</td>
                </tr>
                @endforeach
            </tbody>
        </tbody>
    </table>
</div>
</div>
</div>
</div>
@endif
@if(!empty($membersAvailability))
<div class="col-md-12 mt-2 about-text page-section" id="4">
   <div class="row">
      <div class="col-md-12 nopadding"> <h3 class="detail-titel"> Availability </h3></div>
      <div class="col-md-12 nopadding">
        <div class="table-responsive">
          <table class="table table_template darklinks " style="width: 100%; ">
             <thead>
                <tr>
                   <th width="35%"> Weekday</th>
                   <th width="35%" class="text-center"> From</th>
                   <th width="35%" class="text-right"> Until</th>
               </tr>
           </thead>
           <tbody>
              <tbody class="grey">
                 @foreach($membersAvailability as $day => $r)
                 @foreach($r as $t)
                 <tr>
                    <td width="35%">{{$day}}</td>
                    <td width="35%" class="text-center">{{$t['from_time']}}</td>
                    <td width="35%" class="text-right">{{$t['to_time']}}</td>
                </tr>
                @endforeach
                @endforeach
            </tbody>

        </tbody>
    </table>
</div>
</div>
</div>
</div>
@endif


@if(!empty($servicesList))
<div class="col-md-12 mt-2 about-text page-section" id="5">
  <div class="row">
    <h3 class="detail-titel"> Services Provided  </h3>
    @foreach($servicesList as $s)
    <div class="col-md-4 nopadding">
      - {{$s->title}}
  </div>
  @endforeach
</div>
</div>
@endif

@if(!empty($memberData->services_provide))
<div class="col-md-12 mt-2 about-text page-section" id="5">
  <div class="row">
    <h4 class="" style="font-size: 16px; font-weight: bold">Place of Service</h4>
    <div class="col-md-4 nopadding">
      - {{$memberData->services_provide}}
  </div>
</div>
</div>
@endif



<!-- <div class="col-md-12 mt-2 about-text page-section" id="6">
 <div class="row">
  <h3 class="galler-titel "> <span>Tours</span> </h3>
  <div class="row-01">
    @if(!empty($travelList))
    @foreach($travelList as $t)
    <div class="column-details">
      <div class="col-md-12"><h4 class="title">{{$t->title}}</h4></div>
      <div class="clearfix"></div>
      <div class="col-md-8">
        <h4 class="">Location : {{$t->country_name.','.$t->state_name.','.$t->city_name}}</h4>
      </div>
      <div class="col-md-4">
        <h4 class="title">Duration : {{$t->start_date.' -  '.$t->end_date}}</h4>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-12">
        <p><h4 class="title">About Toure</h4>{{$t->about_tour}}</p>
      </div>
    </div>
    <div class="clearfix"></div>
    @endforeach
    @endif
  </div>
</div>
</div> -->



@if(!empty($membersAvailability))
<div class="col-md-12 mt-2 about-text page-section" id="6">
  <div class="row">
    <div class="col-md-12 nopadding"> <h3 class="detail-titel"> Tours </h3></div>
    <div class="col-md-12 nopadding">
      <div class="table-responsive">
        <table class="table table_template darklinks ">
          <thead>
            <tr>
              <th>Location</th>
              <th>Tour Start</th>
              <th>Tour End</th>
          </tr>
      </thead>
      <tbody class="grey">
        @foreach($travelList as $day => $s)
        <tr>
          <td>{{$t->country_name.','.$t->state_name.','.$t->city_name}}</td>
          <td>{{$t->start_date}}</td>
          <td>{{$t->end_date}}</td>
      </tr> 
      @endforeach
  </tbody>
</table>
</div>
</div>
</div>
</div>
@endif
<br/>

</div>
</div>
</div>

<a href="javascript:void(0)" class="favourite{{$memberData->memberId}} p-link v-profile-like-btn" onclick="myfavourite(this.id)" id="{{$memberData->memberId}}"><i class="rt-icon2-heart-outline" style="color:#e0006c"></i></a>
<a href="javascript:void(0)" data-toggle="modal" data-target="#modelbookingform" class="bookings-btn"> <img src="{{ asset('frontend/assets/images/booking.png') }}"/></a>
</section>
</div>

<!-- booking form-->
<div id="modelbookingform" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Make a Booking</h4>
    </div>
    {{ Form::open(['url' => route('makebooking'), 'method'=>'POST', 'name' =>'members', 'class' =>'memberpart form-horizontal', 'id' =>'memberpart10']) }}
    {{ Form::hidden('formtype','memberpart10')}}
    {{ Form::hidden('ag_members_id',$memberData->id)}}
    <div class="modal-body">
        <div class="col-md-12">
          <div style="margin:20px 0 25px 0;">
            <div class="form-group">
              <label for="name">Full Name:</label>
              <input type="fullname" class="form-control" id="full_name" required="" placeholder="Your name" name="full_name">
          </div>
          <div class="form-group">
              <label for="Mobile">Mobile:</label>
              <input type="mobile" class="form-control" id="mobile" required="" placeholder="Mobile" name="mobile">
          </div>
          <div class="form-group">
              <label for="Message">Message:</label>
              <input type="message" class="form-control" id="message" required="" placeholder="Message" name="title">
          </div>
          <div class="form-group">
              <label for="pwd">Start Date & Time:</label>
              <div class='input-group date bookingdate'>
                <input type='text' name ='booking_time' class="form-control col-md-12" required=""  placeholder="Booking Date end">
                <span class="input-group-addon"><span class="glyphicon-date"></span></span>
            </div>
        </div>
        <div class="form-group">
          <label for="et">End Date & Time:</label>
          <div class='input-group date bookingdate'>
            <input type='text' name ='endtime' class="form-control col-md-12" required=""  placeholder="Booking Date Start">
            <span class="input-group-addon"><span class="glyphicon-date"></span></span>
        </div>
    </div>
</div>
</div>
</div>
<div class="modal-footer">
    {{ Form::button("Request",["id"=>"makebookingsubmit","name"=>"submit","type"=>"submit","value"=>"Send","class"=>"theme_button color1"]) }}
    <button type="button " class="theme_button color1" data-dismiss="modal">Close</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>

@endsection
@section('pagescript')
<script src="{{ asset('frontend/assets/js/pages/members.js') }}"></script>
<link href="{{ asset('frontend/assets/css/datepicker/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" />
<!--<script src="{{ asset('frontend/assets/js/datepicker/moment-with-locales.min.js') }}"></script>--> 
<script src="{{ asset('frontend/assets/js/datepicker/bootstrap-datetimepicker.min.js') }}"></script> 
<script type="text/javascript">
   $( document ).ready(function() {
     $('.bookingdate').datetimepicker({
       format: 'DD-MM-YYYY hh:mm:ss',
   });    
 });
</script>
<!-- <script type="text/javascript">
   $('ul.profile-nav').find('a').click(function(){
     var $href = $(this).attr('href');
     var $anchor = $('#'+$href).offset();
     window.scrollTo($anchor.left,$anchor.top);
     return false;
   });
   $('body').scrollspy({target: ".ul.profile-nav"})
</script> -->
<script type="text/javascript"> 
 $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    
    if (scroll >= 0.5) {
      $(".profile-nav").addClass("darkHeader");
  } else {
      $(".profile-nav").removeClass("darkHeader");  
  }
});

 $(document).ready(function() {
    $('a[href*=#]').bind('click', function(e) {
         e.preventDefault(); // prevent hard jump, the default behavior
         
         var target = $(this).attr("href"); // Set the target as variable
         
         // perform animated scrolling by getting top-position of target-element and set it as scroll target
         $('html, body').stop().animate({
             scrollTop: $(target).offset().top
         }, 600, function() {
             location.hash = target; //attach the hash (#jumptarget) to the pageurl
         });
         
         return false;
     });
});

 $(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();

     // Show/hide menu on scroll
     //if (scrollDistance >= 850) {
     //    $('nav').fadeIn("fast");
     //} else {
     //    $('nav').fadeOut("fast");
     //}
     
     // Assign active class to nav links while scolling
     $('.page-section').each(function(i) {
      if ($(this).position().top <= scrollDistance) {
        $('.navigation a.active').removeClass('active');
        $('.navigation a').eq(i).addClass('active');
    }
});
 }).scroll();
</script>

@stop