@extends('layouts.admin')

@section('title', 'Black Belt Certificate Generator')

@section('content')
<div class="content">
    <div class="pb-3">
        <div class="row g-4">
            <div class="col-12">
                <!-- Page Header -->
                <div class="mb-4 d-none">
                    <h2 class="mb-2">Black Belt Certificate Generator</h2>
                    <h5 class="text-body-tertiary fw-semibold">
                        Upload Excel/CSV to generate certificates in bulk (supports manual payments)
                    </h5>
                </div>

                <!-- Instructions Card -->
                <div class="card mb-4">
                    <div class="card-header bg-body-highlight">
                        <h5 class="mb-0">
                            <span data-feather="info" class="me-2"></span> Black Belt Certificate Generator ( Instructions )
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">📋 Required Columns:</h6>
                                <ul class="mb-3">
                                    <li><strong>UID</strong> - User registration ID (e.g., MH012024-1234)</li>
                                    <li><strong>First Name</strong> - User's first name</li>
                                    <li><strong>Last Name</strong> - User's last name</li>
                                    <li><strong>DOB</strong> - Date of birth</li>
                                </ul>
                                
                                <h6 class="text-primary">📝 Optional Columns:</h6>
                                <ul>
                                    <li>Middle Name</li>
                                    <li>Email (for validation)</li>
                                    <li>State</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary">✅ Payment Verification:</h6>
                                <ul class="mb-3">
                                    <li>System checks <strong>online payments</strong> (it_belt_payment = 1)</li>
                                    <li>Also checks <strong>manual payments</strong> (verified records)</li>
                                    <li>Users without any payment are <strong>skipped</strong></li>
                                </ul>

                                <h6 class="text-primary">⚙️ Processing:</h6>
                                <ul>
                                    <li>Batch size: Up to 500 records recommended</li>
                                    <li>Multiple sheets supported in Excel files</li>
                                    <li>Download expires after <strong>45 minutes</strong></li>
                                    <li>Full audit trail maintained</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Upload Form -->
                <div class="card mb-4">
                    <div class="card-header bg-body-highlight">
                        <h5 class="mb-0">
                            <span data-feather="upload" class="me-2"></span>Step 1: Upload Data File
                        </h5>
                    </div>
                    <div class="card-body">
                        <form id="uploadForm" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="dataFile" class="form-label">Select Excel or CSV File</label>
                                <input type="file" class="form-control" id="dataFile" name="data_file" 
                                       accept=".csv,.xlsx,.xls" required>
                                <div class="form-text">Supported formats: CSV, XLSX, XLS (Max: 10MB)</div>
                            </div>
                            <button type="submit" class="btn btn-primary" id="analyzeBtn">
                                <span data-feather="search" class="me-1"></span>Analyze File
                            </button>
                        </form>

                        <!-- Loading Indicator -->
                        <div id="loadingIndicator" class="mt-3" style="display: none;">
                            <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            Analyzing file...
                        </div>

                        <!-- Error Display -->
                        <div id="errorDisplay" class="alert alert-danger mt-3" style="display: none;"></div>
                    </div>
                </div>

                <!-- Sheet Selection & Column Mapping (Hidden until analysis complete) -->
                <div id="mappingSection" style="display: none;">
                    <!-- Sheet Selection -->
                    <div class="card mb-4" id="sheetSelectionCard" style="display: none;">
                        <div class="card-header bg-body-highlight">
                            <h5 class="mb-0">
                                <span data-feather="layers" class="me-2"></span>Step 2: Select Sheets to Process
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="sheetsList"></div>
                        </div>
                    </div>

                    <!-- Column Mapping -->
                    <div class="card mb-4">
                        <div class="card-header bg-body-highlight">
                            <h5 class="mb-0">
                                <span data-feather="columns" class="me-2"></span>Step 3: Map Columns
                            </h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">
                                Map Excel columns to certificate fields. System auto-detects common column names.
                            </p>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">UID Column <span class="text-danger">*</span></label>
                                    <select class="form-select" id="mapUid" required></select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">First Name <span class="text-danger">*</span></label>
                                    <select class="form-select" id="mapFirstName" required></select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Last Name <span class="text-danger">*</span></label>
                                    <select class="form-select" id="mapLastName" required></select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                    <select class="form-select" id="mapDob" required></select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Middle Name (Optional)</label>
                                    <select class="form-select" id="mapMiddleName">
                                        <option value="">-- Not Mapped --</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Email (Optional)</label>
                                    <select class="form-select" id="mapEmail">
                                        <option value="">-- Not Mapped --</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Missing Fields Warning -->
                            <div id="missingFieldsWarning" class="alert alert-warning" style="display: none;">
                                <strong>Missing Required Fields:</strong>
                                <ul id="missingFieldsList" class="mb-0"></ul>
                            </div>
                        </div>
                    </div>

                    <!-- Generate Button -->
                    <div class="card mb-4">
                        <div class="card-header bg-body-highlight">
                            <h5 class="mb-0">
                                <span data-feather="play-circle" class="me-2"></span>Step 4: Generate Certificates
                            </h5>
                        </div>
                        <div class="card-body">
                            <button type="button" class="btn btn-success btn-lg" id="generateBtn" disabled>
                                <span data-feather="award" class="me-1"></span>Generate Certificates
                            </button>
                            
                            <!-- Generation Progress -->
                            <div id="generationProgress" class="mt-3" style="display: none;">
                                <div class="d-flex align-items-center">
                                    <div class="spinner-border spinner-border-sm text-success me-2" role="status">
                                        <span class="visually-hidden">Generating...</span>
                                    </div>
                                    <span>Generating certificates... Please wait.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Results Section (Hidden until generation complete) -->
                <div id="resultsSection" style="display: none;">
                    <div class="card">
                        <div class="card-header bg-success-subtle">
                            <h5 class="mb-0 text-success">
                                <span data-feather="check-circle" class="me-2"></span>Generation Complete
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- Stats -->
                            <div class="row text-center mb-4">
                                <div class="col-md-3">
                                    <div class="border rounded p-3">
                                        <h2 class="text-primary" id="statTotal">0</h2>
                                        <small class="text-muted">Total Records</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="border rounded p-3">
                                        <h2 class="text-success" id="statSuccessful">0</h2>
                                        <small class="text-muted">Generated</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="border rounded p-3">
                                        <h2 class="text-warning" id="statManual">0</h2>
                                        <small class="text-muted">Manual Payments</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="border rounded p-3">
                                        <h2 class="text-danger" id="statSkipped">0</h2>
                                        <small class="text-muted">Skipped</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Download Button -->
                            <div class="mb-4 text-center">
                                <a href="#" id="downloadLink" class="btn btn-lg btn-primary" download>
                                    <span data-feather="download" class="me-2"></span>Download Certificates ZIP
                                </a>
                                <p class="text-muted mt-2">
                                    <span data-feather="clock" style="width: 14px; height: 14px;"></span>
                                    Link expires: <strong id="expiresAt"></strong>
                                </p>
                            </div>

                            <!-- Skipped UIDs -->
                            <div id="skippedSection" style="display: none;">
                                <h6 class="text-danger">Skipped Records:</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Row</th>
                                                <th>UID</th>
                                                <th>Reason</th>
                                            </tr>
                                        </thead>
                                        <tbody id="skippedTableBody"></tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="mt-4">
                                <button type="button" class="btn btn-secondary" onclick="location.reload()">
                                    <span data-feather="refresh-cw" class="me-1"></span>Generate More
                                </button>
                                <a href="{{ route('admin.certificates.logs') }}" class="btn btn-outline-primary">
                                    <span data-feather="list" class="me-1"></span>View All Logs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.card {
    margin-bottom: 1rem !important;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let analysisData = null;
let uploadedFile = null;
let progressInterval = null;

// Step 1: Upload and Analyze
$('#uploadForm').on('submit', function(e) {
    e.preventDefault();

    const fileInput = $('#dataFile')[0];
    if (!fileInput.files[0]) {
        Swal.fire({
            icon: 'error',
            title: 'No File Selected',
            text: 'Please select a file to upload'
        });
        return;
    }

    uploadedFile = fileInput.files[0];
    const formData = new FormData();
    formData.append('data_file', uploadedFile);

    Swal.fire({
        title: 'Analyzing File...',
        html: 'Please wait while we analyze your file',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: '{{ route('admin.certificates.analyze') }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(data) {
            Swal.close();
            analysisData = data;
            displayAnalysisResults(data);
            
            Swal.fire({
                icon: 'success',
                title: 'Analysis Complete',
                text: `Found ${data.headers.length} columns and ${data.sheets[0].rows} rows`,
                timer: 2000,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Analysis Failed',
                text: xhr.responseJSON?.message || 'Failed to analyze file'
            });
        }
    });
});

