@extends('layouts.app')
@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="px-sm-4">

                <div class="row mt-2 mt-sm-3">
                    <div class="col-md-7 col-10">
                        <div class="top-head">
                            <h1>News & Events</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/home">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">News & Events</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="col-md-5 col-2 text-right">
                        <div class="d-flex justify-content-end">

                            <div class="top-search-bar d-sm-block d-none mr-3">

                                <form class="search-form" role="search">
                                    <div class="form-group pull-right {{ isset($search) && $search ? 'sb-search-open' : '' }}"
                                        id="searchnew">
                                        <input type="search" name="search" value="{{ $search }}"
                                            onchange="this.form.submit()" class="form-control">
                                        <span class="search-label"><img src="{{ asset('assets/img/search.svg') }}"
                                                alt="/"></span>
                                    </div>
                                </form>

                            </div>

                            <a href="{{ url('/news-event/create') }}"><button type="button" class="plus-btn"><img
                                        src="{{ asset('assets/img/plus-white.svg') }}" alt=""></button></a>
                        </div>
                    </div>
                </div>

                <form action="" id="filterForm">
                    <div class="row align-items-center mt-2 mt-sm-0">
                        <div class="col-md-3 col-12 mb-2 mb-sm-0">
                            <h6 class="results-foundtext mb-0">{{ $events->total() }} Results found</h6>
                        </div>
                        <div class="col-md-6 col-12  mb-3 mb-sm-0">
                            <input type="hidden" id="category_id" name="category_id" value="{{ $request->category_id }}">
                            <input type="hidden" id="sort_by" name="sort_by" value="{{ $request->sort_by }}">
                            <ul class="nav nav-tabs events-tab justify-content-center" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link category_id {{ !$request->category_id ? 'active' : '' }}"
                                        data-category_id="">All</a>
                                </li>
                                @foreach ($categories as $category)
                                    <li class="nav-item">
                                        <a class="nav-link category_id {{ $request->category_id == $category->id ? 'active' : '' }}"
                                            data-category_id="{{ $category->id }}">{{ $category->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-md-3 col-12">
                            <div class="d-flex justify-content-sm-end">
                                <div class="dropdown price-drop">
                                    <button class="btn new-dropbox dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span>Sort by</span> {{ $request->sort_by ?: 'newest' }}
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item sort_by" href="#" data-sort_by="newest">Newest to
                                            Oldest</a>
                                        <a class="dropdown-item sort_by" href="#" data-sort_by="oldest">Oldest to
                                            Newest</a>

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

                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel"
                                aria-labelledby="home-tab">
                                <div class="row mt-sm-4 mt-2">
                                    @foreach ($events as $event)
                                        <div class="col-md-6">
                                            <div class="events-box">
                                                <div class="row">
                                                    <div class="col-md-5 mb-3 mb-sm-0">
                                                        <div class="events-boximg">
                                                            <img src="{{ $event->image }}" class="events-img"
                                                                alt="">

                                                            {{-- <div class="hotjar-box">
                                                        <img src="{{ asset('assets/img/hotjar.svg')}}" alt="">
                                                    </div> --}}
                                                        </div>
                                                    </div>

                                                    <div class="col-md-7">
                                                        <div class="events-contentbox">
                                                            <div class="text-right">
                                                                <a
                                                                    href="{{ route('news-event.edit', ['event' => $event->id]) }}">
                                                                    <span class="badge pencil-box"><img
                                                                            src="{{ asset('assets/img/role-edit.svg') }}"
                                                                            alt=""></span>
                                                                </a>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-10">
                                                                    <p>{{ $event->title }}</p>
                                                                </div>
                                                            </div>
                                                            <h6>{{ \App\Helpers\CommonHelper::timeAgoString($event->valid_from) }}
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...
                        </div>
                        <div class="tab-pane fade" id="featured" role="tabpanel" aria-labelledby="featured-tab">...
                        </div>
                    </div>
                </div>
                {{ $events->appends(request()->input())->links('partials.pagination') }}

            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('.category_id').click(function() {
            var category_id = $(this).data('category_id');
            $('#category_id').val(category_id);
            $('#filterForm').submit();
        })

        $('.sort_by').click(function() {
            var sort_by = $(this).data('sort_by');
            $('#sort_by').val(sort_by);
            $('#filterForm').submit();
        })
    </script>
@endsection