@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        @include('admin.layouts.notifications')

        <!-- Page Heading -->
        <div class="row mb-3">
            <h4 class="c-grey-900">{{ $title }}</h4>
        </div>

        <!-- Edit Form Section-->
        <form action="{{ route('ch-admin.blog.comments.update', $comment->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="row">
                <!-- Left Section -->
                <div class="col-md-8">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <!-- Description Field -->
                        <div class="mb-3">
                            <label for="content" class="form-label">Content</label>
                            <textarea class="form-control @error('content') is-invalid @enderror" id="content" rows="4" name="content">{{ old('content', $comment->content) }}</textarea>
                            @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Right Section -->
                <div class="col-md-4">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <!-- Status Field -->
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-control" id="status" name="status">
                                <option value="" disabled>All Status</option>
                                <option value="pending" {{ $comment->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="approved" {{ $comment->status == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ $comment->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>

                        <!-- Submission Details -->
                        <div class="mb-3">
                            <p title="Submitted on"><i class="ti-calendar me-2"></i>{{ $comment->created_at->format('M j, Y \a\t h:i') }}</p>
                            <p title="Post Name"><i class="ti-comment-alt me-2"></i>{{ $comment->post->title }}</p>
                            <p title="User"><i class="ti-user me-2"></i>{{ $comment->user->first_name }} {{ $comment->user->last_name }}</p>
                        </div>

                        <!-- Action Buttons -->
                        <div>
                            <button type="button" id="deleteCommentButton" class="btn btn-danger">Delete</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Delete Comment Form -->
    <form id="deleteCommentForm" action="{{ route('ch-admin.blog.comments.destroy', $comment->id) }}" method="POST" style="display: inline;">
        @csrf
        @method('DELETE')
    </form>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const deleteButton = document.getElementById('deleteCommentButton');

            const deleteForm = document.getElementById('deleteCommentForm');

            deleteButton.addEventListener('click', function (event) {
                if (confirm('Are you sure you want to delete this comment?')) {
                    deleteForm.submit();
                }
            });
        });
    </script>
@endpush