{{-- SON 12 AY --}}
<div class="p-2 mt-2 overflow-hidden bg-white shadow ring-1 ring-stone-300 sm:rounded-lg sm:mt-0 sm:p-4">

    <h2 class="flex items-center mb-3 text-lg leading-6 font-jbmono-bold text-stone-700">
        <span class="mr-1 material-symbols-rounded">
            calendar_month
        </span>
        SON 12 AY
    </h2>
    <ul role="list" class="grid grid-cols-1 gap-4 lg:grid-cols-3">

        @foreach ($user_accesses as $branch)
            <li class="overflow-hidden border border-stone-200 rounded-xl">
                <div class="flex items-center px-4 py-6 border-b gap-x-4 border-stone-900/5 bg-stone-50">
                    <div class="text-lg font-medium leading-6 text-stone-900">{{ $branch->note }}
                        <br><span class="text-sm text-stone-500">{{ Auth::user()->currentTeam->name }}</span>
                    </div>
                    <div class="relative ml-auto">
                        <button type="button" class="-m-2.5 block p-2.5 text-stone-400 hover:text-stone-500"
                            id="options-menu-1-button" aria-expanded="false" aria-haspopup="true">
                            <span class="sr-only">Open options</span>
                            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path
                                    d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
                            </svg>
                        </button>
                    </div>
                </div>

                <dl class="p-4 text-sm leading-6 divide-y divide-stone-100">
                    <div class="flex justify-between py-3 gap-x-4">
                        <dt class="text-stone-400">Son 12 ay toplamı</dt>
                        <dt class="pr-2 text-stone-400">
                            {{ number_format($branch->last_twelve_months_total, 2, ',', '.') }}
                            ₺</dt>
                    </div>

                    @foreach ($branch->getCachedLastTwelveMonthsSales() as $month)
                        <div class="flex items-center justify-between p-2 mb-1 rounded-lg gap-x-4 bg-stone-50">
                            <dt class="text-xs text-stone-500">
                                {{ $month['month_name'] }} {{ $month['year'] }}
                                <br>
                                <span class="text-xs text-stone-400">
                                    {{ \Carbon\Carbon::parse($month['month_start'])->format('d.m') }} -
                                    {{ \Carbon\Carbon::parse($month['month_end'])->format('d.m') }}
                                </span>
                            </dt>
                            <dd class="flex items-center gap-x-1">
                                <span class="text-stone-400 material-symbols-rounded">
                                    calendar_month
                                </span>
                                <div class="text-right">
                                    <div class="font-medium text-stone-900">
                                        {{ number_format($month['total_sales'], 2, ',', '.') }} ₺
                                    </div>
                                    <div class="text-xs text-stone-500">
                                        {{ $month['days_count'] }} gün | Ort:
                                        {{ number_format($month['average_daily_sales'], 2, ',', '.') }} ₺
                                    </div>
                                </div>
                            </dd>
                        </div>
                    @endforeach
                </dl>
            </li>
        @endforeach

    </ul>

</div>