@extends('clients.layouts.app')

@section('title', 'My Domains')

@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">My Domains</h1>
                <p class="text-[10px] font-bold text-slate-400 mt-1.5 uppercase tracking-[0.1em]">Manage your web identities
                    and renewals</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="#"
                    class="bg-white dark:bg-white/5 text-slate-600 dark:text-slate-300 px-6 py-3.5 rounded-2xl font-bold text-xs uppercase tracking-widest border border-slate-100 dark:border-white/5 shadow-sm hover:bg-slate-50 transition-all">Transfer
                    Domain</a>
                <a href="#"
                    class="bg-[#1a233a] dark:bg-primary text-white px-8 py-3.5 rounded-2xl font-bold text-xs uppercase tracking-widest shadow-xl shadow-slate-900/10 hover:opacity-90 transition-all transform hover:-translate-y-1 block text-center">Register
                    New</a>
            </div>
        </div>

        <div
            class="bg-white dark:bg-[#1e293b] rounded-[24px] border border-slate-100 dark:border-white/5 shadow-sm overflow-hidden">
            <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]">Domain
                                Name</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Renewal
                                Amount</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Expiry
                                Date</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Status
                            </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>
                        @forelse($domains['domains']['domain'] ?? [] as $domain)
                            <tr
                                class="group odd:bg-white even:bg-blue-50/20 dark:odd:bg-transparent dark:even:bg-white/5 hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                <td class="px-8 py-6">
                                    <div class="flex items-center space-x-4">
                                        <div
                                            class="w-10 h-10 bg-slate-50 dark:bg-white/5 rounded-xl flex items-center justify-center text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white transition-all">
                                            <i class="fas fa-globe text-sm"></i>
                                        </div>
                                        <div>
                                            <p
                                                class="text-sm font-bold text-[#1a233a] dark:text-white leading-tight tracking-tight uppercase">
                                                {{ $domain['domainname'] }}
                                            </p>
                                            <p class="text-[11px] font-semibold text-slate-400 mt-1">Registration:
                                                {{ $domain['registrationperiod'] }}Y
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-6">
                                    <p class="text-sm font-bold text-[#1a233a] dark:text-white tracking-tight">
                                        {{ $domain['recurringamount'] }}
                                    </p>
                                    <p class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Recurring
                                    </p>
                                </td>
                                <td
                                    class="px-8 py-6 text-sm font-semibold text-slate-600 dark:text-slate-300 tracking-tight lowercase">
                                    {{ $domain['expirydate'] }}
                                </td>
                                <td class="px-8 py-6">
                                    <span
                                        class="px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-widest {{ strtolower($domain['status']) === 'active' ? 'bg-emerald-50 text-emerald-500 dark:bg-emerald-500/10' : 'bg-rose-50 text-rose-500 dark:bg-rose-500/10' }} border border-transparent">
                                        {{ $domain['status'] }}
                                    </span>
                                </td>
                                <td class="px-8 py-6">
                                    <div class="flex items-center justify-center space-x-2">
                                        <a href="#"
                                            class="w-10 h-10 bg-slate-50 dark:bg-white/5 rounded-xl flex items-center justify-center text-slate-300 hover:text-primary hover:bg-white transition-all shadow-sm"
                                            title="Manage Domain">
                                            <i class="fas fa-cog text-sm"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-24 text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-globe text-5xl text-slate-100 dark:text-white/5 mb-4"></i>
                                        <h3 class="text-base font-bold text-slate-400 uppercase tracking-[0.1em]">No domains
                                            found</h3>
                                        <p class="text-slate-300 mt-1 font-bold text-xs">You haven't registered any domains with
                                            us yet.</p>
                                        <a href="#"
                                            class="mt-8 bg-primary text-white px-8 py-3 rounded-full font-bold text-[10px] uppercase tracking-widest shadow-xl shadow-blue-500/20">Register
                                            New</a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection