@extends('layouts.main')

@section('content')
<!-- ===================================== Content Start ============================ -->
<span class="display-zero">{{ $Locale = LaravelLocalization::getCurrentLocale() }}</span>
<!-- ===================================== Content Start ============================ -->
    <style type="text/css">
        .banner-area{background:url('{!! asset(option('video_background')) !!}') no-repeat;background-size:cover}
    </style>
    <!--================ START banner Area ===================================== -->
    <section class="banner-area relative">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row  align-items-center banner-content">
                <div class="col-lg-5">
                    <h1 class="text-white">{!! __('main.Our_Events') !!}</h1>
                    <p>{!! __('main.Events_Content') !!}</p>
                </div>
            </div>
        </div>
    </section>
    <!--================ End banner Area ===================================== -->
    <!--================ Start Popular Causes Area =========================== -->
    <section class="popular-cause-area section-gap-top">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section-title">
                        <h2><span>{!! __('main.Popular') !!}</span> {!! __('main.Events') !!}</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- ===================================  Home  ======================================== -->
                @foreach($Events as $Event)      
                <div class="col-lg-4 col-md-6">
                    <div class="card single-popular-cause">
                    <div class="card-body">
                    <figure>
                    <!-- ===============================  Event  ======================================== -->
                    @if(isset($Event->ImageUpload->filename))
                     <a href="{!! url('Events') !!}/{!! $Event->slug !!}">
                        <img class="card-img-top img-fluid" src="{!! asset($Event->ImageUpload->filename) !!}">
                     </a>
                    @else
                    @endif
                    <!-- ===============================  Event  ======================================== -->
                    </figure>
                    <div class="card_inner_body">
                    <!-- ===============================  Event  ======================================== -->
                    <a href="{!! url('Events') !!}/{!! $Event->slug !!}">
                        <h4 class="card-title">{!! substr($Event->{'Title_'.$Locale}, 0, 190) !!}</h4>
                    </a>    
                    <!-- ===============================  Event  ======================================== -->
                    <div class="d-flex justify-content-between donation align-items-center">
                        <a href="{!! url('Events') !!}/{!! $Event->slug !!}" class="primary-btn">
                        <i class="fa-solid fa-ticket"></i> {!! __('main.See_Event') !!}
                        </a>
                    </div>
                    <!-- ===============================  Event  ======================================== -->
                    </div>
                    </div>
                    </div>
                </div>
                @endforeach
                {!! $Events->links() !!}
            </div>
        </div>
    </section>
  <!--================ End Popular Causes Area ===================================== -->
    <div class="cta-area banner-area relative">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!--================ Start Popular Causes Area ================= -->
                    <p class="top_text">{!! __('main.Thanks_heart') !!}</p>
                    <h1 class="text-white">{!! __('main.Contribute_heart') !!}</h1>
                     <a href="{!! url('contacts_us') !!}" class="primary-btn primary-btn-log">{!! __('main.donation') !!}</a>
                     <!--================ Start Popular Causes Area =================-->
                </div>
            </div>
        </div>
    </div>
<!-- ===================================== Content End ============================ -->
@endsection