@extends('website.layouts.web-layouts')
@section('title', 'FBCCI | Events ')
@section('description', 'FBCCI | Events ')
@section('image', site_setting()->logo)
@section('url', url()->full())

@section('content')

    <div class="breadcrumb mb-0" style="background: url('{{ asset('images/sm-2.jpg') }}');">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="content">
                            <h3 class="text-white">Events</h3>
                            <ul class="d-flex pt-2 list-unstyled">
                                <li><a href="{{ url('/') }}"> <i class="fas fa-home"></i> Home</a></li>
                                <li class="px-2">/</li>
                                <li>Events</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="event-list-page">
        <div class="container">
            <div class="common-search">
                <div class="row">
                    <div class="col-lg-12 ms-auto">
                        <form action="">
                            <div class="d-md-flex search-field justify-content-end">
                                <div class="input-groups">
                                    <p>From Date</p>
                                    <input type="text" placeholder="From date" id="datepicker01"
                                        value="{{ $from_date }}" name="from_date">
                                </div>
                                <div class="input-groups">
                                    <p>To Date</p>
                                    <input type="text" placeholder="To date" id="datepicker02"
                                        value="{{ $to_date }}" name="to_date">
                                </div>
                                <div class="input-groups title-groups">
                                    <p>Event Title</p>
                                    <input type="text" placeholder="Type your keywords" value="{{ $keyword }}"
                                        name="keyword">
                                </div>
                                <div class="button-groups">
                                    <button type="submit">Search</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row">
                @forelse ($events as $event)
                    <div class="col-lg-4 col-md-6">
                        <div class="event-item">
                            <div class="image">
                                <img src="{{ $event->thumb }}" alt="event-image" class="img-fluid w-100">
                            </div>
                            <div class="text">
                                <ul class="list-unstyled">
                                    <li>
                                        <i class="far fa-calendar-check"></i>
                                        <span class="entry-date">{{ global_date_format($event->start_date) }}</span>
                                    </li>
                                </ul>
                                <h5>
                                    <a class="title" href="{{ route('web.event.show', $event->slug) }}">
                                        {{ global_title_format($event->title) }}
                                    </a>
                                </h5>
                                <p>{!! $event->description !!}</p>
                                <a href="{{ route('web.event.show', $event->slug) }}" class="read-more">Read More <i
                                        class="fas fa-long-arrow-alt-right"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                    <x-empty-component></x-empty-component>
                @endforelse
            </div>

            <!-- pagination part start -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="pagination d-flex justify-content-end">
                        {{ $events->links('website.custom.paginate') }}
                    </div>
                </div>
            </div>
            <!-- pagination part end -->
        </div>
    </section>
@endsection