@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="experiences[{{ $index }}][is_current]" value="1" 
                                                   {{ old("experiences.{$index}.is_current", $experience['is_current'] ?? false) ? 'checked' : '' }}
                                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                                   onchange="toggleToDate({{ $index }})">
                                            <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="experiences[{{ $index }}][is_existing_position]" value="1" 
                                                   {{ old("experiences.{$index}.is_existing_position", $experience['is_existing_position'] ?? false) ? '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">
                                    <h4 class="text-md font-medium text-gray-900 mb-3">Compensation Details</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                        <div>
                                            <label for="experience_{{ $index }}_pay_scale" class="block text-sm font-medium text-gray-700 mb-2">
                                                Pay Scale
                                            </label>
                                            <input type="text" name="experiences[{{ $index }}][pay_scale]" id="experience_{{ $index }}_pay_scale" 
                                                   value="{{ old("experiences.{$index}.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("experiences.{$index}.pay_scale")
                                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        <div>
                                            <label for="experience_{{ $index }}_grade_pay" class="block text-sm font-medium text-gray-700 mb-2">
                                                Grade Pay
                                            </label>
                                            <input type="text" name="experiences[{{ $index }}][grade_pay]" id="experience_{{ $index }}_grade_pay" 
                                                   value="{{ old("experiences.{$index}.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("experiences.{$index}.grade_pay")
                                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        <div>
                                            <label for="experience_{{ $index }}_pay_level" class="block text-sm font-medium text-gray-700 mb-2">
                                                Pay Level
                                            </label>
                                            <input type="text" name="experiences[{{ $index }}][pay_level]" id="experience_{{ $index }}_pay_level" 
                                                   value="{{ old("experiences.{$index}.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("experiences.{$index}.pay_level")
                                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        <div>
                                            <label for="experience_{{ $index }}_pay_amount" class="block text-sm font-medium text-gray-700 mb-2">
                                                Salary Amount
                                            </label>
                                            <div class="flex">
                                                <select name="experiences[{{ $index }}][currency]" class="border border-gray-300 rounded-l-md px-3 py-2 bg-gray-50">
                                                    <option value="INR" {{ old("experiences.{$index}.currency", $experience['currency'] ?? 'INR') === 'INR' ? 'selected' : '' }}>INR</option>
                                                    <option value="USD" {{ old("experiences.{$index}.currency", $experience['currency'] ?? '') === 'USD' ? 'selected' : '' }}>USD</option>
                                                    <option value="EUR" {{ old("experiences.{$index}.currency", $experience['currency'] ?? '') === 'EUR' ? 'selected' : '' }}>EUR</option>
                                                </select>
                                                <input type="number" name="experiences[{{ $index }}][pay_amount]" id="experience_{{ $index }}_pay_amount" 
                                                       value="{{ old("experiences.{$index}.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("experiences.{$index}.pay_amount")
                                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Employment Type (for industrial) -->
                                @if($type === 'industrial')
                                <div>
                                    <label for="experience_{{ $index }}_employment_type" class="block text-sm font-medium text-gray-700 mb-2">
                                        Employment Type
                                    </label>
                                    <select name="experiences[{{ $index }}][employment_type]" id="experience_{{ $index }}_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("experiences.{$index}.employment_type", $experience['employment_type'] ?? '') === $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error("experiences.{$index}.employment_type")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Company Type -->
                                <div>
                                    <label for="experience_{{ $index }}_company_type" class="block text-sm font-medium text-gray-700 mb-2">
                                        Company Type <span class="text-red-500">*</span>
                                    </label>
                                    <select name="experiences[{{ $index }}][company_type]" id="experience_{{ $index }}_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("experiences.{$index}.company_type", $experience['company_type'] ?? '') === $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error("experiences.{$index}.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="experience_{{ $index }}_subjects_taught" class="block text-sm font-medium text-gray-700 mb-2">
                                        Subjects Taught <span class="text-red-500">*</span>
                                    </label>
                                    <textarea name="experiences[{{ $index }}][subjects_taught]" id="experience_{{ $index }}_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("experiences.{$index}.subjects_taught", $experience['subjects_taught'] ?? '') }}</textarea>
                                    @error("experiences.{$index}.subjects_taught")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                @elseif($type === 'research')
                                <div>
                                    <label for="experience_{{ $index }}_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="experiences[{{ $index }}][research_area]" id="experience_{{ $index }}_research_area" 
                                           value="{{ old("experiences.{$index}.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("experiences.{$index}.research_area")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="experience_{{ $index }}_supervisor_name" class="block text-sm font-medium text-gray-700 mb-2">
                                        Supervisor Name
                                    </label>
                                    <input type="text" name="experiences[{{ $index }}][supervisor_name]" id="experience_{{ $index }}_supervisor_name" 
                                           value="{{ old("experiences.{$index}.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("experiences.{$index}.supervisor_name")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="experience_{{ $index }}_project_title" class="block text-sm font-medium text-gray-700 mb-2">
                                        Project Title
                                    </label>
                                    <input type="text" name="experiences[{{ $index }}][project_title]" id="experience_{{ $index }}_project_title" 
                                           value="{{ old("experiences.{$index}.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("experiences.{$index}.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="experience_{{ $index }}_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="experiences[{{ $index }}][description]" id="experience_{{ $index }}_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("experiences.{$index}.description", $experience['description'] ?? '') }}</textarea>
                                    @error("experiences.{$index}.description")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Responsibilities -->
                                <div class="md:col-span-2">
                                    <label for="experience_{{ $index }}_responsibilities" class="block text-sm font-medium text-gray-700 mb-2">
                                        Key Responsibilities
                                    </label>
                                    <textarea name="experiences[{{ $index }}][responsibilities]" id="experience_{{ $index }}_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("experiences.{$index}.responsibilities", $experience['responsibilities'] ?? '') }}</textarea>
                                    @error("experiences.{$index}.responsibilities")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Achievements -->
                                <div class="md:col-span-2">
                                    <label for="experience_{{ $index }}_achievements" class="block text-sm font-medium text-gray-700 mb-2">
                                        Key Achievements
                                    </label>
                                    <textarea name="experiences[{{ $index }}][achievements]" id="experience_{{ $index }}_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("experiences.{$index}.achievements", $experience['achievements'] ?? '') }}</textarea>
                                    @error("experiences.{$index}.achievements")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Skills Acquired -->
                                <div class="md:col-span-2">
                                    <label for="experience_{{ $index }}_skills_acquired" class="block text-sm font-medium text-gray-700 mb-2">
                                        Skills Acquired
                                    </label>
                                    <textarea name="experiences[{{ $index }}][skills_acquired]" id="experience_{{ $index }}_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("experiences.{$index}.skills_acquired", $experience['skills_acquired'] ?? '') }}</textarea>
                                    @error("experiences.{$index}.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="experience_{{ $index }}_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-4">
                                        <div class="text-center">
                                            <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                                            <div class="text-sm text-gray-600 mb-2">
                                                Upload experience certificate, offer letter, or other supporting document
                                            </div>
                                            <input type="file" name="experiences[{{ $index }}][document]" id="experience_{{ $index }}_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-1">
                                                Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB)
                                            </div>
                                        </div>
                                    </div>
                                    @error("experiences.{$index}.document")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                    <div class="add-more-container">
                        <button type="button" class="btn btn-outline" onclick="addExperience()">
                            <i class="fas fa-plus"></i>
                            Add Another {{ ucfirst($type) }} Experience
                        </button>
                    </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 All Experiences
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.experience-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;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-outline {
    background: white;
    color: #4f46e5;
    border: 2px solid #4f46e5;
}

.btn-outline:hover {
    background: #4f46e5;
    color: white;
}

.btn i {
    margin-right: 0.5rem;
}

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    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) {
    .experience-entry {
        padding: 1rem;
    }
    
    .entry-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@push('scripts')
<script>
let experienceIndex = {{ count($experiences) }};
const experienceType = '{{ $type }}';

function addExperience() {
    const container = document.getElementById('experiences-container');
    const newEntry = createExperienceEntry(experienceIndex);
    container.appendChild(newEntry);
    experienceIndex++;
}

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

function toggleToDate(index) {
    const isCurrentCheckbox = document.querySelector(`input[name="experiences[${index}][is_current]"]`);
    const toDateInput = document.getElementById(`experience_${index}_to_date`);
    
    if (isCurrentCheckbox && toDateInput) {
        if (isCurrentCheckbox.checked) {
            toDateInput.value = '';
            toDateInput.disabled = true;
            toDateInput.classList.add('bg-gray-100');
        } else {
            toDateInput.disabled = false;
            toDateInput.classList.remove('bg-gray-100');
        }
    }
}

function createExperienceEntry(index) {
    const div = document.createElement('div');
    div.className = 'experience-entry';
    div.setAttribute('data-index', index);
    
    // Create position field based on type
    let positionField = '';
    if (experienceType === 'teaching') {
        positionField = `
            <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 }}">{{ $label }}</option>
                @endforeach
            </select>
        `;
    } else if (experienceType === 'research') {
        positionField = `
            <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 }}">{{ $label }}</option>
                @endforeach
            </select>
        `;
    } else {
        positionField = `
            <input type="text" 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"
                   placeholder="e.g., Software Engineer, Manager, etc.">
        `;
    }
    
    // Type-specific fields
    let typeSpecificFields = '';
    if (experienceType === 'teaching') {
        typeSpecificFields = `
            <div class="md:col-span-2">
                <label for="experience_${index}_subjects_taught" class="block text-sm font-medium text-gray-700 mb-2">
                    Subjects Taught <span class="text-red-500">*</span>
                </label>
                <textarea name="experiences[${index}][subjects_taught]" id="experience_${index}_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"></textarea>
            </div>
        `;
    } else if (experienceType === 'research') {
        typeSpecificFields = `
            <div>
                <label for="experience_${index}_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="experiences[${index}][research_area]" id="experience_${index}_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">
            </div>
            <div>
                <label for="experience_${index}_supervisor_name" class="block text-sm font-medium text-gray-700 mb-2">
                    Supervisor Name
                </label>
                <input type="text" name="experiences[${index}][supervisor_name]" id="experience_${index}_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">
            </div>
            <div class="md:col-span-2">
                <label for="experience_${index}_project_title" class="block text-sm font-medium text-gray-700 mb-2">
                    Project Title
                </label>
                <input type="text" name="experiences[${index}][project_title]" id="experience_${index}_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">
            </div>
        `;
    }
    
    // Industrial-specific fields
    let industrialFields = '';
    if (experienceType === 'industrial') {
        industrialFields = `
            <div>
                <label for="experience_${index}_employment_type" class="block text-sm font-medium text-gray-700 mb-2">
                    Employment Type
                </label>
                <select name="experiences[${index}][employment_type]" id="experience_${index}_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 }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="experience_${index}_company_type" class="block text-sm font-medium text-gray-700 mb-2">
                    Company Type <span class="text-red-500">*</span>
                </label>
                <select name="experiences[${index}][company_type]" id="experience_${index}_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 }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        `;
    }
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-user-tie"></i>
                ${experienceType.charAt(0).toUpperCase() + experienceType.slice(1)} Experience ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeExperience(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </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>
                ${positionField}
            </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">
                    ${experienceType === '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" 
                       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 ${experienceType === 'industrial' ? 'company' : 'institution'} name">
            </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" 
                       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">
            </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" 
                       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">
            </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" 
                       required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </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" 
                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </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="experiences[${index}][is_current]" value="1" 
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                               onchange="toggleToDate(${index})">
                        <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="experiences[${index}][is_existing_position]" value="1" 
                               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>

            ${industrialFields}
            ${typeSpecificFields}

            <!-- Description -->
            <div class="md:col-span-2">
                <label for="experience_${index}_description" class="block text-sm font-medium text-gray-700 mb-2">
                    ${experienceType === 'industrial' ? 'Job Description' : 'Description'}
                    ${experienceType === 'industrial' ? '<span class="text-red-500">*</span>' : ''}
                </label>
                <textarea name="experiences[${index}][description]" id="experience_${index}_description" rows="4" 
                          ${experienceType === '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"></textarea>
            </div>

            <!-- Document Upload -->
            <div class="md:col-span-2">
                <label for="experience_${index}_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-4">
                    <div class="text-center">
                        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                        <div class="text-sm text-gray-600 mb-2">
                            Upload experience certificate, offer letter, or other supporting document
                        </div>
                        <input type="file" name="experiences[${index}][document]" id="experience_${index}_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-1">
                            Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    return div;
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Initialize toggle for existing entries
    for (let i = 0; i < experienceIndex; i++) {
        toggleToDate(i);
    }
});
</script>
@endpush
@endsection