@extends('layouts.backend.app')

@section('content')
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 2xl:col-span-9">
            <div class="grid grid-cols-12 gap-6">
                <!-- BEGIN: General Report -->
                <div class="col-span-12 mt-8">
                    <div class="intro-y flex h-10 items-center">
                        <h2 class="mr-5 truncate text-lg font-medium">General Report</h2>
                        <a class="ml-auto flex items-center text-primary" href="{{ route('users.dashboard') }}">
                            <x-base.lucide class="mr-3 h-4 w-4" icon="RefreshCcw" /> Reload Data
                        </a>
                    </div>
                    <div class="mt-5 grid grid-cols-12 gap-6">
                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
                            <div @class([
                                'relative zoom-in',
                                "before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']",
                            ])>
                                <div class="box p-5">
                                    <div class="flex">
                                        <x-base.lucide icon="Mail" class="h-[28px] w-[28px]" />
                                    </div>
                                    <div class="mt-6 text-3xl font-medium leading-8">{{ $user->total_messages }}</div>
                                    <div class="mt-1 text-base text-slate-500">Total Emails</div>
                                </div>
                            </div>
                        </div>

                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
                            <div @class([
                                'relative zoom-in',
                                "before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']",
                            ])>
                                <div class="box p-5">
                                    <div class="flex">
                                        <x-base.lucide class="h-[28px] w-[28px] text-pending" icon="database" />
                                        
                                    </div>
                                    <div class="mt-6 text-3xl font-medium leading-8">{{ $total_storage_gb }} GB</div>
                                    <div class="mt-1 text-base text-slate-500">Total Size</div>
                                </div>
                            </div>
                        </div>

                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
                            <div @class([
                                'relative zoom-in',
                                "before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']",
                            ])>
                                <div class="box p-5">
                                    <div class="flex">
                                        <x-base.lucide class="h-[28px] w-[28px] text-pending" icon="database" />
                                        
                                    </div>
                                    <div class="mt-6 text-3xl font-medium leading-8">{{ $remaining_storage_gb }} GB</div>
                                    <div class="mt-1 text-base text-slate-500">Remaining</div>
                                </div>
                            </div>
                        </div>
                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
                            <div @class([
                                'relative zoom-in',
                                "before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']",
                            ])>
                                <div class="box p-5">
                                    <div class="flex">
                                        <x-base.lucide class="h-[28px] w-[28px] text-warning" icon="Paperclip" />
                                    </div>
                                    <div class="mt-6 text-3xl font-medium leading-8">{{ $attachment_size }}</div>
                                    <div class="mt-1 text-base text-slate-500">
                                        Total Attachments
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: General Report -->
                <!-- BEGIN: Incoming and Outgoing Emails Report -->
                <div class="col-span-12 mt-8 lg:col-span-6">
                    <div class="intro-y block h-10 items-center sm:flex">
                        <h2 class="mr-5 truncate text-lg font-medium">Email Activity Report</h2>
                        <div class="mt-3 flex items-center sm:ml-auto sm:mt-0">
                            <div class="flex space-x-1 rounded-md bg-slate-100 p-1 dark:bg-darkmode-400">
                                <button type="button" data-period="7D"
                                    class="btn rounded-md px-2 py-1 text-xs {{ $selected_period == '7D' ? 'bg-white text-primary shadow-sm dark:bg-darkmode-600' : 'bg-transparent text-slate-700 dark:text-slate-300' }}">7D</button>
                                <button type="button" data-period="30D"
                                    class="btn rounded-md px-2 py-1 text-xs {{ $selected_period == '30D' || !request()->has('period') ? 'bg-white text-primary shadow-sm dark:bg-darkmode-600' : 'bg-transparent text-slate-700 dark:text-slate-300' }}">30D</button>
                                <button type="button" data-period="6M"
                                    class="btn rounded-md px-2 py-1 text-xs {{ $selected_period == '6M' ? 'bg-white text-primary shadow-sm dark:bg-darkmode-600' : 'bg-transparent text-slate-700 dark:text-slate-300' }}">6M</button>
                                <button type="button" data-period="1Y"
                                    class="btn rounded-md px-2 py-1 text-xs {{ $selected_period == '1Y' ? 'bg-white text-primary shadow-sm dark:bg-darkmode-600' : 'bg-transparent text-slate-700 dark:text-slate-300' }}">1Y</button>
                                <button type="button" data-period="5Y"
                                    class="btn rounded-md px-2 py-1 text-xs {{ $selected_period == '5Y' ? 'bg-white text-primary shadow-sm dark:bg-darkmode-600' : 'bg-transparent text-slate-700 dark:text-slate-300' }}">5Y</button>
                                <button type="button" data-period="ALL"
                                    class="btn rounded-md px-2 py-1 text-xs {{ $selected_period == 'ALL' ? 'bg-white text-primary shadow-sm dark:bg-darkmode-600' : 'bg-transparent text-slate-700 dark:text-slate-300' }}">ALL</button>
                            </div>
                        </div>
                    </div>
                    <div class="intro-y box mt-12 p-5 sm:mt-5">
                        <form method="GET" action="{{ request()->url() }}" id="filterForm"
                            class="flex flex-col md:flex-row md:items-center">
                            @csrf
                            <div class="flex">
                                <div>
                                    <div class="text-lg font-medium text-primary dark:text-slate-300 xl:text-xl">
                                        {{ $total_emails }}
                                    </div>
                                    <div class="mt-0.5 text-slate-500">Total Emails</div>
                                </div>
                                <div
                                    class="mx-4 h-12 w-px border border-r border-dashed border-slate-200 dark:border-darkmode-300 xl:mx-5">
                                </div>
                                <div>
                                    <div class="text-lg font-medium text-primary xl:text-xl">
                                        {{ $inbox_count }}
                                    </div>
                                    <div class="mt-0.5 text-slate-500">Received</div>
                                </div>
                                <div
                                    class="mx-4 h-12 w-px border border-r border-dashed border-slate-200 dark:border-darkmode-300 xl:mx-5">
                                </div>
                                <div>
                                    <div class="text-lg font-medium text-emerald-500 xl:text-xl">
                                        {{ $sent_count }}
                                    </div>
                                    <div class="mt-0.5 text-slate-500">Sent</div>
                                </div>
                            </div>

                            <!-- Hidden input for period -->
                            <input type="hidden" name="period" id="selectedPeriod" value="{{ $selected_period }}">
                        </form>
                        <div @class([
                            'relative',
                            'before:content-[\' \'] before:block before:absolute before:w-16 before:left-0 before:top-0 before:bottom-0 before:ml-10 before:mb-7 before:bg-gradient-to-r before:from-white before:via-white/80 before:to-transparent before:dark:from-darkmode-600',
                            'after:content-[\' \'] after:block after:absolute after:w-16 after:right-0 after:top-0 after:bottom-0 after:mb-7 after:bg-gradient-to-l after:from-white after:via-white/80 after:to-transparent after:dark:from-darkmode-600',
                        ])>
                            <x-report-line-chart class="-mb-6 mt-6" height="h-[275px]" :labels="$email_chart_data['labels']"
                                :datasets="$email_chart_data['datasets']" />
                        </div>
                    </div>
                </div>

                @push('scripts')
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // Handle period selector clicks
                            document.querySelectorAll('[data-period]').forEach(button => {
                                button.addEventListener('click', function() {
                                    document.getElementById('selectedPeriod').value = this.dataset.period;
                                    document.getElementById('filterForm').submit();
                                });
                            });
                        });
                    </script>
                @endpush
                <!-- END: Incoming and Outgoing Emails Report -->
                <!-- BEGIN: Weekly Top Seller -->
                <div class="col-span-12 mt-8 sm:col-span-6 lg:col-span-3">
                    <div class="intro-y flex h-10 items-center">
                        <h2 class="mr-5 truncate text-lg font-medium">File Storage Usage</h2>
                    </div>
                    <div class="intro-y box mt-5 p-5">
                        <div class="mt-3">
                            <x-report-pie-chart height="h-[213px]" :chart-data="$pie_chart_data" />
                        </div>
                        <div class="mx-auto mt-5 w-52 sm:w-auto">
                            @foreach ($attachment_stats->take(4) as $fileType)
                                <div class="mt-2 flex items-center">
                                    <div class="mr-3 h-2 w-2 rounded-full"
                                        style="background-color: {{ $fileType['color'] }}"></div>
                                    <span class="truncate">{{ $fileType['extension'] }} Files</span>
                                    <span class="ml-auto font-medium">{{ $fileType['total_size_formatted'] }}</span>
                                    <span class="ml-2 text-slate-500">({{ $fileType['count'] }})</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- END: Weekly Top Seller -->
                <!-- BEGIN: Sales Report -->
                <div class="col-span-12 mt-8 sm:col-span-6 lg:col-span-3">
                    <div class="intro-y flex h-10 items-center">
                        <h2 class="mr-5 truncate text-lg font-medium">Top Storage by Contact</h2>
                        {{-- <a class="ml-auto truncate text-primary" href=""> Show More </a> --}}
                    </div>
                    <div class="intro-y box mt-5 p-5">
                        <div class="mt-3">
                            <x-report-donut-chart height="h-[213px]" :chart-data="$donut_data" />
                        </div>
                        <div class="mx-auto mt-5 w-52 sm:w-auto">
                            @foreach ($donut_data['labels'] as $index => $label)
                                @php
                                    $colors = [
                                        'bg-primary',
                                        'bg-pending',
                                        'bg-warning',
                                        'bg-success',
                                        'bg-info',
                                        'bg-danger',
                                    ];
                                    $color = $colors[$index % count($colors)];
                                    $percentage =
                                        ($donut_data['data'][$index] / array_sum($donut_data['data']->toArray())) * 100;
                                @endphp
                                <div class="mt-2 flex items-center">
                                    <div class="mr-3 h-2 w-2 rounded-full {{ $color }}"></div>
                                    <span class="truncate">{{ $label }}</span>
                                    <span class="ml-auto font-medium">{{ round($percentage) }}%</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- END: Sales Report -->
                <!-- BEGIN: Official Store -->
                <div class="col-span-12 mt-6 xl:col-span-8">
                    <div class="intro-y block h-10 items-center sm:flex">
                        <h2 class="mr-5 truncate text-lg font-medium">Official Store</h2>
                        <div class="relative mt-3 text-slate-500 sm:ml-auto sm:mt-0">
                            <x-base.lucide class="absolute inset-y-0 left-0 z-10 my-auto ml-3 h-4 w-4" icon="MapPin" />
                            <x-base.form-input class="!box pl-10 sm:w-56" type="text" placeholder="Filter by city" />
                        </div>
                    </div>
                    <div class="intro-y box mt-12 p-5 sm:mt-5">
                        <div>
                            250 Official stores in 21 countries, click the marker to see
                            location details.
                        </div>
                        <x-leaflet-map class="mt-5 h-[310px] rounded-md bg-slate-200" />
                    </div>
                </div>
                <!-- END: Official Store -->
                <!-- BEGIN: Weekly Best Sellers -->
                <div class="col-span-12 mt-6 xl:col-span-4">
                    <div class="intro-y flex h-10 items-center">
                        <h2 class="mr-5 truncate text-lg font-medium">
                            Weekly Best Sellers
                        </h2>
                    </div>
                    <div class="mt-5">
                        @foreach (array_slice($fakers, 0, 4) as $faker)
                            <div class="intro-y">
                                <div class="box zoom-in mb-3 flex items-center px-4 py-4">
                                    <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-md">
                                        <img src="{{ Vite::asset($faker['photos'][0]) }}"
                                            alt="Midone - Tailwind Admin Dashboard Template" />
                                    </div>
                                    <div class="ml-4 mr-auto">
                                        <div class="font-medium">{{ $faker['users'][0]['name'] }}</div>
                                        <div class="mt-0.5 text-xs text-slate-500">
                                            {{ $faker['dates'][0] }}
                                        </div>
                                    </div>
                                    <div
                                        class="cursor-pointer rounded-full bg-success px-2 py-1 text-xs font-medium text-white">
                                        137 Sales
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <a class="intro-y block w-full rounded-md border border-dotted border-slate-400 py-4 text-center text-slate-500 dark:border-darkmode-300"
                            href="">
                            View More
                        </a>
                    </div>
                </div>
                <!-- END: Weekly Best Sellers -->
                <!-- BEGIN: General Report -->
                <div class="col-span-12 mt-8 grid grid-cols-12 gap-6">
                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
                        <div class="box zoom-in p-5">
                            <div class="flex items-center">
                                <div class="w-2/4 flex-none">
                                    <div class="truncate text-lg font-medium">Target Sales</div>
                                    <div class="mt-1 text-slate-500">300 Sales</div>
                                </div>
                                <div class="relative ml-auto flex-none">
                                    <x-report-donut-chart-1 width="w-[90px]" height="h-[90px]" />
                                    <div
                                        class="absolute left-0 top-0 flex h-full w-full items-center justify-center font-medium">
                                        20%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
                        <div class="box zoom-in p-5">
                            <div class="flex">
                                <div class="mr-3 truncate text-lg font-medium">
                                    Social Media
                                </div>
                                <div
                                    class="ml-auto flex cursor-pointer items-center truncate rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-500 dark:bg-darkmode-400">
                                    320 Followers
                                </div>
                            </div>
                            <div class="mt-1">
                                <x-simple-line-chart-1 class="-ml-1" height="h-[58px]" />
                            </div>
                        </div>
                    </div>
                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
                        <div class="box zoom-in p-5">
                            <div class="flex items-center">
                                <div class="w-2/4 flex-none">
                                    <div class="truncate text-lg font-medium">New Products</div>
                                    <div class="mt-1 text-slate-500">1450 Products</div>
                                </div>
                                <div class="relative ml-auto flex-none">
                                    <x-report-donut-chart-1 width="w-[90px]" height="h-[90px]" />
                                    <div
                                        class="absolute left-0 top-0 flex h-full w-full items-center justify-center font-medium">
                                        45%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
                        <div class="box zoom-in p-5">
                            <div class="flex">
                                <div class="mr-3 truncate text-lg font-medium">Posted Ads</div>
                                <div
                                    class="ml-auto flex cursor-pointer items-center truncate rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-500 dark:bg-darkmode-400">
                                    180 Campaign
                                </div>
                            </div>
                            <div class="mt-1">
                                <x-simple-line-chart-1 class="-ml-1" height="h-[58px]" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: General Report -->
                <!-- BEGIN: Weekly Top Products -->
                <div class="col-span-12 mt-6">
                    <div class="intro-y block h-10 items-center sm:flex">
                        <h2 class="mr-5 truncate text-lg font-medium">
                            Weekly Top Products
                        </h2>
                        <div class="mt-3 flex items-center sm:ml-auto sm:mt-0">
                            <x-base.button class="!box flex items-center text-slate-600 dark:text-slate-300">
                                <x-base.lucide class="mr-2 hidden h-4 w-4 sm:block" icon="FileText" />
                                Export to Excel
                            </x-base.button>
                            <x-base.button class="!box ml-3 flex items-center text-slate-600 dark:text-slate-300">
                                <x-base.lucide class="mr-2 hidden h-4 w-4 sm:block" icon="FileText" />
                                Export to PDF
                            </x-base.button>
                        </div>
                    </div>
                    <div class="intro-y mt-8 overflow-auto sm:mt-0 lg:overflow-visible">
                        <x-base.table class="border-separate border-spacing-y-[10px] sm:mt-2">
                            <x-base.table.thead>
                                <x-base.table.tr>
                                    <x-base.table.th class="whitespace-nowrap border-b-0">
                                        IMAGES
                                    </x-base.table.th>
                                    <x-base.table.th class="whitespace-nowrap border-b-0">
                                        PRODUCT NAME
                                    </x-base.table.th>
                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                                        STOCK
                                    </x-base.table.th>
                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                                        STATUS
                                    </x-base.table.th>
                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                                        ACTIONS
                                    </x-base.table.th>
                                </x-base.table.tr>
                            </x-base.table.thead>
                            <x-base.table.tbody>
                                @foreach (array_slice($fakers, 0, 4) as $faker)
                                    <x-base.table.tr class="intro-x">
                                        <x-base.table.td
                                            class="box w-40 rounded-l-none rounded-r-none border-x-0 shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                            <div class="flex">
                                                <div class="image-fit zoom-in h-10 w-10">
                                                    <x-base.tippy
                                                        class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]"
                                                        src="{{ Vite::asset($faker['images'][0]) }}"
                                                        alt="Midone - Tailwind Admin Dashboard Template" as="img"
                                                        content="{{ 'Uploaded at ' . $faker['dates'][0] }}" />
                                                </div>
                                                <div class="image-fit zoom-in -ml-5 h-10 w-10">
                                                    <x-base.tippy
                                                        class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]"
                                                        src="{{ Vite::asset($faker['photos'][1]) }}"
                                                        alt="Midone - Tailwind Admin Dashboard Template" as="img"
                                                        content="{{ 'Uploaded at ' . $faker['dates'][1] }}" />
                                                </div>
                                                <div class="image-fit zoom-in -ml-5 h-10 w-10">
                                                    <x-base.tippy
                                                        class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]"
                                                        src="{{ Vite::asset($faker['photos'][2]) }}"
                                                        alt="Midone - Tailwind Admin Dashboard Template" as="img"
                                                        content="{{ 'Uploaded at ' . $faker['dates'][2] }}" />
                                                </div>
                                            </div>
                                        </x-base.table.td>
                                        <x-base.table.td
                                            class="box rounded-l-none rounded-r-none border-x-0 shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                            <a class="whitespace-nowrap font-medium" href="">
                                                {{ $faker['products'][0]['name'] }}
                                            </a>
                                            <div class="mt-0.5 whitespace-nowrap text-xs text-slate-500">
                                                {{ $faker['products'][0]['category'] }}
                                            </div>
                                        </x-base.table.td>
                                        <x-base.table.td
                                            class="box rounded-l-none rounded-r-none border-x-0 shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                            {{ $faker['stocks'][0] }}
                                        </x-base.table.td>
                                        <x-base.table.td
                                            class="box w-40 rounded-l-none rounded-r-none border-x-0 shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                            <div @class([
                                                'flex items-center justify-center',
                                                'text-success' => $faker['true_false'][0],
                                                'text-danger' => !$faker['true_false'][0],
                                            ])>
                                                <x-base.lucide class="mr-2 h-4 w-4" icon="CheckSquare" />
                                                {{ $faker['true_false'][0] ? 'Active' : 'Inactive' }}
                                            </div>
                                        </x-base.table.td>
                                        <x-base.table.td @class([
                                            'box w-56 rounded-l-none rounded-r-none border-x-0 shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600',
                                            'before:absolute before:inset-y-0 before:left-0 before:my-auto before:block before:h-8 before:w-px before:bg-slate-200 before:dark:bg-darkmode-400',
                                        ])>
                                            <div class="flex items-center justify-center">
                                                <a class="mr-3 flex items-center" href="">
                                                    <x-base.lucide class="mr-1 h-4 w-4" icon="CheckSquare" />
                                                    Edit
                                                </a>
                                                <a class="flex items-center text-danger" href="">
                                                    <x-base.lucide class="mr-1 h-4 w-4" icon="Trash" />
                                                    Delete
                                                </a>
                                            </div>
                                        </x-base.table.td>
                                    </x-base.table.tr>
                                @endforeach
                            </x-base.table.tbody>
                        </x-base.table>
                    </div>
                    <div class="intro-y mt-3 flex flex-wrap items-center sm:flex-row sm:flex-nowrap">
                        <x-base.pagination class="w-full sm:mr-auto sm:w-auto">
                            <x-base.pagination.link>
                                <x-base.lucide class="h-4 w-4" icon="ChevronsLeft" />
                            </x-base.pagination.link>
                            <x-base.pagination.link>
                                <x-base.lucide class="h-4 w-4" icon="ChevronLeft" />
                            </x-base.pagination.link>
                            <x-base.pagination.link>...</x-base.pagination.link>
                            <x-base.pagination.link>1</x-base.pagination.link>
                            <x-base.pagination.link active>2</x-base.pagination.link>
                            <x-base.pagination.link>3</x-base.pagination.link>
                            <x-base.pagination.link>...</x-base.pagination.link>
                            <x-base.pagination.link>
                                <x-base.lucide class="h-4 w-4" icon="ChevronRight" />
                            </x-base.pagination.link>
                            <x-base.pagination.link>
                                <x-base.lucide class="h-4 w-4" icon="ChevronsRight" />
                            </x-base.pagination.link>
                        </x-base.pagination>
                        <x-base.form-select class="!box mt-3 w-20 sm:mt-0">
                            <option>10</option>
                            <option>25</option>
                            <option>35</option>
                            <option>50</option>
                        </x-base.form-select>
                    </div>
                </div>
                <!-- END: Weekly Top Products -->
            </div>
        </div>
        <div class="col-span-12 2xl:col-span-3">
            <div class="-mb-10 pb-10 2xl:border-l">
                <div class="grid grid-cols-12 gap-x-6 gap-y-6 2xl:gap-x-0 2xl:pl-6">
                    <!-- BEGIN: Transactions -->
                    <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 2xl:col-span-12 2xl:mt-8">
                        <div class="intro-x flex h-10 items-center">
                            <h2 class="mr-5 truncate text-lg font-medium">File Statistics</h2>
                        </div>
                        <div class="mt-5">
                            @if (isset($attachment_stats) && $attachment_stats->isNotEmpty())
                                @foreach ($attachment_stats->take(5) as $stat)
                                    <div class="intro-x">
                                        <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                                            <div
                                                class="flex h-10 w-10 flex-none items-center justify-center rounded-full bg-slate-100 dark:bg-darkmode-200">
                                                <x-base.lucide class="h-[28px] w-[28px] {{ $stat['color'] }}"
                                                    icon="{{ $stat['icon'] }}" />
                                            </div>
                                            <div class="ml-4 mr-auto">
                                                <div class="font-medium">{{ $stat['extension'] }} Files</div>
                                                <div class="mt-0.5 text-xs text-slate-500">
                                                    {{ $stat['total_size_formatted'] }}
                                                </div>
                                            </div>
                                            <div class="text-success">
                                                {{ $stat['count'] }} {{ Str::plural('file', $stat['count']) }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <a class="intro-x block w-full rounded-md border border-dotted border-slate-400 py-3 text-center text-slate-500 dark:border-darkmode-300"
                                    href="">
                                    View All Files
                                </a>
                            @else
                                <div class="intro-x">
                                    <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                                        <div class="w-full text-center text-slate-500">
                                            No attachments found
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <!-- END: Transactions -->
                    <!-- BEGIN: Recent Activities -->
                    <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 2xl:col-span-12">
                        <div class="intro-x flex h-10 items-center">
                            <h2 class="mr-5 truncate text-lg font-medium">
                                Recent Email Activities
                            </h2>
                            <a class="ml-auto truncate text-primary" href="">View All</a>
                        </div>
                        <div
                            class="relative mt-5 before:absolute before:ml-5 before:mt-5 before:block before:h-[85%] before:w-px before:bg-slate-200 before:dark:bg-darkmode-400">
                            @foreach ($recent_emails as $index => $email)
                                @php
                                    // Ensure date is a Carbon instance
                                    $emailDate = \Carbon\Carbon::parse($email->date);
                                @endphp

                                <div class="intro-x relative mb-3 flex items-center">
                                    <div
                                        class="before:absolute before:ml-5 before:mt-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
                                        <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                                            @if ($email->correspondenceEmail && $email->correspondenceEmail->avatar)
                                                <img src="{{ $email->correspondenceEmail->avatar }}"
                                                    alt="{{ $email->correspondenceEmail->name }}" />
                                            @else
                                                <img src="{{ Vite::asset('resources/images/placeholders/200x200.jpg') }}"
                                                    alt="No avatar" />
                                            @endif
                                        </div>
                                    </div>
                                    <div class="box zoom-in ml-4 flex-1 px-5 py-3">
                                        <div class="flex items-center">
                                            <div class="font-medium">
                                                {{ $email->correspondenceEmail->name ?? (json_decode($email->from)[0] ?? 'Unknown') }}
                                            </div>
                                            <div class="ml-auto text-xs text-slate-500">
                                                {{ $emailDate->format('h:i A') }}
                                            </div>
                                        </div>
                                        <div class="mt-1 text-slate-500">
                                            <div class="truncate" title="{{ $email->subject }}">
                                                <strong>{{ $email->correspondenceEmail->label ?? 'Email' }}:</strong>
                                                {{ Str::limit($email->subject, 25) }}
                                            </div>
                                            @if ($email->correspondenceEmail && $email->correspondenceEmail->storage_size != '0 B')
                                                <div class="mt-1 text-xs text-primary">
                                                    Storage: {{ $email->correspondenceEmail->storage_size }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                @if ($index == 1 || $index == 3)
                                    <div class="intro-x my-4 text-center text-xs text-slate-500">
                                        {{ $emailDate->format('d F Y') }}
                                    </div>
                                @endif
                            @endforeach

                            @if ($recent_emails->isEmpty())
                                <div class="box zoom-in p-5 text-center text-slate-500">
                                    No recent email activities found
                                </div>
                            @endif
                        </div>
                    </div>
                    <!-- END: Recent Activities -->
                    <!-- BEGIN: Important Notes -->
                    <div
                        class="col-span-12 mt-3 md:col-span-6 xl:col-span-12 xl:col-start-1 xl:row-start-1 2xl:col-start-auto 2xl:row-start-auto">
                        <div class="intro-x flex h-10 items-center">
                            <h2 class="mr-auto truncate text-lg font-medium">
                                Important Notes
                            </h2>
                            <x-base.button
                                class="tiny-slider-navigator mr-2 border-slate-300 px-2 text-slate-600 dark:text-slate-300"
                                data-carousel="important-notes" data-target="prev">
                                <x-base.lucide class="h-4 w-4" icon="ChevronLeft" />
                            </x-base.button>
                            <x-base.button
                                class="tiny-slider-navigator mr-2 border-slate-300 px-2 text-slate-600 dark:text-slate-300"
                                data-carousel="important-notes" data-target="next">
                                <x-base.lucide class="h-4 w-4" icon="ChevronRight" />
                            </x-base.button>
                        </div>
                        <div class="intro-x mt-5">
                            <div class="box zoom-in">
                                <x-base.tiny-slider id="important-notes">
                                    <div class="p-5">
                                        <div class="truncate text-base font-medium">
                                            Lorem Ipsum is simply dummy text
                                        </div>
                                        <div class="mt-1 text-slate-400">20 Hours ago</div>
                                        <div class="mt-1 text-justify text-slate-500">
                                            Lorem Ipsum is simply dummy text of the printing and
                                            typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text ever since the 1500s.
                                        </div>
                                        <div class="mt-5 flex font-medium">
                                            <x-base.button class="px-2 py-1" type="button" variant="secondary">
                                                View Notes
                                            </x-base.button>
                                            <x-base.button class="ml-auto px-2 py-1" type="button"
                                                variant="outline-secondary">
                                                Dismiss
                                            </x-base.button>
                                        </div>
                                    </div>
                                    <div class="p-5">
                                        <div class="truncate text-base font-medium">
                                            Lorem Ipsum is simply dummy text
                                        </div>
                                        <div class="mt-1 text-slate-400">20 Hours ago</div>
                                        <div class="mt-1 text-justify text-slate-500">
                                            Lorem Ipsum is simply dummy text of the printing and
                                            typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text ever since the 1500s.
                                        </div>
                                        <div class="mt-5 flex font-medium">
                                            <x-base.button class="px-2 py-1" type="button" variant="secondary">
                                                View Notes
                                            </x-base.button>
                                            <x-base.button class="ml-auto px-2 py-1" type="button"
                                                variant="outline-secondary">
                                                Dismiss
                                            </x-base.button>
                                        </div>
                                    </div>
                                    <div class="p-5">
                                        <div class="truncate text-base font-medium">
                                            Lorem Ipsum is simply dummy text
                                        </div>
                                        <div class="mt-1 text-slate-400">20 Hours ago</div>
                                        <div class="mt-1 text-justify text-slate-500">
                                            Lorem Ipsum is simply dummy text of the printing and
                                            typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text ever since the 1500s.
                                        </div>
                                        <div class="mt-5 flex font-medium">
                                            <x-base.button class="px-2 py-1" type="button" variant="secondary">
                                                View Notes
                                            </x-base.button>
                                            <x-base.button class="ml-auto px-2 py-1" type="button"
                                                variant="outline-secondary">
                                                Dismiss
                                            </x-base.button>
                                        </div>
                                    </div>
                                </x-base.tiny-slider>
                            </div>
                        </div>
                    </div>
                    <!-- END: Important Notes -->
                    <!-- BEGIN: Schedules -->
                    <div
                        class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 xl:col-start-1 xl:row-start-2 2xl:col-span-12 2xl:col-start-auto 2xl:row-start-auto">
                        <div class="intro-x flex h-10 items-center">
                            <h2 class="mr-5 truncate text-lg font-medium">Schedules</h2>
                            <a class="ml-auto flex items-center truncate text-primary" href="">
                                <x-base.lucide class="mr-1 h-4 w-4" icon="Plus" /> Add New Schedules
                            </a>
                        </div>
                        <div class="mt-5">
                            <div class="intro-x box">
                                <div class="p-5">
                                    <div class="flex">
                                        <x-base.lucide class="h-5 w-5 text-slate-500" icon="ChevronLeft" />
                                        <div class="mx-auto text-base font-medium">April</div>
                                        <x-base.lucide class="h-5 w-5 text-slate-500" icon="ChevronRight" />
                                    </div>
                                    <div class="mt-5 grid grid-cols-7 gap-4 text-center">
                                        <div class="font-medium">Su</div>
                                        <div class="font-medium">Mo</div>
                                        <div class="font-medium">Tu</div>
                                        <div class="font-medium">We</div>
                                        <div class="font-medium">Th</div>
                                        <div class="font-medium">Fr</div>
                                        <div class="font-medium">Sa</div>
                                        <div class="relative rounded py-0.5 text-slate-500">29</div>
                                        <div class="relative rounded py-0.5 text-slate-500">30</div>
                                        <div class="relative rounded py-0.5 text-slate-500">31</div>
                                        <div class="relative rounded py-0.5">1</div>
                                        <div class="relative rounded py-0.5">2</div>
                                        <div class="relative rounded py-0.5">3</div>
                                        <div class="relative rounded py-0.5">4</div>
                                        <div class="relative rounded py-0.5">5</div>
                                        <div class="relative rounded bg-success/20 py-0.5 dark:bg-success/30">
                                            6
                                        </div>
                                        <div class="relative rounded py-0.5">7</div>
                                        <div class="relative rounded bg-primary py-0.5 text-white">
                                            8
                                        </div>
                                        <div class="relative rounded py-0.5">9</div>
                                        <div class="relative rounded py-0.5">10</div>
                                        <div class="relative rounded py-0.5">11</div>
                                        <div class="relative rounded py-0.5">12</div>
                                        <div class="relative rounded py-0.5">13</div>
                                        <div class="relative rounded py-0.5">14</div>
                                        <div class="relative rounded py-0.5">15</div>
                                        <div class="relative rounded py-0.5">16</div>
                                        <div class="relative rounded py-0.5">17</div>
                                        <div class="relative rounded py-0.5">18</div>
                                        <div class="relative rounded py-0.5">19</div>
                                        <div class="relative rounded py-0.5">20</div>
                                        <div class="relative rounded py-0.5">21</div>
                                        <div class="relative rounded py-0.5">22</div>
                                        <div class="relative rounded bg-pending/20 py-0.5 dark:bg-pending/30">
                                            23
                                        </div>
                                        <div class="relative rounded py-0.5">24</div>
                                        <div class="relative rounded py-0.5">25</div>
                                        <div class="relative rounded py-0.5">26</div>
                                        <div class="relative rounded bg-primary/10 py-0.5 dark:bg-primary/50">
                                            27
                                        </div>
                                        <div class="relative rounded py-0.5">28</div>
                                        <div class="relative rounded py-0.5">29</div>
                                        <div class="relative rounded py-0.5">30</div>
                                        <div class="relative rounded py-0.5 text-slate-500">1</div>
                                        <div class="relative rounded py-0.5 text-slate-500">2</div>
                                        <div class="relative rounded py-0.5 text-slate-500">3</div>
                                        <div class="relative rounded py-0.5 text-slate-500">4</div>
                                        <div class="relative rounded py-0.5 text-slate-500">5</div>
                                        <div class="relative rounded py-0.5 text-slate-500">6</div>
                                        <div class="relative rounded py-0.5 text-slate-500">7</div>
                                        <div class="relative rounded py-0.5 text-slate-500">8</div>
                                        <div class="relative rounded py-0.5 text-slate-500">9</div>
                                    </div>
                                </div>
                                <div class="border-t border-slate-200/60 p-5">
                                    <div class="flex items-center">
                                        <div class="mr-3 h-2 w-2 rounded-full bg-pending"></div>
                                        <span class="truncate">UI/UX Workshop</span>
                                        <span class="font-medium xl:ml-auto">23th</span>
                                    </div>
                                    <div class="mt-4 flex items-center">
                                        <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
                                        <span class="truncate"> VueJs Frontend Development </span>
                                        <span class="font-medium xl:ml-auto">10th</span>
                                    </div>
                                    <div class="mt-4 flex items-center">
                                        <div class="mr-3 h-2 w-2 rounded-full bg-warning"></div>
                                        <span class="truncate">Laravel Rest API</span>
                                        <span class="font-medium xl:ml-auto">31th</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END: Schedules -->
                </div>
            </div>
        </div>
    </div>
@endsection