@extends('layouts.admin')

@section('title', 'User Migration Audit')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="uil uil-exchange-alt me-2"></i>User Migration Audit</h4>
    </div>

    <!-- Three Action Cards in a Row -->
    <div class="row g-2 mb-2 compact-cards-row">
        <!-- Card 1: Bulk UID Check -->
        <div class="col-md-4 col-12 col-lg-4">
            
            <div class="card h-100 border-primary shadow-sm compact-card py-2 px-2" style="min-height:unset;">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="uil uil-users-alt me-2"></i>Bulk UID Check</h6>
                </div>
                <div class="card-body">
                    <form id="bulk-uid-form" autocomplete="off">
                        <div class="mb-3">
                            <label for="bulk-uid-input" class="form-label small">Enter UIDs</label>  <span class="badge bg-info" id="uid-counter" style="float:right">0 UIDs entered</span>
                    <style>
                        .admin-header {
                            z-index: 1020;
                            position: relative;
                        }
                    </style>
                            <textarea class="form-control" id="bulk-uid-input" name="uid" rows="6" 
                                placeholder="Enter UIDs (comma separated or one per line)&#10;Example:&#10;TKD001,TKD002&#10;or&#10;TKD001&#10;TKD002" required></textarea>
                            <div class="mt-2">
                                
                                <span class="badge bg-warning ms-2 d-none" id="uid-limit-warning">Max: {{ $maxBulkUids }}</span>
                            </div>
                        </div>
                        <div class="container text-center">
                            <div class="row  mb-3">
                                <div class="col-sm-6 p-2 "> <button type="submit" class="btn btn-primary w-100">
                            <i class="uil uil-search me-1"></i>Check UIDs
                        </button></div>
                                <div class="col-sm-6 p-2 "> <button type="button" class="btn btn-outline-secondary w-100 " id="clear-bulk-btn">
                            <i class="uil uil-times me-1"></i>Clear
                        </button></div>
                            </div>                        
                        </div>
                       
                       
                    </form>
                </div>
            </div>
        </div>

        <!-- Card 2: Migration Date Range Filter -->
        <div class="col-md-4 col-12 col-lg-4">
            <div class="card h-100 border-success shadow-sm compact-card py-2 px-2" style="min-height:unset;">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="uil uil-calendar-alt me-2"></i>Migration Date Range</h6>
                </div>
                <div class="card-body">
                    <form id="date-range-form" autocomplete="off">
                        <div class="mb-3">
                            <label for="migration-date-range" class="form-label small">Select Date Range</label>
                            <input type="text" class="form-control" id="migration-date-range" placeholder="Select date range..." readonly>
                            <input type="hidden" id="migration-date-from">
                            <input type="hidden" id="migration-date-to">
                            <div class="form-text">Filter users who migrated within this date range</div>
                        </div>
                        <div class="alert alert-info py-2 small mb-3">
                            <i class="uil uil-info-circle me-1"></i>
                            Select date range and click the button below to view and export users who migrated during that period.
                        </div>
                        <button type="submit" class="btn btn-success w-100">
                            <i class="uil uil-filter me-1"></i>Filter & Show
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Card 3: Import UIDs from CSV/Excel -->
        <div class="col-md-4 col-12 col-lg-4">
            <div class="card h-100 border-info shadow-sm compact-card py-2 px-2" style="min-height:unset;">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="uil uil-import me-2"></i>Import UIDs (CSV/Excel)</h6>
                </div>
                <div class="card-body">
                    <form id="import-form" autocomplete="off">
                        <div class="mb-3">
                            <label for="bulk-import-file" class="form-label small">Upload File</label>
                            <input type="file" class="form-control" id="bulk-import-file" accept=".csv,.xlsx,.xls" required>
                            <div class="form-text">Max 10MB, CSV/XLSX format</div>
                        </div>
                        <div class="alert alert-warning py-2 small mb-3">
                            <i class="uil uil-exclamation-triangle me-1"></i>
                            <strong>File should contain UIDs</strong> in the first column. System will check each UID and return marked file.
                        </div>
                        <button type="submit" class="btn btn-info w-100">
                            <i class="uil uil-file-search-alt me-1"></i>Import & Check
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Common Results Section -->
    <div class="card d-none" id="results-card">
        <div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center">
            <h6 class="mb-0">
                <i class="uil uil-list-ul me-2"></i>Results 
                <span class="badge bg-primary ms-2" id="results-count">0</span>
            </h6>
            <button type="button" class="btn btn-sm btn-success" id="export-csv-btn">
                <i class="uil uil-file-download me-1"></i>Export Results
            </button>
        </div>
            <div class="card-body p-0" style="padding:1.25rem 1rem;">
            <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                <table class="table table-hover table-sm mb-0" id="results-table">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>UID</th>
                            <th>Found In</th>
                            <th>Migration Status</th>
                            <th>Alert</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Payment</th>
                            <th>Expiry</th>
                            <th style="width: 80px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="results-body">
                        <!-- Results will be populated here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Export Progress Modal -->
    <div class="modal fade" id="exportProgressModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="uil uil-export me-2"></i>Exporting Migration Report</h6>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Please wait while we generate your CSV report...</p>
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" id="export-progress-bar" style="width: 0%">
                            <span id="export-progress-text">0%</span>
                        </div>
                    </div>
                    <p class="text-muted small mt-2 mb-0" id="export-progress-info">Initializing...</p>
                </div>
                <div class="modal-footer d-none" id="export-complete-footer">
                    <button type="button" class="btn btn-success" id="download-csv-btn">
                        <i class="uil uil-download-alt me-2"></i>Download CSV
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Details Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">
                        <i class="uil uil-info-circle me-2"></i>Migration Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="detailsModalBody">
                    <!-- Details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include custom styles -->
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-marker {
    position: absolute;
    left: -23px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.timeline-text {
    font-size: 13px;
    margin-bottom: 3px;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
}

.badge-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.compact-cards-row {
    margin-bottom: 0.5rem !important;
}
.compact-card {
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
    min-height: unset !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}


@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<script>
const MAX_BULK_UIDS = {{ $maxBulkUids }};
let currentResults = [];
let exportProgressInterval = null;
let currentProgressKey = null;

$(document).ready(function() {
    // Initialize Flatpickr for migration date range
    const migrationDateRangePicker = flatpickr("#migration-date-range", {
        mode: "range",
        dateFormat: "d/m/Y",
        onChange: function(selectedDates, dateStr, instance) {
            if (selectedDates.length === 2) {
                $('#migration-date-from').val(flatpickr.formatDate(selectedDates[0], 'Y-m-d'));
                $('#migration-date-to').val(flatpickr.formatDate(selectedDates[1], 'Y-m-d'));
            }
        }
    });

    // UID Counter for bulk input
    $('#bulk-uid-input').on('input', function() {
        const input = $(this).val().trim();
        if (input.length === 0) {
            $('#uid-counter').text('0 UIDs entered').removeClass('bg-danger').addClass('bg-info');
            $('#uid-limit-warning').addClass('d-none');
            return;
        }

        const uids = input.split(/[\s,]+/).filter(uid => uid.trim().length > 0);
        const count = uids.length;
        
        $('#uid-counter').text(count + ' UIDs entered');
        
        if (count > MAX_BULK_UIDS) {
            $('#uid-counter').removeClass('bg-info').addClass('bg-danger');
            $('#uid-limit-warning').removeClass('d-none');
        } else {
            $('#uid-counter').removeClass('bg-danger').addClass('bg-info');
            $('#uid-limit-warning').addClass('d-none');
        }
    });

    // Clear bulk input
    $('#clear-bulk-btn').click(function() {
        $('#bulk-uid-input').val('');
        $('#uid-counter').text('0 UIDs entered').removeClass('bg-danger').addClass('bg-info');
        $('#uid-limit-warning').addClass('d-none');
    });

    // Bulk UID Form Submit (Card 1)
    $('#bulk-uid-form').submit(function(e) {
        e.preventDefault();
        const uids = $('#bulk-uid-input').val().trim();
        if (!uids) {
            showToast('error', 'Please enter at least one UID');
            return;
        }

        // Validate count
        const uidArray = uids.split(/[\s,]+/).filter(uid => uid.trim().length > 0);
        if (uidArray.length > MAX_BULK_UIDS) {
            showToast('error', `You entered ${uidArray.length} UIDs. Maximum allowed is ${MAX_BULK_UIDS} UIDs per check.`);
            return;
        }

        checkUIDs(uids);
    });

    // Date Range Form Submit (Card 2)
    $('#date-range-form').submit(function(e) {
        e.preventDefault();
        const dateFrom = $('#migration-date-from').val();
        const dateTo = $('#migration-date-to').val();
        
        if (!dateFrom || !dateTo) {
            showToast('error', 'Please select a date range');
            return;
        }

        // Fetch and display results
        $.ajax({
            url: '{{ route("admin.migration-checker.export-by-date") }}',
            type: 'GET',
            data: {
                date_from: dateFrom,
                date_to: dateTo,
                show_results: true
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                showLoadingOverlay();
            },
            success: function(response) {
                hideLoadingOverlay();
                
                if (response.success && response.results) {
                    currentResults = response.results;
                    displayResults(response.results);
                    $('#results-card').removeClass('d-none');
                    showToast('success', `Found ${response.results.length} users migrated in selected date range`);
                }
            },
            error: function(xhr) {
                hideLoadingOverlay();
                const error = xhr.responseJSON?.error || 'Failed to fetch date range data';
                showToast('error', error);
            }
        });
    });

    // Import Form Submit (Card 3)
    $('#import-form').submit(function(e) {
        e.preventDefault();
        
        const fileInput = $('#bulk-import-file')[0];
        if (!fileInput.files.length) {
            showToast('error', 'Please select a CSV or Excel file');
            return;
        }
        
        const file = fileInput.files[0];
        const fileExt = file.name.split('.').pop().toLowerCase();
        
        // Validate file extension
        if (!['csv', 'xlsx', 'xls'].includes(fileExt)) {
            showToast('error', 'Invalid file format. Please upload CSV or Excel file (.csv, .xlsx, .xls)');
            return;
        }
        
        // Validate file size (10MB)
        if (file.size > 10 * 1024 * 1024) {
            showToast('error', 'File size exceeds 10MB limit');
            return;
        }
        
        const formData = new FormData();
        formData.append('file', file);
        
        $.ajax({
            url: '{{ route("admin.migration-checker.import") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                showLoadingOverlay();
                $('#import-form button[type="submit"]').prop('disabled', true).html('<i class="uil uil-spinner-alt me-1 rotating"></i>Processing...');
            },
            success: function(response) {
                hideLoadingOverlay();
                $('#import-form button[type="submit"]').prop('disabled', false).html('<i class="uil uil-file-search-alt me-1"></i>Import & Check');
                
                if (response.success) {
                    currentResults = response.results;
                    displayResults(response.results);
                    $('#results-card').removeClass('d-none');
                    
                    showToast('success', `✓ Processed ${response.total_checked} UIDs successfully. View results below.`);
                    
                    // Reset file input
                    $('#bulk-import-file').val('');
                    
                    // Scroll to results
                    $('html, body').animate({
                        scrollTop: $('#results-card').offset().top - 100
                    }, 500);
                }
            },
            error: function(xhr) {
                hideLoadingOverlay();
                $('#import-form button[type="submit"]').prop('disabled', false).html('<i class="uil uil-file-search-alt me-1"></i>Import & Check');
                
                let errorMsg = 'Failed to import file';
                
                if (xhr.status === 422) {
                    // Validation error
                    const errors = xhr.responseJSON?.errors;
                    if (errors && errors.file) {
                        errorMsg = errors.file[0];
                    }
                } else if (xhr.responseJSON?.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                
                showToast('error', '✗ ' + errorMsg);
                console.error('Import error:', xhr);
            }
        });
    });

    // Export CSV
    $('#export-csv-btn').click(function() {
        if (currentResults.length === 0) {
            showToast('warning', 'No results to export');
            return;
        }
        exportCSV();
    });

    // View Details Button Handler
    $(document).on('click', '.view-details-btn', function() {
        const resultData = $(this).data('result');
        const detailsHtml = createDetailedView(resultData);
        $('#detailsModalBody').html(detailsHtml);
        $('#detailsModal').modal('show');
    });
});

// Check UIDs via AJAX
function checkUIDs(uidInput) {
    const data = {
        uid: uidInput
    };

    $.ajax({
        url: '{{ route("admin.migration-checker.check") }}',
        type: 'POST',
        data: data,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        beforeSend: function() {
            showLoadingOverlay();
        },
        success: function(response) {
            hideLoadingOverlay();
            
            if (response.success) {
                currentResults = response.results;
                displayResults(response.results);
                $('#results-card').removeClass('d-none');
                showToast('success', `Checked ${response.total_checked} UIDs and found ${response.total_results} results`);
            }
        },
        error: function(xhr) {
            hideLoadingOverlay();
            const error = xhr.responseJSON?.error || 'Failed to check UIDs';
            showToast('error', error);
        }
    });
}

// Display Results in Table
function displayResults(results) {
    const tbody = $('#results-body');
    tbody.empty();
    
    if (results.length === 0) {
        tbody.append(`
            <tr>
                <td colspan="10" class="text-center text-muted py-4">
                    <i class="uil uil-inbox" style="font-size: 3rem;"></i>
                    <p class="mb-0">No results found</p>
                </td>
            </tr>
        `);
        $('#results-count').text('0');
        return;
    }
    
    $('#results-count').text(results.length);
    
    results.forEach((result, index) => {
        const row = createResultRow(result, index + 1);
        tbody.append(row);
    });
}

// Create Result Row
function createResultRow(result, srNo) {
    const portalUser = result.portal_user;
    const oldProfile = result.old_profile;
    const alert = result.alert;
    
    const name = portalUser?.name || oldProfile?.name || 'N/A';
    const email = portalUser?.email || oldProfile?.email || 'N/A';
    const expiryDate = portalUser?.expiry_date ? new Date(portalUser.expiry_date).toLocaleDateString('en-GB') : 'N/A';
    const paymentStatus = portalUser?.paid ? '<span class="badge bg-success">Paid</span>' : '<span class="badge bg-danger">Unpaid</span>';
    
    const foundInBadges = result.found_in.map(location => {
        const badgeClass = location === 'portal_users' ? 'bg-primary' : location === 'profile' ? 'bg-secondary' : 'bg-info';
        const displayName = location === 'portal_users' ? 'Portal' : location === 'profile' ? 'Old System' : location;
        return `<span class="badge ${badgeClass} me-1">${displayName}</span>`;
    }).join('');
    
    const rowId = 'result-' + srNo;
    
    // Badge color logic for migration status
    let migrationBadge = 'bg-secondary';
    if (result.migration_status === 'Migrated') migrationBadge = 'bg-success';
    else if (result.migration_status === 'Pending Migration') migrationBadge = 'bg-warning';
    else if (result.migration_status === 'Not Found') migrationBadge = 'bg-dark';
    else if (result.migration_status === 'New User (No Migration Needed)') migrationBadge = 'bg-info';
    else if (result.migration_status.includes('Old Profile Not Found')) migrationBadge = 'bg-danger';

    return `
        <tr>
            <td>${srNo}</td>
            <td><strong>${result.uid}</strong></td>
            <td>${foundInBadges || '<span class="badge bg-dark">Not Found</span>'}</td>
            <td><span class="badge ${migrationBadge}">${result.migration_status}</span></td>
            <td>
                <span class="badge ${alert.badge_class}">
                    <i class="${alert.icon} me-1"></i>${alert.level.toUpperCase()}
                </span>
            </td>
            <td>${name}</td>
            <td><small>${email}</small></td>
            <td>${portalUser ? paymentStatus : 'N/A'}</td>
            <td><small>${expiryDate}</small></td>
            <td>
                <button class="btn btn-sm btn-primary view-details-btn" type="button" data-result='${JSON.stringify(result).replace(/'/g, "&#39;")}'>
                    <i class="uil uil-eye"></i> 
                </button>
            </td>
        </tr>
    `;
}

// Create Detailed View
function createDetailedView(result) {
    const portalUser = result.portal_user;
    const oldProfile = result.old_profile;
    const payments = result.payments;
    const timeline = result.timeline;
    
    let html = '<div class="p-3">';
    html += '<div class="row g-3">';
    
    // Alert Message
    html += `
        <div class="col-12">
            <div class="alert alert-${result.alert.level === 'critical' ? 'danger' : result.alert.level === 'warning' ? 'warning' : result.alert.level === 'success' ? 'success' : 'info'} mb-0">
                <i class="${result.alert.icon} me-2"></i>${result.alert.message}
            </div>
        </div>
    `;
    
    // User Details Cards
    html += '<div class="col-md-6">';
    
    // Portal User Card
    if (portalUser) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="uil uil-user me-2"></i>Portal User Details</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr><th width="40%">UID:</th><td>${portalUser.reg_uid || 'N/A'}</td></tr>
                        <tr><th>Old UID:</th><td>${portalUser.old_uid || 'N/A'}</td></tr>
                        <tr><th>Name:</th><td>${portalUser.name}</td></tr>
                        <tr><th>Email:</th><td>${portalUser.email}</td></tr>
                        <tr><th>Mobile:</th><td>${portalUser.mobile || 'N/A'}</td></tr>
                        <tr><th>Is Old User:</th><td>${portalUser.is_old_user ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>'}</td></tr>
                        <tr><th>Expired:</th><td>${portalUser.expired ? '<span class="badge bg-danger">Yes</span>' : '<span class="badge bg-success">No</span>'}</td></tr>
                        <tr><th>Paid:</th><td>${portalUser.paid ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-danger">No</span>'}</td></tr>
                        <tr><th>Valid From:</th><td>${portalUser.valid_from ? new Date(portalUser.valid_from).toLocaleDateString('en-GB') : 'N/A'}</td></tr>
                        <tr><th>Valid Up To:</th><td>${portalUser.valid_up_to ? new Date(portalUser.valid_up_to).toLocaleDateString('en-GB') : 'N/A'}</td></tr>
                        <tr><th>State:</th><td>${portalUser.state}</td></tr>
                        <tr><th>District:</th><td>${portalUser.district}</td></tr>
                    </table>
                    <a href="${portalUser.profile_link}" target="_blank" class="btn btn-sm btn-phoenix-primary mt-2">
                        <i class="uil uil-external-link-alt me-1"></i>View Full Profile
                    </a>
                </div>
            </div>
        `;
    }
    
    // Old Profile Card
    if (oldProfile) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0"><i class="uil uil-database me-2"></i>Old System Profile</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr><th width="40%">Reg ID:</th><td>${oldProfile.reg_id}</td></tr>
                        <tr><th>Name:</th><td>${oldProfile.name}</td></tr>
                        <tr><th>Email:</th><td>${oldProfile.email || 'N/A'}</td></tr>
                        <tr><th>Mobile:</th><td>${oldProfile.mobile || 'N/A'}</td></tr>
                        <tr><th>Profile Type:</th><td>${oldProfile.profile || 'N/A'}</td></tr>
                        <tr><th>Payment ID:</th><td>${oldProfile.payment_id || 'N/A'}</td></tr>
                        <tr><th>Order ID:</th><td>${oldProfile.order_id || 'N/A'}</td></tr>
                    </table>
                </div>
            </div>
        `;
    }
    
    html += '</div>';
    
    // Timeline and Payment History
    html += '<div class="col-md-6">';
    
    // Timeline
    if (timeline && timeline.length > 0) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="uil uil-clock me-2"></i>Migration Timeline</h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
        `;
        
        timeline.forEach(event => {
            html += `
                <div class="timeline-item">
                    <div class="timeline-marker bg-${event.color}"></div>
                    <div class="timeline-content">
                        <h6 class="timeline-title">${event.title}</h6>
                        <p class="timeline-text mb-1">${event.description}</p>
                        <small class="text-muted">
                            <i class="uil uil-calendar-alt me-1"></i>${event.formatted_date}
                            <span class="ms-2">(${event.relative_date})</span>
                        </small>
                    </div>
                </div>
            `;
        });
        
        html += `
                    </div>
                </div>
            </div>
        `;
    }
    
    // Payment History
    if (payments && payments.length > 0) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="uil uil-bill me-2"></i>Payment History</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Purpose</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
        `;
        
        payments.forEach(payment => {
            const statusBadge = payment.status === 'captured' ? 'bg-success' : 'bg-warning';
            html += `
                <tr>
                    <td><small>${payment.purpose}</small></td>
                    <td><small><strong>${payment.formatted_amount}</strong></small></td>
                    <td><span class="badge ${statusBadge}">${payment.status}</span></td>
                    <td><small>${payment.formatted_date}</small></td>
                </tr>
            `;
        });
        
        html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    }
    
    // Months Since Migration
    if (result.months_since_migration !== null) {
        html += `
            <div class="alert alert-info">
                <i class="uil uil-calendar-alt me-2"></i>
                <strong>Time Since Migration:</strong> ${result.months_since_migration} months
                <small class="d-block text-muted mt-1">(Migration system launched: June 2024)</small>
            </div>
        `;
    }
    
    html += '</div>';
    html += '</div>';
    html += '</div>';
    
    return html;
}

// Export CSV
function exportCSV() {
    if (!currentResults || currentResults.length === 0) {
        showToast('warning', 'No results to export');
        return;
    }
    
    // Generate CSV from current results directly
    const csvContent = generateCSVFromResults(currentResults);
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    
    link.setAttribute('href', url);
    link.setAttribute('download', 'migration_results_' + Date.now() + '.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    showToast('success', '✓ Exported ' + currentResults.length + ' results to CSV');
}

// Generate CSV content from results
function generateCSVFromResults(results) {
    // Simplified to 5 essential columns as requested
    const headers = ['UID', 'Migration Status', 'Name', 'Email', 'Remarks'];
    
    // Removed columns (can be added back in future if needed):
    // 'Found In', 'Alert Level', 'Mobile', 'Payment Status', 'Paid', 'Expired', 'Expiry Date'
    
    let csv = headers.join(',') + '\n';
    
    results.forEach((result) => {
        const portalUser = result.portal_user;
        const oldProfile = result.old_profile;
        
        const name = portalUser?.name || oldProfile?.name || 'N/A';
        const email = portalUser?.email || oldProfile?.email || 'N/A';
        const remarks = result.alert?.message || '';
        
        // Escape fields that might contain commas or quotes
        const row = [
            escapeCSV(result.uid),
            escapeCSV(result.migration_status),
            escapeCSV(name),
            escapeCSV(email),
            escapeCSV(remarks)
        ];
        
        csv += row.join(',') + '\n';
    });
    
    return csv;
}

// Escape CSV fields
function escapeCSV(field) {
    if (field === null || field === undefined) {
        return '';
    }
    
    const str = String(field);
    
    // If field contains comma, quote, or newline, wrap in quotes and escape quotes
    if (str.includes(',') || str.includes('"') || str.includes('\n')) {
        return '"' + str.replace(/"/g, '""') + '"';
    }
    
    return str;
}

// Utility Functions
function showLoadingOverlay() {
    $('body').append(`
        <div id="loading-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
            <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    `);
}

function hideLoadingOverlay() {
    $('#loading-overlay').remove();
}

function showToast(type, message) {
    const bgClass = type === 'success' ? 'bg-success' : type === 'error' ? 'bg-danger' : type === 'warning' ? 'bg-warning' : 'bg-info';
    const icon = type === 'success' ? 'uil-check-circle' : type === 'error' ? 'uil-times-circle' : type === 'warning' ? 'uil-exclamation-triangle' : 'uil-info-circle';
    
    const toast = $(`
        <div class="toast align-items-center text-white ${bgClass} border-0" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 10000;">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="uil ${icon} me-2"></i>${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `);
    
    $('body').append(toast);
    const bsToast = new bootstrap.Toast(toast[0]);
    bsToast.show();
    
    setTimeout(() => toast.remove(), 5000);
}
</script>
@endsection