@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%;
	    }
     @font-face {
      font-family: koh;
      src: url('/fonts/koh.ttf');
    }
        .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;
        }


        @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: 200px;
          }
        }
         /* 
          ##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;
          }
          .overflow {
              width: 14em;
              margin: 0 0 2em 0;          
              white-space: nowrap;
              overflow: hidden;
            }

          .ellipsis { 
            text-overflow: ellipsis;
          }
          .province_title{
              font-size: 18px;
            }
          
        }
        

      /* 
          ##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;
            }
            .province_title{
              font-size: 20px;
            }
          
        }

       
        





	   
	</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" style="width:90%;margin:0 auto" >
                   <form action="{{ route('voter.index') }}" 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 col-xs-0"></div>
                    <div class="col-lg-4 col-xs-9">                       
                          <input type="text" name="title" class="form-control" value="{{$searchField->title}}" placeholder="{{ $layout->label->search_keyword->title }}">                     
                    </div>
                    <div class="col-lg-1 col-xs-3">
                        <button class="btn btn-primary " type="submit" ><i class="fas fa-search"></i> &nbsp;{{ $layout->label->search->title }}</button>
                        {{ csrf_field() }}
                    </div>
                    </div><!--end lg12-->
                 </form> 
              </div> 

               @if(count($provinces)<=0)
                 <div class="row">
                        <center>
                            <img src="{{URL::asset('assets/admin/search_not_found.png') }}" style="width:400px">
                        </center>
                   </div>
                @endif       



                <div style="clear:both"></div>
                <div class="row qrcode_row" >

                        @foreach($provinces as $province)
                            <div class="col-lg-2 col-xs-6 myhidden" style="border:1px dashed gray;margin-bottom:20px;padding-bottom:10px">
                                @php
                                  $encrypt_id=encrypt($province->id);
                                @endphp 
                                <center>
                                 <a title="{{$province->title_kh}}" target="_blank" href="/listing?province_id={{$province->id}}" class="qrcode" >
                                <img title="{{$province->title_kh}}" src="/province/{{$province->id}}" >
                                <br>
                                    @if($lang == 'kh')
                                        <p class="province_title"  style="margin-bottom:0px;font-weight:bold;font-family:koh">
                                        <i class="fas fa-map-marker-alt"></i> &nbsp; {{$province->start_name_kh}}&nbsp;{{$province->title_kh}}
                                        <span style="font-weight:bold" class="text text-primary">[{{Helper::totalToiletCambodiaByProvince($province->id)}}]</span>
                                        </p>
                                    @else
                                        <p class="province_title"  style="margin-bottom:0px;font-weight:bold;font-family:koh">
                                        <i class="fas fa-map-marker-alt"></i> &nbsp; {{$province->title_en}}
                                        <span style="font-weight:bold" class="text text-primary">[{{Helper::totalToiletCambodiaByProvince($province->id)}}]</span>
                                        </p>
                                    @endif
                                 </a>
                                <a target="_blank" href="/listing?province_id={{$province->id}}" class="btn btn-primary" style="width:100%" >
                                  <i class="fas fa-arrow-right"></i>&nbsp;
                                   {{ $layout->label->select_continue->title }}
                                </a>
                                </center>
                               
                           
                            </div>
                        @endforeach
                </div>
                <div class="row">
                    <div class="container">
                      <!-- <h3 class="text text-primary pull-right">Total: <b>{{Helper::totalActiveToilets()}} Records</b></h3> -->
                    </div>
                </div>
             
       
                
        
                            <!-- End Reg-Form -->
     
</div>
	



















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

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