@extends('layouts.admin')

@section('header', isset($package) ? 'Edit Package' : 'Create Package')

@section('content')
    <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-8">
            <form method="POST"
                action="{{ isset($package) ? route('admin.packages.update', $package->id) : route('admin.packages.store') }}"
                x-data="{ 
                                billingCycle: '{{ old('billing_cycle', $package->billing_cycle ?? 'one_time') }}', 
                                features: {{ old('features') ? json_encode(old('features')) : (isset($package->features) ? json_encode($package->features->pluck('feature')) : json_encode([''])) }} 
                            }">
                @csrf
                @if(isset($package))
                    @method('PUT')
                @endif

                <!-- Basic Info -->
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Package Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $package->name ?? '') }}"
                        class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm"
                        required placeholder="e.g. Pro Plan">
                </div>

                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <textarea name="description" id="description" rows="3"
                        class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm"
                        placeholder="Briefly describe what this package offers...">{{ old('description', $package->description ?? '') }}</textarea>
                </div>

                <!-- Pricing & Billing -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="price" class="block text-sm font-medium text-gray-700 mb-1">Price ($)</label>
                        <input type="number" step="0.01" name="price" id="price"
                            value="{{ old('price', $package->price ?? '') }}"
                            class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm"
                            required placeholder="0.00">
                    </div>

                    <div>
                        <label for="billing_cycle" class="block text-sm font-medium text-gray-700 mb-1">Billing
                            Cycle</label>
                        <select name="billing_cycle" id="billing_cycle" x-model="billingCycle"
                            class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm">
                            <option value="one_time">One Time</option>
                            <option value="recurring">Recurring</option>
                        </select>
                    </div>
                </div>

                <div class="mb-6">
                    <label for="notes_limit" class="block text-sm font-medium text-gray-700 mb-1">Notes Limit</label>
                    <input type="number" name="notes_limit" id="notes_limit"
                        value="{{ old('notes_limit', $package->notes_limit ?? 0) }}"
                        class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm"
                        required placeholder="e.g. 100">
                </div>

                <div class="mb-6" x-show="billingCycle === 'recurring'" x-transition>
                    <label for="interval" class="block text-sm font-medium text-gray-700 mb-1">Recurring Interval</label>
                    <select name="interval" id="interval"
                        class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm">
                        <option value="monthly" {{ (old('interval', $package->interval ?? '') == 'monthly') ? 'selected' : '' }}>
                            Monthly</option>
                        <option value="yearly" {{ (old('interval', $package->interval ?? '') == 'yearly') ? 'selected' : '' }}>
                            Yearly</option>
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Select the subscription renewal frequency.</p>
                </div>

                <!-- Features Builder -->
                <div class="mb-8">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Features</label>
                    <div class="space-y-3">
                        <template x-for="(feature, index) in features" :key="index">
                            <div class="flex gap-2">
                                <input type="text" :name="'features[' + index + ']'" x-model="features[index]"
                                    class="flex-1 rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm"
                                    placeholder="e.g. 5 Users">
                                <button type="button" @click="features.splice(index, 1)"
                                    class="text-red-500 hover:text-red-700 p-2" x-show="features.length > 1">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="features.push('')"
                        class="mt-3 text-sm text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        Add Another Feature
                    </button>
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-end gap-4 pt-6 border-t border-gray-100">
                    <a href="{{ route('admin.packages.index') }}"
                        class="text-gray-600 hover:text-gray-900 font-medium text-sm">Cancel</a>
                    <button type="submit"
                        class="inline-flex items-center justify-center px-6 py-2 bg-indigo-600 border border-transparent rounded-lg font-semibold text-white hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 shadow-sm">
                        {{ isset($package) ? 'Update Package' : 'Create Package' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection