@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 class="info-box">
            <i class="fas fa-info-circle"></i>
            <p>Add your educational qualifications starting from the highest degree. Click "Add Education" to open the form in a popup window.</p>
        </div>
        
        <!-- Add More Button -->
        <div class="text-center">
            <button type="button" class="add-more-btn" onclick="openAddModal('educationModal')">
                <i class="fas fa-plus"></i>
                Add Education Qualification
            </button>
        </div>
        
        <!-- Education Table Container -->
        <div class="items-table-container" id="education-container" style="display: none;">
            <div class="table-header">
                <h4 class="table-title">
                    <i class="fas fa-list"></i>
                    Added Qualifications
                </h4>
            </div>
            
            <div class="table-responsive">
                <table class="items-table">
                    <thead>
                        <tr>
                            <th>Degree</th>
                            <th>Specialization</th>
                            <th>Institution</th>
                            <th>University</th>
                            <th>Year</th>
                            <th>Percentage/CGPA</th>
                            <th class="actions-column">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="education-container-tbody">
                        <!-- Education entries will be populated here -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Hidden fields for form submission -->
        <div id="hidden-fields-container">
            <!-- Hidden fields will be generated here -->
        </div>
    </div>
</form>

<!-- Education Modal -->
<div id="educationModal" class="modal-overlay" style="display: none;">
    <div class="modal-container">
        <div class="modal-header">
            <h3 class="modal-title">
                <i class="fas fa-graduation-cap"></i>
                <span id="modal-title-text">Add Education Qualification</span>
            </h3>
            <button type="button" class="modal-close" onclick="closeModal('educationModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="modal-body">
            <form id="educationModal-form">
                <input type="hidden" id="edit-index" value="">
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="degree" class="form-label">
                            Degree/Qualification <span class="required">*</span>
                        </label>
                        <input type="text" id="degree" class="form-control" 
                               placeholder="e.g., Ph.D., M.Tech, B.Tech" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="specialization" class="form-label">
                            Specialization/Subject
                        </label>
                        <input type="text" id="specialization" class="form-control" 
                               placeholder="e.g., Computer Science, Mechanical Engineering">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="institution" class="form-label">
                            Institution/College <span class="required">*</span>
                        </label>
                        <input type="text" id="institution" class="form-control" 
                               placeholder="Name of institution/college" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="university" class="form-label">
                            University/Board <span class="required">*</span>
                        </label>
                        <input type="text" id="university" class="form-control" 
                               placeholder="Name of university/board" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="year_of_completion" class="form-label">
                            Year of Completion <span class="required">*</span>
                        </label>
                        <input type="number" id="year_of_completion" class="form-control" 
                               min="1950" max="{{ date('Y') + 5 }}" placeholder="YYYY" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="percentage" class="form-label">
                            Percentage/Marks
                        </label>
                        <input type="number" id="percentage" class="form-control" 
                               min="0" max="100" step="0.01" placeholder="85.5">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="cgpa" class="form-label">
                            CGPA/GPA
                        </label>
                        <input type="number" id="cgpa" class="form-control" 
                               min="0" max="10" step="0.01" placeholder="8.5">
                    </div>
                    
                    <div class="form-group">
                        <label for="division_class" class="form-label">
                            Division/Class
                        </label>
                        <select id="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>
            </form>
        </div>
        
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('educationModal')">
                <i class="fas fa-times"></i>
                Cancel
            </button>
            <button type="button" class="btn btn-primary" onclick="saveItem('educationModal')">
                <i class="fas fa-save"></i>
                <span id="save-btn-text">Save Qualification</span>
            </button>
        </div>
    </div>
</div>

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

@push('styles')
<link rel="stylesheet" href="{{ asset('css/add-more-modal.css') }}">

<style>
.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
}

