@extends('layouts.front_app')
@section('content')

    <style>
        .event-location-link {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s ease;
        }

        .event-location-link:hover {
            border-bottom: 2px solid #f7910e;
        }
    </style>

    <section class="inner-page">
        <div class="container">
            <h2 class="heading">Events!</h2>
        </div>
    </section>

    <section class="eventSec">
        <div class="container">
            <div class="row">
                @if(!empty($data))
                    @foreach($data as $val)
                        <div class="col-md-4">
                            <div class="showcard">
                                <figure>
                                    @foreach ($val->image as $image)
                                        <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" class="img-fluid">
                                    @endforeach
                                </figure>
                                <div>
                                    <span><b><a href="{{ route('event.details',$val->id) }}" class="eventdate"  >{{ \Carbon\Carbon::parse($val->created_date)->format('l, M j') }}</a></b></span>
                                    <h4>{{ $val->event_name }}.</h4>
                                    <ul>
                                        <li><i class="fas fa-clock"></i> Doors : {{ \Carbon\Carbon::parse($val->time)->format('g:i A') }}</li>
                                        <li>
                                        <li>
                                            <i class="fas fa-clock"></i> Show : {{ \Carbon\Carbon::parse($val->start_time)->format('g:i A') }}
                                        </li>
                                        <li>
                                            <i class="fas fa-map-marker-alt"></i> Location:
                                            <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($val->location) }}"
                                               target="_blank"
                                               class="event-location-link">
                                                {{ $val->location }}
                                            </a>
                                        </li>

                                        <li>
                                            <i class="fas fa-ticket-alt"></i> Ticket Price : <i class="fa-solid fa-dollar-sign" style="width: 11px; color: white;"></i> {{ !empty($val->price) ? $val->price : '' }}
                                        </li>
                                    </ul>
                                    {{--                                    <p>--}}
                                    {{--                                        @if(!empty($val->detail))--}}
                                    {{--                                            {{ implode(' ', array_slice(str_word_count($val->detail, 2), 0, 20)) }}--}}
                                    {{--                                        @endif--}}
                                    {{--                                    </p>--}}

                                    <a href="{{ route('event.details',$val->id) }}" class="themeBtn">Buy Ticket</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif

            </div>
        </div>
    </section>


@endsection