@extends('frontn.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('admin/select2/dist/css/select2.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin/select2/dist/css/select2-bootstrap5.min.css') }}"/>
@endpush
@section('content')

    <main class="main">

        <div class="site-breadcrumb" style="background: url({{asset('frontn/img/breadcrumb/01.jpg')}})">
            <div class="container">
                <h2 class="breadcrumb-title">Glimpses</h2>

            </div>
        </div>


        <div class="container">

{{--            <div class="col-lg-6  mb-3 mt-2">--}}
{{--                <label>Session</label>--}}
{{--                <select class="select2-options-source-id form-control form-control"--}}
{{--                        name="glimpse_session_id" id="source"--}}
{{--                        autocomplete="source"></select>--}}

{{--                @error('glimpse_session_id')--}}
{{--                <strong class="text-danger">{{ $message }}</strong>--}}
{{--                @enderror--}}
{{--            </div>--}}
            <div class="col-lg-6 mt-4">
            <div class="d-flex d-inline">


                <select class="select2-options-source-id form-control form-control"
                        name="glimpse_session_id" id="source" autocomplete="source">
                    <!-- Session options will be dynamically populated here -->
                </select>

                <input type="hidden" id="hiddenSessionId" name="glimpse_session_id" value="">

                @error('glimpse_session_id')
                <strong class="text-danger">{{ $message }}</strong>
                @enderror




            <div class="ms-2" style="">
                <button type="button" class="btn btn-primary" id="filterButton">Search</button>
            </div>
            </div>
            </div>
{{--            <div class="gallery-area">--}}
{{--            <div class="row my-5 popup-gallery">--}}

{{--                @if(isset($glimpse) && $glimpse->count())--}}
{{--                    @foreach($glimpse as $glim)--}}
{{--                        <div class="col-12 col-sm-6 col-md-4 mb-4">--}}
{{--                            <div class="card">--}}
{{--                                <img src="{{ asset('storage/Glimpse/images/'.$glim->image) }}" class="card-img-top" alt="...">--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                @else--}}
{{--                    <div class="col-12">--}}
{{--                        <p>No glimpses found.</p>--}}
{{--                    </div>--}}
{{--                @endif--}}
{{--            </div>--}}
{{--            </div>--}}
            <div class="row g-4 popup-gallery">
                <div class="col-md-12">
                    <div class="row g-4 mt-2 mb-3">
                        @if(isset($glimpse) && $glimpse->count())
                            @foreach($glimpse as $glim)
                        <div class="col-4">

                            <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                <div class="gallery-img">
                                    <img src="{{asset('storage/Glimpse/images/'.$glim->image)}}" alt>
                                    <a class="popup-img gallery-link" href="{{asset('storage/Glimpse/images/'.$glim->image)}}"><i
                                            class="fal fa-plus"></i></a>
                                </div>
                            </div>

                        </div>
                            @endforeach
                        @endif
                    </div>
                </div>
             </div>
            @if($glimpse->total())
                <div class="d-flex justify-content-between align-items-center mb-3">

                    <div>
                        {{ $glimpse->links('pagination::bootstrap-5') }}
                    </div>

                </div>
            @endif


                </div>


    </main>
@endsection
@push('footer-scripts')
    <script src="{{ asset('manager/select2/dist/js/select2.js') }}"></script>
    <script src="{{ asset('manager/cropper/cropper.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Select Module
            $('.select2-options-source-id').select2({
                theme: "bootstrap5",
                placeholder: 'Year',
                allowClear: true,

                ajax: {
                    url: '{{route('get-session-select')}}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        var query = {
                            q: (params.term != undefined ? params.term : ' '),
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.name,
                                    text: item.name,
                                }
                            })
                        };
                    },
                    cache: true
                }
            });
            // When the filter button is clicked
            {{--$('#filterButton').on('click', function () {--}}
            {{--    var selectedYear = $('#source').val();  // Get the selected session ID (or year)--}}

            {{--    if (selectedYear) {--}}

            {{--        var url = '{{ route('more-glimpse', ':year') }}';--}}
            {{--        url = url.replace(':year', selectedYear);--}}

            {{--        // Redirect to the updated URL--}}
            {{--        window.location.href = url;--}}
            {{--    }--}}
            {{--});--}}

            var urlTemplate = '{{ route('more-glimpse') }}';  // Base URL: '/more-glimpse'

// Update the click handler to append the selected year as a query parameter
            $('#filterButton').on('click', function () {
                var selectedYear = $('#source').val();  // Get the selected year value

                if (selectedYear) {
                    // Add the query parameter `year=selectedYear`
                    var url = urlTemplate + '?year=' + selectedYear;

                    // Redirect to the generated URL
                    window.location.href = url;
                }
            });



        });




    </script>
@endpush