@extends('layouts.front_app')
@section('content')
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2 class="heading"> Event Detail</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->



    <!-- Upcoming Show Section -->
    <section class="upcoming-section upcmng2">
        <div class="container">

            <div class="row upcmngshow align-items-center">
                <div class="col-md-5">
                    <figure>
                        @foreach ($event->image as $image)
                            <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" class="img-fluid">
                        @endforeach
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="showcard showcard2">

                        <div>
                            <span>
                                 @if(!empty($event->start_date))
                                    {{ \Carbon\Carbon::parse($event->start_date)->format('l, M j') }}
                                @endif
                            </span>
                            <h4>{{ !empty($event->event_name) ? $event->event_name : '' }}</h4>

                            <ul>
                                <li><i class="fas fa-clock"></i>
                                    @if(!empty($event->time))
                                        Doors : {{ \Carbon\Carbon::parse($event->time)->format('g:i A') }}
                                    @endif
                                </li>

                                <li><i class="fas fa-clock"></i>
                                    @if(!empty($event->time))
                                        Show : {{ \Carbon\Carbon::parse($event->start_time)->format('g:i A') }}
                                    @endif
                                </li>

                                <li>
                                    <i class="fas fa-map-marker-alt"></i> Location
                                    : {{ !empty($event->location) ? $event->location : '' }}
                                </li>
                                {{--                                <li>--}}
                                {{--                                    <i class="fas fa-ticket-alt"></i>{{ !empty($event->organizer_name) ? $event->organizer_name : '' }}--}}
                                {{--                                </li>--}}
                                <li>
                                    <i class="fas fa-ticket-alt"></i> Ticket Price : <i class="fa-solid fa-dollar-sign"
                                                                                        style=" margin-left:10px;width: 14px; color:white;"></i> {{ !empty($event->price) ? $event->price : '' }}
                                </li>

                            </ul>
                            <p>
                                {{--                                {!! !empty($product->detail) ? $product->detail : '' !!}--}}
                            </p>
                            <a href="{{$event->third_party_link}}" class="themeBtn">Buy Ticket</a>
                        </div>
                    </div>
                </div>
                {{--                @if(!empty( $event->map_location))--}}
                {{--                    <div class="col-md-12">--}}
                {{--                        <div class="map">--}}
                {{--                            <iframe--}}
                {{--                                src="{{ $event->map_location }}"--}}
                {{--                                width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"--}}
                {{--                                referrerpolicy="no-referrer-when-downgrade"></iframe>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                @endif--}}
            </div>

        </div>
    </section>
    <style>
        .map iframe {
            width: 100%;
            height: 700px;
        }
    </style>
    <!-- ! Upcoming Show Section -->
    <div class="map">
        <div class="container">
            @php
                use Illuminate\Support\Str;
            @endphp

            <div class="col-md-12">
                <div class="map">
                    @if($event->map_location && Str::startsWith($event->map_location, 'https://www.google.com/maps/embed'))
                        <iframe
                            src="{{ $event->map_location }}"
                            width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    @else
                        <h1 class="text-center">Map Not Avaiable</h1>
                    @endif
                </div>
            </div>


        </div>

    </div>
    <!-- commentSec -->
    <section class="commentSec">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    <div class="commentContent">
                        <h3 class="heading">{{ $comments->count() }} Comments</h3>
                        @foreach ($comments as $comment)
                            <div class="commentCard">
                                <div class="commentCard-head">
                                    <img src="{{ asset('images/show1.png') }}" alt="" class="img-fluid object-fit">
                                    <div class="commentCard-title">
                                        <h4>{{ $comment->user->name }}</h4>
                                        <h3>{{$comment->title ? : ''}}</h3>
                                        <h6>{{ $comment->created_at->format('l, M d') }}</h6>
                                    </div>
                                </div>
                                <div class="commentCard-content">
                                    <p>
                                        Title : {{ $comment->title }}</br>
                                        Comment : {{ $comment->body }}
                                    </p>
                                </div>
                                @if (Auth::check() && Auth::id() != $comment->user_id)
                                    <div class="commentCard-btn">
                                        <a href="javascript:void(0)" id="reply-button-{{ $comment->id }}">Reply
                                            <span><i class="fa fa-reply-all"></i></span></a>
                                    </div>

                                    <div class="commentForm mt-3" id="reply-form-{{ $comment->id }}"
                                         style="display: none;">
                                        <h3 class="heading">Reply to {{ $comment->user->name }}</h3>
                                        <form action="{{ route('event.comment.store') }}" method="post"
                                              class="signupForm">
                                            @csrf
                                            <input type="hidden" name="event_id" value="{{ $event->id }}">
                                            <input type="hidden" name="parent_id" value="{{ $comment->id }}">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>Title</label>
                                                        <input type="text" name="title" class="form-control" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>Rating</label>
                                                        <select name="rating" class="form-control" required>
                                                            <option value="Chuckle-worthy">Chuckle worthy</option>
                                                            <option value="Giggle-inducing">Giggle inducing</option>
                                                            <option value="Laugh-out-loud">Laugh out loud</option>
                                                            <option value="Belly laugh">Belly laugh</option>
                                                            <option value="Side-Splitting">Side Splitting</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <label>Comment</label>
                                                        <textarea cols="12" rows="6" name="body" required
                                                                  class="form-control"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="formdata d-block text-left">
                                                        <button type="submit" class="btn themeBtn mt-2">POST REPLY</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                @endif

{{--                                @if (Auth::check())--}}
{{--                                    <div class="commentCard-btn">--}}
{{--                                        <a href="javascript:void(0)" id="reply-button-{{ $comment->id }}">Reply--}}
{{--                                            <span><i class="fa fa-reply-all"></i></span></a>--}}
{{--                                    </div>--}}

{{--                                    <div class="commentForm mt-3" id="reply-form-{{ $comment->id }}"--}}
{{--                                         style="display: none;">--}}
{{--                                        <h3 class="heading">Reply to {{ $comment->user->name }}</h3>--}}
{{--                                        <form action="{{ route('event.comment.store') }}" method="post"--}}
{{--                                              class="signupForm">--}}
{{--                                            @csrf--}}
{{--                                            <input type="hidden" name="event_id" value="{{ $event->id }}">--}}
{{--                                            <input type="hidden" name="parent_id" value="{{ $comment->id }}">--}}
{{--                                            <div class="row">--}}
{{--                                                <div class="col-lg-6">--}}
{{--                                                    <div class="form-group">--}}
{{--                                                        <label>Title</label>--}}
{{--                                                        <input type="text" name="title" class="form-control" required>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                                <div class="col-lg-6">--}}
{{--                                                    <div class="form-group">--}}
{{--                                                        <label>Rating</label>--}}
{{--                                                        <select name="rating" class="form-control" required>--}}
{{--                                                            <option value="Chuckle-worthy">Chuckle worthy</option>--}}
{{--                                                            <option value="Giggle-inducing">Giggle inducing</option>--}}
{{--                                                            <option value="Laugh-out-loud">Laugh out loud</option>--}}
{{--                                                            <option value="Belly laugh">Belly laugh</option>--}}
{{--                                                            <option value="Side-Splitting">Side Splitting</option>--}}
{{--                                                        </select>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                                <div class="col-lg-12">--}}
{{--                                                    <div class="form-group">--}}
{{--                                                        <label>Comment</label>--}}
{{--                                                        <textarea cols="12" rows="6" name="body" required--}}
{{--                                                                  class="form-control"></textarea>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                                <div class="col-lg-12">--}}
{{--                                                    <div class="formdata d-block text-left">--}}
{{--                                                        <button type="submit" class="btn themeBtn mt-2">POST REPLY--}}
{{--                                                        </button>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}

{{--                                        </form>--}}
{{--                                    </div>--}}

{{--                                @else--}}
{{--                                    <div class="commentCard-btn">--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            </div>--}}

                            @if ($comment->replies)
                                @foreach ($comment->replies as $reply)
                                    <div class="commentCard commentCard-inner">
                                        <div class="commentCard-head">
                                            <img src="{{ asset('images/show1.png') }}" alt=""
                                                 class="img-fluid object-fit">
                                            <div class="commentCard-title">
                                                <h4>{{ $reply->user->name }}</h4>
                                                <h3>{{$reply->title ? : ''}}</h3>
                                                <h6>{{ $reply->created_at->format('l, M d') }}</h6>
                                            </div>
                                        </div>
                                        <div class="commentCard-content">
                                            <p>
                                                {{ $reply->body }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        @endforeach


                        <div class="commentForm mt-5" id="create-post-form">
                            <h3 class="heading">Post your comment</h3>
                            <form action="{{ route('event.comment.store') }}" method="post" class="signupForm">
                                @csrf
                                <input type="hidden" value="{{ $event->id }}" name="event_id">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Title</label>
                                            <input type="text" name="title" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Rating</label>
                                            <select name="rating" class="form-control" required>
                                                <option value="Subtle-Snort">Subtle Snort</option>
                                                <option value="Chuckle-Worthy">Chuckle Worthy</option>
                                                <option value="Giggle-Inducing">Giggle Inducing</option>
                                                <option value="Laugh-Out-Loud">Laugh Out Loud</option>
                                                <option value="Side-Splitting">Side Splitting</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>Comment</label>
                                            <textarea cols="12" rows="6" name="body" required
                                                      class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        @if (Auth::check())
                                            <div class="formdata d-block text-left">
                                                <button type="submit" class="btn themeBtn mt-2">POST COMMENT</button>
                                            </div>
                                        @else
                                            <div class="formdata d-block text-left">
                                                <button type="button" data-toggle="modal" data-target="#loginPopup"
                                                        class="btn themeBtn mt-2">POST COMMENT
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>

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

@endsection

@push('event_script')
    <script>
        $(document).ready(function () {
            @foreach ($comments as $comment)
            $('#reply-button-{{ $comment->id }}').click(function () {
                $('#create-post-form').hide();
                $('#reply-form-{{ $comment->id }}').toggle();

            });
            @endforeach
        });
    </script>
@endpush