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

@section('title', 'Awards & Honors')
@section('step-title', 'Awards & Honors')
@section('step-description', 'List your awards, honors, and recognitions')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'awards']) }}">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-trophy"></i>
            Awards & Honors
        </h3>
        
        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <p>Include academic awards, scholarships, fellowships, professional recognitions, and other honors you have received.</p>
        </div>
        
        <div id="awards-container">
            @php
                $awards = old('awards', $formData['awards'] ?? []);
                if (empty($awards)) {
                    $awards = [[]]; // Start with one empty entry
                }
            @endphp
            
            @foreach($awards as $index => $award)
            <div class="award-entry" data-index="{{ $index }}">
                <div class="entry-header">
                    <h4 class="entry-title">
                        <i class="fas fa-medal"></i>
                        Award {{ $index + 1 }}
                    </h4>
                    @if($index > 0)
                        <button type="button" class="btn-remove" onclick="removeAward({{ $index }})">
                            <i class="fas fa-trash"></i>
                        </button>
                    @endif
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-lg">
                        <label for="award_{{ $index }}_name" class="form-label">
                            Award/Honor Name <span class="required">*</span>
                        </label>
                        <input type="text" name="awards[{{ $index }}][name]" 
                               id="award_{{ $index }}_name" class="form-control" 
                               value="{{ old("awards.{$index}.name", $award['name'] ?? '') }}" 
                               placeholder="Name of the award or honor" required>
                        @error("awards.{$index}.name")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-sm">
                        <label for="award_{{ $index }}_year" class="form-label">
                            Year <span class="required">*</span>
                        </label>
                        <input type="number" name="awards[{{ $index }}][year]" 
                               id="award_{{ $index }}_year" class="form-control" 
                               value="{{ old("awards.{$index}.year", $award['year'] ?? '') }}" 
                               min="1950" max="{{ date('Y') }}" placeholder="YYYY" required>
                        @error("awards.{$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-lg">
                        <label for="award_{{ $index }}_organization" class="form-label">
                            Awarding Organization <span class="required">*</span>
                        </label>
                        <input type="text" name="awards[{{ $index }}][organization]" 
                               id="award_{{ $index }}_organization" class="form-control" 
                               value="{{ old("awards.{$index}.organization", $award['organization'] ?? '') }}" 
                               placeholder="Organization that gave the award" required>
                        @error("awards.{$index}.organization")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="award_{{ $index }}_category" class="form-label">
                            Category
                        </label>
                        <select name="awards[{{ $index }}][category]" 
                                id="award_{{ $index }}_category" class="form-control">
                            <option value="">Select Category</option>
                            <option value="Academic Excellence" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Academic Excellence' ? 'selected' : '' }}>Academic Excellence</option>
                            <option value="Research" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Research' ? 'selected' : '' }}>Research</option>
                            <option value="Teaching" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Teaching' ? 'selected' : '' }}>Teaching</option>
                            <option value="Scholarship" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Scholarship' ? 'selected' : '' }}>Scholarship</option>
                            <option value="Fellowship" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Fellowship' ? 'selected' : '' }}>Fellowship</option>
                            <option value="Professional" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Professional' ? 'selected' : '' }}>Professional</option>
                            <option value="Service" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Service' ? 'selected' : '' }}>Service</option>
                            <option value="Other" {{ old("awards.{$index}.category", $award['category'] ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error("awards.{$index}.category")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="award_{{ $index }}_description" class="form-label">
                        Description
                    </label>
                    <textarea name="awards[{{ $index }}][description]" 
                              id="award_{{ $index }}_description" class="form-control" rows="3" 
                              placeholder="Brief description of the award and why it was received...">{{ old("awards.{$index}.description", $award['description'] ?? '') }}</textarea>
                    @error("awards.{$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="award_{{ $index }}_value" class="form-label">
                            Monetary Value (if applicable)
                        </label>
                        <input type="text" name="awards[{{ $index }}][value]" 
                               id="award_{{ $index }}_value" class="form-control" 
                               value="{{ old("awards.{$index}.value", $award['value'] ?? '') }}" 
                               placeholder="e.g., ₹50,000">
                        @error("awards.{$index}.value")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="award_{{ $index }}_level" class="form-label">
                            Level
                        </label>
                        <select name="awards[{{ $index }}][level]" 
                                id="award_{{ $index }}_level" class="form-control">
                            <option value="">Select Level</option>
                            <option value="International" {{ old("awards.{$index}.level", $award['level'] ?? '') == 'International' ? 'selected' : '' }}>International</option>
                            <option value="National" {{ old("awards.{$index}.level", $award['level'] ?? '') == 'National' ? 'selected' : '' }}>National</option>
                            <option value="State" {{ old("awards.{$index}.level", $award['level'] ?? '') == 'State' ? 'selected' : '' }}>State</option>
                            <option value="Regional" {{ old("awards.{$index}.level", $award['level'] ?? '') == 'Regional' ? 'selected' : '' }}>Regional</option>
                            <option value="Institutional" {{ old("awards.{$index}.level", $award['level'] ?? '') == 'Institutional' ? 'selected' : '' }}>Institutional</option>
                            <option value="Local" {{ old("awards.{$index}.level", $award['level'] ?? '') == 'Local' ? 'selected' : '' }}>Local</option>
                        </select>
                        @error("awards.{$index}.level")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="add-more-container">
            <button type="button" class="btn btn-outline" onclick="addAward()">
                <i class="fas fa-plus"></i>
                Add Another Award
            </button>
        </div>
        
        <div class="form-section">
            <div class="form-group">
                <label class="checkbox-container">
                    <input type="checkbox" name="no_awards" id="no_awards" value="1"
                           {{ old('no_awards', $formData['no_awards'] ?? false) ? 'checked' : '' }}
                           onchange="toggleNoAwards()">
                    <span class="checkmark"></span>
                    I have no awards or honors to report
                </label>
            </div>
        </div>
    </div>
</form>

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

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

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

function addAward() {
    const container = document.getElementById('awards-container');
    const newEntry = createAwardEntry(awardIndex);
    container.appendChild(newEntry);
    awardIndex++;
}

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

function toggleNoAwards() {
    const checkbox = document.getElementById('no_awards');
    const container = document.getElementById('awards-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 awards 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 createAwardEntry(index) {
    const div = document.createElement('div');
    div.className = 'award-entry';
    div.setAttribute('data-index', index);
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-medal"></i>
                Award ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeAward(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-lg">
                <label for="award_${index}_name" class="form-label">
                    Award/Honor Name <span class="required">*</span>
                </label>
                <input type="text" name="awards[${index}][name]" 
                       id="award_${index}_name" class="form-control" 
                       placeholder="Name of the award or honor" required>
            </div>
            
            <div class="form-group form-col-sm">
                <label for="award_${index}_year" class="form-label">
                    Year <span class="required">*</span>
                </label>
                <input type="number" name="awards[${index}][year]" 
                       id="award_${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-lg">
                <label for="award_${index}_organization" class="form-label">
                    Awarding Organization <span class="required">*</span>
                </label>
                <input type="text" name="awards[${index}][organization]" 
                       id="award_${index}_organization" class="form-control" 
                       placeholder="Organization that gave the award" required>
            </div>
            
            <div class="form-group form-col-md">
                <label for="award_${index}_category" class="form-label">
                    Category
                </label>
                <select name="awards[${index}][category]" 
                        id="award_${index}_category" class="form-control">
                    <option value="">Select Category</option>
                    <option value="Academic Excellence">Academic Excellence</option>
                    <option value="Research">Research</option>
                    <option value="Teaching">Teaching</option>
                    <option value="Scholarship">Scholarship</option>
                    <option value="Fellowship">Fellowship</option>
                    <option value="Professional">Professional</option>
                    <option value="Service">Service</option>
                    <option value="Other">Other</option>
                </select>
            </div>
        </div>
        
        <div class="form-group">
            <label for="award_${index}_description" class="form-label">
                Description
            </label>
            <textarea name="awards[${index}][description]" 
                      id="award_${index}_description" class="form-control" rows="3" 
                      placeholder="Brief description of the award and why it was received..."></textarea>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="award_${index}_value" class="form-label">
                    Monetary Value (if applicable)
                </label>
                <input type="text" name="awards[${index}][value]" 
                       id="award_${index}_value" class="form-control" 
                       placeholder="e.g., ₹50,000">
            </div>
            
            <div class="form-group form-col-md">
                <label for="award_${index}_level" class="form-label">
                    Level
                </label>
                <select name="awards[${index}][level]" 
                        id="award_${index}_level" class="form-control">
                    <option value="">Select Level</option>
                    <option value="International">International</option>
                    <option value="National">National</option>
                    <option value="State">State</option>
                    <option value="Regional">Regional</option>
                    <option value="Institutional">Institutional</option>
                    <option value="Local">Local</option>
                </select>
            </div>
        </div>
    `;
    
    return div;
}

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