function displayAnalysisResults(data) {
    // Show mapping section
    document.getElementById('mappingSection').style.display = 'block';

    // Show sheet selection if multiple sheets
    if (data.sheets && data.sheets.length > 1) {
        const sheetCard = document.getElementById('sheetSelectionCard');
        const sheetsList = document.getElementById('sheetsList');
        sheetCard.style.display = 'block';
        
        let html = '<div class="mb-2"><small class="text-muted">Select sheets to process:</small></div>';
        data.sheets.forEach((sheet, idx) => {
            html += `
                <div class="form-check">
                    <input class="form-check-input sheet-checkbox" type="checkbox" 
                           value="${sheet.name}" id="sheet${idx}" ${idx === 0 ? 'checked' : ''}>
                    <label class="form-check-label" for="sheet${idx}">
                        <strong>${sheet.name}</strong> - ${sheet.rows} rows
                    </label>
                </div>
            `;
        });
        sheetsList.innerHTML = html;
    }

    // Populate column dropdowns
    const fields = ['Uid', 'FirstName', 'LastName', 'Dob', 'MiddleName', 'Email'];
    fields.forEach(field => {
        const select = document.getElementById('map' + field);
        select.innerHTML = '<option value="">-- Select Column --</option>';
        
        data.headers.forEach(header => {
            const selected = data.mapping && data.mapping[field.toLowerCase()] === header ? 'selected' : '';
            select.innerHTML += `<option value="${header}" ${selected}>${header}</option>`;
        });
    });

    // Show missing fields warning
    if (data.missing && data.missing.length > 0) {
        const warning = document.getElementById('missingFieldsWarning');
        const list = document.getElementById('missingFieldsList');
        warning.style.display = 'block';
        list.innerHTML = data.missing.map(f => `<li>${f}</li>`).join('');
    }

    // Enable generate button
    document.getElementById('generateBtn').disabled = false;
}

// Step 4: Generate Certificates
$('#generateBtn').on('click', function() {
    // Validate required mappings
    const mapping = {
        uid: $('#mapUid').val(),
        first_name: $('#mapFirstName').val(),
        last_name: $('#mapLastName').val(),
        dob: $('#mapDob').val(),
        middle_name: $('#mapMiddleName').val() || null,
        email: $('#mapEmail').val() || null,
    };

    if (!mapping.uid || !mapping.first_name || !mapping.last_name || !mapping.dob) {
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please map all required fields (UID, First Name, Last Name, DOB)'
        });
        return;
    }

    // Get selected sheets
    const selectedSheets = $('.sheet-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    const formData = new FormData();
    formData.append('data_file', uploadedFile);
    formData.append('mapping', JSON.stringify(mapping));
    formData.append('include_sheets', JSON.stringify(selectedSheets));

    $('#generateBtn').prop('disabled', true);

    // Show progress modal
    Swal.fire({
        title: 'Generating Certificates',
        html: `
            <div class="text-center">
                <div class="progress mb-3" style="height: 30px;">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                         role="progressbar" style="width: 0%">0%</div>
                </div>
                <p id="progressText" class="mb-2">Initializing...</p>
                <p id="progressDetails" class="text-muted small">Please wait, this may take a few minutes</p>
            </div>
        `,
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: () => {
            // Start progress polling
            startProgressPolling();
        }
    });

    // Generate certificates
    $.ajax({
        url: '{{ route('admin.certificates.generate') }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        xhr: function() {
            const xhr = new window.XMLHttpRequest();
            // Track upload progress if needed
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    const percentComplete = (evt.loaded / evt.total) * 100;
                    updateProgress(Math.min(percentComplete * 0.1, 10), 'Uploading file...');
                }
            }, false);
            return xhr;
        },
        success: function(data) {
            stopProgressPolling();
            Swal.close();
            
            displayResults(data);
            
            Swal.fire({
                icon: 'success',
                title: 'Certificates Generated!',
                html: `
                    <p><strong>${data.stats.successful}</strong> certificates generated successfully</p>
                    ${data.stats.skipped > 0 ? `<p class="text-warning">${data.stats.skipped} records skipped</p>` : ''}
                `,
                confirmButtonText: 'View Results'
            });
        },
        error: function(xhr) {
            stopProgressPolling();
            $('#generateBtn').prop('disabled', false);
            
            Swal.fire({
                icon: 'error',
                title: 'Generation Failed',
                text: xhr.responseJSON?.message || 'Failed to generate certificates',
                footer: xhr.status === 504 ? 'The process took too long. Please try with fewer records.' : ''
            });
        }
    });
});

// Progress polling system
function startProgressPolling() {
    let progress = 10;
    let stage = 'processing';
    
    progressInterval = setInterval(() => {
        if (progress < 95) {
            progress += Math.random() * 3;
            
            // Update stage based on progress
            let text = 'Processing records...';
            let details = '';
            
            if (progress < 30) {
                text = 'Validating data...';
                details = 'Checking user records in database';
            } else if (progress < 60) {
                text = 'Generating certificates...';
                details = 'Creating PDF certificates with QR codes';
            } else if (progress < 90) {
                text = 'Creating ZIP archive...';
                details = 'Bundling certificates for download';
            } else {
                text = 'Finalizing...';
                details = 'Almost done!';
            }
            
            updateProgress(Math.min(progress, 95), text, details);
        }
    }, 500);
}

function stopProgressPolling() {
    if (progressInterval) {
        clearInterval(progressInterval);
        progressInterval = null;
    }
    updateProgress(100, 'Complete!', 'All certificates generated successfully');
}

function updateProgress(percent, text, details = '') {
    const progressBar = $('#progressBar');
    const progressText = $('#progressText');
    const progressDetails = $('#progressDetails');
    
    if (progressBar.length) {
        progressBar.css('width', percent + '%').text(Math.round(percent) + '%');
        progressText.text(text);
        if (details) {
            progressDetails.text(details);
        }
    }
}

function displayResults(data) {
    // Show results section
    $('#resultsSection').show();
    $('#resultsSection')[0].scrollIntoView({ behavior: 'smooth' });

    // Update stats
    $('#statTotal').text(data.stats.total);
    $('#statSuccessful').text(data.stats.successful);
    $('#statManual').text(data.stats.manual_payment);
    $('#statSkipped').text(data.stats.skipped);

    // Set download link
    $('#downloadLink').attr('href', data.download_url);
    $('#expiresAt').text(data.expires_at);

    // Show skipped records if any
    if (data.skipped_uids && data.skipped_uids.length > 0) {
        $('#skippedSection').show();
        const skippedHtml = data.skipped_uids.map(item => `
            <tr>
                <td>${item.row}</td>
                <td>${item.uid}</td>
                <td>${item.reason}</td>
            </tr>
        `).join('');
        $('#skippedTableBody').html(skippedHtml);
    }
}

function hideError() {
    document.getElementById('errorDisplay').style.display = 'none';
}

// Initialize Feather icons
if (typeof feather !== 'undefined') {
    feather.replace();
}
</script>
@endpush
@endsection