@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">
    
    @import url('https://fonts.googleapis.com/css2?family=Battambang&family=Moul&display=swap');
    
     #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;
        }
        .boxsmileyface .col-lg-2{
            border:1px dashed gray;
            min-height: 180px;
            max-height: 180px;
        }
        p .address_title{
            font-weight: normal;
        }
        p .address_fillin{
            border-bottom: 1px dashed gray;
            padding-left:5px;
            padding-right: 5px;
            color:green;
        }
        .moredetail {
            margin-top:10px;
            background-color: #ccddff;
        }
        .moredetail .row{
            padding:10px;
            margin:0px;
            /*border-bottom: 1px dashed green;*/
        }
        .btn-submit{
            margin-top:10px;
            margin-bottom: 10px;
            width: 100%;
            height: 45px;
            font-size: 28px;
        }
        .mycontent .row{
          margin: 0px;
          padding:0px;
          margin-top:5px;
        }
        .votecontent{
          -webkit-box-shadow: 11px 10px 20px -8px rgba(0,0,0,0.75);
          -moz-box-shadow: 11px 10px 20px -8px rgba(0,0,0,0.75);
          box-shadow: 11px 10px 20px -8px rgba(0,0,0,0.75);
        }
        .votecontent h2,.votecontent h3{
          margin:2px 0px;
        }
        @media (min-width: 1281px) {
          .votecontent{
            width:70%;
          }
        }

        @media (min-width: 320px) and (max-width: 480px) {
          .boxsmileyface h3{
            font-size:12px;
          }
          .boxsmileyface .col-lg-2{          
             min-height: 140px;
            max-height: 140px;
          }
          .limon{
            padding-top:0px;
            padding-bottom: 0px;
            margin-top: 0px;
          }
          .left_logo img{
            width:80%;
          }
          .right_logo img{
          }
          .logo{
            
          }
          .logo .left_logo{
           
          }
         
          
        }
        
        @font-face {
          font-family: myFirstFont;
          src: url(sansation_light.woff);
        }
        .limon{
            font-family: 'Moul' !important;
        }

       
    </style>
@endsection
@section('content')
<div id="content" class="mycontent" >

