@extends('layouts.app')

@section('title') {{$title}} -@endsection

@section('content')
  <section class="section section-sm">
    <div class="container">
      <div class="row justify-content-center text-center mb-sm">
        <div class="col-lg-12 py-5">
          <h2 class="mb-0 text-break">{{$title}}</h2>
          <p class="lead text-muted mt-0">{{trans('users.the_best_creators_is_here')}}
            @guest
              @if ($settings->registration_active == '1')
                <a href="{{url('signup')}}" class="link-border">{{ trans('general.join_now') }}</a>
              @endif
          @endguest</p>
        </div>
      </div>

      @if (! request()->get('q'))
      	<div class="btn-block mb-3 text-right filter-container">
      		<span>
      			{{trans('general.filter_by')}}

      			<select class="ml-2 custom-select w-auto" id="filter">
      					<option @if(request()->is('creators')) selected @endif value="{{url('creators')}}">{{trans('general.featured_creators')}}</option>
      					<option @if(request()->is('creators/new')) selected @endif value="{{url('creators/new')}}">{{trans('general.new_creators')}}</option>
                  <option @if(request()->is('creators/free')) selected @endif value="{{url('creators/free')}}">{{trans('general.free_subscription')}}</option>
      				</select>
      		</span>
      	</div>
      @endif

     <!--LIVE VIDEO STREAMING SECTION -->
      <div class="live-video-container">
        <a href="#" class="close"></a>
        <!-- THE REMOTE VIDEO -->
        <div id="me"></div>
        <div id="remote-container">
        </div>
        
        <i id="likeVideo" class="like-video fas fa-heart"></i>
        <div class="hearts"></div>
      </div>
      <div class="wrap-container">
        <div class="live-stream-container">
            
                <div style="width: 24%;float: left;">
                    <a class="btn btn-primary btn-lg btn-floating show-video" style="background-color: #ac2bac;padding: 2px;height: 52px;width: 52px;" href="#!" role="button">
                     <div style="
                    font-size: 10px;
                    font-weight: bold;
                    float: revert;
                    margin-top: 15px;">Go Live</div>
                    </a>
                  
                </div>
            @if( $users->total() != 0 )

              @foreach($users as $response)
                <div style="width: 24%;float: left;">
                  <a
                  class="btn btn-primary btn-lg btn-floating show-video"
                  style="background-color: #ac2bac;padding: 2px;height: 52px;width: 52px;"
                  href="#!"
                  role="button" onclick="joinChannel('{{$response->hide_name == 'yes' ? $response->username : $response->name}}')"
                  >
                    <img src="{{Helper::getFile(config('path.avatar').$response->avatar)}}" alt="{{$response->name}}" class="img-user-small" style="height: 52px !important;width: 52px;border-radius: 50%;">        
                  </a>
                  <p>{{$response->hide_name == 'yes' ? $response->username : $response->name}}</p>
                </div>
              @endforeach

             @endif
        </div>

      </div>

      @include('includes.listing-categories')

      <div class="row">
        @if( $users->total() != 0 )

          @foreach($users as $response)
          <div class="col-md-4 mb-4">
            @include('includes.listing-creators')
          </div><!-- end col-md-4 -->
          @endforeach

          @if($users->hasPages())
            <div class="w-100 d-block">
              {{ $users->appends(['q' => request('q')])->links() }}
            </div>
          @endif

        @else
          <div class="col-md-12">
            <div class="my-5 text-center no-updates">
              <span class="btn-block mb-3">
                <i class="fa fa-user-slash ico-no-result"></i>
              </span>
            <h4 class="font-weight-light">{{trans('general.no_results_found')}}</h4>
            </div>
          </div>
        @endif
      </div>
    </div>
  </section>
@endsection