@extends('layouts.app')

@section('title', 'Add ' . ucfirst($type) . ' Experience')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-6xl 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">Add {{ ucfirst($type) }} Experience</h1>
                    <p class="text-gray-600 mt-1">Provide details about your {{ $type }} experience</p>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500">Application #{{ $application->application_number }}</div>
                </div>
            </div>
        </div>

        <!-- Tabular Experience Form -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form action="{{ route('applicant.experience.store', $application) }}" method="POST" enctype="multipart/form-data" id="experience-form">
                @csrf
                <input type="hidden" name="experience_type" value="{{ $type }}">

                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-briefcase"></i>
                        {{ ucfirst($type) }} Experience Entries
                    </h3>
                    
                    <div class="info-box mb-4">
                        <i class="fas fa-info-circle"></i>
                        <p>You can add multiple {{ $type }} experience entries. Each entry should represent a separate position or role.</p>
                    </div>
                    
                    <div id="experiences-container">
                        @php
                            $experiences = old('experiences', []);
                            if (empty($experiences)) {
                                $experiences = [[]]; // Start with one empty experience
                            }
                        @endphp
                        
                        @foreach($experiences as $index => $experience)
                        <div class="experience-entry" data-index="{{ $index }}">
                            <div class="entry-header">
                                <h4 class="entry-title">
                                    <i class="fas fa-user-tie"></i>
                                    {{ ucfirst($type) }} Experience {{ $index + 1 }}
                                </h4>
                                @if($index > 0)
                                    <button type="button" class="btn-remove" onclick="removeExperience({{ $index }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                @endif
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Position/Designation -->
                                <div class="md:col-span-2">
                                    <label for="experience_{{ $index }}_position" class="block text-sm font-medium text-gray-700 mb-2">
                                        Position/Designation <span class="text-red-500">*</span>
                                    </label>
                                    @if($type === 'teaching')
                                    <select name="experiences[{{ $index }}][position_designation]" id="experience_{{ $index }}_position" required
                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="">Select Teaching Position</option>
                                        @foreach(App\Models\Experience::TEACHING_POSITIONS as $key => $label)
                                        <option value="{{ $key }}" {{ old("experiences.{$index}.position_designation", $experience['position_designation'] ?? '') === $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @elseif($type === 'research')
                                    <select name="experiences[{{ $index }}][position_designation]" id="experience_{{ $index }}_position" required
                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="">Select Research Position</option>
                                        @foreach(App\Models\Experience::RESEARCH_POSITIONS as $key => $label)
                                        <option value="{{ $key }}" {{ old("experiences.{$index}.position_designation", $experience['position_designation'] ?? '') === $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @else
                                    <input type="text" name="experiences[{{ $index }}][position_designation]" id="experience_{{ $index }}_position" 
                                           value="{{ old("experiences.{$index}.position_designation", $experience['position_designation'] ?? '') }}" required
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           placeholder="e.g., Software Engineer, Manager, etc.">
                                    @endif
                                    @error("experiences.{$index}.position_designation")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Institution/Industry Name -->
                                <div class="md:col-span-2">
                                    <label for="experience_{{ $index }}_institution" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ $type === 'industrial' ? 'Company/Organization Name' : 'Institution Name' }} <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="experiences[{{ $index }}][institution_industry_name]" id="experience_{{ $index }}_institution" 
                                           value="{{ old("experiences.{$index}.institution_industry_name", $experience['institution_industry_name'] ?? '') }}" required
                                           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 {{ $type === 'industrial' ? 'company' : 'institution' }} name">
                                    @error("experiences.{$index}.institution_industry_name")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Department -->
                                <div>
                                    <label for="experience_{{ $index }}_department" class="block text-sm font-medium text-gray-700 mb-2">
                                        Department/Division
                                    </label>
                                    <input type="text" name="experiences[{{ $index }}][department]" id="experience_{{ $index }}_department" 
                                           value="{{ old("experiences.{$index}.department", $experience['department'] ?? '') }}"
                                           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 department name">
                                    @error("experiences.{$index}.department")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Location -->
                                <div>
                                    <label for="experience_{{ $index }}_location" class="block text-sm font-medium text-gray-700 mb-2">
                                        Location
                                    </label>
                                    <input type="text" name="experiences[{{ $index }}][location]" id="experience_{{ $index }}_location" 
                                           value="{{ old("experiences.{$index}.location", $experience['location'] ?? '') }}"
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           placeholder="City, State, Country">
                                    @error("experiences.{$index}.location")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- From Date -->
                                <div>
                                    <label for="experience_{{ $index }}_from_date" class="block text-sm font-medium text-gray-700 mb-2">
                                        From Date <span class="text-red-500">*</span>
                                    </label>
                                    <input type="date" name="experiences[{{ $index }}][from_date]" id="experience_{{ $index }}_from_date" 
                                           value="{{ old("experiences.{$index}.from_date", $experience['from_date'] ?? '') }}" required
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    @error("experiences.{$index}.from_date")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- To Date -->
                                <div>
                                    <label for="experience_{{ $index }}_to_date" class="block text-sm font-medium text-gray-700 mb-2">
                                        To Date
                                    </label>
                                    <input type="date" name="experiences[{{ $index }}][to_date]" id="experience_{{ $index }}_to_date" 
                                           value="{{ old("experiences.{$index}.to_date", $experience['to_date'] ?? '') }}"
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    @error("experiences.{$index}.to_date")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                    <!-- Current Position Checkbox -->
                    <div class="md:col-span-2">
                        <div class="flex items-center space-x-4">
                            <label class="flex items-center">
                                <input type="checkbox" name="is_current" value="1" 
                                       {{ old('is_current') ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                       onchange="toggleToDate()">
                                <span class="ml-2 text-sm text-gray-700">This is my current position</span>
                            </label>
                            
                            <label class="flex items-center">
                                <input type="checkbox" name="is_existing_position" value="1" 
                                       {{ old('is_existing_position') ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">Mark as existing position</span>
                            </label>
                        </div>
                    </div>

                    <!-- Pay Scale Information -->
                    <div class="md:col-span-2">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Compensation Details</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <label for="pay_scale" class="block text-sm font-medium text-gray-700 mb-2">
                                    Pay Scale
                                </label>
                                <input type="text" name="pay_scale" id="pay_scale" 
                                       value="{{ old('pay_scale') }}"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="e.g., 15600-39100">
                                @error('pay_scale')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="grade_pay" class="block text-sm font-medium text-gray-700 mb-2">
                                    Grade Pay
                                </label>
                                <input type="text" name="grade_pay" id="grade_pay" 
                                       value="{{ old('grade_pay') }}"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="e.g., 6000, 7000">
                                @error('grade_pay')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="pay_level" class="block text-sm font-medium text-gray-700 mb-2">
                                    Pay Level
                                </label>
                                <input type="text" name="pay_level" id="pay_level" 
                                       value="{{ old('pay_level') }}"
                                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="e.g., Level 10, Level 11">
                                @error('pay_level')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="pay_amount" class="block text-sm font-medium text-gray-700 mb-2">
                                    Salary Amount
                                </label>
                                <div class="flex">
                                    <select name="currency" class="border border-gray-300 rounded-l-md px-3 py-2 bg-gray-50">
                                        <option value="INR" {{ old('currency', 'INR') === 'INR' ? 'selected' : '' }}>INR</option>
                                        <option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="EUR" {{ old('currency') === 'EUR' ? 'selected' : '' }}>EUR</option>
                                    </select>
                                    <input type="number" name="pay_amount" id="pay_amount" 
                                           value="{{ old('pay_amount') }}" step="0.01"
                                           class="flex-1 border border-l-0 border-gray-300 rounded-r-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           placeholder="Enter amount">
                                </div>
                                @error('pay_amount')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Employment Type -->
                    @if($type === 'industrial')
                    <div>
                        <label for="employment_type" class="block text-sm font-medium text-gray-700 mb-2">
                            Employment Type
                        </label>
                        <select name="employment_type" id="employment_type"
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Select Employment Type</option>
                            @foreach(App\Models\Experience::EMPLOYMENT_TYPES as $key => $label)
                            <option value="{{ $key }}" {{ old('employment_type') === $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @error('employment_type')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Company Type -->
                    <div>
                        <label for="company_type" class="block text-sm font-medium text-gray-700 mb-2">
                            Company Type <span class="text-red-500">*</span>
                        </label>
                        <select name="company_type" id="company_type" required
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Select Company Type</option>
                            @foreach(App\Models\Experience::COMPANY_TYPES as $key => $label)
                            <option value="{{ $key }}" {{ old('company_type') === $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @error('company_type')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    @endif

                    <!-- Type-specific fields -->
                    @if($type === 'teaching')
                    <div class="md:col-span-2">
                        <label for="subjects_taught" class="block text-sm font-medium text-gray-700 mb-2">
                            Subjects Taught <span class="text-red-500">*</span>
                        </label>
                        <textarea name="subjects_taught" id="subjects_taught" rows="3" required
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="List the subjects/courses you taught">{{ old('subjects_taught') }}</textarea>
                        @error('subjects_taught')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    @elseif($type === 'research')
                    <div>
                        <label for="research_area" class="block text-sm font-medium text-gray-700 mb-2">
                            Research Area <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="research_area" id="research_area" 
                               value="{{ old('research_area') }}" required
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="e.g., Machine Learning, Biotechnology">
                        @error('research_area')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="supervisor_name" class="block text-sm font-medium text-gray-700 mb-2">
                            Supervisor Name
                        </label>
                        <input type="text" name="supervisor_name" id="supervisor_name" 
                               value="{{ old('supervisor_name') }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="Name of your supervisor">
                        @error('supervisor_name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="project_title" class="block text-sm font-medium text-gray-700 mb-2">
                            Project Title
                        </label>
                        <input type="text" name="project_title" id="project_title" 
                               value="{{ old('project_title') }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="Title of your research project">
                        @error('project_title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    @endif

                    <!-- Description -->
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ $type === 'industrial' ? 'Job Description' : 'Description' }}
                            @if($type === 'industrial') <span class="text-red-500">*</span> @endif
                        </label>
                        <textarea name="description" id="description" rows="4" 
                                  {{ $type === 'industrial' ? 'required' : '' }}
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="Describe your role and responsibilities">{{ old('description') }}</textarea>
                        @error('description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Responsibilities -->
                    <div class="md:col-span-2">
                        <label for="responsibilities" class="block text-sm font-medium text-gray-700 mb-2">
                            Key Responsibilities
                        </label>
                        <textarea name="responsibilities" id="responsibilities" rows="3"
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="List your key responsibilities">{{ old('responsibilities') }}</textarea>
                        @error('responsibilities')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Achievements -->
                    <div class="md:col-span-2">
                        <label for="achievements" class="block text-sm font-medium text-gray-700 mb-2">
                            Key Achievements
                        </label>
                        <textarea name="achievements" id="achievements" rows="3"
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="Describe your key achievements and accomplishments">{{ old('achievements') }}</textarea>
                        @error('achievements')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Skills Acquired -->
                    <div class="md:col-span-2">
                        <label for="skills_acquired" class="block text-sm font-medium text-gray-700 mb-2">
                            Skills Acquired
                        </label>
                        <textarea name="skills_acquired" id="skills_acquired" rows="2"
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="List the skills you acquired during this experience">{{ old('skills_acquired') }}</textarea>
                        @error('skills_acquired')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Document Upload -->
                    <div class="md:col-span-2">
                        <label for="document" class="block text-sm font-medium text-gray-700 mb-2">
                            Supporting Document
                        </label>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-6">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-4"></i>
                                <div class="text-sm text-gray-600 mb-2">
                                    Upload experience certificate, offer letter, or other supporting document
                                </div>
                                <input type="file" name="document" id="document" 
                                       accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                                <div class="text-xs text-gray-500 mt-2">
                                    Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB)
                                </div>
                            </div>
                        </div>
                        @error('document')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between mt-8">
                    <a href="{{ route('applicant.experience.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">
                        Add Experience
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleToDate() {
    const isCurrentCheckbox = document.querySelector('input[name="is_current"]');
    const toDateInput = document.getElementById('to_date');
    
    if (isCurrentCheckbox.checked) {
        toDateInput.value = '';
        toDateInput.disabled = true;
        toDateInput.classList.add('bg-gray-100');
    } else {
        toDateInput.disabled = false;
        toDateInput.classList.remove('bg-gray-100');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleToDate();
});
</script>
@endsection