.info-box i {
    color: #3b82f6;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-box p {
    margin: 0;
    color: #1e40af;
    font-size: 0.875rem;
    line-height: 1.5;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

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

/* Custom table styling for education */
.items-table td:nth-child(6) {
    font-weight: 500;
}

.items-table td:nth-child(5) {
    text-align: center;
    font-weight: 500;
}

/* Empty state styling */
.empty-education-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    margin: 2rem 0;
}

.empty-education-state i {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-education-state h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

.empty-education-state p {
    font-size: 0.875rem;
    margin: 0;
}
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/add-more-modal.js') }}"></script>

<script>
// Initialize the education modal system
document.addEventListener('DOMContentLoaded', function() {
    // Get existing education data from Laravel
    const existingEducation = @json(old('education', $formData['education'] ?? []));
    
    // Configure the modal system
    const educationConfig = {
        containerSelector: '#education-container',
        formFieldName: 'education',
        initialData: existingEducation,
        displayFields: [
            {
                key: 'degree',
                type: 'text'
            },
            {
                key: 'specialization',
                type: 'text'
            },
            {
                key: 'institution',
                type: 'text'
            },
            {
                key: 'university',
                type: 'text'
            },
            {
                key: 'year_of_completion',
                type: 'text',
                className: 'text-center'
            },
            {
                key: 'percentage_cgpa',
                type: 'custom',
                render: function(value, item) {
                    let display = [];
                    if (item.percentage) {
                        display.push(item.percentage + '%');
                    }
                    if (item.cgpa) {
                        display.push('CGPA: ' + item.cgpa);
                    }
                    return display.length > 0 ? display.join('<br>') : '-';
                }
            }
        ]
    };
    
    // Initialize the modal system
    initializeAddMoreModal(educationConfig);
    
    // Set the current modal ID for this page
    currentModalId = 'educationModal';
});

// Custom validation for education form
function validateEducationForm() {
    const form = document.getElementById('educationModal-form');
    const degree = document.getElementById('degree').value.trim();
    const institution = document.getElementById('institution').value.trim();
    const university = document.getElementById('university').value.trim();
    const year = document.getElementById('year_of_completion').value;
    
    // Clear previous errors
    clearErrorMessages('educationModal');
    
    let isValid = true;
    
    if (!degree) {
        showFieldError('degree', 'Degree is required');
        isValid = false;
    }
    
    if (!institution) {
        showFieldError('institution', 'Institution is required');
        isValid = false;
    }
    
    if (!university) {
        showFieldError('university', 'University is required');
        isValid = false;
    }
    
    if (!year) {
        showFieldError('year_of_completion', 'Year of completion is required');
        isValid = false;
    } else if (year < 1950 || year > new Date().getFullYear() + 5) {
        showFieldError('year_of_completion', 'Please enter a valid year');
        isValid = false;
    }
    
    return isValid;
}

// Show field error
function showFieldError(fieldId, message) {
    const errorElement = document.getElementById(fieldId + '-error');
    if (errorElement) {
        errorElement.querySelector('.error-message').textContent = message;
        errorElement.style.display = 'flex';
    }
}

// Override the saveItem function for custom validation
const originalSaveItem = window.saveItem;
window.saveItem = function(modalId) {
    if (modalId === 'educationModal') {
        if (!validateEducationForm()) {
            return;
        }
    }
    originalSaveItem(modalId);
};

// Show empty state when no education is added
function showEmptyState() {
    const container = document.getElementById('education-container');
    if (currentItems.length === 0) {
        container.innerHTML = `
            <div class="empty-education-state">
                <i class="fas fa-graduation-cap"></i>
                <h4>No Education Qualifications Added</h4>
                <p>Click the "Add Education Qualification" button above to get started.</p>
            </div>
        `;
        container.style.display = 'block';
    }
}

// Override refreshItemsTable to show empty state
const originalRefreshItemsTable = window.refreshItemsTable;
window.refreshItemsTable = function() {
    if (currentItems.length === 0) {
        showEmptyState();
        return;
    }
    originalRefreshItemsTable();
};
</script>
@endpush"