<div class="row votecontent" style="margin:0 auto;border:2px groove gray;margin-top:10px">
    <form id="new_term-frm" class="ajxfrm2  sky-form" data-validate="true" data-reload="true" method="post" >
          <div class="row">
              <center>
                  <h2 class="limon">{{ $layout->label->kingdom_of_cambodia->title }}</h2>
                  <h2 class="limon">{{ $layout->label->nation_region_king->title }}</h2>
              </center>   
          </div>  
          {{csrf_field()}}
          <input type="hidden"  name="cmd" value="ajx_voter2">
          <input type="hidden" name="toilet_id" value="{{encrypt($toilet->id)}}">
          <div class="row logo">
            <div class="col-lg-4 col-xs-8 left_logo">
                     <img src="{{URL::asset('/assets/public_toilet/header1.png')}}" class="img img-responsive">
            </div>
            <div class="col-lg-4 hidden-xs">
               
            </div>
            <div class="col-lg-4 col-xs-4 right_logo">
                <center>
                     <img src="{{URL::asset('/assets/public_toilet/header2.png')}}" class="img img-responsive">
                </center>
            </div>
          </div>
          <div class="row" >
                <center>
                    <h3 class="text text-primary limon">
                        {{ $layout->label->cambodia_publice_toilet->title }}
                    </h3>
                    <h4 class="text text-primary limon">
                              " {{$toilet->toilet_title}} "
                    </h4>
                     <p class="text text-primary limon">
                      {{ContentTerms::getTermTitle($toilet->toilet_category)}}
                    </p>
                        <img src="/google/{{$toilet_id}}" width="150px;height:150px">
                     </center>
                </center>
          </div>
          <div class="row boxsmileyface" style="background-color:white;">
                <h2 class="text text-success limon"> <i class="fas fa-smile" style="padding-left: 5px;"></i>{{ $layout->label->satisfaction_level->title }}</h2>
                @if($errors->has('smileyface'))
                    <div class="error-badge" id="for-smileyface">
                        {!! Helper::alert('danger', $errors->first('smileyface')) !!}
                    </div>
                @endif


                <div class="col-lg-2 col-xs-4">
                    <center>
                    <img src="{{URL::asset('assets/public_toilet/smileyface/verylike.png')}}" class="img img-responsive" >
                    <h3><input type="radio" name="smileyface" value="5" class="myradio" > Very Good</h3>
                    </center>
                </div>
                <div class="col-lg-2 col-xs-4">
                    <center>
                    <img src="{{URL::asset('assets/public_toilet/smileyface/like.png')}}" class="img img-responsive" >
                    <h3><input type="radio" name="smileyface" value="4" class="myradio" > Good</h3>
                    </center>
                </div>
                <div class="col-lg-2 col-xs-4">
                    <center>
                    <img src="{{URL::asset('assets/public_toilet/smileyface/normallike.png')}}" class="img img-responsive" >
                    <h3><input type="radio" name="smileyface" value="3" class="myradio" > Normal</h3>
                    </center>
                </div>
                <div class="col-lg-2 col-xs-4">
                    <center>
                    <img src="{{URL::asset('assets/public_toilet/smileyface/dislike.png')}}" class="img img-responsive" >
                    <h3><input type="radio" name="smileyface" value="2" class="myradio" > Bad</h3>
                    </center>
                </div>
                <div class="col-lg-2 col-xs-4">
                    <center>
                    <img src="{{URL::asset('assets/public_toilet/smileyface/verydislike.png')}}" class="img img-responsive" >
                    <h3><input type="radio" name="smileyface" value="1" class="myradio" > Very bad</h3>
                    </center>
                </div>
                <div class="col-lg-2 col-xs-4">
                    <center>
                    <img src="{{URL::asset('assets/public_toilet/smileyface/na.png')}}" class="img img-responsive" >
                    <h3><input type="radio" name="smileyface" value="0"  class="myradio" > NA</h3>
                    </center>
                </div>
          </div>

           <div class="row"​ >
                 <h4 class="text text-success limon"> <i class="fas fa-smile" style="padding-left: 5px;"></i>{{ $layout->label->comments->title }}</h4>
                <textarea rows="3" placeholder="Make a description about toilet here..."  class="form-control" name="voter_description"></textarea>
          </div>

          <div class="row">
                <button type="submit" value="true" class="btn btn-primary btn-submit">&nbsp; <i class="fas fa-share-square"></i> &nbsp;{{ $layout->label->submit->title }}</button>
          </div>
          <hr/>
          <div class="row moredetail" style="display:none" >
         
          <div class="row"​ >
                 <h4 class="text text-success"> &nbsp; <i class="fas fa-smile"></i> &nbsp;{{ $layout->label->toilet_name->title }}</h4>
                <input type="text" class="form-control" disabled value="{{$toilet->toilet_title}}">
          </div>
          <div class="row"​ >
                 <h4 class="text text-success"> &nbsp; <i class="fas fa-smile"></i> &nbsp;{{ $layout->label->toilet_standing->title }} </h4>
                <select value="{{ old('toilet_standing') }}" name="toilet_standing" id="toilet_standing" disabled class="form-control" >
                       <option value="" selected >{{$layout->label->please_select_below->title}}</option>                          
                       <option value="{{ContentTerms::getTermTitle($toilet->toilet_category)}}" selected >{{ContentTerms::getTermTitle($toilet->toilet_category)}}</option>
                               
                  </select>
                  <i></i>
          </div>

          <div class="row"​>
                 <h4 class="text text-success"> &nbsp; <i class="fas fa-smile"></i> &nbsp;{{ $layout->label->details->title }}</h4>
                <p class="text text-info">
                    <span style="font-size:18px">អាស័យដ្ឋានៈ</span>
                    <span class="address_title"> {{ $layout->label->provinces->title }}  :</span>
                    <span class="address_fillin">{{ Helper::get_address('address_provincecity',$toilet->province_id)}}</span>

                    <span class="address_title"> {{ $layout->label->districts->title }}  :</span>
                     <span class="address_fillin">{{ Helper::get_address('address_district',$toilet->district_id)}}</span>

                    <span class="address_title"> {{ $layout->label->communes->title }}  :</span>
                     <span class="address_fillin">{{ Helper::get_address('address_commune',$toilet->commune_id)}}</span>

                    <span class="address_title"> {{ $layout->label->villages->title }}  :</span>
                     <span class="address_fillin">{{ Helper::get_address('address_village',$toilet->village_id)}}</span>
                </p>
                <p class="text text-info">
                    <span style="font-size:18px">ម្ចាស់បង្គន់ៈ</span><br/>

                    @php
                      $user_meta=Helper::metas('user_meta',['user_id' => $toilet->toilet_owner]);
                    @endphp
                    <span class="address_title"> &nbsp; - &nbsp; {{ $layout->label->business_name->title }}  :</span>
                    <span class="address_fillin">{{isset($user_meta->business_name->value)?$user_meta->business_name->value:''}}</span><br>

                    <span class="address_title"> &nbsp; - &nbsp; {{ $layout->label->fullname_kh->title }}  :</span>
                    <span class="address_fillin">{{isset($user_meta->fullname_kh->value)?$user_meta->fullname_kh->value:'' }}</span><br>
                    
                     <span class="address_title"> &nbsp; - &nbsp; {{ $layout->label->fullname_en->title }}  :</span>
                    <span class="address_fillin">{{isset($user_meta->fullname_en->value)?$user_meta->fullname_en->value:''}}</span><br>

                    <span class="address_title"> &nbsp; - &nbsp; {{ $layout->label->telephone->title }}  :</span>
                    <span class="address_fillin">{{isset($user_meta->telephone->value)?$user_meta->telephone->value:''}}</span><br>

                     <span class="address_title"> &nbsp; - &nbsp; {{ $layout->label->email->title }}  :</span>
                    <span class="address_fillin">{{isset($user_meta->email->value)?$user_meta->email->value:''}}</span>  
                </p>
          </div>
          </div><!--moredetail-->
    </form>
                    
          
       
                 
        
</div>
</div>
</div><!-- END MAIN CONTENT -->
    





@endsection
@section('script')

    <script type="text/javascript">
        $("#new_term-frm").submit(function(stay){
           var formdata = $(this).serialize(); // here $(this) refere to the form its submitting
            $.ajax({
                type: 'POST',
                url: "{{ url('/') }}/ajax/ajx_voter",
                data: formdata, // here $(this) refers to the ajax object not form
                success: function (data) {
                    var timer=1000;
                    if(data.result=='success'){timer=2000}else{timer=4000}
                       swal({
                            title   : '',
                            text    : data.msg,
                            icon: data.result,
                            closeOnEsc  : false,
                            timer:timer,
                            closeOnClickOutside:false
                        });
                  
                },
            });
            stay.preventDefault(); 
        });

        

    </script>
   
@endsection