@extends('layouts.backend.app')

@section('content')
    <div class="intro-y mt-8 flex items-center">
        <h2 class="mr-auto text-lg font-medium">Details of {{ $email_attachment->email_address }}</h2>
    </div>
    <x-base.tab.group>
        <!-- BEGIN: Profile Info -->
        <div class="intro-y box mt-5 px-5 pt-5">
            <div class="-mx-5 grid grid-cols-12 border-b border-slate-200/60 pb-5 dark:border-darkmode-400">
                <!-- Profile Image and Name Column -->
                <div class="col-span-12 sm:col-span-6 xl:col-span-3 px-5">
                    <div class="flex flex-col items-center lg:items-start">
                        <div class="image-fit relative h-20 w-20 flex-none sm:h-24 sm:w-24 lg:h-32 lg:w-32">
                            <img class="rounded-full" src="{{ $correspondence->avatar }}"
                                alt="Midone - Tailwind Admin Dashboard Template" />
                            <div
                                class="absolute bottom-0 right-0 mb-1 mr-1 flex items-center justify-center rounded-full bg-primary p-2">
                                <x-base.lucide class="h-4 w-4 text-white" icon="Camera" />
                            </div>
                        </div>
                        <div class="mt-3 text-center font-medium lg:text-left">
                            <div class="w-24 truncate text-lg font-medium sm:w-40 sm:whitespace-normal">
                                {{ $correspondence->name }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- First Stats Column -->
                <div class="col-span-12 sm:col-span-6 xl:col-span-3 px-5 mt-4 sm:mt-0">
                    <div @class([
                        'relative zoom-in w-full h-full',
                        "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 w-full h-full">
                            <div class="flex">
                                <x-base.lucide icon="Mail" class="h-[28px] w-[28px] text-primary" />
                            </div>
                            <div class="mt-6 text-3xl font-medium leading-8">{{ $receivedCount }}</div>
                            <div class="mt-1 text-base text-slate-500">Received From Contact</div>
                        </div>
                    </div>
                </div>

                <!-- Second Stats Column -->
                <div
                    class="col-span-12 sm:col-span-6 xl:col-span-3 px-5 mt-4 sm:mt-0 border-l border-r border-slate-200/60 dark:border-darkmode-400">
                    <div @class([
                        'relative zoom-in w-full h-full',
                        "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 w-full h-full">
                            <div class="flex">
                                <x-base.lucide icon="Send" class="h-[28px] w-[28px] text-success" />
                            </div>
                            <div class="mt-6 text-3xl font-medium leading-8">{{ $sentCount }}</div>
                            <div class="mt-1 text-base text-slate-500">Sent To Contact</div>
                        </div>
                    </div>
                </div>

                <!-- Third Stats Column -->
                <div class="col-span-12 sm:col-span-6 xl:col-span-3 px-5 mt-4 sm:mt-0">
                    <div @class([
                        'relative zoom-in w-full h-full',
                        "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 w-full h-full">
                            <div class="flex">
                                <x-base.lucide icon="HardDrive" class="h-[28px] w-[28px] text-info" />
                            </div>
                            <div class="mt-6 text-3xl font-medium leading-8">
                                @if ($correspondence->storage_size == '0 B')
                                    0 B
                                @else
                                    {{ $correspondence->storage_size ?? '0 B' }}
                                @endif
                            </div>
                            <div class="mt-1 text-base text-slate-500">Total Attachment Storage</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Profile Info -->
        <!-- BEGIN: Media Gallery -->
        <div class="intro-y box mt-5 px-5 pt-5">
            <x-base.tab.list variant="boxed-tabs">
                <x-base.tab id="images-tab" selected>
                    <x-base.tab.button class="w-full py-2" as="button">
                        <x-base.lucide icon="Image" class="mr-2 h-4 w-4" /> Images
                    </x-base.tab.button>
                </x-base.tab>
                <x-base.tab id="videos-tab">
                    <x-base.tab.button class="w-full py-2" as="button">
                        <x-base.lucide icon="Video" class="mr-2 h-4 w-4" /> Videos
                    </x-base.tab.button>
                </x-base.tab>
                <x-base.tab id="audio-tab">
                    <x-base.tab.button class="w-full py-2" as="button">
                        <x-base.lucide icon="Music" class="mr-2 h-4 w-4" /> Audio
                    </x-base.tab.button>
                </x-base.tab>
                <x-base.tab id="documents-tab">
                    <x-base.tab.button class="w-full py-2" as="button">
                        <x-base.lucide icon="FileText" class="mr-2 h-4 w-4" /> Documents
                    </x-base.tab.button>
                </x-base.tab>
                <x-base.tab id="others-tab">
                    <x-base.tab.button class="w-full py-2" as="button">
                        <x-base.lucide icon="Archive" class="mr-2 h-4 w-4" /> Others
                    </x-base.tab.button>
                </x-base.tab>
            </x-base.tab.list>

            <x-base.tab.panels class="mt-5">
                <!-- Images Tab -->
                <x-base.tab.panel id="images" selected>
                    <div class="flex flex-wrap gap-4 p-5">
                        @foreach ($attachments as $attachment)
                            @php
                                // Get file extension safely
                                $fileType = isset($attachment['type'])
                                    ? $attachment['type']
                                    : strtolower(pathinfo($attachment['filename'], PATHINFO_EXTENSION));

                                // Calculate width classes for responsive grid
                                $widthClass =
                                    'w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.333%-1.125rem)] lg:w-[calc(25%-1.25rem)] xl:w-[calc(20%-1.25rem)]';

                                $aspectClass = 'aspect-square';

                                if (isset($attachment['path'])) {
                                    try {
                                        $dimensions = getimagesize($attachment['path']);
                                        if ($dimensions) {
                                            $ratio = $dimensions[0] / $dimensions[1];
                                            $aspectClass = $ratio >= 1 ? 'aspect-video' : 'aspect-[9/16]';
                                        }
                                    } catch (Exception $e) {
                                        // Handle exception if needed
                                    }
                                }
                            @endphp

                            @if (in_array($fileType, ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                @if (isset($attachment['path']) && Storage::disk('public')->exists($attachment['relative_path']))
                                    <div class="{{ $widthClass }}">
                                        <div
                                            class="overflow-hidden rounded-lg border border-slate-200 dark:border-darkmode-400">
                                            <div class="relative w-full {{ $aspectClass }}">
                                                <x-base.image-zoom class="w-full h-full object-cover rounded-md"
                                                    src="{!! $attachment['url'] !!}" alt="{{ $attachment['filename'] }}" />
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    </div>
                </x-base.tab.panel>

                <!-- Videos Tab -->
                <x-base.tab.panel id="videos">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 p-5">
                        @foreach ($attachments as $attachment)
                            @php
                                $extension = strtolower(pathinfo($attachment['filename'], PATHINFO_EXTENSION));
                            @endphp

                            @if (in_array($extension, ['mp4', 'mov', 'avi', 'mkv', 'webm']))
                                @if (isset($attachment['path']) && Storage::disk('public')->exists($attachment['relative_path']))
                                    <div
                                        class="overflow-hidden rounded-lg border border-slate-200 dark:border-darkmode-400">
                                        <div class="relative aspect-video bg-black">
                                            <video class="h-full w-full" controls>
                                                <source src="{{ $attachment['url'] }}" type="video/{{ $extension }}">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                        <div class="p-2 truncate text-sm">{{ $attachment['filename'] }}</div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    </div>
                </x-base.tab.panel>

                <!-- Audio Tab -->
                <x-base.tab.panel id="audio">
                    <div class="space-y-4 p-5">
                        @foreach ($attachments as $attachment)
                            @php
                                $extension = strtolower(pathinfo($attachment['filename'], PATHINFO_EXTENSION));
                            @endphp

                            @if (in_array($extension, ['mp3', 'wav', 'ogg', 'm4a', 'flac']))
                                @if (isset($attachment['path']) && Storage::disk('public')->exists($attachment['relative_path']))
                                    <div
                                        class="flex items-center rounded-lg border border-slate-200 p-4 dark:border-darkmode-400">
                                        <x-base.lucide icon="Music" class="mr-3 h-8 w-8 text-primary" />
                                        <div class="flex-1 min-w-0">
                                            <p class="truncate font-medium">{{ $attachment['filename'] }}</p>
                                            <p class="text-sm text-slate-500">
                                                {{-- {{ round(filesize($attachment['path']) / 1024 / 1024, 2) }} MB --}}
                                            </p>
                                        </div>
                                        <audio controls class="ml-4">
                                            <source src="{{ $attachment['url'] }}" type="audio/{{ $extension }}">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    </div>
                </x-base.tab.panel>

                <!-- Documents Tab -->
                <x-base.tab.panel id="documents">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-5">
                        @foreach ($attachments as $attachment)
                            @php
                                $extension = strtolower(pathinfo($attachment['filename'], PATHINFO_EXTENSION));
                                $icon = 'FileText';

                                if (in_array($extension, ['pdf'])) {
                                    $icon = 'FileText';
                                } elseif (in_array($extension, ['doc', 'docx'])) {
                                    $icon = 'FileText';
                                } elseif (in_array($extension, ['xls', 'xlsx'])) {
                                    $icon = 'FileText';
                                } elseif (in_array($extension, ['ppt', 'pptx'])) {
                                    $icon = 'FileText';
                                } elseif (in_array($extension, ['txt'])) {
                                    $icon = 'FileText';
                                }
                            @endphp

                            @if (in_array($extension, ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']))
                                @if (isset($attachment['path']) && Storage::disk('public')->exists($attachment['relative_path']))
                                    <div
                                        class="overflow-hidden rounded-lg border border-slate-200 dark:border-darkmode-400">
                                        <div
                                            class="aspect-square bg-slate-100 dark:bg-darkmode-700 flex items-center justify-center">
                                            <x-base.lucide icon="{{ $icon }}" class="h-12 w-12 text-slate-400" />
                                        </div>
                                        <div class="p-3">
                                            <div class="truncate font-medium">{{ $attachment['filename'] }}</div>
                                            <div class="flex items-center justify-between mt-2 text-xs text-slate-500">
                                                <span>{{ strtoupper($extension) }}</span>
                                                {{-- <span>{{ round(filesize($attachment['path']) / 1024 / 1024, 2) }} MB</span> --}}
                                            </div>
                                            <a href="{{ $attachment['url'] }}"
                                                class="mt-2 flex items-center text-primary hover:underline" download>
                                                <x-base.lucide icon="Download" class="mr-1 h-4 w-4" />
                                                Download
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    </div>
                </x-base.tab.panel>

                <!-- Others Tab -->
                <x-base.tab.panel id="others">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-5">
                        @foreach ($attachments as $attachment)
                            @php
                                $extension = strtolower(pathinfo($attachment['filename'], PATHINFO_EXTENSION));
                                $icon = 'Archive';

                                if (in_array($extension, ['zip', 'rar', '7z'])) {
                                    $icon = 'Archive';
                                } elseif (in_array($extension, ['exe', 'msi'])) {
                                    $icon = 'Binary';
                                }
                            @endphp

                            @if (
                                !in_array($extension, [
                                    'jpg',
                                    'jpeg',
                                    'png',
                                    'gif',
                                    'webp', // images
                                    'mp4',
                                    'mov',
                                    'avi',
                                    'mkv',
                                    'webm', // videos
                                    'mp3',
                                    'wav',
                                    'ogg',
                                    'm4a',
                                    'flac', // audio
                                    'pdf',
                                    'doc',
                                    'docx',
                                    'xls',
                                    'xlsx',
                                    'ppt',
                                    'pptx',
                                    'txt', // documents
                                ]))
                                @if (isset($attachment['path']) && Storage::disk('public')->exists($attachment['relative_path']))
                                    <div
                                        class="overflow-hidden rounded-lg border border-slate-200 dark:border-darkmode-400">
                                        <div
                                            class="aspect-square bg-slate-100 dark:bg-darkmode-700 flex items-center justify-center">
                                            <x-base.lucide icon="{{ $icon }}" class="h-12 w-12 text-slate-400" />
                                        </div>
                                        <div class="p-3">
                                            <div class="truncate font-medium">{{ $attachment['filename'] }}</div>
                                            <div class="flex items-center justify-between mt-2 text-xs text-slate-500">
                                                <span>{{ strtoupper($extension) }}</span>
                                                {{-- <span>{{ round(filesize($attachment['path']) / 1024 / 1024, 2) }} MB</span> --}}
                                            </div>
                                            <a href="{{ $attachment['url'] }}"
                                                class="mt-2 flex items-center text-primary hover:underline" download>
                                                <x-base.lucide icon="Download" class="mr-1 h-4 w-4" />
                                                Download
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    </div>
                </x-base.tab.panel>
            </x-base.tab.panels>
        </div>
        <!-- END: Media Gallery -->
        <x-base.tab.panels class="intro-y mt-5">
            <x-base.tab.panel id="dashboard" selected>
                <div class="grid grid-cols-12 gap-6">
                    <!-- BEGIN: Top Categories -->
                    <div class="intro-y box col-span-12 lg:col-span-6">
                        <div class="flex items-center border-b border-slate-200/60 p-5 dark:border-darkmode-400">
                            <h2 class="mr-auto text-base font-medium">
                                Top Categories
                            </h2>
                            <x-base.menu class="ml-auto">
                                <x-base.menu.button class="block h-5 w-5" href="#" tag="a">
                                    <x-base.lucide class="h-5 w-5 text-slate-500" icon="MoreHorizontal" />
                                </x-base.menu.button>
                                <x-base.menu.items class="w-40">
                                    <x-base.menu.item>
                                        <x-base.lucide class="mr-2 h-4 w-4" icon="Plus" /> Add
                                        Category
                                    </x-base.menu.item>
                                    <x-base.menu.item>
                                        <x-base.lucide class="mr-2 h-4 w-4" icon="Settings" />
                                        Settings
                                    </x-base.menu.item>
                                </x-base.menu.items>
                            </x-base.menu>
                        </div>
                        <div class="p-5">
                            <div class="flex flex-col sm:flex-row">
                                <div class="mr-auto">
                                    <a class="font-medium" href="">
                                        Wordpress Template
                                    </a>
                                    <div class="mt-1 text-slate-500">
                                        HTML, PHP, Mysql
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="-ml-2 mr-auto mt-5 w-32 sm:ml-0 sm:mr-5">
                                        <x-simple-line-chart height="h-[30px]" />
                                    </div>
                                    <div class="text-center">
                                        <div class="font-medium">6.5k</div>
                                        <div class="mt-1.5 rounded bg-success/20 px-2 text-success">
                                            +150
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-5 flex flex-col sm:flex-row">
                                <div class="mr-auto">
                                    <a class="font-medium" href="">
                                        Bootstrap HTML Template
                                    </a>
                                    <div class="mt-1 text-slate-500">
                                        HTML, PHP, Mysql
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="-ml-2 mr-auto mt-5 w-32 sm:ml-0 sm:mr-5">
                                        <x-simple-line-chart height="h-[30px]" />
                                    </div>
                                    <div class="text-center">
                                        <div class="font-medium">2.5k</div>
                                        <div class="mt-1.5 rounded bg-pending/10 px-2 text-pending">
                                            +150
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-5 flex flex-col sm:flex-row">
                                <div class="mr-auto">
                                    <a class="font-medium" href="">
                                        Tailwind HTML Template
                                    </a>
                                    <div class="mt-1 text-slate-500">
                                        HTML, PHP, Mysql
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="-ml-2 mr-auto mt-5 w-32 sm:ml-0 sm:mr-5">
                                        <x-simple-line-chart height="h-[30px]" />
                                    </div>
                                    <div class="text-center">
                                        <div class="font-medium">3.4k</div>
                                        <div class="mt-1.5 rounded bg-primary/10 px-2 text-primary">
                                            +150
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END: Top Categories -->
                    <!-- BEGIN: Work In Progress -->
                    <x-base.tab.group class="intro-y box col-span-12 lg:col-span-6">
                        <div
                            class="flex items-center border-b border-slate-200/60 px-5 py-5 dark:border-darkmode-400 sm:py-0">
                            <h2 class="mr-auto text-base font-medium">
                                Work In Progress
                            </h2>
                            <x-base.menu class="ml-auto sm:hidden">
                                <x-base.menu.button class="block h-5 w-5" href="#" tag="a">
                                    <x-base.lucide class="h-5 w-5 text-slate-500" icon="MoreHorizontal" />
                                </x-base.menu.button>
                                <x-base.menu.items class="w-40">
                                    <x-base.menu.item class="w-full" id="work-in-progress-mobile-new-tab"
                                        target="work-in-progress-new" as="x-base.tab.button" unstyled selected>
                                        New
                                    </x-base.menu.item>
                                    <x-base.menu.item class="w-full" id="work-in-progress-mobile-last-week-tab"
                                        target="work-in-progress-last-week" as="x-base.tab.button" unstyled
                                        :selected="false">
                                        Last Week
                                    </x-base.menu.item>
                                </x-base.menu.items>
                            </x-base.menu>
                            <x-base.tab.list class="ml-auto hidden w-auto sm:flex" variant="link-tabs">
                                <x-base.tab id="work-in-progress-new-tab" :fullWidth="false" selected>
                                    <x-base.tab.button class="cursor-pointer py-5">
                                        New
                                    </x-base.tab.button>
                                </x-base.tab>
                                <x-base.tab id="work-in-progress-last-week-tab" :fullWidth="false" :selected="false">
                                    <x-base.tab.button class="cursor-pointer py-5">
                                        Last Week
                                    </x-base.tab.button>
                                </x-base.tab>
                            </x-base.tab.list>
                        </div>
                        <div class="p-5">
                            <x-base.tab.panels>
                                <x-base.tab.panel id="work-in-progress-new" selected>
                                    <div>
                                        <div class="flex">
                                            <div class="mr-auto">Pending Tasks</div>
                                            <div>20%</div>
                                        </div>
                                        <x-base.progress class="mt-2 h-1">
                                            <x-base.progress.bar class="w-1/2 bg-primary" role="progressbar"
                                                aria-valuenow="0" aria-valuemin="0"
                                                aria-valuemax="100"></x-base.progress.bar>
                                        </x-base.progress>
                                    </div>
                                    <div class="mt-5">
                                        <div class="flex">
                                            <div class="mr-auto">Completed Tasks</div>
                                            <div>2 / 20</div>
                                        </div>
                                        <x-base.progress class="mt-2 h-1">
                                            <x-base.progress.bar class="w-1/4 bg-primary" role="progressbar"
                                                aria-valuenow="0" aria-valuemin="0"
                                                aria-valuemax="100"></x-base.progress.bar>
                                        </x-base.progress>
                                    </div>
                                    <div class="mt-5">
                                        <div class="flex">
                                            <div class="mr-auto">Tasks In Progress</div>
                                            <div>42</div>
                                        </div>
                                        <x-base.progress class="mt-2 h-1">
                                            <x-base.progress.bar class="w-3/4 bg-primary" role="progressbar"
                                                aria-valuenow="0" aria-valuemin="0"
                                                aria-valuemax="100"></x-base.progress.bar>
                                        </x-base.progress>
                                    </div>
                                    <x-base.button class="mx-auto mt-5 block w-40" href="" as="a"
                                        variant="secondary">
                                        View More Details
                                    </x-base.button>
                                </x-base.tab.panel>
                            </x-base.tab.panels>
                        </div>
                    </x-base.tab.group>
                    <!-- END: Work In Progress -->
                    <!-- BEGIN: Daily Sales -->
                    <div class="intro-y box col-span-12 lg:col-span-6">
                        <div
                            class="flex items-center border-b border-slate-200/60 px-5 py-5 dark:border-darkmode-400 sm:py-3">
                            <h2 class="mr-auto text-base font-medium">Daily Sales</h2>
                            <x-base.menu class="ml-auto sm:hidden">
                                <x-base.menu.button class="block h-5 w-5" href="#" tag="a">
                                    <x-base.lucide class="h-5 w-5 text-slate-500" icon="MoreHorizontal" />
                                </x-base.menu.button>
                                <x-base.menu.items class="w-40">
                                    <x-base.menu.item>
                                        <x-base.lucide class="mr-2 h-4 w-4" icon="File" /> Download
                                        Excel
                                    </x-base.menu.item>
                                </x-base.menu.items>
                            </x-base.menu>
                            <x-base.button class="hidden sm:flex" variant="outline-secondary">
                                <x-base.lucide class="mr-2 h-4 w-4" icon="File" /> Download
                                Excel
                            </x-base.button>
                        </div>
                        <div class="p-5">
                            <div class="relative flex items-center">
                                <div class="image-fit h-12 w-12 flex-none">
                                    <img class="rounded-full" src="{{ Vite::asset($fakers[0]['photos'][0]) }}"
                                        alt="Midone - Tailwind Admin Dashboard Template" />
                                </div>
                                <div class="ml-4 mr-auto">
                                    <a class="font-medium" href="">
                                        {{ $fakers[0]['users'][0]['name'] }}
                                    </a>
                                    <div class="mr-5 text-slate-500 sm:mr-5">
                                        Bootstrap 4 HTML Admin Template
                                    </div>
                                </div>
                                <div class="font-medium text-slate-600 dark:text-slate-500">
                                    +$19
                                </div>
                            </div>
                            <div class="relative mt-5 flex items-center">
                                <div class="image-fit h-12 w-12 flex-none">
                                    <img class="rounded-full" src="{{ Vite::asset($fakers[1]['photos'][0]) }}"
                                        alt="Midone - Tailwind Admin Dashboard Template" />
                                </div>
                                <div class="ml-4 mr-auto">
                                    <a class="font-medium" href="">
                                        {{ $fakers[1]['users'][0]['name'] }}
                                    </a>
                                    <div class="mr-5 text-slate-500 sm:mr-5">
                                        Tailwind Admin Dashboard Template
                                    </div>
                                </div>
                                <div class="font-medium text-slate-600 dark:text-slate-500">
                                    +$25
                                </div>
                            </div>
                            <div class="relative mt-5 flex items-center">
                                <div class="image-fit h-12 w-12 flex-none">
                                    <img class="rounded-full" src="{{ Vite::asset($fakers[2]['photos'][0]) }}"
                                        alt="Midone - Tailwind Admin Dashboard Template" />
                                </div>
                                <div class="ml-4 mr-auto">
                                    <a class="font-medium" href="">
                                        {{ $fakers[2]['users'][0]['name'] }}
                                    </a>
                                    <div class="mr-5 text-slate-500 sm:mr-5">
                                        Vuejs HTML Admin Template
                                    </div>
                                </div>
                                <div class="font-medium text-slate-600 dark:text-slate-500">
                                    +$21
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END: Daily Sales -->
                    <!-- BEGIN: Latest Tasks -->
                    <x-base.tab.group class="intro-y box col-span-12 lg:col-span-6">
                        <div
                            class="flex items-center border-b border-slate-200/60 px-5 py-5 dark:border-darkmode-400 sm:py-0">
                            <h2 class="mr-auto text-base font-medium">
                                Latest Tasks
                            </h2>
                            <x-base.menu class="ml-auto sm:hidden">
                                <x-base.menu.button class="block h-5 w-5" href="#" tag="a">
                                    <x-base.lucide class="h-5 w-5 text-slate-500" icon="MoreHorizontal" />
                                </x-base.menu.button>
                                <x-base.menu.items class="w-40">
                                    <x-base.menu.item class="w-full" id="latest-tasks-mobile-new-tab"
                                        target="latest-tasks-new" as="x-base.tab.button" unstyled selected>
                                        New
                                    </x-base.menu.item>
                                    <x-base.menu.item class="w-full" id="latest-tasks-mobile-last-week-tab"
                                        target="latest-tasks-last-week" as="x-base.tab.button" unstyled :selected="false">
                                        Last Week
                                    </x-base.menu.item>
                                </x-base.menu.items>
                            </x-base.menu>
                            <x-base.tab.list class="ml-auto hidden w-auto sm:flex" variant="link-tabs">
                                <x-base.tab id="latest-tasks-new-tab" :fullWidth="false" selected>
                                    <x-base.tab.button class="cursor-pointer py-5">
                                        New
                                    </x-base.tab.button>
                                </x-base.tab>
                                <x-base.tab id="latest-tasks-last-week-tab" :fullWidth="false" :selected="false">
                                    <x-base.tab.button class="cursor-pointer py-5">
                                        Last Week
                                    </x-base.tab.button>
                                </x-base.tab>
                            </x-base.tab.list>
                        </div>
                        <div class="p-5">
                            <x-base.tab.panels>
                                <x-base.tab.panel id="latest-tasks-new" selected>
                                    <div class="flex items-center">
                                        <div class="border-l-2 border-primary pl-4 dark:border-primary">
                                            <a class="font-medium" href="">
                                                Create New Campaign
                                            </a>
                                            <div class="text-slate-500">10:00 AM</div>
                                        </div>
                                        <x-base.form-switch class="ml-auto">
                                            <x-base.form-switch.input type="checkbox" />
                                        </x-base.form-switch>
                                    </div>
                                    <div class="mt-5 flex items-center">
                                        <div class="border-l-2 border-primary pl-4 dark:border-primary">
                                            <a class="font-medium" href="">
                                                Meeting With Client
                                            </a>
                                            <div class="text-slate-500">02:00 PM</div>
                                        </div>
                                        <x-base.form-switch class="ml-auto">
                                            <x-base.form-switch.input type="checkbox" />
                                        </x-base.form-switch>
                                    </div>
                                    <div class="mt-5 flex items-center">
                                        <div class="border-l-2 border-primary pl-4 dark:border-primary">
                                            <a class="font-medium" href="">
                                                Create New Repository
                                            </a>
                                            <div class="text-slate-500">04:00 PM</div>
                                        </div>
                                        <x-base.form-switch class="ml-auto">
                                            <x-base.form-switch.input type="checkbox" />
                                        </x-base.form-switch>
                                    </div>
                                </x-base.tab.panel>
                            </x-base.tab.panels>
                        </div>
                    </x-base.tab.group>
                    <!-- END: Latest Tasks -->
                    <!-- BEGIN: General Statistic -->
                    <div class="intro-y box col-span-12">
                        <div
                            class="flex items-center border-b border-slate-200/60 px-5 py-5 dark:border-darkmode-400 sm:py-3">
                            <h2 class="mr-auto text-base font-medium">
                                General Statistics
                            </h2>
                            <x-base.menu class="ml-auto sm:hidden">
                                <x-base.menu.button class="block h-5 w-5" href="#">
                                    <x-base.lucide class="h-5 w-5 text-slate-500" icon="MoreHorizontal" />
                                </x-base.menu.button>
                                <x-base.menu.items class="w-40">
                                    <x-base.menu.item>
                                        <x-base.lucide class="mr-2 h-4 w-4" icon="File" /> Download
                                        XML
                                    </x-base.menu.item>
                                </x-base.menu.items>
                            </x-base.menu>
                            <x-base.button class="hidden sm:flex" variant="outline-secondary">
                                <x-base.lucide class="mr-2 h-4 w-4" icon="File" /> Download XML
                            </x-base.button>
                        </div>
                        <div class="grid grid-cols-1 gap-6 p-5 2xl:grid-cols-7">
                            <div class="2xl:col-span-2">
                                <div class="grid grid-cols-2 gap-6">
                                    <div class="box col-span-2 p-5 dark:bg-darkmode-500 sm:col-span-1 2xl:col-span-2">
                                        <div class="font-medium">Net Worth</div>
                                        <div class="mt-1 flex items-center sm:mt-0">
                                            <div class="mr-4 flex w-20">
                                                USP:
                                                <span class="ml-3 font-medium text-success">
                                                    +23%
                                                </span>
                                            </div>
                                            <div class="w-5/6 overflow-auto">
                                                <x-simple-line-chart height="h-[51px]" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box col-span-2 p-5 dark:bg-darkmode-500 sm:col-span-1 2xl:col-span-2">
                                        <div class="font-medium">Sales</div>
                                        <div class="mt-1 flex items-center sm:mt-0">
                                            <div class="mr-4 flex w-20">
                                                USP:
                                                <span class="ml-3 font-medium text-danger">
                                                    -5%
                                                </span>
                                            </div>
                                            <div class="w-5/6 overflow-auto">
                                                <x-simple-line-chart height="h-[51px]" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box col-span-2 p-5 dark:bg-darkmode-500 sm:col-span-1 2xl:col-span-2">
                                        <div class="font-medium">Profit</div>
                                        <div class="mt-1 flex items-center sm:mt-0">
                                            <div class="mr-4 flex w-20">
                                                USP:
                                                <span class="ml-3 font-medium text-danger">
                                                    -10%
                                                </span>
                                            </div>
                                            <div class="w-5/6 overflow-auto">
                                                <x-simple-line-chart height="h-[51px]" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box col-span-2 p-5 dark:bg-darkmode-500 sm:col-span-1 2xl:col-span-2">
                                        <div class="font-medium">Products</div>
                                        <div class="mt-1 flex items-center sm:mt-0">
                                            <div class="mr-4 flex w-20">
                                                USP:
                                                <span class="ml-3 font-medium text-success">
                                                    +55%
                                                </span>
                                            </div>
                                            <div class="w-5/6 overflow-auto">
                                                <x-simple-line-chart height="h-[51px]" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full 2xl:col-span-5">
                                <div class="mt-8 flex justify-center">
                                    <div class="mr-5 flex items-center">
                                        <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
                                        <span>Product Profit</span>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="mr-3 h-2 w-2 rounded-full bg-slate-300"></div>
                                        <span>Author Sales</span>
                                    </div>
                                </div>
                                <div class="mt-8">
                                    <x-stacked-bar-chart-1 height="h-[420px]" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END: General Statistic -->
                </div>
            </x-base.tab.panel>
        </x-base.tab.panels>
    </x-base.tab.group>

    <div class="intro-y mt-5 grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-12">
            <!-- BEGIN: Boxed Tab -->
            <x-base.preview-component class="intro-y box mt-5">
                <div class="p-5">
                    <x-base.preview>
                        <x-base.tab.group>
                            <x-base.tab.list variant="boxed-tabs">
                                <x-base.tab id="correspondence-tab" selected>
                                    <x-base.tab.button class="w-full py-2" as="button">
                                        Correspondences
                                    </x-base.tab.button>
                                </x-base.tab>
                                <x-base.tab id="attachment-tab">
                                    <x-base.tab.button class="w-full py-2" as="button">
                                        Attachments
                                    </x-base.tab.button>
                                </x-base.tab>
                                <x-base.tab id="recipients-tab">
                                    <x-base.tab.button class="w-full py-2" as="button">
                                        Recipients
                                    </x-base.tab.button>
                                </x-base.tab>
                            </x-base.tab.list>
                            <x-base.tab.panels class="mt-5">
                                <x-base.tab.panel class="leading-relaxed" id="correspondence" selected>
                                    @if (count($emails))
                                        @foreach ($emails as $email)
                                            <div
                                                class="max-w-4xl mx-auto bg-gray-50 rounded-lg border border-gray-200 overflow-hidden shadow-sm">
                                                <div class="border-b border-gray-200 px-6 py-4">
                                                    <h3 class="text-xl font-semibold text-blue-600 mb-1">
                                                        {{ $email['subject'] }}</h3>
                                                    @if (count($email['attachments']))
                                                        <span class="text-sm text-gray-500">
                                                            <i class="mdi mdi-attachment mr-1"></i> Contains attachments
                                                        </span>
                                                    @endif
                                                </div>

                                                <!-- Metadata -->
                                                <div class="px-6 py-4 space-y-1 text-gray-700">
                                                    <p class="flex items-start">
                                                        <span class="font-medium w-24 flex-shrink-0">From:</span>
                                                        <span>{{ implode(', ', $email['from']) }}</span>
                                                    </p>
                                                    <p class="flex items-start">
                                                        <span class="font-medium w-24 flex-shrink-0">To:</span>
                                                        <span>{{ is_array($email['to']) ? implode(', ', $email['to']) : $email['to'] }}</span>
                                                    </p>
                                                    <p class="flex items-start">
                                                        <span class="font-medium w-24 flex-shrink-0">Date:</span>
                                                        <span>{{ $email['date_time'] }}</span>
                                                    </p>
                                                </div>

                                                <!-- Email Body -->
                                                <div class="bg-white px-6 py-4 border-t border-b border-gray-200">
                                                    <div class="prose max-w-none">
                                                        @if (str_contains($email['bodyText'], '<') && str_contains($email['bodyText'], '>'))
                                                            {!! $email['bodyText'] !!}
                                                        @else
                                                            @foreach (explode("\n", $email['bodyText']) as $paragraph)
                                                                @if (trim($paragraph))
                                                                    <p class="mb-4">{{ $paragraph }}</p>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    </div>
                                                </div>

                                                <!-- Attachments -->
                                                @if (count($email['attachments']))
                                                    <div class="px-6 py-4 border-t border-gray-200">
                                                        <h5 class="font-medium text-gray-700 mb-2">Attachments</h5>
                                                        <ul class="space-y-1">
                                                            @foreach ($email['attachments'] as $attachment)
                                                                <li>
                                                                    <a href="#"
                                                                        class="text-blue-600 hover:text-blue-800 hover:underline flex items-center">
                                                                        <i class="mdi mdi-file-outline mr-2"></i>
                                                                        {{ $attachment['filename'] }}
                                                                    </a>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    @else
                                        <p>No emails found.</p>
                                    @endif
                                </x-base.tab.panel>
                                <x-base.tab.panel class="leading-relaxed" id="attachment">
                                    <x-base.preview-component class="intro-y box mt-5">
                                        <x-base.preview>
                                            <x-base.table class="-mt-2 border-separate border-spacing-y-[10px]">
                                                <x-base.table.thead>
                                                    <x-base.table.tr>
                                                        <x-base.table.th class="whitespace-nowrap border-b-0">
                                                            DATE & TIME
                                                        </x-base.table.th>
                                                        <x-base.table.th class="whitespace-nowrap border-b-0">
                                                            FILE TYPE
                                                        </x-base.table.th>
                                                        <x-base.table.th class="whitespace-nowrap border-b-0">
                                                            FILE SIZE
                                                        </x-base.table.th>
                                                        <x-base.table.th class="whitespace-nowrap border-b-0">
                                                            USED
                                                        </x-base.table.th>
                                                        <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                                                            FILE NAME
                                                        </x-base.table.th>
                                                    </x-base.table.tr>
                                                </x-base.table.thead>
                                                <x-base.table.tbody>
                                                    @if ($email_attachment->attachments->count())
                                                        @foreach ($email_attachment->attachments as $attach)
                                                            <x-base.table.tr class="intro-x">
                                                                <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">
                                                                    <div class="mt-0.5 text-xs text-slate-500">
                                                                        <span class="bg-slate-100 px-2 py-1 rounded-full">
                                                                            {{ $attach->date_time }}
                                                                        </span>
                                                                    </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">
                                                                    {{ $attach->type }}
                                                                </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">
                                                                    {{ $attach->size }}
                                                                </x-base.table.td>
                                                                <x-base.table.td
                                                                    class="box rounded-l-none rounded-r-none border-x-0 text-center 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">
                                                                    {{ storage_percentage($attach->size, auth()->user()->total_storage) }}
                                                                </x-base.table.td>
                                                                <x-base.table.td
                                                                    class="box rounded-l-none rounded-r-none border-x-0 text-center 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">
                                                                    {{ $attach->attachment_name }}
                                                                </x-base.table.td>
                                                            </x-base.table.tr>
                                                        @endforeach
                                                    @endif
                                                </x-base.table.tbody>
                                            </x-base.table>
                                        </x-base.preview>
                                    </x-base.preview-component>
                                </x-base.tab.panel>
                                <x-base.tab.panel class="leading-relaxed" id="recipients">
                                    <x-base.preview-component class="intro-y box mt-5">
                                        <x-base.preview>
                                            <div class="space-y-2 p-4">
                                                <!-- To Recipients -->
                                                <div>
                                                    <h3 class="mt-3 text-2xl font-semibold leading-none">To:</h3>
                                                    {{-- <h5 class="text-sm font-medium text-gray-600 mb-1">To:</h5> --}}
                                                    <div class="flex flex-wrap gap-1 p-3">
                                                        @if (count($recipients['to']))
                                                            @foreach ($recipients['to'] as $recipient)
                                                                <span
                                                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-blue-100 text-blue-800 p-3">
                                                                    {{ $recipient }}
                                                                </span>
                                                            @endforeach
                                                        @else
                                                            <span
                                                                class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-gray-100 text-gray-800 p-3">
                                                                None
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div>
                                                    {{-- <h5 class="text-sm font-medium text-gray-600 mb-1">CC:</h5> --}}
                                                    <h3 class="mt-3 text-2xl font-semibold leading-none">CC:</h3>
                                                    <div class="flex flex-wrap gap-1 p-3">
                                                        @if (count($recipients['cc']))
                                                            @foreach ($recipients['cc'] as $recipient)
                                                                <span
                                                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-purple-100 text-purple-800 p-3">
                                                                    {{ $recipient }}
                                                                </span>
                                                            @endforeach
                                                        @else
                                                            <span
                                                                class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-gray-100 text-gray-800 p-3">
                                                                None
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <!-- BCC Recipients -->
                                                <div>
                                                    {{-- <h5 class="text-sm font-medium text-gray-600 mb-1">BCC:</h5> --}}
                                                    <h3 class="mt-3 text-2xl font-semibold leading-none">BCC:</h3>
                                                    <div class="flex flex-wrap gap-1 p-3">
                                                        @if (count($recipients['bcc']))
                                                            @foreach ($recipients['bcc'] as $recipient)
                                                                <span
                                                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-green-100 text-green-800 p-3">
                                                                    {{ $recipient }}
                                                                </span>
                                                            @endforeach
                                                        @else
                                                            <span
                                                                class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-gray-100 text-gray-800 p-3">
                                                                None
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </x-base.preview>
                                    </x-base.preview-component>
                                </x-base.tab.panel>
                            </x-base.tab.panels>
                        </x-base.tab.group>
                    </x-base.preview>
                    <x-base.source>
                        <x-base.highlight>
                            <x-base.tab.group>
                                <x-base.tab.list variant="boxed-tabs">
                                    <x-base.tab id="correspondence-tab" selected>
                                        <x-base.tab.button class="w-full py-2" as="button">
                                            Correspondences
                                        </x-base.tab.button>
                                    </x-base.tab>
                                    <x-base.tab id="attachment-tab">
                                        <x-base.tab.button class="w-full py-2" as="button">
                                            Attachments
                                        </x-base.tab.button>
                                    </x-base.tab>
                                    <x-base.tab id="recipients-tab">
                                        <x-base.tab.button class="w-full py-2" as="button">
                                            Recipients
                                        </x-base.tab.button>
                                    </x-base.tab>
                                </x-base.tab.list>
                                <x-base.tab.panels class="mt-5">
                                    <x-base.tab.panel class="leading-relaxed" id="correspondence" selected>
                                        @if (count($emails))
                                            @foreach ($emails as $email)
                                                <div
                                                    class="max-w-4xl mx-auto bg-gray-50 rounded-lg border border-gray-200 overflow-hidden shadow-sm">
                                                    <div class="border-b border-gray-200 px-6 py-4">
                                                        <h3 class="text-xl font-semibold text-blue-600 mb-1">
                                                            {{ $email['subject'] }}</h3>
                                                        @if (count($email['attachments']))
                                                            <span class="text-sm text-gray-500">
                                                                <i class="mdi mdi-attachment mr-1"></i> Contains
                                                                attachments
                                                            </span>
                                                        @endif
                                                    </div>

                                                    <!-- Metadata -->
                                                    <div class="px-6 py-4 space-y-1 text-gray-700">
                                                        <p class="flex items-start">
                                                            <span class="font-medium w-24 flex-shrink-0">From:</span>
                                                            <span>{{ implode(', ', $email['from']) }}</span>
                                                        </p>
                                                        <p class="flex items-start">
                                                            <span class="font-medium w-24 flex-shrink-0">To:</span>
                                                            <span>{{ is_array($email['to']) ? implode(', ', $email['to']) : $email['to'] }}</span>
                                                        </p>
                                                        <p class="flex items-start">
                                                            <span class="font-medium w-24 flex-shrink-0">Date:</span>
                                                            <span>{{ $email['date_time'] }}</span>
                                                        </p>
                                                    </div>

                                                    <!-- Email Body -->
                                                    <div class="bg-white px-6 py-4 border-t border-b border-gray-200">
                                                        <div class="prose max-w-none">
                                                            @if (str_contains($email['bodyText'], '<') && str_contains($email['bodyText'], '>'))
                                                                {!! $email['bodyText'] !!}
                                                            @else
                                                                @foreach (explode("\n", $email['bodyText']) as $paragraph)
                                                                    @if (trim($paragraph))
                                                                        <p class="mb-4">{{ $paragraph }}</p>
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <!-- Attachments -->
                                                    @if (count($email['attachments']))
                                                        <div class="px-6 py-4 border-t border-gray-200">
                                                            <h5 class="font-medium text-gray-700 mb-2">Attachments</h5>
                                                            <ul class="space-y-1">
                                                                @foreach ($email['attachments'] as $attachment)
                                                                    <li>
                                                                        <a href="#"
                                                                            class="text-blue-600 hover:text-blue-800 hover:underline flex items-center">
                                                                            <i class="mdi mdi-file-outline mr-2"></i>
                                                                            {{ $attachment['filename'] }}
                                                                        </a>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        @else
                                            <p>No emails found.</p>
                                        @endif
                                    </x-base.tab.panel>
                                    <x-base.tab.panel class="leading-relaxed" id="attachment">
                                        <x-base.preview-component class="intro-y box mt-5">
                                            <x-base.preview>
                                                <x-base.table class="-mt-2 border-separate border-spacing-y-[10px]">
                                                    <x-base.table.thead>
                                                        <x-base.table.tr>
                                                            <x-base.table.th class="whitespace-nowrap border-b-0">
                                                                DATE & TIME
                                                            </x-base.table.th>
                                                            <x-base.table.th class="whitespace-nowrap border-b-0">
                                                                FILE TYPE
                                                            </x-base.table.th>
                                                            <x-base.table.th class="whitespace-nowrap border-b-0">
                                                                FILE SIZE
                                                            </x-base.table.th>
                                                            <x-base.table.th class="whitespace-nowrap border-b-0">
                                                                USED
                                                            </x-base.table.th>
                                                            <x-base.table.th
                                                                class="whitespace-nowrap border-b-0 text-center">
                                                                FILE NAME
                                                            </x-base.table.th>
                                                        </x-base.table.tr>
                                                    </x-base.table.thead>
                                                    <x-base.table.tbody>
                                                        @if ($email_attachment->attachments->count())
                                                            @foreach ($email_attachment->attachments as $attach)
                                                                <x-base.table.tr class="intro-x">
                                                                    <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">
                                                                        <div class="mt-0.5 text-xs text-slate-500">
                                                                            <span
                                                                                class="bg-slate-100 px-2 py-1 rounded-full">
                                                                                {{ $attach->date_time }}
                                                                            </span>
                                                                        </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">
                                                                        {{ $attach->type }}
                                                                    </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">
                                                                        {{ $attach->size }}
                                                                    </x-base.table.td>
                                                                    <x-base.table.td
                                                                        class="box rounded-l-none rounded-r-none border-x-0 text-center 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">
                                                                        {{ storage_percentage($attach->size, auth()->user()->total_storage) }}
                                                                    </x-base.table.td>
                                                                    <x-base.table.td
                                                                        class="box rounded-l-none rounded-r-none border-x-0 text-center 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">
                                                                        {{ $attach->attachment_name }}
                                                                    </x-base.table.td>
                                                                </x-base.table.tr>
                                                            @endforeach
                                                        @endif
                                                    </x-base.table.tbody>
                                                </x-base.table>
                                            </x-base.preview>
                                        </x-base.preview-component>
                                    </x-base.tab.panel>
                                    <x-base.tab.panel class="leading-relaxed" id="recipients">
                                        <x-base.preview-component class="intro-y box mt-5">
                                            <x-base.preview>
                                                <div class="space-y-2 p-4">
                                                    <!-- To Recipients -->
                                                    <div>
                                                        <h3 class="mt-3 text-2xl font-semibold leading-none">To:</h3>
                                                        {{-- <h5 class="text-sm font-medium text-gray-600 mb-1">To:</h5> --}}
                                                        <div class="flex flex-wrap gap-1 p-3">
                                                            @if (count($recipients['to']))
                                                                @foreach ($recipients['to'] as $recipient)
                                                                    <span
                                                                        class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-blue-100 text-blue-800 p-3">
                                                                        {{ $recipient }}
                                                                    </span>
                                                                @endforeach
                                                            @else
                                                                <span
                                                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-gray-100 text-gray-800 p-3">
                                                                    None
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div>
                                                        {{-- <h5 class="text-sm font-medium text-gray-600 mb-1">CC:</h5> --}}
                                                        <h3 class="mt-3 text-2xl font-semibold leading-none">CC:</h3>
                                                        <div class="flex flex-wrap gap-1 p-3">
                                                            @if (count($recipients['cc']))
                                                                @foreach ($recipients['cc'] as $recipient)
                                                                    <span
                                                                        class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-purple-100 text-purple-800 p-3">
                                                                        {{ $recipient }}
                                                                    </span>
                                                                @endforeach
                                                            @else
                                                                <span
                                                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-gray-100 text-gray-800 p-3">
                                                                    None
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <!-- BCC Recipients -->
                                                    <div>
                                                        {{-- <h5 class="text-sm font-medium text-gray-600 mb-1">BCC:</h5> --}}
                                                        <h3 class="mt-3 text-2xl font-semibold leading-none">BCC:</h3>
                                                        <div class="flex flex-wrap gap-1 p-3">
                                                            @if (count($recipients['bcc']))
                                                                @foreach ($recipients['bcc'] as $recipient)
                                                                    <span
                                                                        class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-green-100 text-green-800 p-3">
                                                                        {{ $recipient }}
                                                                    </span>
                                                                @endforeach
                                                            @else
                                                                <span
                                                                    class="inline-flex items-center px-2 py-0.5 rounded-full text-lg font-medium bg-gray-100 text-gray-800 p-3">
                                                                    None
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </x-base.preview>
                                        </x-base.preview-component>
                                    </x-base.tab.panel>
                                </x-base.tab.panels>
                            </x-base.tab.group>
                        </x-base.highlight>
                    </x-base.source>
                </div>
            </x-base.preview-component>
            <!-- END: Boxed Tab -->
        </div>
    </div>
@endsection