{{-- admin/tasks/proofs.blade.php | Obrempong | Jcode --}}
@extends('layouts.admin')
@section('title','Task Proof Reviews')
@section('content')
<div class="card">
    <div class="card-header"><h3>Pending Task Proofs <span class="badge badge-warning" style="margin-left:8px;">{{ $proofs->total() }}</span></h3></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>User</th><th>Task</th><th>Proof</th><th>Submitted</th><th>Actions</th></tr></thead>
            <tbody>
            @forelse($proofs as $proof)
            <tr>
                <td><div style="display:flex;align-items:center;gap:8px;"><img src="{{ $proof->user->avatar_url }}" class="td-avatar"><div><div style="font-weight:600;font-size:13px;">{{ $proof->user->name }}</div><div style="font-size:11px;color:var(--text-muted);">{{ $proof->user->email }}</div></div></div></td>
                <td><div style="font-weight:600;font-size:13px;">{{ $proof->task->title }}</div><div style="font-size:11px;color:var(--text-muted);">+{{ $proof->task->points }} pts reward</div></td>
                <td>@if($proof->proof_url)<a href="{{ asset('storage/'.$proof->proof_url) }}" target="_blank" class="btn btn-xs btn-outline"><i class="fa fa-image"></i> View Proof</a>@else<span style="color:var(--text-muted);font-size:12px;">No image</span>@endif</td>
                <td style="font-size:12px;color:var(--text-muted);">{{ $proof->created_at->diffForHumans() }}</td>
                <td>
                    <div style="display:flex;gap:5px;">
                        <form method="POST" action="{{ route('admin.task.approve',$proof) }}" style="display:inline;">@csrf<button class="btn btn-success btn-xs">✓ Approve (+{{ $proof->task->points }}pts)</button></form>
                        <button onclick="openRejectProof({{ $proof->id }})" class="btn btn-danger btn-xs">✗ Reject</button>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-muted);"><i class="fa fa-check-circle" style="font-size:32px;color:var(--success);display:block;margin-bottom:8px;"></i>No pending proofs — all clear!</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="pagination">{{ $proofs->withQueryString()->links() }}</div>
</div>

<div id="reject-proof-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:12px;padding:24px;width:360px;">
        <h3 style="margin-bottom:14px;color:var(--danger);">Reject Proof</h3>
        <form method="POST" id="reject-proof-form">@csrf
            <div class="form-group"><label class="form-label">Reason</label><textarea name="note" class="form-control" rows="3" placeholder="Tell the user why..."></textarea></div>
            <div style="display:flex;gap:10px;margin-top:14px;">
                <button type="submit" class="btn btn-danger flex-1">Reject</button>
                <button type="button" onclick="document.getElementById('reject-proof-modal').style.display='none'" class="btn btn-outline flex-1">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection
@push('scripts')
<script>
function openRejectProof(id){document.getElementById('reject-proof-modal').style.display='flex';document.getElementById('reject-proof-form').action=`/admin/task-proofs/${id}/reject`;}
</script>
@endpush