{{-- Admin Edit Membership Category --}}
<x-app-layout title="Edit Category">

    <x-module-hero :title="'Edit: ' . $membershipCategory->name" description="Update category details and settings" icon="fa-edit">
        <x-slot name="backButton">
            <a href="{{ route('admin.membership-categories.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to Categories
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view membership categories')
                <a href="{{ route('admin.membership-categories.index') }}" class="module-hero-tab">
                    <i class="fas fa-tags"></i> Categories
                </a>
            @endcan
            <a href="{{ route('admin.membership-categories.show', $membershipCategory) }}" class="module-hero-tab">
                <i class="fas fa-eye"></i> View Details
            </a>
            <a href="{{ route('admin.membership-categories.edit', $membershipCategory) }}" class="module-hero-tab active-tab">
                <i class="fas fa-edit"></i> Edit
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <p class="font-semibold mb-2 text-sm">Please correct the following errors:</p>
                <ul class="list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.membership-categories.update', $membershipCategory) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- Basic Information --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-info-circle text-green-600"></i> Basic Information
                    </h3>
                </div>
                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Category Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name" value="{{ old('name', $membershipCategory->name) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                               placeholder="e.g., Premium Membership" required>
                        @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">Icon Class</label>
                        <input type="text" id="icon" name="icon" value="{{ old('icon', $membershipCategory->icon) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                               placeholder="e.g., fa-star">
                        <p class="mt-1 text-xs text-gray-500">FontAwesome icon class</p>
                        @error('icon')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea id="description" name="description" rows="3"
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                  placeholder="Describe this membership category...">{{ old('description', $membershipCategory->description) }}</textarea>
                        @error('description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="theme_color" class="block text-sm font-medium text-gray-700 mb-1">Theme Color</label>
                        <div class="flex items-center gap-3">
                            <input type="color" id="theme_color_picker" value="{{ old('theme_color', $membershipCategory->theme_color ?? '#16a34a') }}"
                                   class="h-10 w-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" id="theme_color" name="theme_color" value="{{ old('theme_color', $membershipCategory->theme_color) }}"
                                   class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                   placeholder="#16a34a">
                        </div>
                        @error('theme_color')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                        <label class="flex items-center mt-3 gap-2 cursor-pointer">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $membershipCategory->is_active) ? 'checked' : '' }}
                                   class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                            <span class="text-sm text-gray-700">Active</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Benefits --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-star text-green-600"></i> Benefits
                    </h3>
                </div>
                <div class="p-6">
                    <div id="benefits-container">
                        @php $benefits = old('benefits', $membershipCategory->benefits ?? ['']); @endphp
                        @foreach($benefits as $benefit)
                            <div class="benefit-item flex items-center gap-3 mb-3">
                                <input type="text" name="benefits[]" value="{{ $benefit }}"
                                       class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                       placeholder="Enter a benefit">
                                <button type="button" onclick="removeBenefit(this)" class="p-2.5 text-red-500 hover:bg-red-50 rounded-lg transition">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" onclick="addBenefit()" class="mt-2 text-green-600 hover:text-green-700 text-sm font-medium flex items-center gap-1">
                        <i class="fas fa-plus"></i> Add Another Benefit
                    </button>
                </div>
            </div>

            <div class="flex justify-end gap-3">
                <a href="{{ route('admin.membership-categories.show', $membershipCategory) }}" class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm font-medium">
                    <i class="fas fa-times mr-1"></i> Cancel
                </a>
                <button type="submit" class="px-8 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-semibold shadow-sm">
                    <i class="fas fa-save mr-1"></i> Update Category
                </button>
            </div>
        </form>
    </div>

</x-app-layout>

@push('scripts')
<script>
function addBenefit() {
    const container = document.getElementById('benefits-container');
    const div = document.createElement('div');
    div.className = 'benefit-item flex items-center gap-3 mb-3';
    div.innerHTML = `<input type="text" name="benefits[]" class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm" placeholder="Enter a benefit"><button type="button" onclick="removeBenefit(this)" class="p-2.5 text-red-500 hover:bg-red-50 rounded-lg transition"><i class="fas fa-times"></i></button>`;
    container.appendChild(div);
}
function removeBenefit(btn) { btn.closest('.benefit-item').remove(); }
document.getElementById('theme_color_picker').addEventListener('input', function(e) { document.getElementById('theme_color').value = e.target.value; });
document.getElementById('theme_color').addEventListener('input', function(e) { document.getElementById('theme_color_picker').value = e.target.value; });
</script>
@endpush
