@extends('superadmin.layouts.app')

@section('title', 'Content Moderation')

@section('content')
<div class="content-wrapper">
    <!-- Content Header -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Content Moderation</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('super-admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Content Moderation</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Statistics Cards -->
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{ number_format($stats['total']) }}</h3>
                            <p>Total Reports</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-flag"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{ number_format($stats['pending']) }}</h3>
                            <p>Pending Review</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{ number_format($stats['resolved']) }}</h3>
                            <p>Resolved</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-check"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{ number_format($stats['rejected']) }}</h3>
                            <p>Rejected</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-times"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Stats -->
            <div class="row">
                <div class="col-lg-4 col-6">
                    <div class="small-box bg-secondary">
                        <div class="inner">
                            <h3>{{ number_format($stats['today']) }}</h3>
                            <p>Reports Today</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-6">
                    <div class="small-box bg-primary">
                        <div class="inner">
                            <h3>{{ number_format($stats['this_week']) }}</h3>
                            <p>This Week</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-week"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-6">
                    <div class="small-box bg-dark">
                        <div class="inner">
                            <h3>{{ number_format($stats['this_month']) }}</h3>
                            <p>This Month</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Reasons Chart -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Top Report Reasons</h3>
                        </div>
                        <div class="card-body">
                            @if($topReasons->count() > 0)
                                @foreach($topReasons as $reason)
                                <div class="progress-group">
                                    <span class="float-right"><b>{{ $reason->count }}</b>/{{ $stats['total'] }}</span>
                                    <span class="progress-text">{{ ucfirst($reason->reason) }}</span>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-primary" style="width: {{ $stats['total'] > 0 ? ($reason->count / $stats['total']) * 100 : 0 }}%"></div>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <p class="text-muted">No reports yet.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters and Search -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Filters and Search</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('super-admin.content-moderation.index') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="search">Search</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="Search reports, users...">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="">All Status</option>
                                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="reason">Reason</label>
                                    <select class="form-control" id="reason" name="reason">
                                        <option value="">All Reasons</option>
                                        <option value="spam" {{ request('reason') == 'spam' ? 'selected' : '' }}>Spam</option>
                                        <option value="inappropriate" {{ request('reason') == 'inappropriate' ? 'selected' : '' }}>Inappropriate</option>
                                        <option value="harassment" {{ request('reason') == 'harassment' ? 'selected' : '' }}>Harassment</option>
                                        <option value="fake" {{ request('reason') == 'fake' ? 'selected' : '' }}>Fake Account</option>
                                        <option value="copyright" {{ request('reason') == 'copyright' ? 'selected' : '' }}>Copyright</option>
                                        <option value="other" {{ request('reason') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="date_from">Date From</label>
                                    <input type="date" class="form-control" id="date_from" name="date_from" 
                                           value="{{ request('date_from') }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="date_to">Date To</label>
                                    <input type="date" class="form-control" id="date_to" name="date_to" 
                                           value="{{ request('date_to') }}">
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Sort Options -->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="sort_by">Sort By</label>
                                    <select class="form-control" id="sort_by" name="sort_by">
                                        <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Date Created</option>
                                        <option value="status" {{ request('sort_by') == 'status' ? 'selected' : '' }}>Status</option>
                                        <option value="reason" {{ request('sort_by') == 'reason' ? 'selected' : '' }}>Reason</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="sort_order">Order</label>
                                    <select class="form-control" id="sort_order" name="sort_order">
                                        <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('super-admin.content-moderation.index') }}" class="btn btn-secondary btn-block">
                                        <i class="fas fa-times"></i> Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Reports Table -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Profile Reports</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-sm btn-success" id="bulk-resolve-btn" style="display: none;">
                            <i class="fas fa-check"></i> Bulk Resolve
                        </button>
                        <button type="button" class="btn btn-sm btn-danger" id="bulk-reject-btn" style="display: none;">
                            <i class="fas fa-times"></i> Bulk Reject
                        </button>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    @if($reports->count() > 0)
                    <table class="table table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>
                                    <div class="icheck-primary">
                                        <input type="checkbox" id="select-all">
                                        <label for="select-all"></label>
                                    </div>
                                </th>
                                <th>ID</th>
                                <th>Reported User</th>
                                <th>Reporter</th>
                                <th>Reason</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reports as $report)
                            <tr>
                                <td>
                                    <div class="icheck-primary">
                                        <input type="checkbox" class="report-checkbox" value="{{ $report->id }}" id="check-{{ $report->id }}">
                                        <label for="check-{{ $report->id }}"></label>
                                    </div>
                                </td>
                                <td>{{ $report->id }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ $report->reportedUser->profile_picture_url ?? asset('images/default-avatar.png') }}" 
                                             alt="Avatar" class="img-circle" style="width: 30px; height: 30px; margin-right: 10px;">
                                        <div>
                                            <strong>{{ $report->reportedUser->name }}</strong><br>
                                            <small class="text-muted">@{{ $report->reportedUser->username }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($report->reporterUser)
                                        <div>
                                            <strong>{{ $report->reporterUser->name }}</strong><br>
                                            <small class="text-muted">@{{ $report->reporterUser->username }}</small>
                                        </div>
                                    @else
                                        <span class="text-muted">Guest</span><br>
                                        <small>{{ $report->reporter_email }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ $report->getReasonText() }}</span>
                                </td>
                                <td>
                                    <span class="badge {{ $report->getStatusBadgeClass() }}">{{ $report->getStatusText() }}</span>
                                </td>
                                <td>
                                    <span title="{{ $report->created_at->format('Y-m-d H:i:s') }}">
                                        {{ $report->created_at->diffForHumans() }}
                                    </span>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{{ route('super-admin.content-moderation.show', $report) }}" 
                                           class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                        @if($report->isPending())
                                        <button type="button" class="btn btn-sm btn-success" 
                                                onclick="showResolveModal({{ $report->id }}, 'resolve')">
                                            <i class="fas fa-check"></i> Resolve
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger" 
                                                onclick="showResolveModal({{ $report->id }}, 'reject')">
                                            <i class="fas fa-times"></i> Reject
                                        </button>
                                        <button type="button" class="btn btn-sm btn-warning" 
                                                onclick="showResolveModal({{ $report->id }}, 'ban_user')">
                                            <i class="fas fa-ban"></i> Ban User
                                        </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <div class="text-center py-4">
                        <i class="fas fa-flag fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No reports found</h5>
                        <p class="text-muted">There are no profile reports matching your criteria.</p>
                    </div>
                    @endif
                </div>
                @if($reports->hasPages())
                <div class="card-footer">
                    {{ $reports->appends(request()->query())->links() }}
                </div>
                @endif
            </div>
        </div>
    </section>
