@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>


<!-- Chosen CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.min.css">

<!-- Chosen JS -->
<script src="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.jquery.min.js"></script>


<button class="scroll-bottom tran3s p-color-bg" id="scroll-to-bottom">

    <i class="fa fa-long-arrow-down" aria-hidden="true"></i>

</button>
<section id="about-us">

    <div class="container-fluid">

        <div class="theme-title">

            <h2>ALL</h2>
			<br>

			<h3><a href="#" id="withvotes-filter-toggle" onclick="toggleWithVotesFilter(event)">With Votes</a>
				<!--֎<a href="/4andmore" target="_blank">Sculpture</a>-->
				■■■<a href="#" id="last-filter-toggle" onclick="toggleLastFilter(event)">LAST - Selected Pictures</a>
				<!--■■■<a href	= "/2andmore" target="_blank">MAYBES</a>-->

			
			  <!--֎<a href="/4andmore" target="_blank">Sculpture</a>-->
■■■<a href="#" id="peopleschoice-filter-toggle" onclick="togglePeoplesChoiceFilter(event)">People's choice</a> </h3>
			<!--<h3> <a href	= "/withone2023">with One</a></h3>-->

                 <!--<h6><a href="https://hampsteadartsociety.wufoo.com/reports/z1q8qkv30jxz1rq/" title="View my report!">View my report!</a></h6>
-->
            {{-- Render pagination links --}}
            @if ($pictures->lastPage() > 1)
                <nav>
                    <ul class="pagination">
                        {{-- First Page Link --}}
                        @if (!$pictures->onFirstPage())
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->url(1) }}">&laquo; First</a>
                            </li>
                        @endif

                        {{-- Previous Page Link --}}
                        @if ($pictures->onFirstPage())
                            <li class="page-item disabled"><span class="page-link">&laquo; Previous</span></li>
                        @else
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->previousPageUrl() }}" rel="prev">&laquo; Previous</a>
                            </li>
                        @endif

                        {{-- Pagination Elements --}}
                        @for ($i = max(1, $pictures->currentPage() - 3); $i <= min($pictures->lastPage(), $pictures->currentPage() + 3); $i++)
                            @if ($i == $pictures->currentPage())
                                <li class="page-item active"><span class="page-link">{{ $i }}</span></li>
                            @else
                                <li class="page-item"><a class="page-link" href="{{ $pictures->url($i) }}">{{ $i }}</a></li>
                            @endif
                        @endfor

                        {{-- Next Page Link --}}
                        @if ($pictures->hasMorePages())
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->nextPageUrl() }}" rel="next">Next &raquo;</a>
                            </li>
                        @else
                            <li class="page-item disabled"><span class="page-link">Next &raquo;</span></li>
                        @endif

                        {{-- Last Page Link --}}
                        @if ($pictures->currentPage() < $pictures->lastPage())
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->url($pictures->lastPage()) }}">Last &raquo;</a>
                            </li>
                        @endif
                    </ul>
                </nav>
            @endif

            <center>
                <form methog="get" action="">
                    <select name="country" id="country-filter" onchange="refreshVoteGrid()" style="width:250px" class="chosen-select">
                        <option value="">Choose Country</option>
                        @foreach($countries as $country)
                            <option value="{{$country->country_name}}" @php
    echo (request('country') == $country->country_name) ? 'selected' : '';
@endphp>{{$country->country_name}}</option>
                        @endforeach
                    </select>
                </form>
            </center>

            <div id="vote-filter-empty" style="display:none; text-align:center; margin:20px 0; color:#888;">
                No pictures on this page match that filter — try another page, or clear the filter.
            </div>

          <div class="ImageGrid row" id="vote-grid">






                    @foreach($pictures as $value)



            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 vote-grid-item" data-last="{{ $value->Last ? 1 : 0 }}" data-peoples-choise="{{ $value->peoples_choise ? 1 : 0 }}" data-country="{{ $value->country_name }}" data-any-curator="{{ ($value->mari || $value->joshua_press || $value->patricia_barker || $value->james_lloyd || $value->tom_marsh || $value->michael_taylor) ? 1 : 0 }}" 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);

                                $img_name = explode('/',$value->link);
                                $img_name = end($img_name);

                                @endphp


                                <br>



                                <div class="img">

                                <a href="{{ url('/view-image/'.$value->link) }}" target="_blank">

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

                                </a>

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

                                <div class="post">





                                    <table style="font-size: 12px"!important; width="100%">

										<tr>
											<!--<td>

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

                                            </td>-->
										</tr>
                                        <tr>
										<!--<td>

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

                                            </td>-->

				<!-- შეცვლილია სახელები:


