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

@section('title', 'Research Experience')
@section('step-title', 'Research Experience')
@section('step-description', 'Please provide details of your research projects and experience')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'research_experience']) }}">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-flask"></i>
            Research Projects & Experience
        </h3>
        
        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <p>Include all research projects, thesis work, and research experience. This is particularly important for academic positions.</p>
        </div>
        
        <div id="research-container">
            @php
                $research_experiences = old('research_experience', $formData['research_experience'] ?? []);
                if (empty($research_experiences)) {
                    $research_experiences = [[]]; // Start with one empty entry
                }
            @endphp
            
            @foreach($research_experiences as $index => $research)
            <div class="research-entry" data-index="{{ $index }}">
                <div class="entry-header">
                    <h4 class="entry-title">
                        <i class="fas fa-microscope"></i>
                        Research Project {{ $index + 1 }}
                    </h4>
                    @if($index > 0)
                        <button type="button" class="btn-remove" onclick="removeResearch({{ $index }})">
                            <i class="fas fa-trash"></i>
                        </button>
                    @endif
                </div>
                
                <div class="form-group">
                    <label for="research_{{ $index }}_project_title" class="form-label">
                        Project Title <span class="required">*</span>
                    </label>
                    <input type="text" name="research_experience[{{ $index }}][project_title]" 
                           id="research_{{ $index }}_project_title" class="form-control" 
                           value="{{ old("research_experience.{$index}.project_title", $research['project_title'] ?? '') }}" 
                           placeholder="Title of your research project" required>
                    @error("research_experience.{$index}.project_title")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-lg">
                        <label for="research_{{ $index }}_institution" class="form-label">
                            Institution/Organization <span class="required">*</span>
                        </label>
                        <input type="text" name="research_experience[{{ $index }}][institution]" 
                               id="research_{{ $index }}_institution" class="form-control" 
                               value="{{ old("research_experience.{$index}.institution", $research['institution'] ?? '') }}" 
                               placeholder="Name of institution/organization" required>
                        @error("research_experience.{$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="research_{{ $index }}_supervisor" class="form-label">
                            Supervisor/Guide <span class="required">*</span>
                        </label>
                        <input type="text" name="research_experience[{{ $index }}][supervisor]" 
                               id="research_{{ $index }}_supervisor" class="form-control" 
                               value="{{ old("research_experience.{$index}.supervisor", $research['supervisor'] ?? '') }}" 
                               placeholder="Name of supervisor/guide" required>
                        @error("research_experience.{$index}.supervisor")
                            <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="research_{{ $index }}_start_date" class="form-label">
                            Start Date <span class="required">*</span>
                        </label>
                        <input type="date" name="research_experience[{{ $index }}][start_date]" 
                               id="research_{{ $index }}_start_date" class="form-control" 
                               value="{{ old("research_experience.{$index}.start_date", $research['start_date'] ?? '') }}" required>
                        @error("research_experience.{$index}.start_date")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label for="research_{{ $index }}_end_date" class="form-label">
                            End Date
                        </label>
                        <input type="date" name="research_experience[{{ $index }}][end_date]" 
                               id="research_{{ $index }}_end_date" class="form-control" 
                               value="{{ old("research_experience.{$index}.end_date", $research['end_date'] ?? '') }}">
                        @error("research_experience.{$index}.end_date")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label class="checkbox-container" style="margin-top: 2rem;">
                            <input type="checkbox" name="research_experience[{{ $index }}][is_ongoing]" 
                                   id="research_{{ $index }}_is_ongoing" value="1"
                                   {{ old("research_experience.{$index}.is_ongoing", $research['is_ongoing'] ?? false) ? 'checked' : '' }}
                                   onchange="toggleResearchEndDate({{ $index }})">
                            <span class="checkmark"></span>
                            Ongoing project
                        </label>
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="research_{{ $index }}_funding_agency" class="form-label">
                            Funding Agency
                        </label>
                        <input type="text" name="research_experience[{{ $index }}][funding_agency]" 
                               id="research_{{ $index }}_funding_agency" class="form-control" 
                               value="{{ old("research_experience.{$index}.funding_agency", $research['funding_agency'] ?? '') }}" 
                               placeholder="Name of funding agency">
                        @error("research_experience.{$index}.funding_agency")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="research_{{ $index }}_description" class="form-label">
                        Project Description <span class="required">*</span>
                    </label>
                    <textarea name="research_experience[{{ $index }}][description]" 
                              id="research_{{ $index }}_description" class="form-control" rows="4" 
                              placeholder="Describe the research objectives, methodology, and key findings..." required>{{ old("research_experience.{$index}.description", $research['description'] ?? '') }}</textarea>
                    @error("research_experience.{$index}.description")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-md">
                        <label for="research_{{ $index }}_role" class="form-label">
                            Your Role
                        </label>
                        <select name="research_experience[{{ $index }}][role]" 
                                id="research_{{ $index }}_role" class="form-control">
                            <option value="">Select Role</option>
                            <option value="Principal Investigator" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'Principal Investigator' ? 'selected' : '' }}>Principal Investigator</option>
                            <option value="Co-Investigator" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'Co-Investigator' ? 'selected' : '' }}>Co-Investigator</option>
                            <option value="Research Associate" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'Research Associate' ? 'selected' : '' }}>Research Associate</option>
                            <option value="Research Assistant" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'Research Assistant' ? 'selected' : '' }}>Research Assistant</option>
                            <option value="PhD Student" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'PhD Student' ? 'selected' : '' }}>PhD Student</option>
                            <option value="Masters Student" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'Masters Student' ? 'selected' : '' }}>Masters Student</option>
                            <option value="Other" {{ old("research_experience.{$index}.role", $research['role'] ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error("research_experience.{$index}.role")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="research_{{ $index }}_budget" class="form-label">
                            Project Budget
                        </label>
                        <input type="text" name="research_experience[{{ $index }}][budget]" 
                               id="research_{{ $index }}_budget" class="form-control" 
                               value="{{ old("research_experience.{$index}.budget", $research['budget'] ?? '') }}" 
                               placeholder="e.g., ₹10 Lakhs">
                        @error("research_experience.{$index}.budget")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="research_{{ $index }}_outcomes" class="form-label">
                        Key Outcomes/Publications
                    </label>
                    <textarea name="research_experience[{{ $index }}][outcomes]" 
                              id="research_{{ $index }}_outcomes" class="form-control" rows="3" 
                              placeholder="List key outcomes, publications, patents, or other deliverables...">{{ old("research_experience.{$index}.outcomes", $research['outcomes'] ?? '') }}</textarea>
                    @error("research_experience.{$index}.outcomes")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="add-more-container">
            <button type="button" class="btn btn-outline" onclick="addResearch()">
                <i class="fas fa-plus"></i>
                Add Another Research Project
            </button>
        </div>
        
        <div class="form-section">
            <div class="form-group">
                <label class="checkbox-container">
                    <input type="checkbox" name="no_research" id="no_research" value="1"
                           {{ old('no_research', $formData['no_research'] ?? false) ? 'checked' : '' }}
                           onchange="toggleNoResearch()">
                    <span class="checkmark"></span>
                    I have no research experience
                </label>
            </div>
        </div>
    </div>
</form>

@php
    $currentStep = 'research_experience';
    $previousStep = 'experience';
    $nextStep = 'publications';
@endphp
@endsection

@push('styles')
<style>
.research-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;
    margin-bottom: 2rem;
}

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    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;
}

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

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

function addResearch() {
    const container = document.getElementById('research-container');
    const newEntry = createResearchEntry(researchIndex);
    container.appendChild(newEntry);
    researchIndex++;
}

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

function toggleResearchEndDate(index) {
    const checkbox = document.getElementById(`research_${index}_is_ongoing`);
    const endDateField = document.getElementById(`research_${index}_end_date`);
    
    if (checkbox.checked) {
        endDateField.value = '';
        endDateField.disabled = true;
        endDateField.style.backgroundColor = '#f3f4f6';
    } else {
        endDateField.disabled = false;
        endDateField.style.backgroundColor = '';
    }
}

function toggleNoResearch() {
    const checkbox = document.getElementById('no_research');
    const container = document.getElementById('research-container');
    const addButton = document.querySelector('.add-more-container');
    
    if (checkbox.checked) {
        // Hide the container and add button
        container.style.display = 'none';
        addButton.style.display = 'none';
        
        // Disable all required fields in the research container to prevent HTML5 validation
        const requiredFields = container.querySelectorAll('[required]');
        requiredFields.forEach(field => {
            field.removeAttribute('required');
            field.setAttribute('data-was-required', 'true');
            field.disabled = true;
        });
    } else {
        // Show the container and add button
        container.style.display = 'block';
        addButton.style.display = 'block';
        
        // Re-enable and restore required attributes
        const wasRequiredFields = container.querySelectorAll('[data-was-required]');
        wasRequiredFields.forEach(field => {
            field.setAttribute('required', 'required');
            field.removeAttribute('data-was-required');
            field.disabled = false;
        });
    }
}

function createResearchEntry(index) {
    const div = document.createElement('div');
    div.className = 'research-entry';
    div.setAttribute('data-index', index);
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-microscope"></i>
                Research Project ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeResearch(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="form-group">
            <label for="research_${index}_project_title" class="form-label">
                Project Title <span class="required">*</span>
            </label>
            <input type="text" name="research_experience[${index}][project_title]" 
                   id="research_${index}_project_title" class="form-control" 
                   placeholder="Title of your research project" required>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-lg">
                <label for="research_${index}_institution" class="form-label">
                    Institution/Organization <span class="required">*</span>
                </label>
                <input type="text" name="research_experience[${index}][institution]" 
                       id="research_${index}_institution" class="form-control" 
                       placeholder="Name of institution/organization" required>
            </div>
            
            <div class="form-group form-col-md">
                <label for="research_${index}_supervisor" class="form-label">
                    Supervisor/Guide <span class="required">*</span>
                </label>
                <input type="text" name="research_experience[${index}][supervisor]" 
                       id="research_${index}_supervisor" class="form-control" 
                       placeholder="Name of supervisor/guide" required>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-sm">
                <label for="research_${index}_start_date" class="form-label">
                    Start Date <span class="required">*</span>
                </label>
                <input type="date" name="research_experience[${index}][start_date]" 
                       id="research_${index}_start_date" class="form-control" required>
            </div>
            
            <div class="form-group form-col-sm">
                <label for="research_${index}_end_date" class="form-label">
                    End Date
                </label>
                <input type="date" name="research_experience[${index}][end_date]" 
                       id="research_${index}_end_date" class="form-control">
            </div>
            
            <div class="form-group form-col-sm">
                <label class="checkbox-container" style="margin-top: 2rem;">
                    <input type="checkbox" name="research_experience[${index}][is_ongoing]" 
                           id="research_${index}_is_ongoing" value="1"
                           onchange="toggleResearchEndDate(${index})">
                    <span class="checkmark"></span>
                    Ongoing project
                </label>
            </div>
            
            <div class="form-group form-col-md">
                <label for="research_${index}_funding_agency" class="form-label">
                    Funding Agency
                </label>
                <input type="text" name="research_experience[${index}][funding_agency]" 
                       id="research_${index}_funding_agency" class="form-control" 
                       placeholder="Name of funding agency">
            </div>
        </div>
        
        <div class="form-group">
            <label for="research_${index}_description" class="form-label">
                Project Description <span class="required">*</span>
            </label>
            <textarea name="research_experience[${index}][description]" 
                      id="research_${index}_description" class="form-control" rows="4" 
                      placeholder="Describe the research objectives, methodology, and key findings..." required></textarea>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="research_${index}_role" class="form-label">
                    Your Role
                </label>
                <select name="research_experience[${index}][role]" 
                        id="research_${index}_role" class="form-control">
                    <option value="">Select Role</option>
                    <option value="Principal Investigator">Principal Investigator</option>
                    <option value="Co-Investigator">Co-Investigator</option>
                    <option value="Research Associate">Research Associate</option>
                    <option value="Research Assistant">Research Assistant</option>
                    <option value="PhD Student">PhD Student</option>
                    <option value="Masters Student">Masters Student</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            
            <div class="form-group form-col-md">
                <label for="research_${index}_budget" class="form-label">
                    Project Budget
                </label>
                <input type="text" name="research_experience[${index}][budget]" 
                       id="research_${index}_budget" class="form-control" 
                       placeholder="e.g., ₹10 Lakhs">
            </div>
        </div>
        
        <div class="form-group">
            <label for="research_${index}_outcomes" class="form-label">
                Key Outcomes/Publications
            </label>
            <textarea name="research_experience[${index}][outcomes]" 
                      id="research_${index}_outcomes" class="form-control" rows="3" 
                      placeholder="List key outcomes, publications, patents, or other deliverables..."></textarea>
        </div>
    `;
    
    return div;
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Check all existing "ongoing" checkboxes
    const ongoingCheckboxes = document.querySelectorAll('input[name*="[is_ongoing]"]');
    ongoingCheckboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            const index = checkbox.id.match(/\d+/)[0];
            toggleResearchEndDate(index);
        }
    });
    
    // Check no research checkbox and apply the toggle
    const noResearchCheckbox = document.getElementById('no_research');
    if (noResearchCheckbox) {
        // Always run the toggle function to ensure proper state
        toggleNoResearch();
    }
    
    // Add form submission handler to ensure no validation issues
    const form = document.getElementById('step-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const noResearchCheckbox = document.getElementById('no_research');
            if (noResearchCheckbox && noResearchCheckbox.checked) {
                // If no research is checked, ensure no required fields block submission
                const container = document.getElementById('research-container');
                const requiredFields = container.querySelectorAll('[required]');
                requiredFields.forEach(field => {
                    field.removeAttribute('required');
                    field.disabled = true;
                });
            }
        });
    }
});
</script>
@endpush