</div>

<!-- Resolve Modal -->
<div class="modal fade" id="resolveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="resolveForm" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="resolveModalTitle">Resolve Report</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="action" id="resolveAction">
                    <div class="form-group">
                        <label for="admin_notes">Admin Notes</label>
                        <textarea class="form-control" name="admin_notes" id="admin_notes" rows="3" 
                                  placeholder="Add notes about your decision..."></textarea>
                    </div>
                    <div id="banWarning" class="alert alert-warning" style="display: none;">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Warning:</strong> This action will permanently ban the reported user from the platform.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn" id="resolveSubmitBtn">Confirm</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Action Modal -->
<div class="modal fade" id="bulkActionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="bulkActionForm" method="POST" action="{{ route('super-admin.content-moderation.bulk-resolve') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkActionModalTitle">Bulk Action</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="action" id="bulkAction">
                    <input type="hidden" name="report_ids" id="bulkReportIds">
                    <p id="bulkActionMessage"></p>
                    <div class="form-group">
                        <label for="bulk_admin_notes">Admin Notes</label>
                        <textarea class="form-control" name="admin_notes" id="bulk_admin_notes" rows="3" 
                                  placeholder="Add notes about your decision..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn" id="bulkActionSubmitBtn">Confirm</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Select all functionality
    $('#select-all').change(function() {
        $('.report-checkbox').prop('checked', this.checked);
        toggleBulkButtons();
    });
    
    // Individual checkbox change
    $('.report-checkbox').change(function() {
        toggleBulkButtons();
        
        // Update select all checkbox
        const totalCheckboxes = $('.report-checkbox').length;
        const checkedCheckboxes = $('.report-checkbox:checked').length;
        $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
    });
    
    // Bulk action buttons
    $('#bulk-resolve-btn').click(function() {
        showBulkActionModal('resolve');
    });
    
    $('#bulk-reject-btn').click(function() {
        showBulkActionModal('reject');
    });
});

function toggleBulkButtons() {
    const checkedCount = $('.report-checkbox:checked').length;
    if (checkedCount > 0) {
        $('#bulk-resolve-btn, #bulk-reject-btn').show();
    } else {
        $('#bulk-resolve-btn, #bulk-reject-btn').hide();
    }
}

function showResolveModal(reportId, action) {
    const modal = $('#resolveModal');
    const form = $('#resolveForm');
    const title = $('#resolveModalTitle');
    const submitBtn = $('#resolveSubmitBtn');
    const banWarning = $('#banWarning');
    
    // Set form action
    form.attr('action', `/super-admin/content-moderation/${reportId}/resolve`);
    $('#resolveAction').val(action);
    
    // Configure modal based on action
    switch(action) {
        case 'resolve':
            title.text('Resolve Report');
            submitBtn.removeClass().addClass('btn btn-success').text('Resolve');
            banWarning.hide();
            break;
        case 'reject':
            title.text('Reject Report');
            submitBtn.removeClass().addClass('btn btn-danger').text('Reject');
            banWarning.hide();
            break;
        case 'ban_user':
            title.text('Ban User & Resolve Report');
            submitBtn.removeClass().addClass('btn btn-warning').text('Ban User');
            banWarning.show();
            break;
    }
    
    modal.modal('show');
}

function showBulkActionModal(action) {
    const checkedIds = $('.report-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (checkedIds.length === 0) {
        alert('Please select at least one report.');
        return;
    }
    
    const modal = $('#bulkActionModal');
    const title = $('#bulkActionModalTitle');
    const message = $('#bulkActionMessage');
    const submitBtn = $('#bulkActionSubmitBtn');
    
    $('#bulkAction').val(action);
    $('#bulkReportIds').val(checkedIds.join(','));
    
    if (action === 'resolve') {
        title.text('Bulk Resolve Reports');
        message.text(`Are you sure you want to resolve ${checkedIds.length} selected reports?`);
        submitBtn.removeClass().addClass('btn btn-success').text('Resolve All');
    } else {
        title.text('Bulk Reject Reports');
        message.text(`Are you sure you want to reject ${checkedIds.length} selected reports?`);
        submitBtn.removeClass().addClass('btn btn-danger').text('Reject All');
    }
    
    modal.modal('show');
}
</script>
@endsection