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

@section('content')
 <!-- BANNER SECTION CODE START -->
    <div class="banner-sec">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <h1>
              <span>Book your perfect </span>entertainment
            </h1>
            <p class="sub-text"> We are musicians and industry professionals that have been in the wedding entertainment business for over two decades </p>
			     <form action="{{ route('art-listing') }}" method="POST" id="serchForm">
               @csrf
            <div class="get_box">
              <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                 <ul class="nav nav-tabs">
                    <li class="active"><a class="active" href="#tab1default" data-toggle="tab"><img src="{{asset('frontend/assets/img/filter1.png')}}" alt=""> Search By Filters</a></li>
                    <li class=""><a href="#tab2default" data-toggle="tab"><img src="{{asset('frontend/assets/img/search-icon.png')}}" alt=""> Search By Keyword</a></li>
                 </ul>
                </div>
                <div class="panel-body">
                  <div class="tab-content">
                    <div id="tab1default" class="tab-pane tab_first fade active in">
                     <div class="row">
                        <div class="col-md-3">
                          <div class="select-box">
                            <h6><i class="fa fa-music" aria-hidden="true"></i> Music Style</h6>        
                            <select class="custom-select" name="genre_id">
                               <option selected value ="">Music Style</option>
                              @foreach($categories as $category)
                              <option value="{{$category->id}}">{{$category->name}}</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="select-box">
                            <h6><i class="fa fa-calendar-o" aria-hidden="true"></i> Location of Event</h6>        
                            <select class="custom-select" name="city_id">
								<option value="">Any Location</option>
																@foreach ($location as $val)
									@if($i == 0)
											<optgroup label="{{$val->name}}">
											<option value="{{$val->id}}">{{$val->cname}}</option>
																				@else
										@if($state == $val->name)
											<option value="{{$val->id}}">{{$val->cname}}</option>
										@else
										</optgroup>
										<optgroup label="{{$val->name}}">
										<option value="{{$val->id}}">{{$val->cname}}</option>
																				@endif
									
									@endif
								@endforeach
								</optgroup>
                            </select>
                          </div> 
                        </div>
                        <div class="col-md-3">
                          <div class="select-box">
                            <h6><i class="fa fa-calendar" aria-hidden="true"></i> Date of Event</h6>
                            <div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">
                              <input autocomplete="off" placeholder="Select date" name="date" type="text" id="datepicker" class="form-control">
                            </div>
                          </div>  
                        </div>
                        <div class="col-md-3">
                          <div class="select-box">
                            <h6>&pound; Price</h6>        
                            <select class="custom-select" name="price">
                             <option value="">Any Price</option>
                              <option value="250">Up to £250</option>
                              <option value="500">Up to £500</option>
                              <option value="750">Up to £750</option>
                              <option value="1000">Up to £1000</option>
                              <option value="1250">Up to £1250</option>
                              <option value="1500">Up to £1500</option>
                              <option value="1750">Up to £1750</option>
                              <option value="2000">Up to £2000</option>
                              <option value="3000">Up to £3000</option>
                              <option value="10000">Up to £10000</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="btn-wrap">
                        <button type="submit" class="find-btn">Find your entertainment <span>&#10230;</span></button>
                      </div>
                    </div>
                    <div id="tab2default" class="tab-pane fade">
                       <div class="row">
                        <div class="col-md-12">
                          <div class="select-box">
                            <!-- Actual search box -->
                            <div class="form-group has-search">
                              <span class="fa fa-search form-control-feedback"></span>
                              <input type="text" class="form-control" name="key" placeholder="Search">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="btn-wrap">
                        <button type="submit" class="find-btn">Find your entertainment <span>&#10230;</span></button>
                      </div>                        
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="contact-us">
              <a href="tel:0208 242 4774">Call Us Now :  0208 242 4774</a><span class="line"></span>
              <a href="mailto:Info@idomusic.co.uk">Email: Info@idomusic.co.uk</a>
            </div>
			</form>
          </div>
        </div>
      </div>
    </div>
