@extends('layouts.default')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">


<style>

    .ImageGrid {

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;

        margin-right: auto;

        margin-left: auto;

        -webkit-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        margin: 0.5em -4px 1.5em -4px;

    }



    .ImageGrid > a {

        padding: 4px;

        -webkit-box-flex: 1;

        -webkit-flex: 1 0 33.33%;

        -ms-flex: 1 0 33.33%;

        flex: 1 0 33.33%;

    }



    .ImageGrid > a img {

        width: 100%;

        max-height: auto;



    }

    .image_form>p>strong{

        font-weight:bold !important;

    }

    .image_form>p{

        line-height:15px !important;

    }



    .image_form{

        margin-top: -50px;

        margin-bottom: -40px;

    }



</style>

<script

  src="https://code.jquery.com/jquery-1.12.4.min.js"

  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="

  crossorigin="anonymous"></script>





<section id="about-us">

    <div class="container-fluid">

        <div class="theme-title">

			<h2><strong>People&rsquo;s Choice</strong></h2>
			<br>

			<h3><a href	= "/oonavote" target="_blank">ALL</a>■■■<a href	= "/last" target="_blank">Last_Selected</a>
			</h3>
			<!--<h3> <a href	= "/withone2023">with One</a></h3>-->

@php
			  $data=\App\Models\HampsteadPicture::Where('peoples_choise',1)->get();
			  echo "Selected for PiepleChoise ";
					echo count($data);
			  @endphp

          <div class="ImageGrid row">

                    @foreach(\App\Models\HampsteadPicture::Where('peoples_choise',1)->orderBy('pch_sort')->get() as $value)



            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="">

                            <div class="single-news-item" style="border:1px solid grey; padding:15px; margin-bottom:30px;">



                                <div class="image_form" align="left">{!! $value->description !!}<br></div>


                                @php
                                $resized = $value->link;
                                /*$resized = str_replace('.','-resized.',$resized);*/
                                @endphp


                              <br>



                                <div class="img">

                                <a href="/storage/{{$value->link}}" target="_blank">

                                    <img class="lazy" loading="lazy" data-src="{{media($resized)}}" src="{{media($resized)}}" alt="Image" style="width: 100%;" >

                                </a>

                                </div> <!-- /.img -->

                                <div class="post">

                                    <br>



                                    <table width="100%">


                                        <tr>
											<!--<td>

                                                LAST - <input type="checkbox" name="Last" id="{{$value->id}}" @if($value->Last == 1) checked @endif>

                                            </td>-->
											<td>

                                                people's choice - <input type="checkbox" name="peoples_choise" id="{{$value->id}}" @if($value->peoples_choise == 1) checked @endif>

                                          </td>

											<td>

                                                Sorting <input type="number" name="pch_sort" id="{{$value->id}}" value="{{$value->pch_sort}}">

                                            </td>

                                            <!--/*<td>
//
//                                                Mari - <input type="checkbox" name="mari" id="{{$value->id}}" @if($value->mari == 1) checked @endif>
//
//                                            </td>
//
//                                            <td>
//
//                                                Tom - <input type="checkbox" name="tom_marsh" id="{{$value->id}}" @if($value->tom_marsh == 1) checked @endif>
//
//                                            </td>
//
//                                            <td>
//
//                                                James - <input type="checkbox" name="james_lloyd" id="{{$value->id}}" @if($value->james_lloyd == 1) checked @endif>
//
//                                            </td>
//
//                                            <td>
//
//                                                Patricia - <input type="checkbox" name="patricia_barker" id="{{$value->id}}" @if($value->patricia_barker	 == 1) checked @endif>
//
//                                            </td>
//
//                                            <td>
//
//                                                Joshua - <input type="checkbox" name="joshua_press" id="{{$value->id}}" @if($value->joshua_press == 1) checked @endif>
//
//                                            </td>
//                                            <td>
//
//                                                Michael - <input type="checkbox" name="michael_taylor" id="{{$value->id}}" @if($value->michael_taylor == 1) checked @endif>
//
//                                            </td>*/-->

                                        </tr>

									<!--	 <tr>

                                            <td>

                                                Last Selected - <input type="checkbox" name="Last" id="{{$value->id}}" @if($value->Last == 1) checked @endif>

                                            </td>
										</tr>-->




                                    </table>



                                    <br>



                                </div> <!-- /.post -->

                            </div> <!-- /.single-news-item -->





















                        </div>



                    @endforeach

                </div> <!-- /.theme-title -->

            </p>

            </div> <!-- /.theme-title -->



        </div> <!-- /.container -->

</section>

<!-- /#about-us -->

  <script>

    $('input[type="checkbox"]').click(function() {

        let value = 0

        if($(this).is(':checked')){

            value = 1

        }else{

            value =0

        }



        var name = $(this).attr('name');

        var id = $(this).attr('id');

        $.post('/hampsteadartsociety2023',{name:name,id:id,value:value,_token:'{{csrf_token()}}'},function(data){



        });

    });

    $('input[type="number"]').blur(function() {
        var id = $(this).attr('id');
        $.post('/hampsteadartsociety2023',{name:'pch_sort',id:id,value:$(this).val(),_token:'{{csrf_token()}}'},function(data){
        });

    });



   /*
 jQuery(function($) {
    console.log($, 'jquery works');
    console.log($("img.lazy").length);
    $("img.lazy").lazyload();
});*/

  </script>


@stop