@extends('layouts.applicant.applicant')

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

@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 Qualification</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 Qualification</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Previous Step
            </a>
        </div>
    </div>

    <!-- Dynamic Progress Indicator -->
    @include('applicant.applications.partials.progress-indicator')

    <!-- Education Qualification Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-graduation-cap me-2"></i>Education Qualifications
            </h6>
        </div>
        <div class="card-body">
            @if($application->educationQualifications->count() > 0)
                <!-- Show existing education qualifications -->
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    Education qualifications have been added successfully.
                    @if(!$application->isEditable())
                        <br><small class="text-muted"><i class="fas fa-lock me-1"></i>Application is finalized and cannot be edited.</small>
                    @endif
                </div>
                
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Degree</th>
                                <th>Institution</th>
                                <th>University/Board</th>
                                <th>Year</th>
                                <th>Grade</th>
                                @if($application->isEditable())
                                    <th>Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($application->educationQualifications as $education)
                            <tr>
                                <td class="fw-bold">{{ $education->degree_name }}</td>
                                <td>{{ $education->institution_name }}</td>
                                <td>{{ $education->university_board }}</td>
                                <td>{{ $education->passing_year }}</td>
                                <td>
                                    {{ $education->grade_percentage }}
                                    @if($education->grade_type)
                                        <small class="text-muted">({{ $education->grade_type }})</small>
                                    @endif
                                </td>
                                @if($application->isEditable())
                                <td>
                                    <a href="{{ route('applicant.education-qualification.edit', [$application, $education]) }}" 
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('applicant.education-qualification.destroy', [$application, $education]) }}" 
                                          method="POST" class="d-inline" 
                                          onsubmit="return confirm('Are you sure you want to delete this education qualification?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between">
                    @if($application->isEditable())
                        <a href="{{ route('applicant.education-qualification.create', $application) }}" class="btn btn-success">
                            <i class="fas fa-plus me-2"></i>Add More Education
                        </a>
                    @else
                        <span class="text-muted">
                            <i class="fas fa-lock me-1"></i>Application finalized - editing disabled
                        </span>
                    @endif
                    
                    @php
                        $nextStep = $currentStep->getNextStep();
                    @endphp
                    @if($nextStep)
                        <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-primary">
                            <i class="fas fa-arrow-right me-2"></i>Next: {{ $nextStep->name }}
                        </a>
                    @else
                        <a href="{{ route('applicant.applications.index') }}" class="btn btn-success">
                            <i class="fas fa-check me-2"></i>Application Complete
                        </a>
                    @endif
                </div>
            @else
                <!-- Show message to add education qualifications -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please add your education qualifications to continue with the application process.
                </div>
                
                <div class="text-center py-5">
                    <i class="fas fa-graduation-cap fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">Education Qualifications Required</h5>
                    <p class="text-muted mb-4">
                        You need to add at least one education qualification before proceeding to the next step.
                    </p>
                    <a href="{{ route('applicant.education-qualification.create', $application) }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Add Education Qualification
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e3e6f0;
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: white;
    padding: 0 15px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e3e6f0;
    color: #5a5c69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.step.active .step-number {
    background: #667eea;
    color: white;
}

.step.completed .step-number {
    background: #1cc88a;
    color: white;
}

.step-title {
    font-size: 0.875rem;
    color: #5a5c69;
    text-align: center;
    font-weight: 500;
}

.step.active .step-title {
    color: #667eea;
    font-weight: 600;
}

.step.completed .step-title {
    color: #1cc88a;
    font-weight: 600;
}

.form-label {
    font-weight: 600;
    color: #5a5c69;
    font-size: 0.875rem;
}

.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;
    font-size: 0.875rem;
}

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