@extends('layouts.frontend.master')
@section('style')

	<link rel="stylesheet" href="{{asset('assets/frontend/plugins/sky-forms-pro/skyforms/css/sky-forms.css')}}">
	<link rel="stylesheet" href="{{asset('assets/frontend/css/homepage.css')}}">
	<link rel="stylesheet" href="{{asset('assets/frontend/plugins/sky-forms-pro/skyforms/custom/custom-sky-forms.css')}}">
	<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<style type="text/css">
     #map_wrapper {
        height: 500px;
	    }
		  #map_canvas {
	        width: 100%;
	        height: 100%;
	    }
        .table > tbody > tr > td,  .table > thead > tr > th{
        text-align: center;
        vertical-align: middle;
        }
        th{
            padding: 10px;
            height: 50px;
            text-transform: uppercase;
            background-color: #80e5ff;
            color: #0088cc;
            font-size: 16px;
        }
        .search{          
            padding:10px;
            background-color: #e6eeff; 
            border:1px dashed orange;           
        }
      
        .search .label{
            color:#0088cc;
            font-size: 14px;
        }

        .tc{
            display: inline-block;
            width: 180px;
            white-space: nowrap;
            overflow: hidden !important;
            text-overflow: ellipsis;
        }

         .overflow {
          width: 14em;
          margin: 0 0 2em 0;          
          white-space: nowrap;
          overflow: hidden;
        }

        .ellipsis { 
          text-overflow: ellipsis;
        }
        .myhidden{
          border:1px dashed gray;
        }

        @media (min-width: 320px) and (max-width: 480px) {
          .search_location{
            width:100%;
            margin:0 auto;
          }
           .btn_search{
            width:100%;
            margin-top: 10px;
          }
          .qrcode img{
            width:130px;
            height:120px;
          }
          .qrcode_row{
            width:90%;
            margin:0 auto;
          }
          .qrcode_row *{
            font-size:12px;
          }
          .myhidden{
            height: 240px;
          }
        }
         /* 
          ##Device = Laptops, Desktops
          ##Screen = B/w 1025px to 1280px
        */

        @media (min-width: 1281px) and (max-width: 1366px) {
          .search_location{
            width:98%;
            margin:0 auto;
          }
          .search{
            width: 98%;
            margin:0 auto;
            padding:0px;
            margin-top:2px;
          }
          .btn_search{
            width:100%;
            margin-top: 30px;
          }
          .qrcode img{
            width:100%;
            height:180px;
          }
          .qrcode_row{
            margin:0 auto;
            margin-top: 10px;
            width:98%;
          }
          .qrcode_row *{
            font-size: 12px;
          }
           .myhidden{
            height: 270px;
          }
          
        }
        

      /* 
          ##Device = Monitor TV
          ##Screen = B/w 1366px to 1920px
        */
       @media (min-width: 1920px) {
          .search_location{
            width:90%;
            margin:0 auto;
          }
          .btn_search{
            width:100%;
            margin-top: 30px;
          }
          .qrcode img{
            width:100%;
            height:220px;
          }
          .qrcode_row{
            margin:0 auto;
            margin-top: 10px;
            width:90%;
            padding:0px;
          }
           .qrcode_row *{
              font-size:14px;
            }
          .myhidden{
            height: 330px;
          }
          
        }

       
        





	   
	</style>
@endsection
@section('content')
<div id="content" class="mycontent">
	<div class="row nomp" >
		<div class="col-lg-8 col-lg-offset-2 col-xs-12" style="margin-top:10px">
			<div class="col-lg-4">
				<img src="{{URL::asset('assets/public_toilet/featured.jpg')}}" class="img img-responsive img-thumbnail" alt="feature">
			</div>
			<div class="col-lg-4 col-xs-12 col-sm-12">
        <center>
                @if(Session::get('type')=='asian')
                    <img src="{{asset('assets/public_toilet/asian/asian_logo.png')}}"  class="img img-responsive" alt="Logo" >
                @else
                    <img src="{{URL::asset('assets/public_toilet/label-updated.png')}}" class="img img-responsive" alt="label-update">
                @endif
        
        </center>
      </div>
			<div class="col-lg-4 hidden-xs">
				<img src="{{URL::asset('assets/public_toilet/featured2.jpg')}}" class="img img-responsive img-thumbnail" alt="feature">
			</div>
		</div>
	</div>










