@extends('layouts.admin')

@section('title', 'Pending Documents for Approval')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        <i class="bi bi-clipboard-check me-2 text-warning"></i>
        Pending Approvals ({{ $documents->total() }})
    </h1>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="card shadow-sm">
    <div class="card-body p-0">
        @if($documents->count())
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>File</th>
                            <th>Uploader</th>
                            <th>Folder</th>
                            <th>Uploaded</th>
                            <th>Remarks</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($documents as $doc)
                            <tr>
                                <td>
                                    <strong>{{ $doc->file_name }}</strong>
                                </td>
                                <td>{{ $doc->uploader->name ?? 'Unknown' }}</td>
                                <td>{{ $doc->folder->name ?? 'N/A' }}<br><small>{{ $doc->folder->month->name ?? '' }}</small></td>
                                <td>{{ $doc->created_at->format('M d, Y H:i') }}</td>
                                <td>
                                    @if($doc->remarks)
                                        {{ Str::limit($doc->remarks, 50) }}
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('documents.show', $doc) }}" class="btn btn-sm btn-outline-primary" title="View">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <form action="{{ route('auditor.documents.approve', $doc) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Approve this document?')" title="Approve">
                                                <i class="bi bi-check-circle"></i>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#rejectModal{{ $doc->id }}" title="Reject">
                                            <i class="bi bi-x-circle"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            <!-- Reject Modal for each document -->
                            <div class="modal fade" id="rejectModal{{ $doc->id }}" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header bg-danger text-white">
                                            <h5 class="modal-title">Reject {{ $doc->file_name }}</h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form action="{{ route('auditor.documents.reject', $doc) }}" method="POST">
                                            @csrf
                                            @method('PATCH')
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label class="form-label">Rejection Remarks <span class="text-danger">*</span></label>
                                                    <textarea name="rejected_remarks" class="form-control" rows="4" required placeholder="Reason for rejection..."></textarea>
                                                </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-danger">Reject Document</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end p-3 bg-light">
                {{ $documents->appends(request()->query())->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-clipboard-x fs-1 text-muted mb-3"></i>
                <h5>No pending documents</h5>
                <p class="text-muted">All documents approved or no uploads yet.</p>
            </div>
        @endif
    </div>
</div>
@endsection