@extends('layouts.admin')

@section('title', 'Student Certificate Verification')

@section('content_header')
    <h1>Student Certificate Verification</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Student Certification Management</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary btn-sm" id="sync-btn">
                            Sync Now
                        </button>
                        <button type="button" class="btn btn-info btn-sm" id="test-connection-btn">
                            Test Connection
                        </button>
                        <a href="{{ route('admin.certification.verification.student.export', request()->query()) }}" class="btn btn-success btn-sm">
                            Export CSV
                        </a>
                        <a href="{{ route('admin.certification.verification.student.manage-permissions') }}" class="btn btn-warning btn-sm">
                            Manage Permissions
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Statistics Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="fas fa-graduation-cap"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Students</span>
                                    <span class="info-box-number">{{ number_format($stats['total_certifications']) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-success"><i class="fas fa-clock"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Last Sync</span>
                                    <span class="info-box-number">{{ $stats['last_sync_human'] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-warning"><i class="fas fa-calendar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Last Sync Date</span>
                                    <span class="info-box-number">{{ $stats['last_sync'] ? \Carbon\Carbon::parse($stats['last_sync'])->format('M d, Y') : 'Never' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-primary"><i class="fas fa-database"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Status</span>
                                    <span class="info-box-number">
                                        @if($stats['last_sync'])
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">No Data</span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Search and Filter Form -->
                    <form method="GET" action="{{ route('admin.certification.verification.student.index') }}" class="mb-3" id="searchForm">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="search">Search</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="Student ID, Name, Course...">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="result">Result</label>
                                    <select class="form-control" id="result" name="result">
                                        <option value="">All Results</option>
                                        <option value="Pass" {{ request('result') == 'Pass' ? 'selected' : '' }}>Pass</option>
                                        <option value="Fail" {{ request('result') == 'Fail' ? 'selected' : '' }}>Fail</option>
                                        <option value="DSQ" {{ request('result') == 'DSQ' ? 'selected' : '' }}>Disqualified</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary form-control">
                                        Search
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('admin.certification.verification.student.index') }}" class="btn btn-secondary form-control">
                                        Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- Certifications Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Student ID</th>
                                    <th>Name</th>
                                    <th>Course</th>
                                    <th>Country</th>
                                    <th>Synced At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($certifications as $certification)
                                    <tr>
                                        <td>
                                            <strong>{{ $certification->student_id }}</strong>
                                        </td>
                                        <td>{{ $certification->first_name }} {{ $certification->last_name }}</td>
                                        <td>{{ Str::limit($certification->course, 30) ?: 'N/A' }}</td>
                                        <td>{{ $certification->country ?: 'N/A' }}</td>
                                        <td>{{ $certification->synced_at ? \Carbon\Carbon::parse($certification->synced_at)->format('M d, Y h:i A') : 'N/A' }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info view-btn" 
                                                    data-id="{{ $certification->id }}">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle"></i>
                                                No student certifications found. 
                                                @if($stats['total_certifications'] == 0)
                                                    <a href="#" id="sync-btn-inline">Click here to sync from Google Sheets</a>.
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @include('admin.partials.pagination', ['items' => $certifications, 'itemName' => 'certifications'])
                </div>
            </div>
        </div>
    </div>

    <!-- Certification Details Modal -->
    <div class="modal fade" id="certificationModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Student Certification Details</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="certificationDetails">
                    <!-- Content will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
@parent
<script>
$(document).ready(function() {
    // Sync button handler
    $('#sync-btn, #sync-btn-inline').on('click', function(e) {
        e.preventDefault();
        const btn = $(this);
        const originalText = btn.html();
        
        btn.prop('disabled', true).html('Syncing...');
        
        $.post('{{ route("admin.certification.verification.student.sync") }}', {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.status === 'success') {
                let message = response.message;
                if (response.stats) {
                    message += `<br><small>Stats: Inserted: ${response.stats.inserted}, Updated: ${response.stats.updated}, Skipped: ${response.stats.skipped}, Deleted: ${response.stats.deleted || 0}</small>`;
                }
                showAlert('success', 'Sync Completed!', message + '<br>Refreshing page...');
                setTimeout(() => window.location.reload(true), 3000);
            } else {
                showAlert('danger', 'Error!', response.message);
            }
        })
        .fail(function(xhr) {
            const response = xhr.responseJSON;
            showAlert('danger', 'Error!', response?.message || 'Sync failed. Please try again.');
        })
        .always(function() {
            btn.prop('disabled', false).html(originalText);
        });
    });

    // Test connection button handler
    $('#test-connection-btn').on('click', function(e) {
        e.preventDefault();
        const btn = $(this);
        const originalText = btn.html();
        
        btn.prop('disabled', true).html('Testing...');
        
        $.post('{{ route("admin.certification.verification.student.test-connection") }}', {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.success) {
                let message = 'Connected to Google Sheets: ' + response.sheet_title;
                if (response.validated) {
                    message += ' <span class="badge badge-success">✓ Name Validated</span>';
                } else {
                    message += ' <span class="badge badge-warning">⚠ Name Not Validated</span>';
                }
                showAlert('success', 'Connection Successful!', message);
            } else {
                let errorMsg = response.error || response.message;
                if (response.expected && response.found) {
                    errorMsg += '<br><strong>Expected:</strong> "' + response.expected + '"<br><strong>Found:</strong> "' + response.found + '"';
                    errorMsg += '<br><small>Update GOOGLE_SHEETS_EXPECTED_NAME in .env to match the actual spreadsheet name.</small>';
                }
                showAlert('danger', 'Connection Failed!', errorMsg);
            }
        })
        .fail(function(xhr) {
            const response = xhr.responseJSON;
            showAlert('danger', 'Connection Failed!', response?.message || 'Connection test failed.');
        })
        .always(function() {
            btn.prop('disabled', false).html(originalText);
        });
    });

    // View button handler using event delegation
    $(document).on('click', '.view-btn', function(e) {
        e.preventDefault();
        const id = $(this).data('id');
        viewCertificationDetails(id);
    });

    // Function to show Bootstrap alerts
    function showAlert(type, title, message) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                <strong>${title}</strong> ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `;
        
        // Remove existing alerts
        $('.alert').remove();
        
        // Add new alert at the top of the content
        $('.content').prepend(alertHtml);
        
        // Auto-hide after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut();
        }, 5000);
    }

    // Function to load and display certification details
    function viewCertificationDetails(id) {
        // Show loading spinner
    $('#certificationDetails').html(`
        <div class="text-center">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
            <p>Loading student certification details...</p>
        </div>
    `);
    $('#certificationModal').modal('show');
    
    // Fetch certification details via AJAX
    $.ajax({
        url: '/admin/certification/verification/student/details/' + id,
        method: 'GET',
        success: function(response) {
            if (response.status === 'success') {
                const cert = response.data;
                
                // Create result badge
                let resultBadge = '';
                switch(cert.result) {
                    case 'Pass':
                        resultBadge = '<span class="badge badge-success">Pass</span>';
                        break;
                    case 'Fail':
                        resultBadge = '<span class="badge badge-danger">Fail</span>';
                        break;
                    case 'DSQ':
                        resultBadge = '<span class="badge badge-warning">DSQ</span>';
                        break;
                    default:
                        resultBadge = '<span class="badge badge-secondary">' + (cert.result || 'N/A') + '</span>';
                }
                
                // Create final result badge
                let finalResultBadge = '';
                if (cert.final_result) {
                    switch(cert.final_result) {
                        case 'Pass':
                            finalResultBadge = '<span class="badge badge-success">Pass</span>';
                            break;
                        case 'Fail':
                            finalResultBadge = '<span class="badge badge-danger">Fail</span>';
                            break;
                        case 'DSQ':
                            finalResultBadge = '<span class="badge badge-warning">DSQ</span>';
                            break;
                        default:
                            finalResultBadge = '<span class="badge badge-secondary">' + cert.final_result + '</span>';
                    }
                }
                
                $('#certificationDetails').html(`
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">
                                        <i class="fas fa-graduation-cap"></i> 
                                        Student Details - ${cert.student_id}
                                    </h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6><strong>Personal Information:</strong></h6>
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Student ID:</strong></td>
                                                    <td>${cert.student_id || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Name:</strong></td>
                                                    <td>${cert.first_name || ''} ${cert.last_name || ''}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Email:</strong></td>
                                                    <td>${cert.email || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Country:</strong></td>
                                                    <td>${cert.country || 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <h6><strong>Course Information:</strong></h6>
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Course:</strong></td>
                                                    <td>${cert.course || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Start Date:</strong></td>
                                                    <td>${cert.start_date ? cert.start_date.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>End Date:</strong></td>
                                                    <td>${cert.end_date ? cert.end_date.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Last Synced:</strong></td>
                                                    <td>${cert.synced_at ? new Date(cert.synced_at).toLocaleString() : 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <h6><strong>First Attempt Results:</strong></h6>
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Result:</strong></td>
                                                    <td>${resultBadge}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Total Marks:</strong></td>
                                                    <td>${cert.total_marks || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Exam Date:</strong></td>
                                                    <td>${cert.exam_date ? cert.exam_date.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Result Date:</strong></td>
                                                    <td>${cert.result_date ? cert.result_date.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <h6><strong>Section Marks:</strong></h6>
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Section 1:</strong></td>
                                                    <td>${cert.section1 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 2:</strong></td>
                                                    <td>${cert.section2 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 3:</strong></td>
                                                    <td>${cert.section3 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 4:</strong></td>
                                                    <td>${cert.section4 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 5:</strong></td>
                                                    <td>${cert.section5 || 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    
                                    ${cert.resit_result ? `
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <h6><strong>Resit Attempt:</strong></h6>
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Resit Result:</strong></td>
                                                    <td><span class="badge badge-${cert.resit_result == 'Pass' ? 'success' : 'danger'}">${cert.resit_result}</span></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Resit Total Marks:</strong></td>
                                                    <td>${cert.resit_total_mark || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Resit Exam Date:</strong></td>
                                                    <td>${cert.resit_exam_date ? cert.resit_exam_date.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Resit Result Date:</strong></td>
                                                    <td>${cert.resit_result_date ? cert.resit_result_date.split('T')[0] : 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <h6><strong>Resit Section Marks:</strong></h6>
                                            <table class="table table-sm table-borderless">
                                                <tr>
                                                    <td><strong>Section 1:</strong></td>
                                                    <td>${cert.resit_section_1 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 2:</strong></td>
                                                    <td>${cert.resit_section_2 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 3:</strong></td>
                                                    <td>${cert.resit_section_3 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 4:</strong></td>
                                                    <td>${cert.resit_section_4 || 'N/A'}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Section 5:</strong></td>
                                                    <td>${cert.resit_section_5 || 'N/A'}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    ` : ''}
                                    
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <h6><strong>Final Result:</strong></h6>
                                            <div class="border rounded p-3 bg-light text-center">
                                                <h4>${finalResultBadge}</h4>
                                                ${cert.final_total_marks ? '<p class="mb-0">Total Marks: ' + cert.final_total_marks + '</p>' : ''}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
            } else {
                $('#certificationDetails').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        ${response.message || 'Failed to load student certification details.'}
                    </div>
                `);
            }
        },
        error: function(xhr) {
            let errorMessage = 'Failed to load student certification details.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            $('#certificationDetails').html(`
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                    ${errorMessage}
                </div>
            `);
        }
    });
}
});

// Handle search form to remove empty parameters
$('#searchForm').on('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const params = new URLSearchParams();
    
    // Only add non-empty parameters
    for (let [key, value] of formData.entries()) {
        if (value && value.trim() !== '') {
            params.append(key, value);
        }
    }
    
    // Build clean URL
    const cleanUrl = this.action + (params.toString() ? '?' + params.toString() : '');
    
    // Navigate to clean URL
    window.location.href = cleanUrl;
});
</script>
@stop