@inject('GetCounts', 'App\Traits\GetCounts')
@extends('layouts.app')

@section('content')

<style type="text/css">
    .text-overflow {
      width:250px;
      height:120px;
      display:block; 
      overflow:hidden;
      word-break: break-word;
      word-wrap: break-word;
  }

  .btn-overflow {
    display: none;
    text-decoration: none; 
  }
</style>
<main class="listing-page">
    <!-- listing-banner -->
    <section class="listing">
      <div class="container">
        <div class="listing-banner">
          <img src="{{ asset('uploads/actbanner/'.$actdetails->banner_image)}}" style="width: 100%; height: 400px;" >
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-12 pr-lg-0">
            <div class="left-list text-center">
             @if($actdetails->actimages->isNotEmpty()) 
              <img src="{{ asset('uploads/act_'. $actdetails->actimages[0]->artist_act_id.'/images/'.$actdetails->actimages[0]->image)}}" alt="{{$actdetails->act_name}}" class="img-fluid">
                @else
                    <p>Image not found !</p>        
              @endif
            </div>
          </div>
          <div class="col-lg-8 col-md-12 pl-lg-0">
            <div class="right-list">

          @if(!empty($actdetails)) 
              <h1>{{$actdetails->act_name}}</h1>
          @else
                <h1>Location not found !</h1>        
          @endif
           
              <div class="rating-box">
                <ul class="list-inline mb-0">
                  <li class="list-inline-item">
                    <span>
                      <img src="{{('../frontend/assets/img/star1.png')}}" alt="star">
                      <img src="{{('../frontend/assets/img/star1.png')}}" alt="star">
                      <img src="{{('../frontend/assets/img/star1.png')}}" alt="star">
                      <img src="{{('../frontend/assets/img/star1.png')}}" alt="star">
                      <img src="{{('../frontend/assets/img/star1.png')}}" alt="star"> 
                  @if(!empty($testimonials)) 
                        <small class="pl-1">{{count($testimonials)}}</small></span> 
                  @endif 
                  </li>
                  @if(!empty($actdetails)) 
                  <li class="list-inline-item"><span><i class="fa fa-users"></i></span>{{$actdetails->no_of_members}}</li>     
                  @endif 

                  <li class="list-inline-item"><span><i class="fa fa-music"></i></span>{{$actdetails->genre->name}}</li>
                  <li class="list-inline-item"><span><i class="fa fa-map-marker"></i></span>
            @if(!empty($actdetails->areapricingact)) 
                @foreach ($actdetails->areapricingact as $key => $actdetail)
                {{($key==0)?'':', '}}{{$actdetail->city->name}}
                @endforeach      
             @endif
                  </li>

                </ul>
              </div>
              <div class="price">

              @if($actdetails->areapricingact->isNotEmpty()) 
                <h3>Prices Start From
                      <span><i class="fas fa-pound-sign"></i> {{$actdetails->areapricingact[0]->price}}</span>  
                </h3>   
                 @endif

                @if(!empty($actdetails))
                <p>{{$actdetails->rider_requirenment}}</p>
                @endif
              </div>
         
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-12 containerentArea text-overflow">
            @if(!empty($actdetails))
            <p>{{html_entity_decode($actdetails->biography)}}</p>
            @endif
            </div>
            <div class="col-12">
            <p><a href="javascript:void(0);" class="btn-overflow" style="font-size: 11px;color: #c59d5f;font-weight: 700;text-decoration: underline;">Show More</a></p>
            </div>
            
          </div>

        </div>
      </div>
    </section>
    <!-- listing-banner -->

    <!-- quotation-section-start -->
    <section class="quotation-section">
      <div class="container">
        <div class="quotation-banner">
        <div class="row">
          <div class="col-12">
            <div class="menu-head">
              <div class="">
                <h2>GET A QUOTATION</h2>
                <p class="Pmenu">Click Here To Request A Quote From This Act</p>
              </div>
              <div class="getquote">
                <a href="{{route('get-quote-form',['quotes' =>$id])}}" class="btn getquote-btn">GET A QUOTE <img src="{{ asset('../frontend/assets/img/Barrow.png')}}" alt="arrow"></a>
              </div>
            </div>
            <p class="quote-text">Quotes Are Valid For 24 Hours From Receipt And Do Not Oblige You To Book The Act</p>
          </div>
        </div>
        </div>
      </div>
    </section>
    <!-- quotation-section-end -->
    <!-- images-section-start -->
    <section class="IMG-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <ul class="nav nav-tabs border-bottom-0 borderTop">
              <li class="nav-item">
                <a class="nav-link" href="#images">ACT IMAGES</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#track">AUDIO TRACK</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#video">ACT VIDEO</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#repertoire">REPERTOIRE</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#ebooking">EXTRA BOOKING OPTIONS</a>
              </li>
            </ul>

            <div id="images" class="tabsSpace">
              <div class="menu-head">
                <h2>ACT IMAGES</h2>
              </div>
              <div class="row">
              @if($actdetails->actimages->isNotEmpty()) 
                  @foreach ($actdetails->actimages as $img)
                    <div class="col-lg-4">
                       <div class="img-box">
                  @php
                  $file = public_path('uploads/act_'. $img->artist_act_id.'/images/'.$img->image);
                  $ext = pathinfo($file, PATHINFO_EXTENSION);
                  $image = $GetCounts->createThumbnail($file, $ext, 300, 280);
                  @endphp
                  <img class="img-fluid" src="{{ 'data:image/' .$ext. ';base64,' .base64_encode($image ) }}">
                      </div>
                    </div>
                  @endforeach
              @else
                    <p> No Act Image Found !</p>        
              @endif
              </div>
            </div>
            <div class="tabsSpace" id="track">
              <div class="menu-head">
                <h2>Some Sample Of Music</h2>
              </div>
              <div class="table-responsive tracktable">
                <table class="table">
                  <tbody>
                @if($actdetails->actaudio->isNotEmpty()) 
                   @foreach ($actdetails->actaudio as $audio)
                    <tr>
                      <th style="width: 75px;"><span>1</span></th>
                      <td class="Cwidth">
                        <div>
                          <h3>{{$audio->title}}</h3>
                          <small>Jhon Doe</small>
                        </div>
                      </td>
                      <td>
                        <div class="play">
                          <a href="#"><i class="fa fa-play-circle"></i></a>
                          <span>{{$audio->audio}}</span>
                        </div>
                      </td>
                      <td>
                        <div class="track">
                          <img src="{{ asset('../frontend/assets/img/track1.png')}}" alt="track" class="track1">
                          <img src="{{ asset('../frontend/assets/img/track2.png')}}" alt="track" class="track2">
                        </div>
                      </td>
                    </tr>
                  @endforeach
                  @else
                    <p>No Act Audio Found !</p>        
                  @endif
                  
                  </tbody>
                </table>
              </div>
            </div>

            <div id="video" class="tabsSpace">
              <div class="menu-head">
                <h2>Act Videos</h2>
              </div>
              <div class="row">
                <div class="col-lg-9 pr-lg-0">
                  <div class="CLvideo h-100">
                    <script src="https://folk.uib.no/jvi041/player/js/mejs-2.16.3/mediaelement-and-player.min.js"></script>
                    <link  href="https://folk.uib.no/jvi041/player/js/mejs-2.16.3/mediaelementplayer.min.css" rel="Stylesheet" />
                  @if($actdetails->actvideo->isNotEmpty()) 
                     @foreach ($actdetails->actvideo as $video)
                         @php
                            $videoKey = $video->video;
                            $videoKey = explode('?', $videoKey);
                            $videoKey = $videoKey[1];
                            $videoKey = explode('v=', $videoKey);
                            $videoKey = $videoKey[1];
                         @endphp
                        <!-- <div class="play-icon">
                          
                        </div> -->
                        <div>
                          <iframe src="https://www.youtube.com/embed/{{ $videoKey }}" class="h-100"/></iframe>
                          <p>{{$video->title}}</p>
                        </div>
                    @endforeach
                  @else
                    <p>No Act Video Found !</p>        
                  @endif


                  </div>
                </div>

              </div>
            </div>
            <div id="repertoire" class="tabsSpace">
              <div class="menu-head">
                <h2>Act Repertoire</h2>
              </div>
              <div class="repertoire-content">
                <div class="row">
                        <div class="col-lg-4 col-md-6 mb-3">
                          <ul class="list-unstyled">
                       
                  @if($actdetails->actrepertorie->isNotEmpty()) 
                   @foreach ($actdetails->actrepertorie as $repor)
                            <li>{{$repor->repertorie}}</li>
                      @endforeach 
                  @else
                    <li>No Act Repertoire Found !</li>        
                  @endif
                    
                          </ul>
                        </div>
            
                </div>
              </div>
            </div>
            <div class="tabsSpace" id="ebooking">
              <div class="menu-head">
                <h2>Extra Booking Options</h2>
                <p class="Pmenu">Customise your booking with the following options...</p>
              </div>
              <div class="ebooking-content">
                <div class="row">
                  <div class="col-lg-6 Corder">
                    <div class="">
                      <ul class="list-unstyled">
                        @if($actdetails->actextra->isNotEmpty()) 
                          @foreach ($actdetails->actextra as $extra)
                            
                          <li>
                          <div class="row">
                            <div class="col-sm-7">{{$extra->title}}</div>
                            <div class="col-sm-5"><i class="fas fa-pound-sign"></i> {{$extra->price}}</div>
                          </div>
                          </li>
                          @endforeach 
                        @else
                        <li>No Booking Extra option found !</li>        
                        @endif
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div>
                      <img src="{{ asset('../frontend/assets/img/ebooking.png')}}" alt="ebookingImg" class="img-fluid">
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
    <!-- images-section-end -->

    <!-- customer-review-section-start -->
    <section class="customer-review-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="menu-head">
              <h2>Customer Reviews</h2>
            </div>
            <div class="review-content">

              @if($actdetails->act_testimonials->isNotEmpty())
                @foreach ($actdetails->act_testimonials as $testimonials)
                  <div class="card mb-3 bg-none">
                    <div class="row no-gutters">
                      <div class="col-md-1 text-center">
                        <img src="{{ asset('../frontend/assets/img/customer1.png')}}" class="img-fluid" alt="...">
                      </div>
                      <div class="col-md-11">
                        <div class="card-body p-0">
                          <h5 class="card-title mb-1">{{$testimonials->name}}</h5>
                          <p> <span><img src="{{ asset('../frontend/assets/img/star1.png')}}" alt="star">
                            <img src="{{ asset('../frontend/assets/img/star1.png')}}" alt="star">
                            <img src="{{ asset('../frontend/assets/img/star1.png')}}" alt="star">
                            <img src="{{ asset('../frontend/assets/img/star1.png')}}" alt="star">
                            <img src="{{ asset('../frontend/assets/img/star1.png')}}"alt="star"> 
                            <small class="pl-1">{{date('F j, Y', strtotime($testimonials->updated_at))}}</small></span></p>
                          <p class="card-text">{{$testimonials->testimonial}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  @endforeach
               @else
                <div class="card mb-23 bg-none">
                    <div class="row no-gutters">
                      <div class="col-md-12 text-center">
                        <p>No Testimonial Found !</p>
                      </div>
                    </div>
                  </div>
            @endif
        
             
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- customer-review-section-end -->

    <!-- Recent-artist-section-start --
    <section class="RecentArtist-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h5>Recent Artists</h5>
          </div>
          <div class="col-lg-3 col-md-6 mb-3">
            <div class="Rartist-box">
              <img src="{{ asset('../frontend/assets/img/A1.png')}}" alt="artist" class="img-fluid">
              <p>BLACK CHERRY JAM</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 mb-3">
            <div class="Rartist-box">
              <img src="{{ asset('../frontend/assets/img/A2.png')}}" alt="artist" class="img-fluid">
              <p>BLACK CHERRY JAM</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 mb-3">
            <div class="Rartist-box">
              <img src="{{ asset('../frontend/assets/img/A3.png')}}" alt="artist" class="img-fluid">
              <p>BLACK CHERRY JAM</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 mb-3">
            <div class="Rartist-box">
              <img src="{{ asset('../frontend/assets/img/A4.png')}}" alt="artist" class="img-fluid">
              <p>BLACK CHERRY JAM</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Recent-artist-section-end -->
<script type="text/javascript">
var text = $('.text-overflow'),
btn = $('.btn-overflow'),
h = text[0].scrollHeight; 
if(h > 120) {
  btn.addClass('less');
  btn.css('display', 'block');
}
btn.click(function(e) 
{
  e.stopPropagation();

  if (btn.hasClass('less')) {
      btn.removeClass('less');
      btn.addClass('more');
      btn.text('Show less');

      text.animate({'height': h});
  } else {
      btn.addClass('less');
      btn.removeClass('more');
      btn.text('Show more');
      text.animate({'height': '120px'});
  }  
});
</script>
</main>
@endsection