Plum -> patricia_barker -ის მაგივრად


-->

                                            <td>
                                                Mari<input type="checkbox" name="mari" id="{{$value->id}}" @if($value->mari == 1) checked @endif>
                                            </td>

											<td>James<input type="checkbox" name="james_lloyd" id="{{$value->id}}" @if($value->james_lloyd == 1) checked @endif>
                                            </td>

											<td>
                                              Joshua<input type="checkbox" name="joshua_press" id="{{$value->id}}" @if($value->joshua_press == 1) checked @endif>
                                            </td>

											<td>
                                                Plum <input type="checkbox" name="patricia_barker" id="{{$value->id}}" @if($value->patricia_barker	 == 1) checked @endif>
                                            </td> 

											<td>
                                                Tom <input type="checkbox" name="tom_marsh" id="{{$value->id}}" @if($value->tom_marsh == 1) checked @endif>
                                            </td>

                                            <td>
                                               Jennifer <input type="checkbox" name="michael_taylor" id="{{$value->id}}" @if($value->michael_taylor == 1) checked @endif>
                                            </td>

                                        </tr>
										
									</table>

									<table style="font-size: 12px !important"  width="100%"  align="center"> 
									
										<tr  >
                                           <td style="color:darkcyan; font-weight: bold !important" >
                                             Last Selected-<input type="checkbox" name="Last" id="{{$value->id}}" @if($value->Last == 1) checked @endif>

                                            </td>
											<td style="color:darkcyan; font-weight: bold !important">

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

                                            </td>
										</tr>
                                        <tr>
										<!--<td>
										</tr>

                                    </table>
                                    
                                    <table style="font-size: 12px !important"  width="100%"  align="center"> 
									
										<tr  >
                                 <!--          <td style="color:Red; font-weight: bold !important" >
                                             Maybes-<input type="checkbox" name="james_lloyd" id="{{$value->id}}" @if($value->james_lloyd == 1) checked @endif>

                                            </td> -->
										</tr>

                                    </table>



                                    <br>



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

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





















                        </div>



                    @endforeach

                </div> <!-- /.theme-title -->
            {{-- Render pagination links --}}
            @if ($pictures->lastPage() > 1)
                <nav>
                    <ul class="pagination">
                        {{-- First Page Link --}}
                        @if (!$pictures->onFirstPage())
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->url(1) }}">&laquo; First</a>
                            </li>
                        @endif

                        {{-- Previous Page Link --}}
                        @if ($pictures->onFirstPage())
                            <li class="page-item disabled"><span class="page-link">&laquo; Previous</span></li>
                        @else
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->previousPageUrl() }}" rel="prev">&laquo; Previous</a>
                            </li>
                        @endif

                        {{-- Pagination Elements --}}
                        @for ($i = max(1, $pictures->currentPage() - 2); $i <= min($pictures->lastPage(), $pictures->currentPage() + 2); $i++)
                            @if ($i == $pictures->currentPage())
                                <li class="page-item active"><span class="page-link">{{ $i }}</span></li>
                            @else
                                <li class="page-item"><a class="page-link" href="{{ $pictures->url($i) }}">{{ $i }}</a></li>
                            @endif
                        @endfor

                        {{-- Next Page Link --}}
                        @if ($pictures->hasMorePages())
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->nextPageUrl() }}" rel="next">Next &raquo;</a>
                            </li>
                        @else
                            <li class="page-item disabled"><span class="page-link">Next &raquo;</span></li>
                        @endif

                        {{-- Last Page Link --}}
                        @if ($pictures->currentPage() < $pictures->lastPage())
                            <li class="page-item">
                                <a class="page-link" href="{{ $pictures->url($pictures->lastPage()) }}">Last &raquo;</a>
                            </li>
                        @endif
                    </ul>
                </nav>
                @endif





            </p>

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



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

