@extends('layouts.dashboard')

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

@section('content')
<!-- Page Header -->
<div class="mb-10">
    <div class="flex items-center text-base text-gray-500 mb-3">
        <a href="{{ route('experiences.index') }}" class="hover:text-indigo-600 transition-colors">Experiences</a>
        <svg class="w-5 h-5 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
        <span>Add New</span>
    </div>
</div>

<div class="max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900">Add Experience</h1>
    <p class="text-lg text-gray-600 my-2">Add a new work experience, education, or project to your profile</p>
    <div class="card p-8 shadow-lg">
        <form action="{{ route('experiences.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf
            
            <!-- Title -->
            <div>
                <label for="title" class="block text-base font-medium text-gray-700 mb-2">Title <span class="text-red-500">*</span></label>
                <input type="text" name="title" id="title" value="{{ old('title') }}" 
                       class="form-input @error('title') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all" 
                       placeholder="e.g., Senior Developer, Bachelor's Degree" required>
                @error('title')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Company -->
            <div>
                <label for="company" class="block text-base font-medium text-gray-700 mb-2">Company / Institution</label>
                <input type="text" name="company" id="company" value="{{ old('company') }}" 
                       class="form-input @error('company') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all" 
                       placeholder="e.g., Google, Harvard University">
                @error('company')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Location -->
            <div>
                <label for="location" class="block text-base font-medium text-gray-700 mb-2">Location</label>
                <input type="text" name="location" id="location" value="{{ old('location') }}" 
                       class="form-input @error('location') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all" 
                       placeholder="e.g., New York, NY or Remote">
                @error('location')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Dates -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                    <label for="start_date" class="block text-base font-medium text-gray-700 mb-2">Start Date</label>
                    <input type="date" name="start_date" id="start_date" value="{{ old('start_date') }}" 
                           class="form-input @error('start_date') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all">
                    @error('start_date')
                        <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="end_date" class="block text-base font-medium text-gray-700 mb-2">End Date</label>
                    <input type="date" name="end_date" id="end_date" value="{{ old('end_date') }}" 
                           class="form-input @error('end_date') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all">
                    @error('end_date')
                        <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Is Current -->
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" name="is_current" value="1" {{ old('is_current') ? 'checked' : '' }}
                           class="w-5 h-5 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 transition-colors">
                    <span class="ml-3 text-base text-gray-700 font-medium">I currently work/study here</span>
                </label>
                <p class="mt-1 ml-8 text-sm text-gray-500">Check this if this is your current position</p>
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-base font-medium text-gray-700 mb-2">Description</label>
                <textarea name="description" id="description" rows="6" 
                          class="form-input @error('description') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all resize-y" 
                          placeholder="Describe your responsibilities, achievements, and key learnings...">{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Experience Type -->
            <div>
                <label for="experience_type" class="block text-base font-medium text-gray-700 mb-2">Experience Type</label>
                <select name="experience_type" id="experience_type" 
                        class="form-input @error('experience_type') border-red-500 @enderror block w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg focus:ring-0 focus:ring-purple-500 focus:border-purple-500 focus:outline-none shadow-xs transition-all bg-white">
                    <option value="">Select type</option>
                    <option value="work" {{ old('experience_type') === 'work' ? 'selected' : '' }}>💼 Work Experience</option>
                    <option value="education" {{ old('experience_type') === 'education' ? 'selected' : '' }}>🎓 Education</option>
                    <option value="project" {{ old('experience_type') === 'project' ? 'selected' : '' }}>🚀 Project</option>
                    <option value="volunteer" {{ old('experience_type') === 'volunteer' ? 'selected' : '' }}>🤝 Volunteer</option>
                </select>
                @error('experience_type')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Photo / Logo with Preview -->
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">Photo / Logo</label>
                
                <!-- Preview Container (Hidden by default) -->
                <div id="photo-preview-container" class="mb-4 hidden">
                    <div class="relative w-full h-48 bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200">
                        <img id="photo-preview" src="" alt="Preview" class="w-full h-full object-contain">
                        <button type="button" onclick="removePhotoPreview()" class="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1 shadow-md transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                    <p id="photo-filename" class="mt-2 text-sm text-gray-600 font-medium"></p>
                </div>

                <!-- Upload Area -->
                <div id="upload-area" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-indigo-400 transition-colors bg-gray-50 cursor-pointer">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-gray-600 justify-center">
                            <label for="photo_path" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 px-2 py-1">
                                <span>Upload a file</span>
                                <input id="photo_path" name="photo_path" type="file" accept="image/*" class="sr-only" onchange="previewPhoto(this)">
                            </label>
                            <p class="pl-1 py-1">or drag and drop</p>
                        </div>
                        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 2MB</p>
                    </div>
                </div>
                @error('photo_path')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Status -->
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" name="status" value="1" {{ old('status', true) ? 'checked' : '' }}
                           class="w-5 h-5 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 transition-colors">
                    <span class="ml-3 text-base text-gray-700 font-medium">Active</span>
                </label>
                <p class="mt-1 ml-8 text-sm text-gray-500">Inactive experiences won't be shown on your public profile</p>
            </div>

            <!-- Buttons -->
            <div class="flex flex-col sm:flex-row items-center gap-4 pt-6 border-t-2 border-gray-200">
                <button type="submit" class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white text-lg font-semibold py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2 shadow-md hover:shadow-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    <span>Add Experience</span>
                </button>
                <a href="{{ route('experiences.index') }}" class="w-full sm:w-auto text-center bg-gray-200 hover:bg-gray-300 text-gray-800 text-lg font-semibold py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span>Cancel</span>
                </a>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
    <!-- JavaScript for Photo Preview -->
<script>
function previewPhoto(input) {
    const previewContainer = document.getElementById('photo-preview-container');
    const previewImg = document.getElementById('photo-preview');
    const filenameDisplay = document.getElementById('photo-filename');
    const uploadArea = document.getElementById('upload-area');
    
    if (input.files && input.files[0]) {
        const file = input.files[0];
        
        // Validate file type
        if (!file.type.match(/^image\//)) {
            alert('Please select an image file (PNG, JPG, GIF)');
            input.value = '';
            return;
        }
        
        // Validate file size (2MB max)
        if (file.size > 2 * 1024 * 1024) {
            alert('File size must be less than 2MB');
            input.value = '';
            return;
        }
        
        const reader = new FileReader();
        
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            filenameDisplay.textContent = file.name;
            previewContainer.classList.remove('hidden');
            uploadArea.classList.add('hidden');
        };
        
        reader.readAsDataURL(file);
    }
}

function removePhotoPreview() {
    const input = document.getElementById('photo_path');
    const previewContainer = document.getElementById('photo-preview-container');
    const previewImg = document.getElementById('photo-preview');
    const uploadArea = document.getElementById('upload-area');
    
    // Clear the file input
    input.value = '';
    
    // Reset and hide preview, show upload area
    previewImg.src = '';
    previewContainer.classList.add('hidden');
    uploadArea.classList.remove('hidden');
}

// Drag and drop support
document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('upload-area');
    const fileInput = document.getElementById('photo_path');
    
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, preventDefaults, false);
    });
    
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadArea.addEventListener(eventName, highlight, false);
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, unhighlight, false);
    });
    
    function highlight(e) {
        uploadArea.classList.add('border-indigo-500', 'bg-indigo-50');
    }
    
    function unhighlight(e) {
        uploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
    }
    
    uploadArea.addEventListener('drop', handleDrop, false);
    
    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        previewPhoto(fileInput);
    }
});
</script>
@endpush