@extends('layouts.'.$namespaceName.'.master')
@section('title')
{{$title}}
@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')
                <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2">
                    @foreach($public_events as $public_event)
                        <div class="col">
                            <div class="card main_card">
                                <div style="max-height: 330px">
                                    <img src="{{$public_event->image_relative_path}}" class="card-img-top" style="height: 300px" alt="{{$public_event->name}}">
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title"><strong>{{$public_event->name}}</strong></h5>
                                    <p class="card-text"></p>
                                </div>
                                <ul class="list-group list-group-flush">

                                    <li class="list-group-item">
                                        <i class='bx bxs-user font-18 align-middle me-1'></i>
                                        {{__('guest/public_events.host_name')}} : <strong>{{$public_event->host_name}}</strong>
                                    </li>
                                    <li class="list-group-item">
                                        <i class='bx bxs-map font-18 align-middle me-1'></i>
                                        {{__('guest/public_events.event_takes_place_in')}} : <strong>{{$public_event->location}}</strong>
                                    </li>
                                    <li class="list-group-item">
                                        <i class='bx bx-time font-18 align-middle me-1'></i>
                                        {{__('guest/public_events.event_start_at')}} : <strong>{{humanDateTime($public_event->start_date)}}</strong>
                                    </li>
                                    <li class="list-group-item">
                                        <i class='bx bxs-time font-18 align-middle me-1' ></i>
                                        {{__('guest/public_events.event_end_in')}} : <strong>{{humanDateTime($public_event->end_date)}}</strong>
                                    </li>
                                </ul>
                                <div class="card-body">

                                    <form method="POST" action="{{ route('visitor.public-events.subscribeEvent') }}" id="subscribeForm_{{$public_event->id}}" style="display: none;">
                                        @csrf
                                        <input type="hidden" name="event_id" value="{{$public_event->id}}">
                                    </form>
                                    <a href="{{route('visitor.public-events.show',$public_event->id)}}" class="btn btn-sm btn-primary card-link">{{__('guest/public_events.event_details')}}</a>
                                    @if($public_event->isSubscribe)
                                        <button type="button" class="btn btn-sm btn-light card-link disabled">{{__('guest/public_events.subscribed')}}</button>
                                    @else
                                        <button type="button" class="btn btn-sm btn-success card-link" onclick="submitSubscribeForm('subscribeForm_{{$public_event->id}}');">{{ __('guest/public_events.subscribe') }}</button>
                                    @endif
                                </div>
                            </div>
                        </div>


                        <script>
                            function submitSubscribeForm(form_id) {
                                console.log(form_id)
                                document.getElementById(form_id).submit();
                            }
                        </script>

                    @endforeach
                </div>
            </div>
</div>
@endsection