</section>

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

<script>
    $('.chosen-select').chosen({
        width: '250px',
        allow_single_deselect: true,
        placeholder_text_single: 'Select country'
    });

    $('.chosen-select').on('change', function () {
        refreshVoteGrid();
    });
</script>




  <script>

    // Grid filters on this page — With Votes, LAST, People's choice, and the
    // country select all combine, client-side, no reload:
    //   - With Votes / LAST / People's choice are mutually exclusive toggles
    //   - "With Votes" = picked by any of mari, joshua_press, patricia_barker,
    //     james_lloyd, tom_marsh, michael_taylor (same set as the old /withone)
    //   - the selected country narrows whichever of those is showing
    var activeVoteFilter = null;

    function refreshVoteGrid() {
        var items = document.querySelectorAll('#vote-grid > .vote-grid-item');
        var wvLink = document.getElementById('withvotes-filter-toggle');
        var lastLink = document.getElementById('last-filter-toggle');
        var pcLink = document.getElementById('peopleschoice-filter-toggle');
        var empty = document.getElementById('vote-filter-empty');
        var countrySel = document.getElementById('country-filter');
        var country = countrySel ? countrySel.value : '';

        var visibleCount = 0;
        items.forEach(function (el) {
            var matchesToggle = true;
            if (activeVoteFilter === 'withvotes') matchesToggle = el.dataset.anyCurator === '1';
            if (activeVoteFilter === 'last') matchesToggle = el.dataset.last === '1';
            if (activeVoteFilter === 'peoples') matchesToggle = el.dataset.peoplesChoise === '1';

            var matchesCountry = !country || el.dataset.country === country;

            var show = matchesToggle && matchesCountry;
            el.style.display = show ? '' : 'none';
            if (show) visibleCount++;
        });

        wvLink.textContent = (activeVoteFilter === 'withvotes') ? 'Show All' : 'With Votes';
        lastLink.textContent = (activeVoteFilter === 'last') ? 'Show All' : 'LAST - Selected Pictures';
        pcLink.textContent = (activeVoteFilter === 'peoples') ? 'Show All' : "People's choice";

        var filtering = activeVoteFilter || country;
        empty.style.display = (filtering && visibleCount === 0) ? 'block' : 'none';
    }

    function toggleWithVotesFilter(e) {
        e.preventDefault();
        activeVoteFilter = (activeVoteFilter === 'withvotes') ? null : 'withvotes';
        refreshVoteGrid();
    }

    function toggleLastFilter(e) {
        e.preventDefault();
        activeVoteFilter = (activeVoteFilter === 'last') ? null : 'last';
        refreshVoteGrid();
    }

    function togglePeoplesChoiceFilter(e) {
        e.preventDefault();
        activeVoteFilter = (activeVoteFilter === 'peoples') ? null : 'peoples';
        refreshVoteGrid();
    }

    // Curator checkboxes that add up to the "With Votes" filter.
    var CURATOR_FIELDS = ['mari', 'joshua_press', 'patricia_barker', 'james_lloyd', 'tom_marsh', 'michael_taylor'];

    function anyCuratorChecked(card) {
        return CURATOR_FIELDS.some(function (field) {
            var el = card.querySelector('input[type="checkbox"][name="' + field + '"]');
            return el && el.checked;
        });
    }

    $('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');

        // Update this card's filter data immediately — the LAST / People's
        // choice / With Votes buttons work off this without needing a reload.
        var card = $(this).closest('.vote-grid-item')[0];
        if (card) {
            if (name === 'Last') {
                card.dataset.last = value ? '1' : '0';
            } else if (name === 'peoples_choise') {
                card.dataset.peoplesChoise = value ? '1' : '0';
            }
            if (CURATOR_FIELDS.indexOf(name) !== -1) {
                card.dataset.anyCurator = anyCuratorChecked(card) ? '1' : '0';
            }
            refreshVoteGrid();
        }

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



        });

    });


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

  </script>


@stop