@extends('layouts.adminlayout')

@section('content')
    <div class="container-fluid">
        <div class="row">
            @include('admin.adminnavbar')
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div
                    class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Manage Reported Ads</h1>
                </div>
                <div class="card mt-4">
                    <div class="card-header table-back-color text-white">
                        <h5 class="mb-0">All Reported Issues</h5>
                    </div>
                    <div class="card-body">

                        @foreach ($reports as $report)
                            <div class="card mb-4 shadow-sm">
                                <div
                                    class="card-header d-flex justify-content-between align-items-center bg-danger text-white">
                                    <div>
                                        <strong>Report ID:</strong> #{{ $report->id }}
                                    </div>
                                    <div style="width: 200px;">
                                        <select class="form-select form-select-sm status-dropdown"
                                            data-ad-id="{{ $report->ad_id }}">
                                            <option value="active" @if ($report->ad->status == 'active') selected @endif>Active
                                            </option>
                                            <option value="inactive" @if ($report->ad->status == 'inactive') selected @endif>
                                                Inactive</option>
                                            <option value="pending" @if ($report->ad->status == 'pending') selected @endif>
                                                Pending</option>
                                            <option value="moderate" @if ($report->ad->status == 'moderate') selected @endif>
                                                Moderate</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title mb-3 text-primary">{{ $report->ad->title }}</h5>

                                    <div class="mb-2">
                                        <strong>Reported By:</strong> {{ $report->reporter->name }}
                                        ({{ $report->reporter->email }})
                                    </div>
                                    <div class="mb-2">
                                        <strong>Ad Owner:</strong> {{ $report->ad->user->name }}
                                        ({{ $report->ad->user->email }})
                                    </div>

                                    <div class="mb-2">
                                        <strong>Reason:</strong> {{ $report->reason }}
                                    </div>

                                    <div class="mb-3">
                                        <strong>Description:</strong> {{ $report->description }}
                                    </div>

                                    <div class="mb-3">
                                        <strong>Reported on:</strong>
                                        {{ $report->created_at->format('d M Y, h:i A') }}
                                    </div>
                                    <div class="d-flex justify-content-end gap-2">
                                        <a href="{{ route('ads.show', $report->ad->id) }}" class="btn btn-primary btn-sm">
                                            <i class="bi bi-eye"></i> View Ad
                                        </a>

                                        <a href="{{ route('ads.user.profile', $report->ad->user->id) }}"
                                            class="btn btn-info btn-sm">
                                            <i class="bi bi-person-circle"></i> Ad Owner Profile
                                        </a>

                                        <a href="{{ route('ads.user.profile', $report->reporter->id) }}"
                                            class="btn btn-secondary btn-sm">
                                            <i class="bi bi-person-lines-fill"></i> Reporter Profile
                                        </a>

                                    </div>
                                </div>
                            </div>
                        @endforeach


                        <!-- Pagination if needed -->
                        {{ $reports->links('pagination::bootstrap-5') }}

                        <!-- Success Message -->
                        @if ('success')
                            <div class="custom-alert alert-dismissible fade show d-none" id="successAlert" role="alert">
                                {{ session('success') }}
                            </div>
                        @endif
                        <div id="successAlert" class="custom-alert alert-dismissible fade show d-none" role="alert"></div>
                    </div>
            </main>
        </div>
    @endsection

    @section('scripts')
        <script>
            $(document).ready(function() {
                $('.status-dropdown').change(function() {
                    var adId = $(this).data('ad-id');
                    var newStatus = $(this).val();
                    $.ajax({
                        url: '/admin/ads/' + adId + '/update-status',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: newStatus
                        },
                        success: function(response) {
                            if (response.success) {
                                var successMessage = response.message;
                                // alert('Ad status updated successfully');
                                $('#successAlert').html(successMessage).removeClass('d-none')
                                    .addClass('alert-success alert-dismissible fade show');
                                setTimeout(function() {
                                    $('#successAlert').alert('close');
                                }, 5000);
                            } else {
                                alert('Something went wrong. Please try again.');
                            }
                        },
                        error: function() {
                            alert('Error updating the status.');
                        }
                    });
                });
            });
        </script>
    @endsection