@extends('layouts.applicant.applicant')

@section('title', 'Education Qualifications')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item active">Education Qualifications</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Education Qualifications</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'education-qualification']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Step
            </a>
        </div>
    </div>

    <!-- Education Qualifications List -->
    <div class="card shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-graduation-cap me-2"></i>Education Qualifications
            </h6>
            @if($application->isEditable())
                <a href="{{ route('applicant.education-qualification.create', $application) }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-plus me-1"></i>Add Qualification
                </a>
            @endif
        </div>
        <div class="card-body">
            @if($qualifications->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Order</th>
                                <th>Degree Level</th>
                                <th>Degree Name</th>
                                <th>Institution</th>
                                <th>University/Board</th>
                                <th>Year</th>
                                <th>Grade</th>
                                <th>Certificate</th>
                                @if($application->isEditable())
                                    <th>Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($qualifications as $qualification)
                            <tr>
                                <td>{{ $qualification->order }}</td>
                                <td class="fw-bold">{{ $qualification->degree_level }}</td>
                                <td>{{ $qualification->degree_name }}</td>
                                <td>{{ $qualification->institution_name }}</td>
                                <td>{{ $qualification->university_board }}</td>
                                <td>{{ $qualification->passing_year }}</td>
                                <td>
                                    {{ $qualification->grade_percentage }} 
                                    <small class="text-muted">({{ $qualification->grade_type }})</small>
                                </td>
                                <td>
                                    @if($qualification->certificate)
                                        <div class="d-flex align-items-center">
                                            <span class="badge bg-success me-2">
                                                <i class="fas fa-check me-1"></i>Uploaded
                                            </span>
                                            <a href="{{ asset('storage/' . $qualification->certificate) }}" 
                                               target="_blank" 
                                               class="btn btn-sm btn-outline-info"
                                               title="View Certificate">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </div>
                                        <small class="text-muted d-block mt-1">
                                            {{ basename($qualification->certificate) }}
                                        </small>
                                    @else
                                        <span class="badge bg-warning">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Not Uploaded
                                        </span>
                                        @if($application->isEditable())
                                            <small class="text-muted d-block mt-1">
                                                <a href="{{ route('applicant.education-qualification.edit', [$application, $qualification]) }}" 
                                                   class="text-decoration-none">
                                                    Click to upload
                                                </a>
                                            </small>
                                        @endif
                                    @endif
                                </td>
                                @if($application->isEditable())
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('applicant.education-qualification.edit', [$application, $qualification]) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('applicant.education-qualification.show', [$application, $qualification]) }}" 
                                           class="btn btn-sm btn-outline-info" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <form action="{{ route('applicant.education-qualification.destroy', [$application, $qualification]) }}" 
                                              method="POST" class="d-inline" 
                                              onsubmit="return confirmDelete('{{ $qualification->degree_name }}', '{{ $qualification->institution_name }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete Qualification">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between mt-4">
                    @if($application->isEditable())
                        <a href="{{ route('applicant.education-qualification.create', $application) }}" class="btn btn-success">
                            <i class="fas fa-plus me-2"></i>Add Another Qualification
                        </a>
                    @else
                        <span class="text-muted">
                            <i class="fas fa-lock me-1"></i>Application finalized - editing disabled
                        </span>
                    @endif
                    
                    <a href="{{ route('applicant.applications.step', [$application, 'education-qualification']) }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Step
                    </a>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-graduation-cap fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">No Education Qualifications Added</h5>
                    <p class="text-muted mb-4">
                        You haven't added any education qualifications yet. Please add your educational background.
                    </p>
                    @if($application->isEditable())
                        <a href="{{ route('applicant.education-qualification.create', $application) }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Add Education Qualification
                        </a>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #5a5c69;
}

.btn-group .btn {
    margin-right: 2px;
}
</style>
@endsection

@push('scripts')
<script>
function confirmDelete(degreeName, institutionName) {
    return confirm(
        'Are you sure you want to delete this qualification?\n\n' +
        'Degree: ' + degreeName + '\n' +
        'Institution: ' + institutionName + '\n\n' +
        'This action cannot be undone and will also delete any uploaded certificate.'
    );
}

// Add tooltips to action buttons
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap tooltips if available
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
@endpush