@extends('layouts.app3')

@section('title', 'Rai University Latest Events')

@section('content')
    <!-- Breadcumb -->
    <div class="breadcumb-wrapper " data-bg-src="{{ asset('assets/img/bg/breadcumb-bg.jpg') }}" data-overlay="title" data-opacity="8">
        <div class="breadcumb-shape" data-bg-src="{{ asset('assets/img/bg/breadcumb_shape_1_1.png') }}"></div>
        <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px">
            <img src="{{ asset('assets/img/bg/breadcumb_shape_1_2.png') }}" alt="shape">
        </div>
        <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
            <img src="{{ asset('assets/img/bg/breadcumb_shape_1_3.png') }}" alt="shape">
        </div>
        <div class="container">
            <div class="breadcumb-content text-center">
                <h1 class="breadcumb-title">Our Events</h1>
                <ul class="breadcumb-menu">
                    <li><a href="/">Home</a></li>
                    <li>Events</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Event Area -->
    <div class="container text-center my-4">
        <a href="{{ route('events.calendar') }}" class="btn btn-secondary ms-2">
            View Event Calendar
        </a>
    </div>
    <section class="space-top space-extra-bottom">
        <div class="container">
            <div class="row gy-40 gx-70">
                @foreach($events as $event)
                <div class="col-lg-6 col-xl-4">
                    <div class="event-card">
                        <div class="event-card_img" data-mask-src="{{ url('/') }}/events/{{ $event->image }}">
                        </div>
                        <div class="event-card_content">
                            <!--
                            <div class="event-author">
                                <div class="avater">
                                    <img src="{{ url('/') }}/assets/img/event/event-author1.png" alt="avater">
                                </div>
                            </div>
                            -->
                            <img src="{{ url('/') }}/events/{{ $event->image }}" alt="event"> 
                            <h3 class="event-card_title">
                                <a href="{{ route('events.show', $event->slug) }}">{{ $event->title }}</a>
                            </h3>
                            <div class="event-card_bottom">
                                <a href="{{ route('events.show', $event->slug) }}" class="th-btn">View Event <i class="far fa-arrow-right ms-1"></i></a>
                            </div>
                            <div class="event-card-shape jump">
                                <img src="{{ url('/') }}/assets/img/event/event-box-shape1.png" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                <div class="col-12 text-center">
                    <div class="th-pagination ">
                        {{ $events->links() }}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection