@extends('adminlte::page')

@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">
                        <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>Result</th>
                                    <th>Total Marks</th>
                                    <th>Exam Date</th>
                                    <th>Resit</th>
                                    <th>Final Result</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>
                                            @if($certification->result)
                                                <span class="badge badge-{{ $certification->result == 'Pass' ? 'success' : ($certification->result == 'Fail' ? 'danger' : 'warning') }}">
                                                    {{ $certification->result }}
                                                </span>
                                            @else
                                                <span class="badge badge-secondary">N/A</span>
                                            @endif
                                        </td>
                                        <td>{{ $certification->total_marks ?: 'N/A' }}</td>
                                        <td>{{ $certification->exam_date ? \Carbon\Carbon::parse($certification->exam_date)->format('M d, Y') : 'N/A' }}</td>
                                        <td>
                                            @if($certification->has_attempted_resit)
                                                <span class="badge badge-info">Yes</span>
                                            @elseif($certification->has_resit_request)
                                                <span class="badge badge-warning">Requested</span>
                                            @else
                                                <span class="badge badge-secondary">No</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $certification->final_result == 'Pass' ? 'success' : ($certification->final_result == 'Fail' ? 'danger' : 'warning') }}">
                                                {{ $certification->final_result }}
                                            </span>
                                        </td>
                                        <td>{{ $certification->synced_at ? \Carbon\Carbon::parse($certification->synced_at)->format('M d, Y H:i') : 'N/A' }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info" 
                                                    onclick="viewCertification({{ $certification->id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" 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 -->
                    @if($certifications->hasPages())
                        <div class="d-flex justify-content-center">
                            {{ $certifications->links() }}
                        </div>
                    @endif
                </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')
<script>
$(document).ready(function() {
    // Sync button handler
    $('#sync-btn, #sync-btn-inline').click(function() {
        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') {
                toastr.success(response.message);
                setTimeout(() => location.reload(), 2000);
            } else {
                toastr.error(response.message);
            }
        })
        .fail(function(xhr) {
            const response = xhr.responseJSON;
            toastr.error(response?.message || 'Sync failed. Please try again.');
        })
        .always(function() {
            btn.prop('disabled', false).html(originalText);
        });
    });

    // Test connection button handler
    $('#test-connection-btn').click(function() {
        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) {
                toastr.success('Connection successful! Sheet: ' + response.sheet_title);
            } else {
                toastr.error('Connection failed: ' + response.error);
            }
        })
        .fail(function(xhr) {
            const response = xhr.responseJSON;
            toastr.error(response?.message || 'Connection test failed.');
        })
        .always(function() {
            btn.prop('disabled', false).html(originalText);
        });
    });
});

function viewCertification(id) {
    // For now, just show a placeholder
    $('#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');
    
    // In a real implementation, you would fetch the details via AJAX
    setTimeout(() => {
        $('#certificationDetails').html(`
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                Student certification details view will be implemented in a future update.
                This would show all the certification information in a detailed format.
            </div>
        `);
    }, 1000);
}
</script>
@stop