@extends('layouts.backend.app')

@section('content')
    @php
        $authUser = Auth::user();
    @endphp
    <h2 class="intro-y mt-10 text-lg font-medium">Contacts</h2>
    <div class="mt-5 grid grid-cols-12 gap-6">
        <div class="intro-y col-span-12 mt-2 flex flex-wrap items-center sm:flex-nowrap">
            <x-base.button id="fetchEmails" onclick="fetchEmails({{ $authUser->platform }})" class="mr-2 shadow-md"
                variant="primary">
                <x-base.lucide class="w-4 h-4 mr-2" icon="RefreshCw" />
                Fetch Emails
            </x-base.button>
            <x-base.button id="submitButton" onclick="processSelectedEmails()" type="button" class="hidden"
                variant="primary">
                <x-base.lucide class="w-4 h-4 mr-2" icon="Send" />
                Process Selected Emails
            </x-base.button>
            <div class="ml-auto flex">
                <x-base.button id="showTableBtn" class="mr-2" variant="outline-secondary">
                    <x-base.lucide class="w-4 h-4 mr-2" icon="Table" />
                    Table View
                </x-base.button>
                <x-base.button id="showChartBtn" variant="outline-secondary">
                    <x-base.lucide class="w-4 h-4 mr-2" icon="PieChart" />
                    Chart View
                </x-base.button>
            </div>
            <div class="mt-3 w-full sm:ml-auto sm:mt-0 sm:w-auto md:ml-0">
                <div class="relative w-56 text-slate-500">
                    <x-base.form-input class="!box w-56 pr-10" type="text" placeholder="Search emails..." />
                    <x-base.lucide class="absolute inset-y-0 right-0 my-auto mr-3 h-4 w-4" icon="Search" />
                </div>
            </div>
        </div>
        <form id="emailForm" action="{{ route('admin.emails.queue') }}"
            class="intro-y col-span-12 overflow-auto 2xl:overflow-visible" method="POST">
            @csrf
            <input type="hidden" id="currentJobId" value="{{ $jobId }}">
            <input type="hidden" id="allEmails" value="{{ json_encode($allEmails) }}">
            <input class="form-check-input" type="hidden" name="recipients_data" value="0" id="recipients_data"
                disabled>
            <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">
                            <x-base.form-check.input type="checkbox" id="selectAll" />
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0">
                            CONTACT
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0">
                            LABEL
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0">
                            NAME
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0">
                            EMAIL
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                            LAST UPDATE
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                            MESSAGES
                        </x-base.table.th>
                        <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                            ATTACHMENTS
                        </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 ($correspondences as $index => $correspondence)
                        @php
                            $attachmentSize = '';
                            if ($correspondence->attachments()->exists()) {
                                $allSize = $correspondence->attachments()->pluck('size')->toArray();
                                $attachmentSize = formatSize(array_sum(array_map('convertToBytes', $allSize)));
                            }
                        @endphp
                        <x-base.table.tr class="intro-x">
                            <x-base.table.td
                                class="box w-10 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">
                                <x-base.form-check.input type="checkbox" name="selected_emails[]"
                                    value="{{ $correspondence->email_address }}" class="emailCheckbox" />
                            </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">
                                <div class="flex items-center">
                                    <div class="image-fit h-10 w-10">
                                        <img src="{{ $correspondence->avatar }}" class="rounded-full">
                                    </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">
                                <div class="mt-0.5 text-xs text-slate-500">
                                    <span class="bg-slate-100 px-2 py-1 rounded-full">
                                        {{ ucwords(strtolower(str_replace('_', ' ', $correspondence->label))) }}
                                    </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">
                                {{ $correspondence->name }}
                            </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">
                                {{ $correspondence->email_address }}
                            </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">
                                {{ $correspondence->last_updated_at }}
                            </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">
                                {{ $correspondence->totalmessage }}
                            </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">
                                {{ $attachmentSize }}
                            </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">
                                    @if ($correspondence->file_reference)
                                        <a href="{{ route('contact.detail', ['id' => $correspondence->id]) }}"
                                            class="flex items-center text-primary mr-3">
                                            <x-base.lucide class="w-4 h-4 mr-1" icon="Eye" /> Details
                                        </a>
                                    @else
                                        <span class="text-slate-500">No Data</span>
                                    @endif
                                </div>
                            </x-base.table.td>
                        </x-base.table.tr>
                    @endforeach
                </x-base.table.tbody>
            </x-base.table>
            {{-- @if (count($correspondences) > 0)
                {{ $correspondences->links('vendors.pagination.pagination') }}
            @endif --}}
        </form>



        <!-- BEGIN: Chart View -->
        <div id="chartView" class="intro-y col-span-12" style="display: none;">
            <div class="grid grid-cols-12 gap-6">
                <div class="col-span-12 md:col-span-6">
                    <div class="box p-5">
                        <div class="flex items-center border-b border-slate-200/60 pb-5">
                            <h2 class="text-lg font-medium">Storage Distribution</h2>
                        </div>
                        <div class="mt-5">
                            <canvas id="storagePieChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6">
                    <div class="box p-5">
                        <div class="flex items-center border-b border-slate-200/60 pb-5">
                            <h2 class="text-lg font-medium">Message Activity</h2>
                        </div>
                        <div class="mt-5">
                            <canvas id="storagebarChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Chart View -->
    </div>

    <!-- Progress Notification Modal -->
    <div id="floating-progress"
        class="fixed top-4 right-4 z-50 w-80 rounded-lg bg-white p-4 shadow-lg border border-slate-200 dark:bg-darkmode-600 hidden">
        <div class="flex items-center space-x-3">
            <svg class="animate-spin h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 4v1m0 14v1m8-8h1M4 12H3m15.364-6.364l.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707" />
            </svg>
            <div>
                <div id="floating-progress-text" class="text-sm font-medium text-slate-700 dark:text-slate-200">
                    Initializing...</div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-200 dark:bg-slate-700">
                    <div id="floating-progress-bar" class="h-2 rounded-full bg-primary transition-all duration-300"
                        style="width: 0%"></div>
                </div>
                <div class="mt-1 text-xs text-right text-slate-500" id="floating-progress-percent">0%</div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
@endsection