<div class="row search_location" >
                <div class="row search" >
                   <form action="/listing" id="sky-form5" class="sky-form" class="smart-form searchform" method="get" enctype="multipart/form-data" >
                    <div class="col-lg-12">
                    <div class="col-lg-7">
                        <label class="label">
                                    {{ $layout->label->search_by_title->title }}                                            
                        </label> 
                          <input type="text" name="title" class="form-control" value="{{$searchField->title}}" placeholder="{{ $layout->label->search_by_title->title }}">                     
                    </div>
                    <div class="col-lg-2">
                        <label class="label">
                                    {{ $layout->label->toilet_standing->title }}                                        
                        </label>
                         <select value="{{$searchField->toilet_category}}"  class="form-control" name="toilet_standing" id="toilet_standing"  >
                               <option value="" selected >{{$layout->label->please_select_below->title}}</option>
                                  @foreach($toilet_standing as $standing)
                                       @if($searchField->toilet_category ==$standing->term_id)
                                          <option value="{{$standing->term_id}}" selected >{{$standing->title}}</option>
                                       @else
                                          <option value="{{$standing->term_id}}">{{$standing->title}}</option>
                                      @endif
                                  @endforeach
                          </select>
                          <i></i>                     
                    </div>
                    <div class="col-lg-1">
                        <input type="hidden" name="province_id" value="{{$_GET['province_id']}}">
                        <button class="btn btn-primary btn_search" type="submit" ><i class="fas fa-search"></i> &nbsp;Search</button>
                    </div>
                   
                    
                    </div><!--end lg12-->
                    
                 {{ csrf_field() }}
                </form> 
                </div>        
               
                
                   
                    @if(count($toilets)<=0)
                     <div class="row">
                            <center>
                                <img src="{{URL::asset('assets/admin/search_not_found.png') }}" style="width:400px">
                            </center>
                       </div>
                    @endif
                   
                </div>
                <div style="clear:both"></div>
                <div class="row qrcode_row" >
                        @php
                          $lp=0;
                        @endphp
                        @foreach($toilets as $toilet)
                            @php
                              $lp=$lp + 1;
                              $encrypt_id=encrypt($toilet->id);
                            @endphp
                            <div class="col-lg-2 col-xs-6 myhidden">
                               <center>
                                   <a title="{{$toilet->toilet_title}}" target="_blank" href="{{ route('voter.edit', $toilet->id) }}" class="qrcode" >
                                  <img title="{{$toilet->toilet_title}}" src="/google/{{$toilet->id}}" >
                                  <br>
                                      <!--  <p class="overflow ellipsis" style="margin-bottom:0px;font-weight:bold;">
                                          {{$toilet->toilet_title}}
                                        </p> -->
                                        <p>
                                           {{$toilet->toilet_title}}
                                        </p>
                                        <p class=" text-primary">
                                          " &nbsp;{{Helper::term_translate($toilet->toilet_category)}}&nbsp;"
                                        </p>
                                        <span>
                                          [{{Helper::get_address('address_provincecity',$toilet->province_id)}}]
                                        </span>

                                   </a>
                                </center>
                            </div>
                            @if($lp % 6 == 0)
                              <div style="clear:both"></div>
                            @endif
                        @endforeach
                    </div>
             
       
                 <div class="col-lg-12" >
                    <div class="col-lg-9"></div>
                    <div class="col-lg-2">
                           <h5>Total Records:<b> {{$totalRecords}}</b></h5>
                    </div>
                    <div class="col-lg-1">
                        {!! $toilets->appends(Input::except('page'))->links() !!}
                    </div>          
                </div>
                    
        
                            <!-- End Reg-Form -->
     
</div>
	



















</div><!-- END MAIN CONTENT -->
	

@endsection
@section('script')
@include('backend.toilets.inc_toiletscript')
@endsection