@php
    $refId = Auth::user()->referral_id ?? Auth::user()->id;

    $creatives = [
        'Homepage' => [
            [
            'title' => 'Sgt Godoy 1000+ Reviews Blue',
            'image' => 'sgt-godoy-1000-reviews.png',
            'link'=> 'https://www.sgtgodoy.com/'
            ],
            [
            'title' => 'Sgt Godoy 1000+ Reviews Red',
            'image' => 'sgt-godoy-1000-reviews-red.png',
            'link'=> 'https://www.sgtgodoy.com/'
            ],
        ],
        'ATF Test Prep' => [
            [
            'title' => 'Best ATF Test Prep',
            'image' => 'sgt-godoy-atf-test-prep.png',
            'link'=> 'https://www.sgtgodoy.com/atf-test-prep'
            ],
            [
            'title' => 'New Gen ATF Test Prep',
            'image' => 'sgt-godoy-atf-test-prep-new-gen.png',
            'link'=> 'https://www.sgtgodoy.com/atf-test-prep'
            ],
        ],
        'FBI Test Prep' => [
            [
            'title' => 'Best FBI Test Prep',
            'image' => 'sgt-godoy-fbi-test-prep.png',
            'link'=> 'https://www.sgtgodoy.com/fbi-test-prep'
            ],
            [
            'title' => 'New Gen FBI Test Prep',
            'image' => 'sgt-godoy-fbi-test-prep-new-gen.png',
            'link'=> 'https://www.sgtgodoy.com/fbi-test-prep'
            ],
        ],
        'DEA Test Prep' => [
            [
            'title' => 'Best DEA Test Prep',
            'image' => 'sgt-godoy-best-dea-test-prep.png',
            'link'=> 'https://www.sgtgodoy.com/dea-test-prep'
            ],
            [
            'title' => 'New Gen DEA Test Prep',
            'image' => 'sgt-godoy-dea-test-prep-new-gen.png',
            'link'=> 'https://www.sgtgodoy.com/dea-test-prep'
            ],
        ],
        'HSI Test Prep' => [
            [
            'title' => 'New Gen HSI Test Prep',
            'image' => 'sgt-godoy-hsi-test-prep-new-gen.png',
            'link'=> 'https://www.sgtgodoy.com/dea-test-prep'
            ],
            [
            'title' => 'Best HSI Test Prep',
            'image' => 'sgt-godoy-best-hsi-test-prep.png',
            'link'=> 'https://www.sgtgodoy.com/dea-test-prep'
            ],
        ]
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Creatives') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 space-y-6">
            @foreach($creatives as $title => $group)
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
                    <h2 class="text-[15px] font-semibold text-gray-800 mb-5">{{ $title }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach($group as $creative)
                            <x-creative-card
                                :image="$creative['image']"
                                :title="$creative['title']"
                                :link="$creative['link'] . '?ref=' . $refId"
                            />
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <script>
        function getEmbedCode(creativeButton) {
            const creativeCard = creativeButton.closest('.bg-white');
            const creativeImg = creativeCard.querySelector('img');
            return `<a href="${creativeButton.dataset.link}"><img src="${creativeImg.src}" alt="${creativeImg.alt}"></a>`;
        }

        async function copyButton(creativeButton) {
            const embedCode = getEmbedCode(creativeButton);

            try {
                await navigator.clipboard.writeText(embedCode);

                const originalText = creativeButton.textContent;
                creativeButton.textContent = 'Copied!';
                creativeButton.disabled = true;

                setTimeout(() => {
                    creativeButton.textContent = originalText;
                    creativeButton.disabled = false;
                }, 2000);
            } catch (err) {
                alert('Failed to copy.');
            }
        }

        function setImageDimensions(img) {
            const badge = img.closest('.group').querySelector('.dimensions-badge');
            if (badge) {
                badge.textContent = `Dimensions: ${img.naturalWidth}x${img.naturalHeight} pixels`;
            }
        }
    </script>
</x-app-layout>