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

@section('content')
<div class="add_list_main">
<!-- BANNER SECTION CODE START -->
    <div class="banner-sec listing">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <h1>
              <span>Wedding Bands For </span>Hire
            </h1>
            <p class="sub-text"> Book live Wedding Music Bands UK wide. </p>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-sec">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
           <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="img/filter1.png" alt=""> Search By Filters</a></li>
                    <li class=""><a href="#tab2default" data-toggle="tab"><img src="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}}" @isset($data['genre_id'])@if($category->id == $data['genre_id']) selected @endif @endisset>{{$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}}" @isset($data['city_id'])@if($val->id == $data['city_id']) selected @endif @endisset>{{$val->cname}}</option>
                                        @else
                    @if($state == $val->name)
                      <option value="{{$val->id}}" @isset($data['city_id'])@if($val->id == $data['city_id']) selected @endif @endisset>{{$val->cname}}</option>
                    @else
                    </optgroup>
                    <optgroup label="{{$val->name}}">
                    <option value="{{$val->id}}" @isset($data['city_id'])@if($val->id == $data['city_id']) selected @endif @endisset>{{$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="Northamptonshire" name="date" type="text" id="datepicker" class="form-control" @if(@isset($data['date'])) @if($data['date']) value = {{$data['date']}} @endif @endisset>
                            </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" @isset($data['price'])@if(250 == $data['price']) selected @endif @endisset>Up to �250</option>
                              <option value="500" @isset($data['price'])@if(500 == $data['price']) selected @endif @endisset>Up to �500</option>
                              <option value="750" @isset($data['price'])@if(750 == $data['price']) selected @endif @endisset>Up to �750</option>
                              <option value="1000" @isset($data['price'])@if(1000 == $data['price']) selected @endif @endisset>Up to �1000</option>
                              <option value="1250" @isset($data['price'])@if(1250 == $data['price']) selected @endif @endisset>Up to �1250</option>
                              <option value="1500" @isset($data['price'])@if(1500 == $data['price']) selected @endif @endisset>Up to �1500</option>
                              <option value="1750" @isset($data['price'])@if(1750 == $data['price']) selected @endif @endisset>Up to �1750</option>
                              <option value="2000" @isset($data['price'])@if(2000 == $data['price']) selected @endif @endisset>Up to �2000</option>
                              <option value="3000" @isset($data['price'])@if(3000 == $data['price']) selected @endif @endisset>Up to �3000</option>
                              <option value="10000" @isset($data['price'])@if(10000 == $data['price']) selected @endif @endisset>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">
                            <h6><i class="fa fa-search" aria-hidden="true"></i> Search</h6>        
                            <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" @isset($data['key'])@if($data['key']) value={{$data['key']}} @endif @endisset>
                            </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>
      </form>
          </div>
        </div>
      </div>
    </div>
    <!-- BANNER SECTION CODE END -->


    <!-- LISTING SECTION CODE START -->
    <section class="listing-pro">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <div class="left-sdd">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
        <input type="hidden" name="date" id="date_hid" @if(@isset($data['date'])) @if($data['date']) value = {{$data['date']}} @endif @endisset>
              <h3> Refine Your Search </h3>
              <form class="search">
                <div class="form-group d-flex">
                  <input type="text" placeholder="Search.." class="key" name="search" @if(@isset($data['key'])) @if($data['key']) value = {{$data['key']}} @endif @endisset>
                  <button><i class="fa fa-search"></i></button>
                </div>
              </form>
              <div class="price-range" id="loader_off">
                <h3> Price Range </h3>
                <div class="row">
                  <div class="col-md-6 col-sm-6">
                    <input type="number" class="min rang" value="0" min="0" max="9900" placeholder="1,532"/>
                  </div>
                  <div class="col-md-6 col-sm-6">
                     <input type="number" id="lengthValue" class="max rang" value="10000" placeholder="10000" />
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-12">
                  <input id="lengthSlider" class="" type="range" min="0" value="0" max="10000" onmouseup="progressbarChange(this.value)">
                  </div>
                </div>
              </div>

             <div class="price-range" id="loader_on" style="display: none;">
                  <i class="fa fa-circle-o-notch fa-spin" style="font-size:45px"></i>
             </div>

              <div class="Regions">
                <h3> Regions </h3>
                <select class="custom-select regn rang" name="city_id">
          <option value="">Any Location</option>
                    @foreach ($location as $val)
            @if($i == 0)
                <optgroup label="{{$val->name}}">
                <option value="{{$val->id}}" @isset($data['city_id'])@if($val->id == $data['city_id']) selected @endif @endisset>{{$val->cname}}</option>
                            @else
              @if($state == $val->name)
                <option value="{{$val->id}}" @isset($data['city_id'])@if($val->id == $data['city_id']) selected @endif @endisset>{{$val->cname}}</option>
              @else
              </optgroup>
              <optgroup label="{{$val->name}}">
              <option value="{{$val->id}}" @isset($data['city_id'])@if($val->id == $data['city_id']) selected @endif @endisset>{{$val->cname}}</option>
                            @endif
            
            @endif
          @endforeach
          </optgroup>
        </select>
              </div>

              <div class="filter">
                <h3>Categories</h3>
                <ul>
                   @foreach($categories as $category)
                    <li style="display: flex;">
                      <input type="checkbox" name="cat_brands" class="catalog_filters genre rang" value="{{$category->id}}" @isset($data['genre_id'])@if($category->id == $data['genre_id']) checked @endif @endisset><span>{{$category->name}}</span>
                    </li>
                    @endforeach            
                </ul>
              </div>

              <div class="ofer-signup" id="hideformspcl">
                 <h6><b>SPECIAL OFFER SIGN UP</b></h6>
                 <form id="offer_form" action="{{route('signup_offer')}}" method="post">
                  @csrf
                  <div class="form-group">
                     <input type="text" name="name" class="form-control mt-0 mb-3" id="spclname" placeholder="Full Name" required/>
                     <span class="error1"></span>
                     <input type="email" name="email" class="form-control mb-3" id="spclemail" placeholder="Email Address" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
                     <span class="error2"></span>
                     <div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">
                      <input placeholder="Wedding Date" name="date" type="date" id="datepicker" class="form-control" required/>
                     </div>
                     <span id="comment_error"></span>
                  </div>
                </form>
                <a href="javascript:void(0)" id="spcloffers" class="btn custom-btn"> Send Me Offer </a>
              </div>

              <div class="ofer-signup" id="success_messageofr" style="display: none;">
                 <h6><b>SPECIAL OFFER SIGN UP</b></h6>
                 <p>Thank for the regiter in special offer request !</p>
              </div>


            </div>
          </div>
          <div class="col-md-9">
            <div class="product-wrapper">
              <div class="shortbox">
                <p> Showing <span class="page-count">1-10</span> of <span class="total-count">{{$count}}</span> matching results </p>
                <div class="filter">
                  <ul>
                    <li style="display: flex;">
                      <input type="checkbox" name="cat_brands" class="catalog_filters order rang" value="1"><span>Price (High/Low)</span></li>
                    
                    <li style="display: flex;">
                      <input type="checkbox" name="cat_brands" class="catalog_filters order rang" value="2"><span>Price (Low/High)</span></li>
                    
                    <li style="display: flex;">
                      <input type="checkbox" name="cat_brands" class="catalog_filters order rang" value="3"><span>Title (A-Z)</span></li>
                    
                    <li style="display: flex;">
                      <input type="checkbox" name="cat_brands" class="catalog_filters order rang" value="4"><span>Title (Z-A)</span></li>
                    </ul>
                  </div>
              </div>

              <div class="all-product">
                <div class="row">
        
                @forelse ($users as $user)
                    <div class="col-md-4 col-sm-6">
                       <div class="prod-col">
                        <div class="img-wra">
                          <a href="{{route('actdetail',base64_encode($user->id))}}"> 
                              @php
                                $file = public_path('uploads/act_'. $user->id.'/images/'.$user->actimages[0]->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 ) }}" alt="image">
                          </a> 
                      </div>
                      <div class="textwrap">
                        <div class="head-pro">
                          <a href="{{route('actdetail',base64_encode($user->id))}}"><h3>@if (empty($user->act_name))2 Hot 2 Handle Band 29 @else {{$user->act_name}}@endif</h3></a>
                          <a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
                        </div>
                        <p class="review">
                          <i class="fa fa-star" aria-hidden="true"></i>
                          <i class="fa fa-star" aria-hidden="true"></i>
                          <i class="fa fa-star" aria-hidden="true"></i>
                          <i class="fa fa-star" aria-hidden="true"></i>
                          <i class="fa fa-star-half-o" aria-hidden="true"></i>
                          <span>({{$user->act_testimonials->count()}} review)</span>
                        </p>
                        <ul class="d-flex">
                          <li><i class="fa fa-users" aria-hidden="true"></i>@if (empty($user->no_of_members)) 00 @else {{$user->no_of_members}}@endif</li>
                          <li><i class="fa fa-map-marker" aria-hidden="true"></i>@if (empty($user->areapricingact[0]->city->name)) No City @else {{$user->areapricingact[0]->city->name}}@endif</li>
                        </ul>
                        <p class="Price"> From <i class="fas fa-pound-sign"></i> @if (empty($user->areapricingact[0]->price)) 00 @else {{$user->areapricingact[0]->price}}@endif </p>
                        <a href="{{route('actdetail',base64_encode($user->id))}}" class="btn viewpro-btn">View Profile</a>
                      </div>
                    </div>
                  </div>
                  @empty
                    <div class="col-md-12 col-sm-12">
                       
                        <div class="prod-col">
                          <div class="textwrap">
                            <div class="head-pro text-center">
                              No records found
                            </div>
                          </div>
                        </div>
                  </div>

                @endforelse
         </div>
         <div id="pagination">{{{ $users->links() }}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- LISTING SECTION CODE END -->

    <!-- RECENT SECTION START --
    <section class="recent-sec">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="headings">
              <h2><span>Recent Artists</span></h2>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="recent-box">
              <img src="frontend/assets/img/recent.jpg" alt="" class="img-fluid">
              <h4> BLACK CHERRY JAM </h4>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="recent-box">
              <img src="frontend/assets/img/recent1.jpg" alt="" class="img-fluid">
              <h4> BLACK CHERRY JAM </h4>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="recent-box">
              <img src="frontend/assets/img/recent2.jpg" alt="" class="img-fluid">
              <h4> BLACK CHERRY JAM </h4>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="recent-box">
              <img src="frontend/assets/img/recent3.jpg" alt="" class="img-fluid">
              <h4> BLACK CHERRY JAM </h4>
            </div>
          </div>
        </div>
      </div>
    </section>
  
    -- RECENT SECTION CODE START -->
</div>
@endsection