@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-scroll">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                {{ isset($package) ? 'Edit Package' : 'Create New Package' }}
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                {{ isset($package) ? 'Update package details and services' : 'Create a new service package with pricing' }}
            </p>
        </div>
        <a href="{{ route('admin.packages.index') }}" 
           class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Packages
        </a>
    </div>

    <!-- Form -->
    <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex-1">
        <form action="{{ isset($package) ? route('admin.packages.update', $package) : route('admin.packages.store') }}" method="POST">
            @csrf
            @if(isset($package))
                @method('PUT')
            @endif

            <div class="p-6 space-y-6">
                <!-- Basic Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Package Name -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Package Name *</label>
                        <input type="text" 
                               name="name" 
                               id="name"
                               value="{{ old('name', $package->name ?? '') }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                               required>
                        @error('name')
                            <p class="text-red-500 dark:text-red-400 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div>
                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Slug</label>
                        <input type="text" 
                               name="slug" 
                               id="slug"
                               value="{{ old('slug', $package->slug ?? '') }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"
                               readonly>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Auto-generated from package name</p>
                    </div>
                </div>

                <!-- Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
                    <textarea name="description" 
                              id="description"
                              rows="3"
                              class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white">{{ old('description', $package->description ?? '') }}</textarea>
                    @error('description')
                        <p class="text-red-500 dark:text-red-400 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Pricing -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Regular Price -->
                    <div>
                        <label for="price" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Regular Price ($) *</label>
                        <input type="number" 
                               name="price" 
                               id="price"
                               step="0.01"
                               min="0"
                               value="{{ old('price', $package->price ?? '') }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                               required>
                        @error('price')
                            <p class="text-red-500 dark:text-red-400 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Discount Price -->
                    <div>
                        <label for="discount_price" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Discount Price ($)</label>
                        <input type="number" 
                               name="discount_price" 
                               id="discount_price"
                               step="0.01"
                               min="0"
                               value="{{ old('discount_price', $package->discount_price ?? '') }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                        @error('discount_price')
                            <p class="text-red-500 dark:text-red-400 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Duration -->
                    <div>
                        <label for="duration_days" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Duration (Days)</label>
                        <input type="number" 
                               name="duration_days" 
                               id="duration_days"
                               min="1"
                               value="{{ old('duration_days', $package->duration_days ?? '') }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                               placeholder="Leave empty for unlimited">
                        @error('duration_days')
                            <p class="text-red-500 dark:text-red-400 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Features -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Package Features</label>
                    <div id="features-container" class="space-y-2">
                        @php
                            $features = old('features', $package->features ?? []);
                            if (is_string($features)) {
                                $features = json_decode($features, true) ?? [];
                            }
                        @endphp
                        
                        @foreach($features as $index => $feature)
                            <div class="flex items-center space-x-2 feature-item">
                                <input type="text" 
                                       name="features[]" 
                                       value="{{ $feature }}"
                                       class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                       placeholder="Enter feature">
                                <button type="button" class="remove-feature text-red-500 hover:text-red-700 dark:hover:text-red-400 p-2">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" id="add-feature" class="mt-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        Add Feature
                    </button>
                </div>

                <!-- Services Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Select Services</label>
                    <div class="space-y-3 max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-gray-800">
                        @foreach($services as $service)
                            <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <div class="flex items-center space-x-3">
                                    <input type="checkbox" 
                                           name="services[]" 
                                           value="{{ $service->id }}" 
                                           id="service_{{ $service->id }}"
                                           {{ in_array($service->id, old('services', isset($package) ? $package->services->pluck('id')->toArray() : [])) ? 'checked' : '' }}
                                           class="service-checkbox rounded border-gray-300 dark:border-gray-600 text-[#10B981] focus:ring-[#10B981] bg-white dark:bg-gray-700">
                                    <label for="service_{{ $service->id }}" class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                        {{ $service->name }}
                                    </label>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Quantity:</span>
                                    <input type="number" 
                                           name="quantities[{{ $service->id }}]"
                                           value="{{ old('quantities.'.$service->id, isset($package) ? ($package->services->find($service->id)->pivot->quantity ?? 1) : 1) }}"
                                           min="1"
                                           class="quantity-input w-20 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded focus:ring-1 focus:ring-[#10B981] focus:border-[#10B981] bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                           {{ in_array($service->id, old('services', isset($package) ? $package->services->pluck('id')->toArray() : [])) ? '' : 'disabled' }}>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Settings -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Sort Order -->
                    <div>
                        <label for="sort_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort Order</label>
                        <input type="number" 
                               name="sort_order" 
                               id="sort_order"
                               value="{{ old('sort_order', $package->sort_order ?? 0) }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                    </div>

                    <!-- Status -->
                    <div class="flex items-center">
                        <input type="checkbox" 
                               name="is_active" 
                               id="is_active"
                               value="1"
                               {{ old('is_active', isset($package) ? $package->is_active : true) ? 'checked' : '' }}
                               class="rounded border-gray-300 dark:border-gray-600 text-[#10B981] focus:ring-[#10B981] bg-white dark:bg-gray-700">
                        <label for="is_active" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Active Package</label>
                    </div>

                    <!-- Featured -->
                    <div class="flex items-center">
                        <input type="checkbox" 
                               name="is_featured" 
                               id="is_featured"
                               value="1"
                               {{ old('is_featured', $package->is_featured ?? false) ? 'checked' : '' }}
                               class="rounded border-gray-300 dark:border-gray-600 text-[#10B981] focus:ring-[#10B981] bg-white dark:bg-gray-700">
                        <label for="is_featured" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Featured Package</label>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-3">
                <a href="{{ route('admin.packages.index') }}" 
                   class="px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-2 bg-[#10B981] text-white rounded-lg hover:bg-[#0da271] transition-colors flex items-center">
                    <i class="fas fa-save mr-2"></i>
                    {{ isset($package) ? 'Update Package' : 'Create Package' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-generate slug from package name
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');
        
        nameInput.addEventListener('input', function() {
            const slug = this.value.toLowerCase()
                .trim()
                .replace(/[^\w\s-]/g, '')
                .replace(/[\s_-]+/g, '-')
                .replace(/^-+|-+$/g, '');
            slugInput.value = slug;
        });

        // Feature management
        const featuresContainer = document.getElementById('features-container');
        const addFeatureBtn = document.getElementById('add-feature');

        addFeatureBtn.addEventListener('click', function() {
            const featureItem = document.createElement('div');
            featureItem.className = 'flex items-center space-x-2 feature-item';
            featureItem.innerHTML = `
                <input type="text" 
                       name="features[]" 
                       class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                       placeholder="Enter feature">
                <button type="button" class="remove-feature text-red-500 hover:text-red-700 dark:hover:text-red-400 p-2">
                    <i class="fas fa-times"></i>
                </button>
            `;
            featuresContainer.appendChild(featureItem);
        });

        featuresContainer.addEventListener('click', function(e) {
            if (e.target.closest('.remove-feature')) {
                e.target.closest('.feature-item').remove();
            }
        });

        // Quantity input enable/disable based on checkbox
        document.querySelectorAll('.service-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const quantityInput = this.closest('.flex.items-center.justify-between').querySelector('.quantity-input');
                quantityInput.disabled = !this.checked;
                if (!this.checked) {
                    quantityInput.value = '1';
                }
            });
        });

        // Initialize quantity inputs based on initial checkbox state
        document.querySelectorAll('.service-checkbox').forEach(checkbox => {
            const quantityInput = checkbox.closest('.flex.items-center.justify-between').querySelector('.quantity-input');
            quantityInput.disabled = !checkbox.checked;
        });
    });
</script>
@endsection