@extends('layouts.admin')

@section('title', 'KYC Verifications')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .page-header h1 { font-size: 1.75rem; font-weight: 700; }

    .filters-bar {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .filter-group label {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .filter-group select {
        padding: 0.5rem 0.875rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.85rem;
        outline: none;
        min-width: 160px;
    }

    .filter-group select:focus { border-color: var(--accent); }

    .table-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }

    .table-responsive { overflow-x: auto; }

    .admin-table { width: 100%; border-collapse: collapse; }

    .admin-table thead th {
        padding: 0.875rem 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        text-align: left;
        white-space: nowrap;
    }

    .admin-table tbody td {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .admin-table tbody tr:hover { background: var(--bg-hover); }
    .admin-table tbody tr:last-child td { border-bottom: none; }

    .badge {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.625rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .badge-pending { background: var(--warning-light); color: var(--warning); }
    .badge-approved { background: var(--success-light); color: var(--success); }
    .badge-rejected { background: var(--danger-light); color: var(--danger); }

    .action-btn {
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--transition);
        font-size: 0.8rem;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

    .action-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

    .table-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--border);
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .pagination-links { display: flex; gap: 0.375rem; }

    .pagination-links a,
    .pagination-links span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: var(--radius-sm);
        font-size: 0.825rem;
        border: 1px solid var(--border);
        color: var(--text-secondary);
        transition: all var(--transition);
    }

    .pagination-links a:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
    .pagination-links .active { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* Review Section */
    .review-panel {
        display: none;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2rem;
    }

    .review-panel.show { display: block; }

    .review-panel .review-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .review-panel .review-header h2 { font-size: 1.15rem; font-weight: 600; }

    .close-review {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.25rem;
        cursor: pointer;
    }

    .close-review:hover { color: var(--text-primary); }

    .documents-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .doc-card {
        background: var(--bg-hover);
        border-radius: var(--radius-md);
        padding: 1rem;
        text-align: center;
    }

    .doc-card .doc-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
        font-weight: 500;
    }

    .doc-card .doc-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--accent-light);
        color: var(--accent);
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        font-weight: 500;
        transition: all var(--transition);
    }

    .doc-card .doc-link:hover { background: var(--accent); color: #fff; }

    .review-form label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }

    .review-form textarea {
        width: 100%;
        min-height: 100px;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.875rem;
        outline: none;
        resize: vertical;
        margin-bottom: 1rem;
    }

    .review-form textarea:focus { border-color: var(--accent); }

    .review-actions {
        display: flex;
        gap: 0.75rem;
    }

    .btn-sm { padding: 0.5rem 1rem; font-size: 0.825rem; }

    @media (max-width: 768px) {
        .filters-bar { flex-direction: column; }
        .documents-grid { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <h1><i class="fas fa-user-check" style="color: var(--accent); margin-right: 0.5rem;"></i> KYC Verifications</h1>
    </div>

    <form method="GET" action="{{ route('admin.verifications') }}" class="filters-bar">
        <div class="filter-group">
            <label>Status</label>
            <select name="status">
                <option value="">All Status</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary" style="align-self: flex-end;">
            <i class="fas fa-filter"></i> Filter
        </button>
    </form>

    <div class="table-card">
        <div class="table-responsive">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Document Type</th>
                        <th>Submitted</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse(($verifications ?? []) as $verification)
                        <tr>
                            <td style="font-weight: 500;">{{ $verification->user->name ?? 'N/A' }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $verification->type ?? 'N/A')) }}</td>
                            <td style="white-space: nowrap; color: var(--text-secondary);">{{ $verification->created_at?->format('M d, Y') }}</td>
                            <td><span class="badge badge-{{ $verification->status ?? 'pending' }}">{{ ucfirst($verification->status ?? 'pending') }}</span></td>
                            <td>
                                <button type="button" class="action-btn" onclick="openReview({{ json_encode($verification) }})">
                                    <i class="fas fa-search"></i> Review
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="text-align: center; padding: 3rem; color: var(--text-muted);">
                                <i class="fas fa-user-check" style="font-size: 2rem; opacity: 0.3; display: block; margin-bottom: 0.75rem;"></i>
                                No verifications found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @include('partials.table-pagination', ['paginator' => $verifications, 'label' => 'verifications'])
    </div>

    {{-- Review Panel --}}
    <div class="review-panel" id="reviewPanel">
        <div class="review-header">
            <h2><i class="fas fa-file-alt" style="color: var(--accent); margin-right: 0.5rem;"></i> Document Review — <span id="reviewUserName"></span></h2>
            <button class="close-review" onclick="closeReview()"><i class="fas fa-times"></i></button>
        </div>

        <div class="documents-grid">
            <div class="doc-card">
                <div class="doc-label">ID Front</div>
                <a href="#" id="docFront" class="doc-link" target="_blank">
                    <i class="fas fa-image"></i> View Document
                </a>
            </div>
            <div class="doc-card">
                <div class="doc-label">ID Back</div>
                <a href="#" id="docBack" class="doc-link" target="_blank">
                    <i class="fas fa-image"></i> View Document
                </a>
            </div>
            <div class="doc-card">
                <div class="doc-label">Selfie</div>
                <a href="#" id="docSelfie" class="doc-link" target="_blank">
                    <i class="fas fa-image"></i> View Document
                </a>
            </div>
        </div>

        <form method="POST" id="reviewForm" class="review-form">
            @csrf
            @method('PUT')
            <input type="hidden" name="status" id="reviewStatus" value="">
            <label for="admin_notes">Admin Notes</label>
            <textarea name="admin_notes" id="reviewNotes" placeholder="Notes about this verification..."></textarea>

            <div class="review-actions">
                <button type="button" class="btn btn-success btn-sm" onclick="document.getElementById('reviewStatus').value='approved';document.getElementById('reviewForm').submit();">
                    <i class="fas fa-check"></i> Approve
                </button>
                <button type="button" class="btn btn-danger btn-sm" onclick="document.getElementById('reviewStatus').value='rejected';document.getElementById('reviewForm').submit();">
                    <i class="fas fa-times"></i> Reject
                </button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script>
    function openReview(verification) {
        document.getElementById('reviewUserName').textContent = verification.user?.name || 'Unknown';

        const storageBase = '/storage/';
        document.getElementById('docFront').href = verification.document_front ? storageBase + verification.document_front : '#';
        document.getElementById('docBack').href = verification.document_back ? storageBase + verification.document_back : '#';
        document.getElementById('docSelfie').href = verification.selfie ? storageBase + verification.selfie : '#';

        document.getElementById('reviewForm').action = '/admin/verifications/' + verification.id;
        document.getElementById('reviewNotes').value = verification.admin_notes || '';

        document.getElementById('reviewPanel').classList.add('show');
        document.getElementById('reviewPanel').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function closeReview() {
        document.getElementById('reviewPanel').classList.remove('show');
    }
</script>
@endpush