@props(['user'])

@php
$completion = $user->profileCompletion();
$total = 10;
$done = $total - count($completion['missing']);
$circumference = 2 * M_PI * 34;
@endphp

@if ($completion['percent'] < 100)
    <div {{ $attributes->merge(['class' => 'relative isolate overflow-hidden rounded-2xl bg-white shadow-raised']) }}>
        <div class="pointer-events-none absolute -right-10 -top-16 -z-10 h-48 w-48 rounded-full bg-accent-100 blur-2xl"></div>
        <div class="pointer-events-none absolute -bottom-20 left-1/3 -z-10 h-48 w-48 rounded-full bg-brand-100 blur-2xl"></div>

        <div class="flex flex-col gap-6 p-6 sm:p-8 lg:flex-row lg:items-center">
            <!-- Ring -->
            <div class="relative mx-auto h-24 w-24 shrink-0 lg:mx-0">
                <svg class="h-24 w-24 -rotate-90" viewBox="0 0 80 80" role="img" aria-label="{{ __(':percent% complete', ['percent' => $completion['percent']]) }}">
                    <defs>
                        <linearGradient id="profile-completion-ring" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0%" stop-color="#0b9a6c" />
                            <stop offset="100%" stop-color="#14b8a6" />
                        </linearGradient>
                    </defs>

                    <circle cx="40" cy="40" r="34" fill="none" stroke="#d1fae5" stroke-width="8" />
                    <circle
                        cx="40"
                        cy="40"
                        r="34"
                        fill="none"
                        stroke="url(#profile-completion-ring)"
                        stroke-width="8"
                        stroke-linecap="round"
                        stroke-dasharray="{{ round($circumference, 2) }}"
                        stroke-dashoffset="{{ round($circumference * (1 - $completion['percent'] / 100), 2) }}"
                    />
                </svg>

                <div class="absolute inset-0 grid place-items-center">
                    <span class="text-xl font-bold text-gray-900">{{ $completion['percent'] }}%</span>
                </div>
            </div>

            <div class="flex min-w-0 flex-1 flex-col gap-4 text-center lg:text-start">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">
                        {{ __('Your profile is :percent% complete', ['percent' => $completion['percent']]) }}
                    </h3>
                    <p class="text-sm text-gray-600">
                        {{ __(':done of :total details added. Add the rest so your team can reach you.', ['done' => $done, 'total' => $total]) }}
                    </p>
                </div>

                <!-- Steps -->
                <div class="flex gap-1.5" aria-hidden="true">
                    @for ($step = 1; $step <= $total; $step++)
                        <span class="h-1.5 flex-1 rounded-full {{ $step <= $done ? 'bg-gradient-to-r from-brand-500 to-accent-500' : 'bg-gray-200' }}"></span>
                    @endfor
                </div>

                <!-- Still Missing -->
                <ul class="flex flex-wrap justify-center gap-2 lg:justify-start">
                    @foreach ($completion['missing'] as $detail)
                        <li>
                            <a href="{{ route('profile.edit') }}#personal-details" class="inline-flex items-center gap-1 rounded-full bg-white px-3 py-1 text-xs font-medium text-gray-700 shadow-sm ring-1 ring-gray-200 hover:bg-brand-50 hover:text-brand-700 hover:ring-brand-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 transition duration-150 ease-in-out">
                                <x-icon-plus class="!h-3 !w-3 text-brand-500" />
                                {{ __($detail) }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="flex shrink-0 justify-center">
                <x-primary-button :href="route('profile.edit').'#personal-details'">
                    {{ __('Complete profile') }}
                </x-primary-button>
            </div>
        </div>
    </div>
@endif