@extends('layouts.admin')

@section('title', 'Addons')
@section('page-title', 'Addons')

@section('content')
    @if (session('success'))
        <div class="mb-6 bg-green-500/20 border border-green-500/30 text-green-400 px-6 py-4 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <div class="mb-6 flex justify-between items-center">
        <p class="text-gray-300">Manage addons and pricing</p>
        <a href="{{ route('admin.addons.create') }}"
            class="px-6 py-3 bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 rounded-lg border border-purple-500/30 transition-all font-medium">
            + Create New Addon
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($addons as $addon)
            <!-- ... addon card ... -->
            @include('admin.addons._card', ['addon' => $addon])
        @empty
            <p class="text-gray-400 text-center py-8 col-span-full">No addons found.</p>
        @endforelse
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $addons->appends(request()->query())->links() }}
    </div>

    <!-- Confirmation Modal -->
    @include('components.confirm-modal')

    <script>
        function confirmDelete(addonId, addonTitle) {
            showConfirmModal(
                'Delete Addon',
                `Are you sure you want to delete "${addonTitle}"? This action cannot be undone.`,
                function () {
                    document.getElementById('delete-form-' + addonId).submit();
                }
            );
        }
    </script>
@endsection