@extends('layouts.app')

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

@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 {{ ucfirst($experience->experience_type) }} Experience</h1>
                    <p class="text-gray-600 mt-1">Update your experience details</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.experience.update', [$application, $experience]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="hidden" name="experience_type" value="{{ $experience->experience_type }}">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Position/Designation -->
                    <div class="md:col-span-2">
                        <label for="position_designation" class="block text-sm font-medium text-gray-700 mb-2">
                            Position/Designation <span class="text-red-500">*</span>
                        </label>
                        @if($experience->experience_type === 'teaching')
                        <select name="position_designation" id="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">
                            <option value="">Select Teaching Position</option>
                            @foreach(App\Models\Experience::TEACHING_POSITIONS as $key => $label)
                            <option value="{{ $key }}" {{ old('position_designation', $experience->position_designation) === $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @elseif($experience->experience_type === 'research')
                        <select name="position_designation" id="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">
                            <option value="">Select Research Position</option>
                            @foreach(App\Models\Experience::RESEARCH_POSITIONS as $key => $label)
                            <option value="{{ $key }}" {{ old('position_designation', $experience->position_designation) === $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @else
                        <input type="text" name="position_designation" id="position_designation" 
                               value="{{ old('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('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="institution_industry_name" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ $experience->experience_type === 'industrial' ? 'Company/Organization Name' : 'Institution Name' }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="institution_industry_name" id="institution_industry_name" 
                               value="{{ old('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 {{ $experience->experience_type === 'industrial' ? 'company' : 'institution' }} name">
                        @error('institution_industry_name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

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

                    <!-- Location -->
                    <div>
                        <label for="location" class="block text-sm font-medium text-gray-700 mb-2">
                            Location
                        </label>
                        <input type="text" name="location" id="location" 
                               value="{{ old('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('location')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- From Date -->
                    <div>
                        <label for="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="from_date" id="from_date" 
                               value="{{ old('from_date', $experience->from_date?->format('Y-m-d')) }}" 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('from_date')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- To Date -->
                    <div>
                        <label for="to_date" class="block text-sm font-medium text-gray-700 mb-2">
                            To Date
                        </label>
                        <input type="date" name="to_date" id="to_date" 
                               value="{{ old('to_date', $experience->to_date?->format('Y-m-d')) }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        @error('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', $experience->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', $experience->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', $experience->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', $experience->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', $experience->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', $experience->currency) === 'INR' ? 'selected' : '' }}>INR</option>
                                        <option value="USD" {{ old('currency', $experience->currency) === 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="EUR" {{ old('currency', $experience->currency) === 'EUR' ? 'selected' : '' }}>EUR</option>
                                    </select>
                                    <input type="number" name="pay_amount" id="pay_amount" 
                                           value="{{ old('pay_amount', $experience->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>

                    <!-- Type-specific fields -->
                    @if($experience->experience_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', $experience->subjects_taught) }}</textarea>
                        @error('subjects_taught')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    @elseif($experience->experience_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', $experience->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', $experience->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', $experience->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>
                    @elseif($experience->experience_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', $experience->employment_type) === $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @error('employment_type')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <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', $experience->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

                    <!-- Description -->
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ $experience->experience_type === 'industrial' ? 'Job Description' : 'Description' }}
                            @if($experience->experience_type === 'industrial') <span class="text-red-500">*</span> @endif
                        </label>
                        <textarea name="description" id="description" rows="4" 
                                  {{ $experience->experience_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', $experience->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', $experience->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', $experience->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', $experience->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>
                        
                        @if($experience->hasDocument())
                        <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-file text-green-600 mr-2"></i>
                                    <span class="text-sm text-green-800">{{ $experience->getDocumentName() }}</span>
                                </div>
                                <a href="{{ route('applicant.experience.download-document', [$application, $experience]) }}" 
                                   class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download"></i> Download
                                </a>
                            </div>
                        </div>
                        @endif
                        
                        <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">
                                    {{ $experience->hasDocument() ? 'Replace existing document' : '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">
                        Update 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