@extends('layout.app')
@section('title') Classes
@endsection
@section('content')
    @php
        if (!empty($get_single_class_banner_title->content)) {
               $classdecodedData = json_decode($get_single_class_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>{{$classdecodedData['top_title'] ?? ''}}</h2>--}}
    {{--        </div>--}}
    {{--    </section>--}}

    <section class="heroSection innerBan">
        <div class="main-slider p-0" id="mainSlider">
            <div class="swiper-container homeSlider">
                @if($classSlider)
                <div class="swiper-wrapper">
                    @php
                        $get_decode = json_decode($classSlider->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="">{{$classdecodedData['top_title'] ?? ''}}</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                        @else
                            <h3 class="text-center text-white mt-5">
                                Images Not Found
                            </h3>

                        @endif
                </div>
            </div>
        </div>
    </section>


    <!-- Event Section -->
    <section class="eventSection innerclasses">
        <div class="container">
            <div class="d-flex justify-content-end mb-3">
                <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_classes && count($get_all_classes) > 0)

                    @foreach($get_all_classes as $get_all_classe)

                        <div class="col-md-6 dataList-Viewitem-col">
                            <div class="eventWrap">
                                <figure>
                                    <img
                                        src="{{ $get_all_classe->image ? asset('upload/cms_images/'.$get_all_classe->image) : asset('admin/dist/img/placeholder.png')}}"
                                        class="img-fluid" alt="">
                                </figure>


                                <div class="eventContent">
                                    <h3><span></span>{{$get_all_classe->title ?? ''}}</h3>

                                    {{-- <h3><span>{{ date('F d \@ ', strtotime($get_all_classe->start_date)) }} {{ date('g:i A', strtotime($get_all_classe->start_time)) }} - {{ date('g:i A', strtotime($get_all_classe->end_time)) }}</span>{{$get_all_classe->title ?? ''}}</h3>--}}

                                    <p class="m-0">{!! substr(strip_tags($get_all_classe->description), 0, 60) !!}
                                        @if (strlen(strip_tags($get_all_classe->description)) > 100)
                                            ...
                                        @endif
                                    </p>
                                    @if (strlen(strip_tags($get_all_classe->description)) > 100)
                                        <h3 class="eventPrice" id="full-comment"
                                            data-id="{{$get_all_classe->description ?? ''}}"
                                            onclick="modaldetail(`{{$get_all_classe->description ?? ''}}`,`{{$get_all_classe->btn_reference_link ?? ''}}`,`{{$get_all_classe->title ?? ''}}`)">
                                            Read More</h3>
                                    @endif
                                    {{--                            {!! substr($get_all_classe->description, 0, 20) !!}--}}
                                    {{--                            {!! strlen($get_all_classe->description) > 100 ? '...' : '' !!}--}}
                                    {{--                            {!! $get_all_classe->description !!}--}}

                                    <div class="btn-group mt-1 gap1">
                                        @if(Auth::check() && auth()->user()->hasRole('school'))
                                            @if($get_all_classe->user_id === auth()->user()->id)
                                                <a href="{{url('user-classes-edit/'.$get_all_classe->id)}}"
                                                   class="themeBtn bg-dark">Edit</a>
                                                <a href="{{ url('user-classes-delete/' . $get_all_classe->id) }}"
                                                   class="themeBtn bg-dark">Delete</a>
                                            @endif
                                        @elseif(Auth::check() && auth()->user()->hasRole('user'))
                                            @if($get_all_classe->user_id === auth()->user()->id)
                                                <a href="{{url('user-classes-edit/'.$get_all_classe->id)}}"
                                                   class="themeBtn bg-dark">Edit</a>
                                                <a href="{{ url('user-classes-delete/' . $get_all_classe->id) }}"
                                                   class="themeBtn bg-dark">Delete</a>
                                            @endif

                                        @endif
                                        <a href="{{$get_all_classe->btn_reference_link ?? ''}}" class="themeBtn"
                                           onclick="">Sign Up</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    @endforeach
                    <br>
                    <span class="mx-auto mt-4"> {{ $get_all_classes->appends(request()->query())->links()}}  </span>

                @else
                    <h4 class="mx-auto text-white">Classes Not Found</h4>

                @endif
            </div>

        </div>
    </section>

    <!-- Bootstrap Modal -->
    <div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog" aria-labelledby="descriptionModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descriptionModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="full-description"></p>
                    <a href="#" class="themeBtn" id="btn_reference_link">Signup</a>
                    {{--                    <h5 class="calContent" id="btn_reference_link"></h5>--}}

                </div>
            </div>
        </div>
    </div>
    <!-- Event Section -->
@endsection

@section('script')

    <script>
        function modaldetail(desc, link, title) {
            $('#descriptionModal').modal('show');
            document.querySelector("#descriptionModalLabel").innerHTML = title;
            document.querySelector("#full-description").innerHTML = desc;
            document.querySelector("#btn_reference_link").href = link;
        }
    </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.remove("ListView");
                })
            }else{
                column.forEach(col => {
                    col.classList.add('col-md-12');
                    col.classList.remove('col-md-4');
                    col.querySelector(".eventWrap").classList.add("ListView");
                })
            }
        }
    </script>
@endsection