@extends('layouts.app')
@push('page_style')
    <style>
        #example1_filter {
            display: flex;
            justify-content: end;
        }
    </style>
@endpush
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Events</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active">Events</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    @if(session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif

                    <div class="card">

                        <div class="card-body">
                            <a href="{{ route('admin.add.events') }}">
                                <button class="btn btn-primary">Add Events</button>
                            </a>
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Customer</th>
                                    <th>Preferred Contact</th>
                                    <th>Email / Cellphone</th>
                                    <th>Event Name</th>
                                    <th>Organizer Name</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Price</th>
                                    <th>Highlight</th>
                                    <th>Status</th>
                                    <th>Comments</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($events as $item)
                                    <tr>
                                        <td>{{ $item->id }}</td>
                                        <td>
                                            @if(!empty($item->customer))
                                                {{ $item->customer->name }}
                                            @endif
                                        </td>
                                        <td>{{ $item->preferred_contact }}</td>
                                        <td>{{ $item->email_or_cellphone }}</td>
                                        <td>{{ $item->event_name }}</td>
                                        <td>{{ $item->organizer_name }}</td>
                                        <td>{{ $item->start_date }}</td>
                                        <td>{{ $item->end_date }}</td>
                                        <td>{{ $item->price }}</td>
                                        <td>{{ $item->highlight_status }}</td>
                                        <td>{{ $item->status }}</td>
                                        <td>    <button class="btn btn-info" data-toggle="modal" data-target="#comments-modal-{{ $item->id }}">View Comments</button>
                                        </td>
                                        <td>
                                            <button class="btn btn-warning" data-toggle="modal" data-target="#event-status-{{ $item->id }}">Highlight</button>
                                            <a href="{{ route('admin.edit.events', $item->id) }}" class="btn btn-primary">Edit</a>
                                            <a href="{{ route('admin.events.destroy', $item->id) }}" class="btn btn-danger">Delete</a>
                                        </td>
                                    </tr>
                                    <div class="modal fade event-highlight" id="event-status-{{ $item->id }}" tabindex="-1" aria-labelledby="event-highlightLabel-{{ $item->id }}" aria-modal="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Event Highlights</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form method="post" action="{{ route('admin.event.highlight.status', ['event' => $item->id]) }}">
                                                        @csrf
                                                        <div class="form-group">
                                                            <label>Status</label>
                                                            <select name="status" class="form-control">
                                                                <option value="1" {{ $item->highlight_status === '1' ? 'selected' : '' }}>Active</option>
                                                                <option value="0" {{ $item->highlight_status === '0' ? 'selected' : '' }}>Inactive</option>
                                                            </select>
                                                        </div>
                                                        <div class="formdata">
                                                            <button type="submit" class="btn btn-success">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Modal for Event Comments -->
                                    <div class="modal fade" id="comments-modal-{{ $item->id }}" tabindex="-1" aria-labelledby="commentsModalLabel-{{ $item->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="commentsModalLabel-{{ $item->id }}">Comments for Event #{{ $item->id }}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    @if ($item->comments->isEmpty())
                                                        <p>No comments available for this event.</p>
                                                    @else
                                                        <ul class="list-group">

                                                            @foreach ($item->comments as $comment)
                                                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                    <div>
                                                                        <!--{{ $comment->content }}-->
                                                                                 <h6>{{ $comment->title ?? 'No Title' }}</h6>
                                                                    <p>{{ $comment->body ?? 'No Content' }}</p>
                                                                    <span><strong>Rating:</strong> {{ $comment->rating ?? 'Not Rated' }}</span>
                                                                        <small class="text-muted d-block">
                                                                            Status: {{ $comment->approved == 0  ? 'Not Approved' : 'Approved' }}
                                                                        </small>
                                                                    </div>
                                                                    <div class="d-flex align-items-center">

{{--                                                                        <form method="POST" action="{{ route('admin.comments.toggle-approval', $comment->id) }}" class="mr-2">--}}
{{--                                                                            @csrf--}}
{{--                                                                            @method('PATCH')--}}
{{--                                                                            <button type="submit" class="btn btn-sm {{ $comment->approved ? 'btn-warning' : 'btn-success' }}">--}}
{{--                                                                                {{ $comment->approved ? 'Unapprove' : 'Approve' }}--}}
{{--                                                                            </button>--}}
{{--                                                                        </form>--}}

{{--                                                                        <form method="POST" action="{{ route('admin.comments.destroy', $comment->id) }}">--}}
{{--                                                                            @csrf--}}
{{--                                                                            @method('DELETE')--}}
{{--                                                                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>--}}
{{--                                                                        </form>--}}
                                                                    </div>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="comments-modal-{{ $item->id }}" tabindex="-1" aria-labelledby="commentsModalLabel-{{ $item->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="commentsModalLabel-{{ $item->id }}">Comments for Event #{{ $item->id }}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    @if ($item->comments->isEmpty())
                                                        <p>No comments available for this event.</p>
                                                    @else
                                                        <ul class="list-group">

                                                            @foreach ($item->comments as $comment)
                                                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                    {{ $comment->content }}

{{--                                                                    <form method="POST" action="{{ route('admin.comments.destroy', ['comment' => $comment->id]) }}">--}}
{{--                                                                        @csrf--}}
{{--                                                                        @method('DELETE')--}}
{{--                                                                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>--}}
{{--                                                                    </form>--}}
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                @endforeach
                                </tbody>

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



@endsection