@if (\App\Addons\DiscordGift\DiscordGiftService::discordIsEnabled())
    <div class="group flex flex-col bg-white border border-gray-200 shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-700 dark:shadow-slate-700/[.7]">
        <!-- Header Section -->
        <div class="h-32 flex flex-col justify-center items-center rounded-t-xl" style="background: #5865F2;">
            <img src="{{ setting('app_logo_text') }}" alt="{{ setting('app_logo_text') }}" class="max-h-full">
        </div>

        <!-- Content Section -->
        <div class="p-6">
            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">
                {{ __('discordgift::messages.card.title') }}
            </h3>
            <p class="mt-3 text-gray-500 dark:text-gray-400">
                {!! __('discordgift::messages.card.description') !!}
            </p>

            @if (setting('discordgift_show_timer'))
                <div class="mt-4 p-4 bg-gray-100 rounded-lg dark:bg-gray-800">
                    <p class="text-sm text-gray-600 dark:text-gray-400 timer-container">
                        {!! __('discordgift::messages.card.next', ['next' => \App\Addons\DiscordGift\DiscordGiftService::getNextGift()->diffForHumans()]) !!}
                    </p>
                </div>
            @else
                <div class="mt-4 p-4 bg-gray-100 rounded-lg dark:bg-gray-800">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {{ __('discordgift::messages.card.next_without_timer') }}
                    </p>
                </div>
            @endif
        </div>

        <!-- Footer Section -->
        <div class="mt-auto flex border-t border-gray-200 divide-x divide-gray-200 dark:border-gray-700 dark:divide-gray-700">
            @if (auth()->user()->getMetadata('social_discord') != null)
                <a href="{{ setting('discordlink_invitation') }}" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium bg-blue-600 text-white rounded-b-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    {{ __('discordlink::messages.joinserver') }}
                    @include("shared.icons.array-right")
                </a>
            @else
                <a href="{{ route('socialauth.authorize', 'discord') }}" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium bg-blue-600 text-white rounded-b-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    {{ __('socialauth::messages.sync_with', ['provider' => 'Discord']) }}
                    @include("shared.icons.array-right")
                </a>
            @endif
        </div>
    </div>
    <script>
        const span = document.querySelector('.timer-container span');
        if (span) {
            const nextGift = {{ \App\Addons\DiscordGift\DiscordGiftService::getNextGift()->format('U') }};
            const timer = setInterval(() => {
                const now = Math.floor(Date.now() / 1000);
                const remaining = nextGift - now;
                if (remaining <= 0) {
                    span.textContent = "{{ __('discordgift::messages.card.timer_expired') }}";
                    clearInterval(timer);
                } else {
                    const days = Math.floor(remaining / (24 * 3600));
                    const hours = Math.floor((remaining % (24 * 3600)) / 3600);
                    const minutes = Math.floor((remaining % 3600) / 60);
                    const seconds = remaining % 60;
                    let timeString = '';
                    if (days > 0) {
                        timeString += `${days} {{ __('discordgift::messages.card.timer.days') }} `;
                    }
                    if (hours > 0) {
                        timeString += `${hours} {{ __('discordgift::messages.card.timer.hours') }} `;
                    }
                    if (minutes > 0) {
                        timeString += `${minutes} {{ __('discordgift::messages.card.timer.minutes') }} `;
                    }
                    timeString += `${seconds} {{ __('discordgift::messages.card.timer.seconds') }}`;
                    span.innerHTML = timeString;
                }
            }, 1000);
        }
    </script>
@endif