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

@section('title', 'Publications')
@section('step-title', 'Publications & Research Output')
@section('step-description', 'List your publications, papers, and research contributions')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'publications']) }}">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-book"></i>
            Publications & Research Output
        </h3>
        
        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <p>Include all your publications, conference papers, book chapters, and other research contributions. List them in reverse chronological order.</p>
        </div>
        
        <div id="publications-container">
            @php
                $publications = old('publications', $formData['publications'] ?? []);
                if (empty($publications)) {
                    $publications = [[]]; // Start with one empty entry
                }
            @endphp
            
            @foreach($publications as $index => $publication)
            <div class="publication-entry" data-index="{{ $index }}">
                <div class="entry-header">
                    <h4 class="entry-title">
                        <i class="fas fa-file-alt"></i>
                        Publication {{ $index + 1 }}
                    </h4>
                    @if($index > 0)
                        <button type="button" class="btn-remove" onclick="removePublication({{ $index }})">
                            <i class="fas fa-trash"></i>
                        </button>
                    @endif
                </div>
                
                <div class="form-group">
                    <label for="publication_{{ $index }}_title" class="form-label">
                        Title <span class="required">*</span>
                    </label>
                    <input type="text" name="publications[{{ $index }}][title]" 
                           id="publication_{{ $index }}_title" class="form-control" 
                           value="{{ old("publications.{$index}.title", $publication['title'] ?? '') }}" 
                           placeholder="Title of the publication" required>
                    @error("publications.{$index}.title")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="publication_{{ $index }}_authors" class="form-label">
                        Authors <span class="required">*</span>
                    </label>
                    <input type="text" name="publications[{{ $index }}][authors]" 
                           id="publication_{{ $index }}_authors" class="form-control" 
                           value="{{ old("publications.{$index}.authors", $publication['authors'] ?? '') }}" 
                           placeholder="List all authors (highlight your name)" required>
                    @error("publications.{$index}.authors")
                        <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="publication_{{ $index }}_journal" class="form-label">
                            Journal/Conference/Publisher <span class="required">*</span>
                        </label>
                        <input type="text" name="publications[{{ $index }}][journal]" 
                               id="publication_{{ $index }}_journal" class="form-control" 
                               value="{{ old("publications.{$index}.journal", $publication['journal'] ?? '') }}" 
                               placeholder="Name of journal, conference, or publisher" required>
                        @error("publications.{$index}.journal")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label for="publication_{{ $index }}_year" class="form-label">
                            Year <span class="required">*</span>
                        </label>
                        <input type="number" name="publications[{{ $index }}][year]" 
                               id="publication_{{ $index }}_year" class="form-control" 
                               value="{{ old("publications.{$index}.year", $publication['year'] ?? '') }}" 
                               min="1950" max="{{ date('Y') }}" placeholder="YYYY" required>
                        @error("publications.{$index}.year")
                            <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-md">
                        <label for="publication_{{ $index }}_type" class="form-label">
                            Publication Type <span class="required">*</span>
                        </label>
                        <select name="publications[{{ $index }}][type]" 
                                id="publication_{{ $index }}_type" class="form-control" required>
                            <option value="">Select Type</option>
                            <option value="Journal Article" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Journal Article' ? 'selected' : '' }}>Journal Article</option>
                            <option value="Conference Paper" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Conference Paper' ? 'selected' : '' }}>Conference Paper</option>
                            <option value="Book Chapter" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Book Chapter' ? 'selected' : '' }}>Book Chapter</option>
                            <option value="Book" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Book' ? 'selected' : '' }}>Book</option>
                            <option value="Patent" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Patent' ? 'selected' : '' }}>Patent</option>
                            <option value="Technical Report" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Technical Report' ? 'selected' : '' }}>Technical Report</option>
                            <option value="Thesis" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Thesis' ? 'selected' : '' }}>Thesis</option>
                            <option value="Other" {{ old("publications.{$index}.type", $publication['type'] ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error("publications.{$index}.type")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="publication_{{ $index }}_volume_issue" class="form-label">
                            Volume/Issue
                        </label>
                        <input type="text" name="publications[{{ $index }}][volume_issue]" 
                               id="publication_{{ $index }}_volume_issue" class="form-control" 
                               value="{{ old("publications.{$index}.volume_issue", $publication['volume_issue'] ?? '') }}" 
                               placeholder="e.g., Vol. 10, Issue 2">
                        @error("publications.{$index}.volume_issue")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="publication_{{ $index }}_pages" class="form-label">
                            Pages
                        </label>
                        <input type="text" name="publications[{{ $index }}][pages]" 
                               id="publication_{{ $index }}_pages" class="form-control" 
                               value="{{ old("publications.{$index}.pages", $publication['pages'] ?? '') }}" 
                               placeholder="e.g., 123-145">
                        @error("publications.{$index}.pages")
                            <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-md">
                        <label for="publication_{{ $index }}_doi" class="form-label">
                            DOI/URL
                        </label>
                        <input type="text" name="publications[{{ $index }}][doi]" 
                               id="publication_{{ $index }}_doi" class="form-control" 
                               value="{{ old("publications.{$index}.doi", $publication['doi'] ?? '') }}" 
                               placeholder="DOI or URL of the publication">
                        @error("publications.{$index}.doi")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="publication_{{ $index }}_impact_factor" class="form-label">
                            Impact Factor
                        </label>
                        <input type="text" name="publications[{{ $index }}][impact_factor]" 
                               id="publication_{{ $index }}_impact_factor" class="form-control" 
                               value="{{ old("publications.{$index}.impact_factor", $publication['impact_factor'] ?? '') }}" 
                               placeholder="e.g., 2.5">
                        @error("publications.{$index}.impact_factor")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="publication_{{ $index }}_abstract" class="form-label">
                        Abstract/Summary
                    </label>
                    <textarea name="publications[{{ $index }}][abstract]" 
                              id="publication_{{ $index }}_abstract" class="form-control" rows="3" 
                              placeholder="Brief abstract or summary of the publication...">{{ old("publications.{$index}.abstract", $publication['abstract'] ?? '') }}</textarea>
                    @error("publications.{$index}.abstract")
                        <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="addPublication()">
                <i class="fas fa-plus"></i>
                Add Another Publication
            </button>
        </div>
        
        <div class="form-section">
            <div class="form-group">
                <label class="checkbox-container">
                    <input type="checkbox" name="no_publications" id="no_publications" value="1"
                           {{ old('no_publications', $formData['no_publications'] ?? false) ? 'checked' : '' }}
                           onchange="toggleNoPublications()">
                    <span class="checkmark"></span>
                    I have no publications
                </label>
            </div>
        </div>
    </div>
</form>

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

@push('styles')
<style>
.publication-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) {
    .publication-entry {
        padding: 1rem;
    }
    
    .entry-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
</style>
@endpush

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

function addPublication() {
    const container = document.getElementById('publications-container');
    const newEntry = createPublicationEntry(publicationIndex);
    container.appendChild(newEntry);
    publicationIndex++;
}

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

function toggleNoPublications() {
    const checkbox = document.getElementById('no_publications');
    const container = document.getElementById('publications-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 publications 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 createPublicationEntry(index) {
    const div = document.createElement('div');
    div.className = 'publication-entry';
    div.setAttribute('data-index', index);
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-file-alt"></i>
                Publication ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removePublication(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="form-group">
            <label for="publication_${index}_title" class="form-label">
                Title <span class="required">*</span>
            </label>
            <input type="text" name="publications[${index}][title]" 
                   id="publication_${index}_title" class="form-control" 
                   placeholder="Title of the publication" required>
        </div>
        
        <div class="form-group">
            <label for="publication_${index}_authors" class="form-label">
                Authors <span class="required">*</span>
            </label>
            <input type="text" name="publications[${index}][authors]" 
                   id="publication_${index}_authors" class="form-control" 
                   placeholder="List all authors (highlight your name)" required>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-lg">
                <label for="publication_${index}_journal" class="form-label">
                    Journal/Conference/Publisher <span class="required">*</span>
                </label>
                <input type="text" name="publications[${index}][journal]" 
                       id="publication_${index}_journal" class="form-control" 
                       placeholder="Name of journal, conference, or publisher" required>
            </div>
            
            <div class="form-group form-col-sm">
                <label for="publication_${index}_year" class="form-label">
                    Year <span class="required">*</span>
                </label>
                <input type="number" name="publications[${index}][year]" 
                       id="publication_${index}_year" class="form-control" 
                       min="1950" max="${new Date().getFullYear()}" placeholder="YYYY" required>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="publication_${index}_type" class="form-label">
                    Publication Type <span class="required">*</span>
                </label>
                <select name="publications[${index}][type]" 
                        id="publication_${index}_type" class="form-control" required>
                    <option value="">Select Type</option>
                    <option value="Journal Article">Journal Article</option>
                    <option value="Conference Paper">Conference Paper</option>
                    <option value="Book Chapter">Book Chapter</option>
                    <option value="Book">Book</option>
                    <option value="Patent">Patent</option>
                    <option value="Technical Report">Technical Report</option>
                    <option value="Thesis">Thesis</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            
            <div class="form-group form-col-md">
                <label for="publication_${index}_volume_issue" class="form-label">
                    Volume/Issue
                </label>
                <input type="text" name="publications[${index}][volume_issue]" 
                       id="publication_${index}_volume_issue" class="form-control" 
                       placeholder="e.g., Vol. 10, Issue 2">
            </div>
            
            <div class="form-group form-col-md">
                <label for="publication_${index}_pages" class="form-label">
                    Pages
                </label>
                <input type="text" name="publications[${index}][pages]" 
                       id="publication_${index}_pages" class="form-control" 
                       placeholder="e.g., 123-145">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="publication_${index}_doi" class="form-label">
                    DOI/URL
                </label>
                <input type="text" name="publications[${index}][doi]" 
                       id="publication_${index}_doi" class="form-control" 
                       placeholder="DOI or URL of the publication">
            </div>
            
            <div class="form-group form-col-md">
                <label for="publication_${index}_impact_factor" class="form-label">
                    Impact Factor
                </label>
                <input type="text" name="publications[${index}][impact_factor]" 
                       id="publication_${index}_impact_factor" class="form-control" 
                       placeholder="e.g., 2.5">
            </div>
        </div>
        
        <div class="form-group">
            <label for="publication_${index}_abstract" class="form-label">
                Abstract/Summary
            </label>
            <textarea name="publications[${index}][abstract]" 
                      id="publication_${index}_abstract" class="form-control" rows="3" 
                      placeholder="Brief abstract or summary of the publication..."></textarea>
        </div>
    `;
    
    return div;
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    const noPublicationsCheckbox = document.getElementById('no_publications');
    if (noPublicationsCheckbox) {
        // Always run the toggle function to ensure proper state
        toggleNoPublications();
    }
    
    // Add form submission handler to ensure no validation issues
    const form = document.getElementById('step-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const noPublicationsCheckbox = document.getElementById('no_publications');
            if (noPublicationsCheckbox && noPublicationsCheckbox.checked) {
                // If no publications is checked, ensure no required fields block submission
                const container = document.getElementById('publications-container');
                const requiredFields = container.querySelectorAll('[required]');
                requiredFields.forEach(field => {
                    field.removeAttribute('required');
                    field.disabled = true;
                });
            }
        });
    }
});
</script>
@endpush