<!-- BANNER SECTION CODE END -->

<!-- OUR MUSIC SECTION CODE START -->
    @if(!empty($about))
    <div class="our-music">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="headings">
              <h2>@php echo  !empty($about->name) ? $about->name : ''  @endphp</h2>
            </div>
            <img src="{{asset('frontend/assets/img/our-logo.png')}}" alt="" class="img-fluid">
          </div>
          <div class="col-md-8">
            <div class="content-wrap">
              @php echo  !empty($about->description) ? $about->description : ''  @endphp
              <a href="#" class="read-more"> Read More <img src="{{asset('frontend/assets/img/arrow-right.png')}}" alt="" class="img-fluid"> </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif
<!-- OUR MUSIC SECTION CODE START -->

<!-- POPULAR SECTION CODE START -->
    <div class="popular-sec">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="headings">
              <h2> <span> Popular Entertainment </span> </h2>
            </div>
            <div class="popular-slider">
			       @if(count($categories) > 0)
               @foreach($categories as $category)
                  <div>
                    <div class="media ftco-media d-block text-center mx-1">
                      <a href="art-listing?genre_id={{ $category->id }}">
                      @php
                        $file = public_path('uploads/'.$category->cover_image);
                        $ext = pathinfo($file, PATHINFO_EXTENSION);
                        $image = $GetCounts->createThumbnail($file, $ext, 382, 300);
                     @endphp
                        <img class="img-fluid" src="{{ 'data:image/' .$ext. ';base64,' .base64_encode($image ) }}" alt="{{$category->name}}">
                      </a>
                      <div class="media-body">
                        <a href="art-listing?genre_id={{ $category->id }}"><h5 class="h4">{{ $category->name }}</h5></a>
                      </div>
                    </div>
                  </div>
               @endforeach
              @else
              <div>
				        <center style="color:#FFF;">No Records Found</center>
              </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- POPULAR SECTION CODE END -->

<!-- FEATURE TOP SECTION CODE START -->
    <div class="feature-atc">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="headings">
              <h2> <span> Featured Acts </span></h2>
             
            </div>
          </div>
          @if(count($featuredActs) > 0)
              @foreach($featuredActs as $featuredAct)
            
                <div class="col-md-4 col-sm-6">
                  <div class="feat-inner">
                    <a href="act-detail/{{ base64_encode($featuredAct->id)}}">
                      <img src="{{ asset('uploads/act_'.$featuredAct->id.'/images/'.$featuredAct->images)}}" alt="{{ $featuredAct->act_name }}" class="img-fluid">
                      <h5>{{ $featuredAct->act_name }}</h5>
                    </a>
                  </div>
                </div>
              @endforeach
          @else
            <div class="col-md-12 text-center">
              No Records Found
            </div>
          @endif
        </div>
      </div>
    </div>
<!-- FEATURE TOP SECTION CODE END -->

