@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body">
    <div class="container-fluid">

        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Reports</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Student Payment Document Report</a></li>
            </ol>
        </div>

        <div class="row">
            <!-- Filter Card -->
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Filter</h4>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Session</label>
                            <select id="filter_session_id" class="form-control">
                                @foreach($sessions as $s)
                                    <option value="{{ $s->id }}" {{ ($currentSession && $currentSession->id == $s->id) ? 'selected' : '' }}>
                                        {{ $s->session_name ?? $s->name ?? ('Session #'.$s->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Class</label>
                            <select id="filter_class_id" class="form-control">
                                <option value="">All</option>
                                @foreach($classes as $c)
                                    <option value="{{ $c->id }}">
                                        {{ $c->class_name ?? $c->name ?? ('Class #'.$c->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Type</label>
                            <select id="filter_type" class="form-control">
                                <option value="all">All</option>
                                <option value="complete">Complete (Document Uploaded)</option>
                                <option value="incomplete">Incomplete (No Document)</option>
                            </select>
                        </div>

                        <button type="button" id="btnApplyFilter" class="btn btn-primary w-100">
                            Apply Filter
                        </button>

                        <div class="mt-3 small text-muted">
                            * Filter করলে page reload হবে না।
                        </div>
                    </div>
                </div>
            </div>

            <!-- Report Card -->
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h4 class="card-title mb-0">Report</h4>
                        <div class="text-muted">
                            Total: <span id="reportCount">0</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="reportLoader" class="py-4 text-center" style="display:none;">
                            <i class="fa fa-spinner fa-spin fa-2x"></i>
                            <p class="mt-2">Loading...</p>
                        </div>

                        <div id="reportArea">
                            {{-- initial empty --}}
                            <div class="text-center text-muted py-5">
                                Apply filter to load report.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
(function () {
    function buildQuery() {
        return {
            session_id: document.getElementById('filter_session_id').value,
            class_id: document.getElementById('filter_class_id').value,
            type: document.getElementById('filter_type').value,
        };
    }

    async function loadReport() {
        const loader = document.getElementById('reportLoader');
        const area   = document.getElementById('reportArea');
        const countEl= document.getElementById('reportCount');

        loader.style.display = 'block';
        area.innerHTML = '';

        try {
            const params = buildQuery();
            const url = new URL("{{ route('admin.reports.student_payment_documents.data') }}", window.location.origin);
            Object.keys(params).forEach(k => {
                if (params[k]) {
                    url.searchParams.append(k, params[k]);
                }
            });

            const res = await fetch(url.toString(), {
                method: 'GET',
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            });

            const data = await res.json();

            if (!data.ok) {
                area.innerHTML = `<div class="alert alert-danger">Failed to load report.</div>`;
                countEl.textContent = '0';
                return;
            }

            area.innerHTML = data.html;
            countEl.textContent = data.count ?? 0;

        } catch (e) {
            area.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
            countEl.textContent = '0';
        } finally {
            loader.style.display = 'none';
        }
    }

    document.getElementById('btnApplyFilter').addEventListener('click', loadReport);

    // Optional: dropdown change এ auto load
    document.getElementById('filter_session_id').addEventListener('change', loadReport);
    document.getElementById('filter_class_id').addEventListener('change', loadReport);
    document.getElementById('filter_type').addEventListener('change', loadReport);

    // Initial load (current session default)
    loadReport();

    // ============= File Upload Handler (Event Delegation) =============
    // Use event delegation to handle dynamically loaded file inputs
    document.getElementById('reportArea').addEventListener('change', async function(e) {
        if (!e.target.classList.contains('doc-file-input')) return;
        
        const input = e.target;
        const file = input.files[0];
        if (!file) return;

        const studentId = input.dataset.studentId;
        const sessionId = input.dataset.sessionId;
        const wrapper = input.closest('.upload-document-wrapper');
        const statusDiv = wrapper.querySelector('.upload-status');
        const uploadBtn = wrapper.querySelector('.upload-doc-btn');

        console.log('🔵 File selected:', file.name);
        console.log('🔵 Student ID:', studentId, 'Session ID:', sessionId);

        // Validate file size (max 5MB)
        if (file.size > 5 * 1024 * 1024) {
            statusDiv.innerHTML = '<span class="badge badge-danger"><i class="fa fa-times"></i> ফাইল সাইজ বেশি (সর্বোচ্চ ৫MB)</span>';
            input.value = '';
            return;
        }

        // Show uploading status
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> আপলোড হচ্ছে...';
        statusDiv.innerHTML = '<span class="text-info"><strong>আপলোড হচ্ছে...</strong></span>';

        try {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('student_id', studentId);
            formData.append('session_id', sessionId);

            const uploadUrl = "{{ route('admin.reports.student_payment_documents.upload') }}";
            console.log('🔵 Upload URL:', uploadUrl);

            const response = await fetch(uploadUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: formData
            });

            console.log('✅ Response status:', response.status);
            const result = await response.json();
            console.log('✅ Response data:', result);

            if (result.success) {
                statusDiv.innerHTML = '<span class="badge badge-success"><i class="fa fa-check-circle"></i> সফলভাবে আপলোড হয়েছে!</span>';
                uploadBtn.innerHTML = '<i class="fa fa-check"></i> সফল';
                uploadBtn.classList.remove('btn-primary');
                uploadBtn.classList.add('btn-success');
                
                // Update the document column first
                const tr = wrapper.closest('tr');
                const docCell = tr.querySelector('td:nth-child(7)');
                if (result.file_name && result.file_url) {
                    docCell.innerHTML = `
                        <a href="${result.file_url}" target="_blank" class="text-primary">
                            <i class="fa fa-file-alt"></i> ${result.file_name}
                        </a>
                        <span class="badge badge-success badge-sm ml-1">নতুন</span>
                    `;
                }
                
                // Replace the upload button with "Uploaded" status after 2 seconds
                setTimeout(() => {
                    wrapper.innerHTML = `
                        <span class="text-success small">
                            <i class="fa fa-check-circle"></i> আপলোড হয়েছে
                        </span>
                    `;
                }, 2000);

            } else {
                console.error('❌ Upload failed:', result.message);
                statusDiv.innerHTML = `<span class="badge badge-danger"><i class="fa fa-times"></i> ${result.message || 'আপলোড ব্যর্থ হয়েছে'}</span>`;
                uploadBtn.disabled = false;
                uploadBtn.innerHTML = '<i class="fa fa-upload"></i> আপলোড করুন';
                input.value = '';
            }
        } catch (error) {
            console.error('❌ Upload error:', error);
            statusDiv.innerHTML = '<span class="badge badge-danger"><i class="fa fa-times"></i> আপলোড ব্যর্থ হয়েছে। আবার চেষ্টা করুন।</span>';
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = '<i class="fa fa-upload"></i> আপলোড করুন';
            input.value = '';
        }
    });
})();
</script>
@endsection