@extends('layouts.app')

@section('title', 'Edit Teaching Experience Details')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Edit Teaching Experience Details</h1>
                    <p class="text-gray-600 mt-1">Provide detailed breakdown of your teaching experience</p>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500">Application #{{ $application->application_number }}</div>
                </div>
            </div>
        </div>

        <!-- Form -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form action="{{ route('applicant.teaching-experience-details.update', $application) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Teaching Experience Status -->
                <div class="mb-8">
                    <label class="block text-sm font-medium text-gray-700 mb-4">
                        Do you have teaching experience? <span class="text-red-500">*</span>
                    </label>
                    <div class="space-y-3">
                        <label class="flex items-center">
                            <input type="radio" name="has_teaching_experience" value="1" 
                                   {{ old('has_teaching_experience', $application->has_teaching_experience) ? 'checked' : '' }}
                                   class="mr-3 text-blue-600" onchange="toggleExperienceFields(true)">
                            <span class="text-gray-700">Yes, I have teaching experience</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="has_teaching_experience" value="0" 
                                   {{ !old('has_teaching_experience', $application->has_teaching_experience) ? 'checked' : '' }}
                                   class="mr-3 text-blue-600" onchange="toggleExperienceFields(false)">
                            <span class="text-gray-700">No, I don't have teaching experience</span>
                        </label>
                    </div>
                    @error('has_teaching_experience')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Experience Fields (shown only if has teaching experience) -->
                <div id="experience-fields" class="space-y-8" 
                     style="display: {{ old('has_teaching_experience', $application->has_teaching_experience) ? 'block' : 'none' }}">
                    
                    <!-- Total Teaching Experience -->
                    <div class="bg-blue-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-clock text-blue-600 mr-2"></i>Total Teaching Experience
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="total_teaching_experience_years" class="block text-sm font-medium text-gray-700 mb-2">
                                    Years
                                </label>
                                <input type="number" name="total_teaching_experience_years" id="total_teaching_experience_years" 
                                       value="{{ old('total_teaching_experience_years', $application->total_teaching_experience_years) }}" 
                                       min="0" max="50"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="Enter years">
                                @error('total_teaching_experience_years')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="total_teaching_experience_months" class="block text-sm font-medium text-gray-700 mb-2">
                                    Months
                                </label>
                                <input type="number" name="total_teaching_experience_months" id="total_teaching_experience_months" 
                                       value="{{ old('total_teaching_experience_months', $application->total_teaching_experience_months) }}" 
                                       min="0" max="11"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="Enter months">
                                @error('total_teaching_experience_months')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Experience after Ph.D -->
                    <div class="bg-green-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-graduation-cap text-green-600 mr-2"></i>Experience after Ph.D
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="experience_after_phd_years" class="block text-sm font-medium text-gray-700 mb-2">
                                    Years
                                </label>
                                <input type="number" name="experience_after_phd_years" id="experience_after_phd_years" 
                                       value="{{ old('experience_after_phd_years', $application->experience_after_phd_years) }}" 
                                       min="0" max="50"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"
                                       placeholder="Enter years">
                                @error('experience_after_phd_years')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="experience_after_phd_months" class="block text-sm font-medium text-gray-700 mb-2">
                                    Months
                                </label>
                                <input type="number" name="experience_after_phd_months" id="experience_after_phd_months" 
                                       value="{{ old('experience_after_phd_months', $application->experience_after_phd_months) }}" 
                                       min="0" max="11"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"
                                       placeholder="Enter months">
                                @error('experience_after_phd_months')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Experience after AGP 6000 -->
                    <div class="bg-purple-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-rupee-sign text-purple-600 mr-2"></i>Experience after AGP 6000 or Equivalent Pay Level-10
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="experience_after_agp_6000_years" class="block text-sm font-medium text-gray-700 mb-2">
                                    Years
                                </label>
                                <input type="number" name="experience_after_agp_6000_years" id="experience_after_agp_6000_years" 
                                       value="{{ old('experience_after_agp_6000_years', $application->experience_after_agp_6000_years) }}" 
                                       min="0" max="50"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
                                       placeholder="Enter years">
                                @error('experience_after_agp_6000_years')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="experience_after_agp_6000_months" class="block text-sm font-medium text-gray-700 mb-2">
                                    Months
                                </label>
                                <input type="number" name="experience_after_agp_6000_months" id="experience_after_agp_6000_months" 
                                       value="{{ old('experience_after_agp_6000_months', $application->experience_after_agp_6000_months) }}" 
                                       min="0" max="11"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
                                       placeholder="Enter months">
                                @error('experience_after_agp_6000_months')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Pay Level 7000 & 11 Experience -->
                    <div class="bg-orange-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-chart-line text-orange-600 mr-2"></i>Experience for Pay Level 7000 and Pay Level 11 (up to 10500)
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="experience_pay_level_7000_years" class="block text-sm font-medium text-gray-700 mb-2">
                                    Years
                                </label>
                                <input type="number" name="experience_pay_level_7000_years" id="experience_pay_level_7000_years" 
                                       value="{{ old('experience_pay_level_7000_years', $application->experience_pay_level_7000_years) }}" 
                                       min="0" max="50"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500"
                                       placeholder="Enter years">
                                @error('experience_pay_level_7000_years')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="experience_pay_level_7000_months" class="block text-sm font-medium text-gray-700 mb-2">
                                    Months
                                </label>
                                <input type="number" name="experience_pay_level_7000_months" id="experience_pay_level_7000_months" 
                                       value="{{ old('experience_pay_level_7000_months', $application->experience_pay_level_7000_months) }}" 
                                       min="0" max="11"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500"
                                       placeholder="Enter months">
                                @error('experience_pay_level_7000_months')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Pay Level 14A Experience -->
                    <div class="bg-red-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-star text-red-600 mr-2"></i>Experience for Pay Level 14A
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="experience_pay_level_14a_years" class="block text-sm font-medium text-gray-700 mb-2">
                                    Years
                                </label>
                                <input type="number" name="experience_pay_level_14a_years" id="experience_pay_level_14a_years" 
                                       value="{{ old('experience_pay_level_14a_years', $application->experience_pay_level_14a_years) }}" 
                                       min="0" max="50"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"
                                       placeholder="Enter years">
                                @error('experience_pay_level_14a_years')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="experience_pay_level_14a_months" class="block text-sm font-medium text-gray-700 mb-2">
                                    Months
                                </label>
                                <input type="number" name="experience_pay_level_14a_months" id="experience_pay_level_14a_months" 
                                       value="{{ old('experience_pay_level_14a_months', $application->experience_pay_level_14a_months) }}" 
                                       min="0" max="11"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"
                                       placeholder="Enter months">
                                @error('experience_pay_level_14a_months')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between mt-8">
                    <a href="{{ route('applicant.teaching-experience-details.index', $application) }}" 
                       class="bg-gray-600 text-white px-6 py-2 rounded-md hover:bg-gray-700 transition-colors">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors">
                        Save Teaching Experience Details
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleExperienceFields(show) {
    const fieldsDiv = document.getElementById('experience-fields');
    if (show) {
        fieldsDiv.style.display = 'block';
    } else {
        fieldsDiv.style.display = 'none';
        // Clear all experience fields when hiding
        const inputs = fieldsDiv.querySelectorAll('input[type="number"]');
        inputs.forEach(input => input.value = '');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const hasExperience = document.querySelector('input[name="has_teaching_experience"]:checked');
    if (hasExperience) {
        toggleExperienceFields(hasExperience.value === '1');
    }
});
</script>
@endsection