@extends('applicant.applications.step-layout')

@section('title', 'Education Qualifications')
@section('step-title', 'Education Qualifications')
@section('step-description', 'Please provide your educational background details')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'education']) }}">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-graduation-cap"></i>
            Educational Qualifications
        </h3>
        
        <div id="education-container">
            @php
                $educations = old('education', $formData['education'] ?? []);
                if (empty($educations)) {
                    $educations = [[]]; // Start with one empty education entry
                }
            @endphp
            
            @foreach($educations as $index => $education)
            <div class="education-entry" data-index="{{ $index }}">
                <div class="entry-header">
                    <h4 class="entry-title">
                        <i class="fas fa-certificate"></i>
                        Qualification {{ $index + 1 }}
                    </h4>
                    @if($index > 0)
                        <button type="button" class="btn-remove" onclick="removeEducation({{ $index }})">
                            <i class="fas fa-trash"></i>
                        </button>
                    @endif
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-md">
                        <label for="education_{{ $index }}_degree" class="form-label">
                            Degree/Qualification <span class="required">*</span>
                        </label>
                        <input type="text" name="education[{{ $index }}][degree]" 
                               id="education_{{ $index }}_degree" class="form-control" 
                               value="{{ old("education.{$index}.degree", $education['degree'] ?? '') }}" 
                               placeholder="e.g., Ph.D., M.Tech, B.Tech" required>
                        @error("education.{$index}.degree")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="education_{{ $index }}_specialization" class="form-label">
                            Specialization/Subject
                        </label>
                        <input type="text" name="education[{{ $index }}][specialization]" 
                               id="education_{{ $index }}_specialization" class="form-control" 
                               value="{{ old("education.{$index}.specialization", $education['specialization'] ?? '') }}" 
                               placeholder="e.g., Computer Science, Mechanical Engineering">
                        @error("education.{$index}.specialization")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-lg">
                        <label for="education_{{ $index }}_institution" class="form-label">
                            Institution/College <span class="required">*</span>
                        </label>
                        <input type="text" name="education[{{ $index }}][institution]" 
                               id="education_{{ $index }}_institution" class="form-control" 
                               value="{{ old("education.{$index}.institution", $education['institution'] ?? '') }}" 
                               placeholder="Name of institution/college" required>
                        @error("education.{$index}.institution")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="education_{{ $index }}_university" class="form-label">
                            University/Board <span class="required">*</span>
                        </label>
                        <input type="text" name="education[{{ $index }}][university]" 
                               id="education_{{ $index }}_university" class="form-control" 
                               value="{{ old("education.{$index}.university", $education['university'] ?? '') }}" 
                               placeholder="Name of university/board" required>
                        @error("education.{$index}.university")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-sm">
                        <label for="education_{{ $index }}_year_of_completion" class="form-label">
                            Year of Completion <span class="required">*</span>
                        </label>
                        <input type="number" name="education[{{ $index }}][year_of_completion]" 
                               id="education_{{ $index }}_year_of_completion" class="form-control" 
                               value="{{ old("education.{$index}.year_of_completion", $education['year_of_completion'] ?? '') }}" 
                               min="1950" max="{{ date('Y') + 5 }}" placeholder="YYYY" required>
                        @error("education.{$index}.year_of_completion")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label for="education_{{ $index }}_percentage" class="form-label">
                            Percentage/Marks
                        </label>
                        <input type="number" name="education[{{ $index }}][percentage]" 
                               id="education_{{ $index }}_percentage" class="form-control" 
                               value="{{ old("education.{$index}.percentage", $education['percentage'] ?? '') }}" 
                               min="0" max="100" step="0.01" placeholder="85.5">
                        @error("education.{$index}.percentage")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label for="education_{{ $index }}_cgpa" class="form-label">
                            CGPA/GPA
                        </label>
                        <input type="number" name="education[{{ $index }}][cgpa]" 
                               id="education_{{ $index }}_cgpa" class="form-control" 
                               value="{{ old("education.{$index}.cgpa", $education['cgpa'] ?? '') }}" 
                               min="0" max="10" step="0.01" placeholder="8.5">
                        @error("education.{$index}.cgpa")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label for="education_{{ $index }}_division_class" class="form-label">
                            Division/Class
                        </label>
                        <select name="education[{{ $index }}][division_class]" 
                                id="education_{{ $index }}_division_class" class="form-control">
                            <option value="">Select</option>
                            <option value="First Class with Distinction" {{ old("education.{$index}.division_class", $education['division_class'] ?? '') == 'First Class with Distinction' ? 'selected' : '' }}>First Class with Distinction</option>
                            <option value="First Class" {{ old("education.{$index}.division_class", $education['division_class'] ?? '') == 'First Class' ? 'selected' : '' }}>First Class</option>
                            <option value="Second Class" {{ old("education.{$index}.division_class", $education['division_class'] ?? '') == 'Second Class' ? 'selected' : '' }}>Second Class</option>
                            <option value="Third Class" {{ old("education.{$index}.division_class", $education['division_class'] ?? '') == 'Third Class' ? 'selected' : '' }}>Third Class</option>
                        </select>
                        @error("education.{$index}.division_class")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="add-more-container">
            <button type="button" class="btn btn-outline" onclick="addEducation()">
                <i class="fas fa-plus"></i>
                Add Another Qualification
            </button>
        </div>
    </div>
</form>

@php
    $currentStep = 'education';
    $previousStep = 'personal_details';
    $nextStep = 'experience';
@endphp
@endsection

@push('styles')
<style>
.education-entry {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.entry-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
}

.entry-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

.btn-remove {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-remove:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.add-more-container {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .education-entry {
        padding: 1rem;
    }
    
    .entry-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
</style>
@endpush

@push('scripts')
<script>
let educationIndex = {{ count($educations) }};

function addEducation() {
    const container = document.getElementById('education-container');
    const newEntry = createEducationEntry(educationIndex);
    container.appendChild(newEntry);
    educationIndex++;
}

function removeEducation(index) {
    const entry = document.querySelector(`[data-index="${index}"]`);
    if (entry) {
        entry.remove();
    }
}

function createEducationEntry(index) {
    const div = document.createElement('div');
    div.className = 'education-entry';
    div.setAttribute('data-index', index);
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-certificate"></i>
                Qualification ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeEducation(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="education_${index}_degree" class="form-label">
                    Degree/Qualification <span class="required">*</span>
                </label>
                <input type="text" name="education[${index}][degree]" 
                       id="education_${index}_degree" class="form-control" 
                       placeholder="e.g., Ph.D., M.Tech, B.Tech" required>
            </div>
            
            <div class="form-group form-col-md">
                <label for="education_${index}_specialization" class="form-label">
                    Specialization/Subject
                </label>
                <input type="text" name="education[${index}][specialization]" 
                       id="education_${index}_specialization" class="form-control" 
                       placeholder="e.g., Computer Science, Mechanical Engineering">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-lg">
                <label for="education_${index}_institution" class="form-label">
                    Institution/College <span class="required">*</span>
                </label>
                <input type="text" name="education[${index}][institution]" 
                       id="education_${index}_institution" class="form-control" 
                       placeholder="Name of institution/college" required>
            </div>
            
            <div class="form-group form-col-md">
                <label for="education_${index}_university" class="form-label">
                    University/Board <span class="required">*</span>
                </label>
                <input type="text" name="education[${index}][university]" 
                       id="education_${index}_university" class="form-control" 
                       placeholder="Name of university/board" required>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-sm">
                <label for="education_${index}_year_of_completion" class="form-label">
                    Year of Completion <span class="required">*</span>
                </label>
                <input type="number" name="education[${index}][year_of_completion]" 
                       id="education_${index}_year_of_completion" class="form-control" 
                       min="1950" max="${new Date().getFullYear() + 5}" placeholder="YYYY" required>
            </div>
            
            <div class="form-group form-col-sm">
                <label for="education_${index}_percentage" class="form-label">
                    Percentage/Marks
                </label>
                <input type="number" name="education[${index}][percentage]" 
                       id="education_${index}_percentage" class="form-control" 
                       min="0" max="100" step="0.01" placeholder="85.5">
            </div>
            
            <div class="form-group form-col-sm">
                <label for="education_${index}_cgpa" class="form-label">
                    CGPA/GPA
                </label>
                <input type="number" name="education[${index}][cgpa]" 
                       id="education_${index}_cgpa" class="form-control" 
                       min="0" max="10" step="0.01" placeholder="8.5">
            </div>
            
            <div class="form-group form-col-sm">
                <label for="education_${index}_division_class" class="form-label">
                    Division/Class
                </label>
                <select name="education[${index}][division_class]" 
                        id="education_${index}_division_class" class="form-control">
                    <option value="">Select</option>
                    <option value="First Class with Distinction">First Class with Distinction</option>
                    <option value="First Class">First Class</option>
                    <option value="Second Class">Second Class</option>
                    <option value="Third Class">Third Class</option>
                </select>
            </div>
        </div>
    `;
    
    return div;
}
</script>
@endpush