{{-- 
    EXAMPLE: Converting Existing Add More to Modal System
    
    This file shows how to convert the existing inline "Add More" functionality
    to the new modal-based system with tabular display.
--}}

{{-- BEFORE: Original inline add more system --}}
{{--
<div id="education-container">
    @foreach($educations as $index => $education)
    <div class="education-entry" data-index="{{ $index }}">
        <div class="entry-header">
            <h4>Education {{ $index + 1 }}</h4>
            @if($index > 0)
                <button type="button" onclick="removeEducation({{ $index }})">Remove</button>
            @endif
        </div>
        
        <div class="form-row">
            <input type="text" name="education[{{ $index }}][degree]" placeholder="Degree" required>
            <input type="text" name="education[{{ $index }}][institution]" placeholder="Institution" required>
        </div>
        <!-- More fields... -->
    </div>
    @endforeach
</div>

<button type="button" onclick="addEducation()">Add Another Education</button>
--}}

{{-- AFTER: New modal-based system --}}

@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>
        
        {{-- Step 1: Replace the old "Add More" button with the new styled 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>
        
        {{-- Step 2: Replace the container with the new table structure --}}
        <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>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">
                        {{-- Items will be populated by JavaScript --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>

{{-- Step 3: Add the 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="">
                
                {{-- Move all your form fields here --}}
                <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">
                    </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>

@endsection

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

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

<script>
{{-- Step 4: Replace the old JavaScript with the new initialization --}}

{{-- OLD JavaScript (remove this):
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) {
    // Long HTML creation code...
}
--}}

{{-- NEW JavaScript: --}}
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: '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';
});
</script>
@endpush

{{--
CONVERSION CHECKLIST:

✅ 1. Include CSS and JS files
✅ 2. Replace add button with styled version
✅ 3. Replace container with table structure
✅ 4. Create modal with form fields
✅ 5. Replace JavaScript with new initialization
✅ 6. Configure display fields
✅ 7. Test functionality

BENEFITS OF THE NEW SYSTEM:

✅ Clean, professional modal interface
✅ Tabular display of added items
✅ Easy edit/delete functionality
✅ Better mobile responsiveness
✅ Consistent styling across forms
✅ Built-in validation support
✅ Reusable components
✅ Better user experience

MIGRATION STEPS:

1. Backup your existing file
2. Copy the new structure
3. Move form fields to modal
4. Update JavaScript configuration
5. Test all functionality
6. Update any custom styling
7. Deploy and test in production
--}}"