@extends('layouts.admin')

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

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">
    <div class="flex items-center justify-between">
        <h2 class="font-serif text-2xl text-[#0c2340]">Edit Package: {{ $package->title }}</h2>
        <a href="{{ route('admin.packages') }}" class="text-gray-500 hover:text-[#0c2340] font-medium text-sm flex items-center gap-2 transition-colors">
            <i data-feather="arrow-left" class="w-4 h-4"></i> Back to Packages
        </a>
    </div>

    <form action="{{ route('admin.packages.update', $package->id) }}" method="POST" class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
        @csrf
        @method('PUT')
        
        <div class="p-8 space-y-8">
            <!-- Basic Information -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Basic Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Package Title *</label>
                        <input type="text" name="title" value="{{ old('title', $package->title) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('title') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Destination *</label>
                        <input type="text" name="destination" value="{{ old('destination', $package->destination) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('destination') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Category *</label>
                        <input type="text" name="category" value="{{ old('category', $package->category) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('category') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Duration (Days) *</label>
                        <input type="number" name="duration_days" min="1" value="{{ old('duration_days', $package->duration_days) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('duration_days') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Difficulty Level *</label>
                        <select name="difficulty_level" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                            <option value="easy" {{ old('difficulty_level', $package->difficulty_level) == 'easy' ? 'selected' : '' }}>Easy</option>
                            <option value="moderate" {{ old('difficulty_level', $package->difficulty_level) == 'moderate' ? 'selected' : '' }}>Moderate</option>
                            <option value="challenging" {{ old('difficulty_level', $package->difficulty_level) == 'challenging' ? 'selected' : '' }}>Challenging</option>
                            <option value="extreme" {{ old('difficulty_level', $package->difficulty_level) == 'extreme' ? 'selected' : '' }}>Extreme</option>
                        </select>
                        @error('difficulty_level') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description *</label>
                        <textarea name="description" rows="4" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ old('description', $package->description) }}</textarea>
                        @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Itinerary</label>
                        <textarea name="itinerary" rows="6" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ old('itinerary', $package->itinerary) }}</textarea>
                        @error('itinerary') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <!-- Pricing & Capacity -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Pricing & Capacity</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Price *</label>
                        <input type="number" step="0.01" min="0" name="price" value="{{ old('price', $package->price) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Discount Price</label>
                        <input type="number" step="0.01" min="0" name="discount_price" value="{{ old('discount_price', $package->discount_price) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('discount_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Currency *</label>
                        <input type="text" name="currency" value="{{ old('currency', $package->currency) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('currency') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Min People *</label>
                        <input type="number" name="min_people" min="1" value="{{ old('min_people', $package->min_people) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('min_people') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Max People *</label>
                        <input type="number" name="max_people" min="1" value="{{ old('max_people', $package->max_people) }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('max_people') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Available Slots</label>
                        <input type="number" name="available_slots" min="0" value="{{ old('available_slots', $package->available_slots) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('available_slots') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <!-- Additional Details -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Additional Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Accommodation Type</label>
                        <input type="text" name="accommodation_type" value="{{ old('accommodation_type', $package->accommodation_type) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('accommodation_type') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Transportation</label>
                        <input type="text" name="transportation" value="{{ old('transportation', $package->transportation) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('transportation') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Meeting Point</label>
                        <input type="text" name="meeting_point" value="{{ old('meeting_point', $package->meeting_point) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('meeting_point') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">What to Bring</label>
                        <input type="text" name="what_to_bring" value="{{ old('what_to_bring', $package->what_to_bring) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('what_to_bring') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <!-- Arrays/JSON Fields (simplified as textareas for MVP) -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Lists (One item per line)</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Highlights</label>
                        <textarea name="highlights[]" rows="5" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ implode("\n", old('highlights', $package->highlights ?? [])) }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Inclusions</label>
                        <textarea name="inclusions[]" rows="5" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ implode("\n", old('inclusions', $package->inclusions ?? [])) }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Exclusions</label>
                        <textarea name="exclusions[]" rows="5" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ implode("\n", old('exclusions', $package->exclusions ?? [])) }}</textarea>
                    </div>
                </div>
            </div>

            <!-- SEO Optimization -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">SEO Optimization</h3>
                <p class="text-sm text-gray-500 mb-4">These settings help this specific package rank better in Google and social media.</p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Title (optional)</label>
                        <input type="text" name="seo_title" value="{{ old('seo_title', $package->seo_title) }}" 
                               placeholder="Leave empty to use default" 
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c]">
                        <p class="text-xs text-gray-500 mt-1">Recommended: 50-60 characters</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Keywords (optional)</label>
                        <input type="text" name="seo_keywords" value="{{ old('seo_keywords', $package->seo_keywords) }}" 
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c]">
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Description (Meta Description)</label>
                        <textarea name="seo_description" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c]">{{ old('seo_description', $package->seo_description) }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Recommended: 150-160 characters. This appears in search results.</p>
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Social Share Image URL (OG Image)</label>
                        <input type="text" name="seo_og_image" value="{{ old('seo_og_image', $package->seo_og_image) }}" 
                               placeholder="https://... (1200x630 recommended)" 
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c]">
                    </div>
                </div>
            </div>

            <!-- Status & Toggles -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Status</h3>
                <div class="flex gap-8">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $package->is_active) ? 'checked' : '' }} class="w-5 h-5 text-[#c9a84c] rounded border-gray-300 focus:ring-[#c9a84c]">
                        <span class="text-sm font-medium text-gray-700">Active</span>
                    </label>

                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="hidden" name="is_featured" value="0">
                        <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $package->is_featured) ? 'checked' : '' }} class="w-5 h-5 text-[#c9a84c] rounded border-gray-300 focus:ring-[#c9a84c]">
                        <span class="text-sm font-medium text-gray-700">Featured Package</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="px-8 py-5 bg-gray-50/50 border-t border-gray-100 flex justify-end gap-4">
            <a href="{{ route('admin.packages') }}" class="px-6 py-2.5 rounded-full font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-200 transition-colors">Cancel</a>
            <button type="submit" class="px-6 py-2.5 rounded-full font-medium bg-[#0c2340] text-white hover:bg-[#1a4a6e] transition-colors">Update Package</button>
        </div>
    </form>
</div>

<!-- Script to handle textareas to arrays -->
@push('scripts')
<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        ['highlights', 'inclusions', 'exclusions'].forEach(field => {
            const textarea = document.querySelector(`textarea[name="${field}[]"]`);
            if (textarea) {
                const lines = textarea.value.split('\n').map(l => l.trim()).filter(l => l);
                textarea.disabled = true; // prevent sending the textarea itself
                
                lines.forEach(line => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = `${field}[]`;
                    input.value = line;
                    this.appendChild(input);
                });
            }
        });
    });
</script>
@endpush
@endsection
