@extends('layout.app')
@section('title')
    Shows
@endsection
@section('content')
    @php
        if (!empty($get_single_event_product_banner_title->content)) {
            $eventdecodedData = json_decode($get_single_event_product_banner_title->content, true);
        }
    @endphp
    {{--    <section class="innerBan p-0"> --}}
    {{--        <img src="{{ $homedecodedData['top_banner_image'] ? asset('upload/cms_images/' . $homedecodedData['top_banner_image']) : '' }} --}}
    {{--            " class="img-fluid" alt=""> --}}
    {{--        <div class="container"> --}}
    {{--            <h2>{{$eventdecodedData['top_title'] ?? ''}}</h2> --}}
    {{--        </div> --}}
    {{--    </section> --}}

    <section class="heroSection innerBan">
        <div class="main-slider p-0" id="mainSlider">
            <div class="swiper-container homeSlider">
                @if ($showsSlider)
                    <div class="swiper-wrapper">
                        @php
                            $get_decode = json_decode($showsSlider->images);
                        @endphp
                        @foreach ($get_decode as $index => $all_images)
                            <div class="swiper-slide">
                                <div class="slide-inner bg-image"
                                    data-background="{{ asset('upload/sliders/' . $all_images) }}">
                                    <div class="slider-overlay">
                                        <div class="container">
                                            <div class="row no-gutters">
                                                <div class="col-12 mb-5 pb-5">
                                                    <div class="heroText">
                                                        <h2 class="">{{ $eventdecodedData['top_title'] ?? '' }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <h3 class="text-center text-white mt-5">
                        Images Not Found
                    </h3>
                @endif
            </div>
        </div>
    </section>



    <!-- Event Section -->
    <section class="eventSection innerEvent eventInner">
        <div class="container">
            <div class="mainHeading innermainHeading" data-aos="fade-up">
{{--                <h2 data-aos="fade-up">{{ $eventdecodedData['section_title'] ?? '' }}</h2>--}}
                <h2 data-aos="fade-up">
                    @if(isset($_GET['location']) && !empty($_GET['location']))
                        {{ $_GET['location'] }}
                    @else
                        {{ $eventdecodedData['section_title'] ?? '' }}
                    @endif
                </h2>

            </div>

            <form action="{{ route('front.event') }} "class=" mb-0" method="get" id="form_submit">
                <div class="searchEvents align-items-center">
                    <div class="">
                        <i class="fas fa-search"></i>
                        <input type="text" class="form-control" placeholder="Search Shows" name="event_search">
                    </div>
                    <span class="">{{ \carbon\carbon::now()->format('m-d-Y') }}</span>
                    <div class="daysss">
                        <input type="text" class="form-control" placeholder="Search Dates" name="search_dates"
                            id="search_dates">

                        {{--                        <input type="date" class="form-control" placeholder="In a Location" name="search_dates" value=""> --}}

                        {{--                        <div class="col-md-4 p-0"> --}}
                        {{--                            <div class="d-flex align-items-center"> --}}
                        {{--                                <label for="" class="mb-0 mr-2">Search Shows</label> --}}
                        {{--                                <select class="form-control" id="selectWeek" name="select_week"> --}}
                        {{--                                    <option value="">Search Shows</option> --}}
                        {{--                                    <option value="Daily-Show" >Daily Show</option> --}}
                        {{--                                    <option value="weekly" >Weekly</option> --}}
                        {{--                                    <option value="1st-and-3rd" >1st and 3rd Week</option> --}}
                        {{--                                    <option value="2nd-and-4th" >2nd and 4th Week</option> --}}
                        {{--                                </select> --}}
                        {{--                            </div> --}}
                        {{--                        </div> --}}

                        <div class="col-md-12">
                            <label for="">Select Days </label>
                            <select name="week_days[]" class="form-control select2" multiple="multiple">
                                <option value="Monday" >Monday</option>
                                <option value="Tuesday" >Tuesday</option>
                                <option value="Wednesday" >Wednesday</option>
                                <option value="Thursday" >Thursday</option>
                                <option value="Friday" >Friday</option>
                                <option value="Saturday" >Saturday</option>
                                <option value="Sunday" >Sunday</option>
                            </select>

                        </div>

                    </div>
                    <div class="ml-xl-auto">
                        <button class="btn themeBtn">Find Shows</button>
                        <span>=</span>
                    </div>
                    <div class="ml-xl-auto">
                        <a href="{{route('front.event')}}" class="btn themeBtn">All Shows</a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xl-4 col-md-3">
                        <div class="show-page-title">
                            <h4 class="text-white">Location </h4>
                        </div>
                        <ul class="listitem">
                            <li>
                                <input type="radio" id="UPSTAIRS_radio" class="click_radio_form_submit" name="location" value="UPSTAIRS"
                                       @if(isset($_GET['location']) && $_GET['location'] == 'UPSTAIRS') checked @endif>
                                <label for="UPSTAIRS_radio"><span>UPSTAIRS</span></label>
                            </li>
                            <li>
                                <input type="radio" id="DOWNSTAIRS_radio" class="click_radio_form_submit" name="location" value="DOWNSTAIRS"
                                       @if(isset($_GET['location']) && $_GET['location'] == 'DOWNSTAIRS') checked @endif>
                                <label for="DOWNSTAIRS_radio"><span>DOWNSTAIRS</span></label>
                            </li>
                        </ul>

                        <ul class="listitem">
                            @forelse($get_event_categories as $get_event_category)
                                <li>
                                    <input type="checkbox" id="listitem{{ $get_event_category->id }}" name="cate_filter[]"
                                        value="{{ $get_event_category->id }}" >
                                    <label
                                        for="listitem{{ $get_event_category->id }}"><span>{{ $get_event_category->categories_name }}</span></label>
                                </li>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                        <div class="d-flex mb-3">
                            <button class="btn themeBtn">Apply</button>
                        </div>
                    </div>
                    <div class="col-xl-8 col-md-9">
                        <div class="d-flex justify-content-end">
                            <button class="btn btn-dark viewBtn" type="button" title="List View Item"
                                onclick="productView(1)"><i class="fas fa-list"></i></button>
                            <button class="btn btn-dark viewBtn ml-2" type="button" title="Grid View Item"
                                onclick="productView(0)"><i class="fas fa-th-large"></i></button>
                        </div>
                        <div class="row" id="dataList-Viewitem">
                            @if ($get_all_event_products && count($get_all_event_products) > 0)
                                @foreach ($get_all_event_products as $get_all_event_product)
                                    {{--                            <div class="col-md-4 dataList-Viewitem-col"> --}}
                                    <div class="col-lg-4 col-sm-6 dataList-Viewitem-col">

                                        <div class="eventWrap gridView">
                                            <figure>
                                                <img src="{{ $get_all_event_product->image ? asset('upload/cms_images/' . $get_all_event_product->image) : asset('admin/dist/img/placeholder.png') }}"
                                                    class="img-fluid" alt="">
                                            </figure>
                                            <div class="eventContent">
                                                <h3><span>{{ date('F d \@ ', strtotime($get_all_event_product->start_date)) }}
                                                        {{ date('g:i A', strtotime($get_all_event_product->start_time)) }}
                                                        - {{ date('g:i A', strtotime($get_all_event_product->end_time)) }}

                                                    </span>{{ $get_all_event_product->title }}</h3>

                                                @if($get_all_event_product->type === 'recursive')
                                                        <span>Start From : {{date('F d  ', strtotime($get_all_event_product->start_date))}}</span>
                                                <br>
                                                         <span>Every @ {{$get_all_event_product->week_days ? : ''}}</span>
                                                 @endif
                                                     <h5 class="text-white">{{$get_all_event_product->position_set ? : ''}}</h5>

{{--                                                <span class="full-comment"style="cursor: pointer">--}}
{{--                                                    {!! \Illuminate\Support\Str::limit(strip_tags($get_all_event_product->description), 70, '...') !!}--}}
{{--                                                         <span class="comment-input" style="display: none">{!! $get_all_event_product->description ?? '' !!}</span>--}}
{{--                                                </span>--}}
                                                <a href="{{route('front.event.detail',['id'=>$get_all_event_product->id])}}" class="text-white">
                                                <span class="full-comment">
                                                    {!! \Illuminate\Support\Str::limit(strip_tags($get_all_event_product->description), 70, '...') !!}

                                                </span>
                                                </a>


                                                <div class="btn-group">
                                                    @if (Auth::check() && auth()->user()->hasRole('school'))
                                                        @if ($get_all_event_product->user_id === auth()->user()->id)
                                                            <a href="{{ url('user-event-edit/' . $get_all_event_product->id) }}"
                                                                class="themeBtn bg-dark">Edit</a>
                                                            <a href="{{ url('user-event-delete/' . $get_all_event_product->id) }}"
                                                               class="themeBtn bg-dark">Delete</a>
                                                        @endif
                                                    @elseif(Auth::check() && auth()->user()->hasRole('user'))
                                                        @if ($get_all_event_product->user_id === auth()->user()->id)
                                                            <a href="{{ url('user-event-edit/' . $get_all_event_product->id) }}"
                                                                class="themeBtn bg-dark">Edit</a>
                                                            <a href="{{ url('user-event-delete/' . $get_all_event_product->id) }}"
                                                               class="themeBtn bg-dark">Delete</a>
                                                        @endif
                                                    @endif
                                                    {{--                                            <a href="#" class="themeBtn">Sold Out</a> --}}
                                                    {{--                                            <a href="#" class="eventPrice">${{$get_all_event_product->price}}</a> --}}
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="col-12 mx-auto mt-lg-5 mt-md-4 mt-3">
                                    <div id="pagination-container">
                                        <!-- Pagination links will be dynamically added here -->
                                    </div>

                                    <span> {{ $get_all_event_products->appends(request()->query())->links() }} </span>
                                </div>
                            @else
                                <div class="text-center">
                                    <h4 class="text-white">Shows Not Found</h4>
                                </div>
                            @endif

                        </div>

                    </div>
                </div>
            </form>
        </div>
    </section>

{{--    <div class="modal fade" id="myModal">--}}
{{--        <div class="modal-dialog">--}}
{{--            <div class="modal-content">--}}
{{--                <!-- Modal Header -->--}}
{{--                <div class="modal-header">--}}
{{--                    <h4 class="modal-title">Description</h4>--}}

{{--                    <button type="button" class="close" data-dismiss="modal">&times;</button>--}}
{{--                </div>--}}

{{--                <!-- Modal body -->--}}
{{--                <div class="modal-body">--}}
{{--                    <div class="rating-css">--}}
{{--                        <div class="modal-body" id="modal-comment"></div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <!-- Event Section -->
@endsection
@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            flatpickr("#search_dates", {
                mode: "range",
                // minDate: "today",
            });

        });
        $('.select2').select2({
            tags: true
        });
    </script>

    <script>
        function productView(n) {
            let row = document.querySelector("#dataList-Viewitem");
            let column = row.querySelectorAll(".dataList-Viewitem-col");
            if (n == 0) {
                column.forEach(col => {
                    col.classList.remove('col-md-12');
                    col.classList.add('col-md-4');
                    col.querySelector(".eventWrap").classList.add("gridView");
                })
            } else {
                column.forEach(col => {
                    col.classList.add('col-md-12');
                    col.classList.remove('col-md-4');
                    col.querySelector(".eventWrap").classList.remove("gridView");
                })
            }
        }


    </script>


    <script>
        // $(document).on('click', '.full-comment', function () {
        //     var comment = $(this).closest('.full-comment').find('.comment-input').html();
        //     $('#modal-comment').html(comment);
        //     $('#myModal').modal('show');
        // });

        $(document).on('click', '.click_radio_form_submit', function () {
            $('#form_submit').submit();
        });

    </script>


@endsection