@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="/art-listing" method="get" id="serchForm">
            <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>        
                            <!-- 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" @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">
                <h3> Price Rang </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" class="max rang" @if(@isset($data['price'])) @if($data['price']) value={{$data['price']}} @else value=10000  @endif @else value=10000 @endif min=0 max="10000" placeholder="1,532" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="progress">
                      <div class="bar" style="width:35%">
                        <p class="percent"> </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div> -->

    
             <div class="price-range">
              <h3> Price Rang </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" class="max rang" @if(@isset($data['price'])) @if($data['price']) value={{$data['price']}} @else value=10000  @endif @else value=10000 @endif min=0 max="10000" placeholder="1,532" />
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="slider-box">
                    <input type="text" id="priceRange" readonly>
                    <div id="price-range" class="slider"></div>
                  </div>
                </div>
              </div>
            </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">
        <h6><b>SPECIAL OFFER SIGN UP</b></h6>
                <form>
                  <div class="form-group">
                    <input type="text" class="form-control mt-0 mb-3" placeholder=" Full Name ">
                    <input type="email" class="form-control mb-3" placeholder=" Email Address ">
                    <div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">
                      <input placeholder="Wedding Date" type="text" id="datepicker" class="form-control">
                    </div>
                  </div>
                </form>
                <a href="#" class="btn custom-btn" role="button"> Send Me Offer </a>
              </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">
        
        @foreach ($users as $user)
                  <div class="col-md-4 col-sm-6">
                    <div class="prod-col">
                      <div class="img-wra">

                       <a href="/act-detail/{{base64_encode($user->id)}}"> 
                          <img src="{{ asset('uploads/act_'. $user->id.'/images/'.$user->images)}}" alt="image" class="img-fluid">
                        </a> 

                      </div>
                      <div class="textwrap">
                        <div class="head-pro">
                          <a href="/act-detail/{{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>({{$reviewcount}} 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->name)) No City @else {{$user->name}}@endif</li>
                        </ul>
                        <p class="Price"> From <i class="fas fa-pound-sign"></i> @if (empty($user->price)) 00 @else {{$user->price}}@endif </p>
                        <a href="/act-detail/{{base64_encode($user->id)}}" class="btn viewpro-btn">View Profile</a>
                      </div>
                    </div>
                  </div>
                  @endforeach
         </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