<!-- VIDEO SECTION START HERE -->
    <div class="video-wrap">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-5">
            <div class="video-sec">
               <div class="video">
                  <img src="{{asset('frontend/assets/img/video-img.jpg')}}" alt="" class="img-fluid" />
                  <span data-toggle="modal" data-target="#homeVideo" class="video-icon" onclick="playVid()">
                    <i class="fa fa-play" aria-hidden="true"></i>
                    <a href="#">Play Now!</a>
                  </span>
                <!-- Home Video Modal -->
                  <div class="modal fade" id="homeVideo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="pauseVid()">X</button>
                          <div class="embed-responsive embed-responsive-16by9">
                          <video id="gossVideo" class="embed-responsive-item" controls="controls" poster="http://www.gossettmktg.com/video/dangot.png">
                          <source src="http://www.gossettmktg.com/video/dangot.mp4" type="video/mp4">
                          <source src="http://www.gossettmktg.com/video/dangot.webm" type="video/webm">
                          <source src="http://www.gossettmktg.com/video/dangot.ogv" type="video/ogg">
                          <object type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="353" height="190">
                          <param name="movie" value="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                          <param name="allowFullScreen" value="true">   <param name="wmode" value="transparent">
                          <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fwww.gossettmktg.com%2Fvideo%2Fdangot.png',{'url':'http%3A%2F%2Fwww.gossettmktg.com%2Fvideo%2Fdangot.mp4','autoPlay':false}]}">
                          <img alt="Big Buck Bunny" src="http://www.gossettmktg.com/video/dangot.png" width="353" height="190" title="No video playback capabilities, please download the video below"></object>
                        </video>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-7 rightsd">
            <div class="headings">
              <h2><span class="d-block">Why Hire A Band Through</span> I Do Music</h2>
            </div>
              <ul class="inline-list">
                <li><i class="fa fa-music" aria-hidden="true"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li><i class="fa fa-music" aria-hidden="true"></i> Curabitur sit amet leo hendrerit, laoreet felis id, cursus neque.</li>
                <li><i class="fa fa-music" aria-hidden="true"></i> Mauris pulvinar lorem at imperdiet aliquet.</li>
                <li><i class="fa fa-music" aria-hidden="true"></i> Curabitur vel augue eu ex condimentum dictum.</li>
                <li><i class="fa fa-music" aria-hidden="true"></i> Donec posuere urna nec lectus pellentesque faucibus.</li>
                <li><i class="fa fa-music" aria-hidden="true"></i> Curabitur sit amet leo hendrerit, laoreet felis id, cursus neque.</li>
              </ul>
          </div>
        </div>
      </div>
    </div>
<!--VIDEO SECTION END HERE -->

<!--------------FEATURE SECTION START HERE----------->
     <div class="feature-section">
       <div class="container">
          <div class="row">
            <div class="col-md-4 col-sm-12 col-12 left-sd">
              <h2><span>Featured</span> Blogs</h2>
              <p>Wedding entertainment is what I Do Music do. With over 20 years 
                experience in the wedding entertainment industry.</p>
                <p><b>Learn how to look sharper!</b></p>
                <img src="{{asset('frontend/assets/img/right-sd.png')}}" alt="">
            </div>
            <div class="col-md-8 col-sm-12 col-12 right-sd">
              <div class="row" style="overflow: hidden;">

            @if(!empty($topBlogs))
                @foreach($topBlogs as $recentblog)
                  <div class="col-md-4 col-sm-6 boxx">
                      <img src="{{ asset('uploads/blogs/'.$recentblog->banner_image)}}" alt="">
                      <a href="/blog/post/{{$recentblog->slug}}"><span>{!! Str::limit($recentblog->name, 30, '...') !!}</span></a>
                  </div>
                @endforeach
              @endif
              <div class="col-md-4 col-sm-6 lst">
                <a href="/blogs">Read More <img src="{{asset('frontend/assets/img/arrow-right.png')}}" alt=""></a>
              </div>
              </div>
            </div>
          </div>
       </div>
     </div>
<!--------------FEATURE SECTION START HERE----------->

<!-- REVIEWS SECTION START HERE -->
<div class="reviews-sec" id="testimonial">
    <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="headings">
              <h2>
                <span>Reviews from happy couples</span>
              </h2>
            </div>
            <div class="reviews-slider">
            @if(count($testimonials) > 0)
                @foreach($testimonials as $testnials)
                  <div>
                    <div class="media ftco-media d-block text-center mx-1">
                      <p>{{$testnials->content}}</p>
                      <div class="media-body">
                        <img src="{{ asset('uploads/testimonial/'.$testnials->testimonials_image)}}" class="rounded-circle" alt="">
                        <div class="author">
                          <h5 class="h4">{{$testnials->author}}</h5>
                          <p>{{$testnials->created_at}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
            @endforeach
            @else
              <div>
            <div class="media ftco-media d-block text-center mx-1">
              <p>No Testimonial Data Found</p>
            </div>
          </div>
            @endif
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- REVIEWS SECTION END HERE -->
@endsection