@extends('admin.layouts.master')

@section('title', 'Document Verification')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        .doc-card {
            transition: all 0.2s;
            border: 1px solid #e2e8f0;
            cursor: pointer;
        }

        .doc-card:hover {
            border-color: #4f46e5;
            background: #f8fafc;
        }

        .doc-preview-container {
            background: #1e293b;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .badge-pending {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #ffedd5;
        }

        .badge-verified {
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #dcfce7;
        }

        .avatar-initial {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border-radius: 50%;
            background: #e0e7ff;
            color: #4f46e5;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">

        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h1 class="h4 fw-bold text-dark mb-1">Document Verification</h1>
                <p class="text-muted small">Review and approve mandatory student documents.</p>
            </div>

            {{-- Filter Tabs --}}
            <div class="btn-group">
                <a href="{{ route('admin.documents.verification', ['status' => 'pending']) }}"
                    class="btn btn-sm {{ $status == 'pending' ? 'btn-primary' : 'btn-white border' }}">
                    Pending Review
                </a>
                <a href="{{ route('admin.documents.verification', ['status' => 'verified']) }}"
                    class="btn btn-sm {{ $status == 'verified' ? 'btn-primary' : 'btn-white border' }}">
                    Verified History
                </a>
            </div>
        </div>

        <div class="row g-4">
            {{-- LEFT COLUMN: DOCUMENT LIST --}}
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="fw-bold m-0 text-uppercase small text-muted">Queue ({{ $documents->total() }})</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            @forelse($documents as $doc)
                                <div class="list-group-item p-3 doc-card"
                                    onclick="previewDoc({{ $doc->id }}, '{{ $doc->file_url }}', '{{ $doc->file_type }}', '{{ $doc->student->name }}', '{{ $doc->document_name }}')">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-initial me-3">
                                            {{ substr($doc->student->name ?? 'S', 0, 1) }}
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <span
                                                    class="fw-bold text-dark">{{ $doc->student->name ?? 'Unknown Student' }}</span>
                                                <span
                                                    class="badge {{ $doc->is_verified ? 'badge-verified' : 'badge-pending' }} rounded-pill px-2">
                                                    {{ $doc->is_verified ? 'Verified' : 'Pending' }}
                                                </span>
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <span class="text-primary small fw-medium">{{ $doc->document_name }}</span>
                                                <span class="text-muted small"
                                                    style="font-size: 0.75rem;">{{ $doc->created_at->diffForHumans() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-5">
                                    <div class="mb-3 text-muted opacity-50">
                                        <i class="ri-folder-check-line" style="font-size: 3rem;"></i>
                                    </div>
                                    <h6 class="text-muted">No documents found in this queue.</h6>
                                </div>
                            @endforelse
                        </div>
                    </div>
                    <div class="card-footer bg-white">
                        {{ $documents->links() }}
                    </div>
                </div>
            </div>

            {{-- RIGHT COLUMN: PREVIEW PANE --}}
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm h-100" id="previewCard">
                    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold m-0" id="previewTitle">Select a document to preview</h6>

                        {{-- Action Buttons (Hidden initially) --}}
                        <div id="actionButtons" class="d-none">
                            <button class="btn btn-sm btn-danger me-2" onclick="rejectDoc()">
                                <i class="ri-close-circle-line me-1"></i> Reject
                            </button>
                            <button class="btn btn-sm btn-success" onclick="approveDoc()">
                                <i class="ri-checkbox-circle-line me-1"></i> Approve
                            </button>
                        </div>
                    </div>

                    <div class="card-body p-0 bg-dark d-flex align-items-center justify-content-center"
                        style="min-height: 500px;">
                        <div id="previewContent" class="text-center text-white-50">
                            <i class="ri-eye-line fs-1 mb-2"></i>
                            <p>Preview will appear here</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- HIDDEN INPUTS FOR JS --}}
    <input type="hidden" id="current_doc_id">

@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

    <script>
        // --- 1. Preview Logic ---
        function previewDoc(id, url, type, studentName, docName) {
            // Update Header
            $('#previewTitle').html(`<span class="text-primary">${docName}</span> - ${studentName}`);
            $('#current_doc_id').val(id);

            // Show Buttons
            $('#actionButtons').removeClass('d-none');

            // Render Content based on Type
            let contentHtml = '';
            if (type === 'pdf') {
                contentHtml = `<iframe src="${url}" width="100%" height="600px" style="border:none;"></iframe>`;
            } else {
                contentHtml = `<img src="${url}" class="img-fluid" style="max-height: 600px; max-width: 100%;">`;
            }

            $('#previewContent').html(contentHtml).removeClass('text-white-50 text-center');
        }

        // --- 2. Approve Logic ---
        function approveDoc() {
            let id = $('#current_doc_id').val();
            if (!id) return;

            Swal.fire({
                title: 'Approve Document?',
                text: "This will mark the document as verified in the student's profile.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#10b981',
                confirmButtonText: 'Yes, Approve'
            }).then((result) => {
                if (result.isConfirmed) {
                    performAction("{{ route('admin.documents.approve') }}", id);
                }
            });
        }

        // --- 3. Reject Logic ---
        function rejectDoc() {
            let id = $('#current_doc_id').val();
            if (!id) return;

            Swal.fire({
                title: 'Reject Document?',
                text: "This will DELETE the file and require the student to upload again.",
                icon: 'error',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                confirmButtonText: 'Yes, Reject & Delete'
            }).then((result) => {
                if (result.isConfirmed) {
                    performAction("{{ route('admin.documents.reject') }}", id);
                }
            });
        }

        // --- 4. AJAX Helper ---
        function performAction(url, id) {
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    document_id: id
                },
                success: function(res) {
                    Swal.fire('Success', res.message, 'success').then(() => {
                        location.reload(); // Reload to refresh list
                    });
                },
                error: function(err) {
                    Swal.fire('Error', 'Something went wrong.', 'error');
                }
            });
        }
    </script>
@endpush