@extends('layouts.admin')
@section('css')
    <style>
        .table th {
            font-weight: 600;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .badge {
            font-size: 0.75rem;
        }

        .post-content {
            max-width: 300px;
        }

        .content-preview, .content-full {
            word-wrap: break-word;
            white-space: pre-wrap;
        }

        .toggle-content {
            font-size: 0.875rem;
            text-decoration: none;
        }

        .toggle-content:hover {
            text-decoration: underline !important;
        }

        .action-buttons .btn {
            margin-bottom: 2px;
        }

        .user-info {
            line-height: 1.2;
        }
    </style>
@endsection
@section('admin')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">User Posts</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">

                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Post Image</th>
                                <th>Post ID</th>
                                <th>Created By</th>
                                <th>Post Content</th>
                                <th>Topic</th>
                                <th>Total Like</th>
                                <th>Total Comment</th>
                                <th>Total Share</th>
                                <th>Created Date</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($posts as $post)
                                <tr>
                                    <td>
                                        @if(!empty($post->post_file) && file_exists(public_path($post->post_file)))
                                            <img src="{{ asset($post->post_file) }}"
                                                 style="height: 60px; width: 60px; object-fit: cover; border-radius: 5px;"
                                                 alt="Post Image">
                                        @else
                                            <span class="text-muted">No image</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>#{{$post->id}}</strong>
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ $post->user->name ?? 'Unknown User' }}</strong>
                                            <br><small class="text-muted">{{ $post->user->user_id ?? '' }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @if($post->post_content)
                                            <div class="post-content">
                                                @php
                                                    $truncated = Str::limit($post->post_content, 100);
                                                    $isTruncated = strlen($post->post_content) > 100;
                                                @endphp
                                                <span class="content-preview">{{ $truncated }}</span>
                                                @if($isTruncated)
                                                    <span class="content-full d-none">{{ $post->post_content }}</span>
                                                    <br><a href="#" class="text-primary toggle-content"
                                                           data-post-id="{{ $post->id }}">Read more</a>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted">No content</span>
                                        @endif
                                    </td>

                                    <td>
                                        @if($post->topic)
                                            <span class="badge bg-info">{{ $post->topic->topic_name ?? 'N/A' }}</span>
                                        @else
                                            <span class="badge bg-secondary">No Topic</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ $post->total_like ?? 0 }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-success">{{ $post->total_comment ?? 0 }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-warning">{{ $post->total_share ?? 0 }}</span>
                                    </td>
                                    <td>
                                        <div>
                                            {{ \Carbon\Carbon::parse($post->created_at)->format('M d, Y') }}
                                            <br><small
                                                class="text-muted">{{ \Carbon\Carbon::parse($post->created_at)->format('H:i') }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group-vertical btn-group-sm">
                                            <button class="btn btn-primary btn-sm mb-1" data-bs-toggle="modal"
                                                    data-bs-target="#editModal{{ $post->id }}">
                                                <i class="fas fa-edit"></i> Edit
                                            </button>
                                            <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal{{ $post->id }}">
                                                <i class="fas fa-trash"></i> Delete
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $post->id }}" tabindex="-1"
                                     aria-labelledby="editModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editModalLabel">Edit Post
                                                    #{{ $post->id }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.user.post.update') }}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-12 mb-3">
                                                            <label for="post_content" class="form-label">Post
                                                                Content</label>
                                                            <textarea class="form-control" id="post_content"
                                                                      name="post_content"
                                                                      rows="4"
                                                                      placeholder="Enter post content...">{{ $post->post_content }}</textarea>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label for="total_like" class="form-label">Total
                                                                Likes</label>
                                                            <input type="text" class="form-control" id="total_like"
                                                                   value="{{ $post->total_like ?? 0 }}" readonly
                                                                   style="background-color: #f8f9fa; cursor: not-allowed;">
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label for="total_comment" class="form-label">Total
                                                                Comments</label>
                                                            <input type="text" class="form-control" id="total_comment"
                                                                   value="{{ $post->total_comment ?? 0 }}" readonly
                                                                   style="background-color: #f8f9fa; cursor: not-allowed;">
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label for="total_share" class="form-label">Total
                                                                Shares</label>
                                                            <input type="text" class="form-control" id="total_share"
                                                                   value="{{ $post->total_share ?? 0 }}" readonly
                                                                   style="background-color: #f8f9fa; cursor: not-allowed;">
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label for="topic_id" class="form-label">Topic</label>
                                                            <select class="form-control" id="topic_id" name="topic_id">
                                                                <option value="">Select Topic</option>
                                                                @php
                                                                    $topics = \App\Models\Topic::where('is_active', 1)->get();
                                                                @endphp
                                                                @foreach($topics as $topic)
                                                                    <option
                                                                        value="{{ $topic->id }}" {{ $post->topic_id == $topic->id ? 'selected' : '' }}>
                                                                        {{ $topic->topic_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-12 mb-3">
                                                            <label for="post_file" class="form-label">Change Post Image
                                                                (Optional)</label>
                                                            <input type="file" class="form-control" id="post_file"
                                                                   name="post_file" accept="image/*">
                                                            <small class="text-muted">Leave empty to keep current
                                                                image</small>
                                                            @if($post->post_file)
                                                                <div class="mt-2">
                                                                    <img src="{{ asset($post->post_file) }}"
                                                                         alt="Current Image"
                                                                         style="max-width: 100px; max-height: 100px; border-radius: 5px;">
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <input type="hidden" name="edit_id" value="{{ $post->id }}">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Update Post</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{ $post->id }}" tabindex="-1"
                                     aria-labelledby="deleteModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel">Delete Post
                                                    #{{ $post->id }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.user.post.delete') }}" method="post">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <p>Are you sure you want to delete this post?</p>
                                                            @if($post->post_content)
                                                                <div class="alert alert-info">
                                                                    <strong>Post Content:</strong><br>
                                                                    {{ Str::limit($post->post_content, 150) }}
                                                                </div>
                                                            @endif
                                                            @if($post->post_file)
                                                                <div class="text-center">
                                                                    <img src="{{ asset($post->post_file) }}"
                                                                         alt="Post Image"
                                                                         style="max-width: 150px; max-height: 150px; border-radius: 5px;">
                                                                </div>
                                                            @endif
                                                            <p class="text-danger mb-0"><strong>This action cannot be
                                                                    undone!</strong></p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <input type="hidden" name="delete_id" value="{{ $post->id }}">
                                                    <button type="submit" class="btn btn-danger">Delete Post</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            </tbody>

                        </table>
                        {{$posts->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Handle read more/read less functionality
            document.querySelectorAll('.toggle-content').forEach(function (link) {
                link.addEventListener('click', function (e) {
                    e.preventDefault();

                    const postId = this.getAttribute('data-post-id');
                    const postContent = this.closest('.post-content');
                    const preview = postContent.querySelector('.content-preview');
                    const full = postContent.querySelector('.content-full');

                    if (full.classList.contains('d-none')) {
                        // Show full content
                        preview.classList.add('d-none');
                        full.classList.remove('d-none');
                        this.textContent = 'Read less';
                    } else {
                        // Show preview
                        preview.classList.remove('d-none');
                        full.classList.add('d-none');
                        this.textContent = 'Read more';
                    }
                });
            });
        });
    </script>
@endsection