@extends('admin.layouts.home')

@section('title', 'Post Report Details')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Post Report Details</h1>
        <a href="{{ route('admin.reports.post-reports') }}" class="d-none d-sm-inline-block btn btn-sm btn-secondary shadow-sm">
            <i class="fas fa-arrow-left fa-sm text-white-50"></i> Back to Post Reports
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <!-- Report Info Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">Report Information</h6>
            <div>
                @if($report->status == 'pending')
                    <span class="badge bg-warning py-1 px-2">Pending</span>
                @elseif($report->status == 'resolved')
                    <span class="badge bg-success py-1 px-2">Resolved</span>
                @elseif($report->status == 'dismissed')
                    <span class="badge bg-danger py-1 px-2">Dismissed</span>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-3">Report Details</h5>
                    <table class="table table-bordered">
                        <tr>
                            <th style="width: 150px;">Report ID</th>
                            <td>{{ $report->id }}</td>
                        </tr>
                        <tr>
                            <th>Date Reported</th>
                            <td> {{ $report->updated_at ? $report->updated_at->format('F d, Y h:i A') : 'Not updated yet' }}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                @if($report->status == 'pending')
                                    <span class="badge bg-warning">Pending</span>
                                @elseif($report->status == 'resolved')
                                    <span class="badge bg-success">Resolved</span>
                                @elseif($report->status == 'dismissed')
                                    <span class="badge bg-danger">Dismissed</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Last Updated</th>
                            <td>
                                {{ $report->updated_at ? $report->updated_at->format('F d, Y h:i A') : 'Not updated yet' }}
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h5 class="mb-3">Reason for Report</h5>
                    <div class="card bg-light">
                        <div class="card-body">
                            <p>{{ $report->reason }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reported Post Card -->
    <div class="row">
        <div class="col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Reported Post</h6>
                </div>
                <div class="card-body">
                    @if($report->post)
                        <div class="post-preview mb-4">
                            <div class="d-flex align-items-center mb-3">
                                <img src="{{ $report->post->user->profile_photo ?? asset('assets/images/default-avatar.png') }}" 
                                    class="rounded-circle mr-3" width="50" height="50">
                                <div>
                                    <h5 class="mb-0">{{ $report->post->user->name ?? 'Unknown User' }}</h5>
                                    <small class="text-muted">{{ $report->post->created_at->format('F d, Y h:i A') }}</small>
                                </div>
                            </div>

                            <div class="post-content card mb-3">
                                <div class="card-body">
                                    <p class="post-text">{{ $report->post->text }}</p>
                                </div>
                            </div>
                            
                            @if($report->post->media && count($report->post->media) > 0)
                                <div class="post-media">
                                    <div class="row">
                                        @foreach($report->post->media as $media)
                                            <div class="col-md-6 mb-3">
                                                @if(Str::endsWith($media->url, ['.jpg', '.jpeg', '.png', '.gif']))
                                                    <img src="{{ asset($media->url) }}" class="img-fluid rounded" alt="Post media">
                                                @elseif(Str::endsWith($media->url, ['.mp4', '.mov', '.avi']))
                                                    <div class="embed-responsive embed-responsive-16by9">
                                                        <video class="embed-responsive-item" controls>
                                                            <source src="{{ asset($media->url) }}" type="video/mp4">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                    </div>
                                                @else
                                                    <div class="text-center p-4 bg-light rounded">
                                                        <i class="fas fa-file fa-3x text-secondary"></i>
                                                        <p class="mt-2 mb-0">{{ basename($media->url) }}</p>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="post-stats mt-3">
                                <span class="mr-3"><i class="far fa-heart text-danger"></i> {{ $report->post->likes_count ?? 0 }} Likes</span>
                                <span class="mr-3"><i class="far fa-comment text-primary"></i> {{ $report->post->comments_count ?? 0 }} Comments</span>
                                <span><i class="fas fa-flag text-warning"></i> {{ count($postReports) }} Reports</span>
                            </div>
                        </div>

                        <div class="divider my-4"></div>

                        <div class="text-center mb-3">
                            <h6 class="font-weight-bold">Post Reports History</h6>
                        </div>

                        @if(count($postReports) > 0)
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Reported By</th>
                                            <th>Reason</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($postReports as $postReport)
                                            <tr @if($postReport->id == $report->id) class="table-active" @endif>
                                                <td>{{ $postReport->created_at->format('M d, Y') }}</td>
                                                <td>{{ $postReport->user->name ?? 'Unknown' }}</td>
                                                <td>
                                                    <span class="d-inline-block text-truncate" style="max-width: 150px;">
                                                        {{ $postReport->reason }}
                                                    </span>
                                                </td>
                                                <td>
                                                    @if($postReport->status == 'pending')
                                                        <span class="badge bg-warning">Pending</span>
                                                    @elseif($postReport->status == 'resolved')
                                                        <span class="badge bg-success">Resolved</span>
                                                    @elseif($postReport->status == 'dismissed')
                                                        <span class="badge bg-danger">Dismissed</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-center text-muted">No previous reports found.</p>
                        @endif
                    @else
                        <div class="text-center py-5">
                            <div class="text-gray-500 mb-3">
                                <i class="fas fa-newspaper-slash fa-4x"></i>
                            </div>
                            <h5>Post Not Found</h5>
                            <p class="text-muted">The reported post may have been deleted from the system.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Reporting User</h6>
                </div>
                <div class="card-body">
                    @if($report->user)
                        <div class="text-center mb-4">
                            <img src="{{ $report->user->profile_photo ?? asset('assets/images/default-avatar.png') }}" 
                                class="img-profile rounded-circle" width="100" height="100">
                            <h5 class="mt-3">{{ $report->user->name }}</h5>
                            <p class="text-muted">{{ $report->user->email }}</p>
                            <div class="mt-2">
                                @if($report->user->is_blocked)
                                    <span class="badge bg-danger">Blocked</span>
                                @else
                                    <span class="badge bg-success">Active</span>
                                @endif
                            </div>
                        </div>
                        <div class="row text-center">
                            <div class="col-6 border-right">
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $report->user->posts_count ?? 0 }}</div>
                                <div class="small text-gray-500">Posts</div>
                            </div>
                            <div class="col-6">
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $reportsSubmittedCount }}</div>
                                <div class="small text-gray-500">Reports Submitted</div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="text-gray-500 mb-3">
                                <i class="fas fa-user-slash fa-4x"></i>
                            </div>
                            <h5>User Not Found</h5>
                            <p class="text-muted">The reporting user may have been deleted from the system.</p>
                        </div>
                    @endif
                </div>
            </div>

            @if($report->status == 'pending')
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Take Action</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <button type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#resolveModal">
                                    <i class="fas fa-check mr-1"></i> Resolve Report
                                </button>
                            </div>
                            <div class="col-md-6 mb-3">
                                <button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#dismissModal">
                                    <i class="fas fa-ban mr-1"></i> Dismiss Report
                                </button>
                            </div>
                        </div>

                        <div class="divider my-4"></div>

                        <form action="{{ route('admin.reports.post-reports.delete', $report->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger btn-block" 
                                onclick="return confirm('Are you sure you want to delete this report?')">
                                <i class="fas fa-trash mr-1"></i> Delete Report
                            </button>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Resolve Modal -->
    <div class="modal fade" id="resolveModal" tabindex="-1" role="dialog" aria-labelledby="resolveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resolveModalLabel">Resolve Report</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.reports.post-reports.update-status', $report->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="status" value="resolved">
                        <p>What action would you like to take against the reported post?</p>
                        <div class="form-group">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="actionNone" name="action" value="none" class="custom-control-input" checked>
                                <label class="custom-control-label" for="actionNone">No action (just mark as resolved)</label>
                            </div>
                            <div class="custom-control custom-radio mt-2">
                                <input type="radio" id="actionHide" name="action" value="hide" class="custom-control-input">
                                <label class="custom-control-label" for="actionHide">Hide post</label>
                            </div>
                            <div class="custom-control custom-radio mt-2">
                                <input type="radio" id="actionDelete" name="action" value="delete" class="custom-control-input">
                                <label class="custom-control-label" for="actionDelete">Delete post</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Resolve Report</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Dismiss Modal -->
    <div class="modal fade" id="dismissModal" tabindex="-1" role="dialog" aria-labelledby="dismissModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dismissModalLabel">Dismiss Report</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.reports.post-reports.update-status', $report->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="status" value="dismissed">
                        <input type="hidden" name="action" value="none">
                        <p>Are you sure you want to dismiss this report?</p>
                        <p class="text-muted">Dismissing a report indicates that no violation has occurred and no action is needed.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Dismiss Report</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .post-preview {
        background-color: #fff;
        border-radius: 0.25rem;
    }
    .post-content {
        background-color: #f8f9fa;
    }
    .post-text {
        white-space: pre-line;
    }
</style>
@endsection