@extends('clients.layouts.app')

@section('title', 'Email History')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-bold text-[#1a233a] dark:text-white tracking-tight">Email History</h1>
                <p class="text-[10px] font-bold text-slate-400 mt-1.5 uppercase tracking-[0.1em]">Review all official
                    communications</p>
            </div>
        </div>

        <div
            class="bg-white dark:bg-[#1e293b] rounded-[32px] border border-slate-100 dark:border-white/5 overflow-hidden shadow-sm">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-white/5">
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Date Sent
                            </th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Message
                                Subject</th>
                            <th
                                class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em] text-center">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                        @php
                            $emails = [
                                ['date' => '2024-01-25 10:30', 'subject' => 'Welcome to OneHost BD!'],
                                ['date' => '2024-01-26 14:15', 'subject' => 'Invoice #101 Payment Reminder'],
                                ['date' => '2024-01-27 09:00', 'subject' => 'Service Upgraded Successfully'],
                            ];
                        @endphp
                        @foreach($emails as $email)
                            <tr class="group hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                <td class="px-8 py-6 text-sm font-semibold text-slate-500">{{ $email['date'] }}</td>
                                <td class="px-8 py-6 text-sm font-bold text-[#1a233a] dark:text-white">{{ $email['subject'] }}
                                </td>
                                <td class="px-8 py-6">
                                    <div class="flex justify-center">
                                        <button
                                            class="w-10 h-10 bg-slate-50 dark:bg-white/5 rounded-lg flex items-center justify-center text-slate-400 hover:text-primary transition-colors">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection