<?php 
// components/forms/education_info.php 
$existingEducation = $existingEducation ?? [];
?>
<div class="bg-white border border-slate-300/80 rounded-xl shadow-sm overflow-hidden">
    <div class="px-4 py-3 bg-stone-50/50 border-b border-slate-300/80 flex items-center justify-between">
        <h3 class="text-xs font-black text-slate-950 uppercase tracking-tight">6. Educational Background</h3>
        <button type="button" onclick="addEducationRow()" class="bg-white hover:bg-stone-100 border border-slate-300 text-slate-700 font-black text-[10px] px-3 py-1 rounded uppercase tracking-wider transition shadow-xs">
            ＋ Add Academic History
        </button>
    </div>

    <div class="p-4 sm:p-5">
        <div id="education-repeater-container" class="space-y-4">
            
            <?php foreach ($existingEducation as $index => $edu): ?>
                <div class="education-row grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 bg-stone-50/30 p-4 border border-slate-300 rounded relative">
                    <div class="sm:col-span-2 md:col-span-1 space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Institution Name</label>
                        <input type="text" name="education[<?= $index ?>][institution]" value="<?= htmlspecialchars($edu['institution']) ?>" placeholder="e.g., University of Lagos" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                    </div>
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Qualification Obtained</label>
                        <input type="text" name="education[<?= $index ?>][qualification]" value="<?= htmlspecialchars($edu['qualification']) ?>" placeholder="e.g., B.Sc. Computer Science" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                    </div>
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Start Year</label>
                        <select name="education[<?= $index ?>][start_year]" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                            <option value="">Select</option>
                            <?php for($y = date('Y'); $y >= 1970; $y--): ?>
                                <option value="<?= $y ?>" <?= $edu['start_year'] == $y ? 'selected' : '' ?>><?= $y ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                    <div class="flex gap-2 items-end">
                        <div class="flex-1 space-y-1.5">
                            <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">End Year</label>
                            <select name="education[<?= $index ?>][end_year]" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                                <option value="">Select</option>
                                <?php for($y = date('Y') + 6; $y >= 1970; $y--): ?>
                                    <option value="<?= $y ?>" <?= $edu['end_year'] == $y ? 'selected' : '' ?>><?= $y ?></option>
                                <?php endfor; ?>
                            </select>
                        </div>
                        <button type="button" onclick="this.closest('.education-row').remove()" class="bg-white hover:bg-stone-100 border border-slate-300 text-rose-600 font-black text-[10px] p-2 rounded transition uppercase tracking-wider h-[34px] flex items-center justify-center aspect-square" title="Remove Record">
                            ✕
                        </button>
                    </div>
                </div>
            <?php endforeach; ?>

            <?php if (empty($existingEducation)): ?>
                <div class="education-row grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 bg-stone-50/30 p-4 border border-slate-300 rounded relative">
                    <div class="sm:col-span-2 md:col-span-1 space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Institution Name</label>
                        <input type="text" name="education[0][institution]" placeholder="e.g., University of Lagos" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                    </div>
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Qualification Obtained</label>
                        <input type="text" name="education[0][qualification]" placeholder="e.g., B.Sc. Computer Science" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                    </div>
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Start Year</label>
                        <select name="education[0][start_year]" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                            <option value="">Select</option>
                            <?php for($y = date('Y'); $y >= 1970; $y--): ?>
                                <option value="<?= $y ?>"><?= $y ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">End Year <span class="text-slate-400 font-semibold lowercase tracking-normal">(or expected)</span></label>
                        <select name="education[0][end_year]" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                            <option value="">Select</option>
                            <?php for($y = date('Y') + 6; $y >= 1970; $y--): ?>
                                <option value="<?= $y ?>"><?= $y ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                </div>
            <?php endif; ?>

        </div>
    </div>
</div>

<script>
let eduIndex = <?= count($existingEducation) ?>;

function addEducationRow() {
    const container = document.getElementById('education-repeater-container');
    const currentYear = new Date().getFullYear();
    const row = document.createElement('div');
    row.className = "education-row grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 bg-stone-50/30 p-4 border border-slate-300 rounded relative transition-all duration-200";
    
    let startYearOptions = '<option value="">Select</option>';
    for(let y = currentYear; y >= 1970; y--) {
        startYearOptions += `<option value="${y}">${y}</option>`;
    }
    
    let endYearOptions = '<option value="">Select</option>';
    for(let y = currentYear + 6; y >= 1970; y--) {
        endYearOptions += `<option value="${y}">${y}</option>`;
    }

    row.innerHTML = `
        <div class="sm:col-span-2 md:col-span-1 space-y-1.5">
            <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Institution Name</label>
            <input type="text" name="education[${eduIndex}][institution]" placeholder="e.g., Yaba College of Technology" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
        </div>
        <div class="space-y-1.5">
            <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Qualification Obtained</label>
            <input type="text" name="education[${eduIndex}][qualification]" placeholder="e.g., HND Mechanical Engineering" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
        </div>
        <div class="space-y-1.5">
            <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Start Year</label>
            <select name="education[${eduIndex}][start_year]" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                ${startYearOptions}
            </select>
        </div>
        <div class="flex gap-2 items-end">
            <div class="flex-1 space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">End Year</label>
                <select name="education[${eduIndex}][end_year]" class="w-full bg-white border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 transition">
                    ${endYearOptions}
                </select>
            </div>
            <button type="button" onclick="this.closest('.education-row').remove()" class="bg-white hover:bg-stone-100 border border-slate-300 text-rose-600 font-black text-[10px] p-2 rounded transition uppercase tracking-wider h-[34px] flex items-center justify-center aspect-square" title="Remove Record">
                ✕
            </button>
        </div>
    `;
    
    container.appendChild(row);
    eduIndex++;
}
</script>