<x-app-layout>
    <x-slot name="header">
        <div class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-sky-50 to-green-50 px-5 py-4">
            <h2 class="text-xl font-semibold leading-tight text-sky-900">
                {{ __('Edit Package') }}
            </h2>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
            <div class="overflow-hidden rounded-2xl border border-sky-200/70 bg-white shadow-sm">
                <div class="p-6">
                    <form action="{{ route('admin.packages.update', $package) }}" method="POST" class="space-y-6">
                        @csrf
                        @method('PUT')

                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700">{{ __('Package Name') }}</label>
                            <input type="text" id="name" name="name" value="{{ old('name', $package->name) }}"
                                class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('name') ? 'border-red-500' : 'border-sky-300' }}"
                                placeholder="e.g., Basic, Standard, Premium" required />
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700">{{ __('Description') }}</label>
                            <textarea id="description" name="description" rows="3"
                                class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('description') ? 'border-red-500' : 'border-sky-300' }}"
                                placeholder="Package description">{{ old('description', $package->description) }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label for="driver_limit" class="block text-sm font-medium text-gray-700">{{ __('Driver Limit') }}</label>
                                <input type="number" id="driver_limit" name="driver_limit" value="{{ old('driver_limit', $package->driver_limit) }}" min="1"
                                    class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('driver_limit') ? 'border-red-500' : 'border-sky-300' }}"
                                    required />
                                @error('driver_limit')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="truck_limit" class="block text-sm font-medium text-gray-700">{{ __('Truck Limit') }}</label>
                                <input type="number" id="truck_limit" name="truck_limit" value="{{ old('truck_limit', $package->truck_limit) }}" min="1"
                                    class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('truck_limit') ? 'border-red-500' : 'border-sky-300' }}"
                                    required />
                                @error('truck_limit')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-4">
                            <div>
                                <label for="base_price" class="block text-sm font-medium text-gray-700">{{ __('Base Price ($)') }}</label>
                                <input type="number" id="base_price" name="base_price" value="{{ old('base_price', $package->base_price) }}" min="0" step="0.01"
                                    class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('base_price') ? 'border-red-500' : 'border-sky-300' }}"
                                    required />
                                @error('base_price')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="price_per_driver" class="block text-sm font-medium text-gray-700">{{ __('Price Per Driver ($)') }}</label>
                                <input type="number" id="price_per_driver" name="price_per_driver" value="{{ old('price_per_driver', $package->price_per_driver) }}" min="0" step="0.01"
                                    class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('price_per_driver') ? 'border-red-500' : 'border-sky-300' }}"
                                    required />
                                @error('price_per_driver')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="price" class="block text-sm font-medium text-gray-700">{{ __('Legacy Price ($)') }}</label>
                                <input type="number" id="price" name="price" value="{{ old('price', $package->price) }}" min="0" step="0.01"
                                    class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('price') ? 'border-red-500' : 'border-sky-300' }}"
                                    required />
                                @error('price')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="billing_cycle" class="block text-sm font-medium text-gray-700">{{ __('Billing Cycle') }}</label>
                                <select id="billing_cycle" name="billing_cycle"
                                    class="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 {{ $errors->has('billing_cycle') ? 'border-red-500' : 'border-sky-300' }}"
                                    required>
                                    <option value="monthly" {{ old('billing_cycle', $package->billing_cycle) === 'monthly' ? 'selected' : '' }}>{{ __('Monthly') }}</option>
                                    <option value="weekly" {{ old('billing_cycle', $package->billing_cycle) === 'weekly' ? 'selected' : '' }}>{{ __('Weekly') }}</option>
                                </select>
                                @error('billing_cycle')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Features') }}</label>
                            <div id="features-container" class="space-y-2">
                                @forelse (old('features', $package->features ?? []) as $index => $feature)
                                    @if (is_array($feature) && isset($feature['key']))
                                        <div class="flex gap-2">
                                            <input type="text" name="features[{{ $index }}][key]" value="{{ $feature['key'] }}"
                                                placeholder="Feature name"
                                                class="flex-1 rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500" />
                                            <input type="text" name="features[{{ $index }}][value]" value="{{ $feature['value'] }}"
                                                placeholder="Feature value"
                                                class="flex-1 rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500" />
                                            <button type="button" onclick="removeFeature({{ $index }})"
                                                class="px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                                                {{ __('Remove') }}
                                            </button>
                                        </div>
                                    @endif
                                @empty
                                    <div class="flex gap-2">
                                        <input type="text" name="features[0][key]" placeholder="Feature name"
                                            class="flex-1 rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500" />
                                        <input type="text" name="features[0][value]" placeholder="Feature value"
                                            class="flex-1 rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500" />
                                        <button type="button" onclick="removeFeature(0)"
                                            class="px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                                            {{ __('Remove') }}
                                        </button>
                                    </div>
                                @endforelse
                            </div>
                            <button type="button" onclick="addFeature()"
                                class="mt-2 rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700">
                                + {{ __('Add Feature') }}
                            </button>
                        </div>

                        <div class="flex items-center">
                            <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $package->is_active) ? 'checked' : '' }}
                                class="rounded border-sky-300 text-sky-600 shadow-sm focus:border-sky-400 focus:ring focus:ring-sky-200 focus:ring-opacity-50" />
                            <label for="is_active" class="ml-2 text-sm text-gray-700">{{ __('Active') }}</label>
                        </div>

                        <div class="flex gap-4">
                            <button type="submit"
                                class="rounded bg-sky-600 px-4 py-2 font-semibold text-white transition hover:bg-sky-700">
                                {{ __('Update Package') }}
                            </button>
                            <a href="{{ route('admin.packages.index') }}"
                                class="rounded bg-gray-600 px-4 py-2 font-semibold text-white transition hover:bg-gray-700">
                                {{ __('Cancel') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function addFeature() {
            const container = document.getElementById('features-container');
            const index = container.children.length;
            const html = `
                <div class="flex gap-2">
                    <input type="text" name="features[${index}][key]" placeholder="Feature name"
                        class="flex-1 rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500" />
                    <input type="text" name="features[${index}][value]" placeholder="Feature value"
                        class="flex-1 rounded-md border border-sky-300 px-3 py-2 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500" />
                    <button type="button" onclick="removeFeature(${index})"
                        class="px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                        {{ __('Remove') }}
                    </button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
        }

        function removeFeature(index) {
            const elements = document.querySelectorAll('#features-container > div');
            if (elements[index]) {
                elements[index].remove();
            }
        }
    </script>
</x-app-layout>
