@extends('clients.layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="space-y-12 animate-in fade-in slide-in-from-bottom-8 duration-1000">

        <!-- Reference Style Stat Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @php
                $stats = [
                    ['label' => 'Active Services', 'value' => $details['stats']['productsnumactive'] ?? 0, 'icon' => 'fa-server', 'trend' => '40.35%', 'up' => true],
                    ['label' => 'Total Domains', 'value' => $details['stats']['numactivedomains'] ?? 0, 'icon' => 'fa-globe', 'trend' => '12.4%', 'up' => true],
                    ['label' => 'Pending Invoices', 'value' => $details['stats']['numunpaidinvoices'] ?? 0, 'icon' => 'fa-file-invoice-dollar', 'trend' => '5.2%', 'up' => false],
                    ['label' => 'Support Tickets', 'value' => $details['stats']['numactivetickets'] ?? 0, 'icon' => 'fa-life-ring', 'trend' => '0.00%', 'up' => true],
                ];
            @endphp

            @foreach($stats as $stat)
                <div
                    class="bg-white dark:bg-[#1e293b] p-8 rounded-[24px] border border-slate-100 dark:border-white/5 shadow-sm group transition-all duration-500">
                    <div class="flex items-center justify-between mb-6">
                        <div
                            class="w-12 h-12 rounded-2xl bg-slate-50 dark:bg-white/5 flex items-center justify-center text-gray-400 group-hover:bg-primary group-hover:text-white transition-all duration-500">
                            <i class="fas {{ $stat['icon'] }} text-lg"></i>
                        </div>
                    </div>
                    <div class="space-y-1">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">{{ $stat['label'] }}</p>
                        <h2 class="text-4xl font-bold text-[#1a233a] dark:text-white tracking-tight">{{ $stat['value'] }}</h2>
                    </div>
                    <div class="mt-8 flex items-center justify-between border-t border-slate-50 dark:border-white/5 pt-5">
                        <span class="text-[10px] font-semibold text-slate-400 uppercase tracking-widest">Growth rate</span>
                        <div
                            class="flex items-center space-x-1 {{ $stat['up'] ? 'text-emerald-500' : 'text-rose-500' }} text-[11px] font-bold">
                            <i class="fas fa-arrow-{{ $stat['up'] ? 'up' : 'down' }} text-[9px]"></i>
                            <span>{{ $stat['trend'] }}</span>
                        </div>
                    </div>
                </div>
        @endforeach
    </div>

    <!-- Domain Search Module -->
    <div class="mb-12">
        @include('partials.modules.domain_search', [
            'content' => [
                'title' => 'Find Your Perfect Domain Name',
                'subtitle' => 'Search for available domains and register them instantly'
            ],
            'popularTlds' => \App\Models\DomainPrice::orderBy('price', 'asc')->take(7)->get()
        ])
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-16">
            <!-- Left: Latest Services -->
            <div class="space-y-6">
                <div class="flex items-center justify-between px-2">
                    <h4 class="text-base font-bold text-[#1a233a] dark:text-white tracking-tight">Active Services</h4>
                    <a href="{{ route('client.services') }}"
                        class="text-[10px] font-bold text-primary uppercase tracking-[0.1em] hover:underline">View All</a>
                </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-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Service</th>
                                    <th class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Status</th>
                                    <th class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Date</th>
                                    <th
                                        class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em] text-right">
                                        Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($services['products']['product'] ?? [] as $service)
                                    <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 text-ellipsis">
                                        <td class="px-8 py-6">
                                            <p
                                                class="text-sm font-bold text-[#1a233a] dark:text-white leading-tight tracking-tight">
                                                {{ $service['name'] }}</p>
                                            <p class="text-[11px] font-semibold text-slate-400 mt-1.5">
                                                {{ $service['domain'] ?: 'N/A' }}</p>
                                        </td>
                                        <td class="px-8 py-6">
                                            <span
                                                class="px-3 py-1 bg-emerald-50 dark:bg-emerald-500/10 text-emerald-500 rounded-full text-[9px] font-bold uppercase tracking-widest border border-emerald-100 dark:border-emerald-500/20">{{ $service['status'] }}</span>
                                        </td>
                                        <td class="px-8 py-6 text-xs font-semibold text-slate-500 dark:text-slate-400">
                                            {{ \Carbon\Carbon::parse($service['regdate'])->format('d M, Y') }}
                                        </td>
                                        <td class="px-8 py-6 text-right">
                                            <button
                                                class="w-8 h-8 rounded-lg flex items-center justify-center text-slate-300 hover:text-primary hover:bg-slate-50 dark:hover:bg-white/5 transition-all">
                                                <i class="fas fa-ellipsis-v text-xs"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4"
                                            class="p-16 text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest italic font-medium">
                                            No active services to show</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Right: Recent Support Tickets -->
            <div class="space-y-6">
                <div class="flex items-center justify-between px-2">
                    <h4 class="text-base font-bold text-[#1a233a] dark:text-white tracking-tight">Support Tickets</h4>
                    <a href="{{ route('client.tickets') }}"
                        class="text-[10px] font-bold text-primary uppercase tracking-[0.1em] hover:underline">View All</a>
                </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-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Subject</th>
                                    <th class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Status</th>
                                    <th class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Last Reply</th>
                                    <th
                                        class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em] text-right">
                                        Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse(collect($tickets['tickets']['ticket'] ?? [])->take(5) as $ticket)
                                    <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">
                                            <p
                                                class="text-sm font-bold text-[#1a233a] dark:text-white leading-tight tracking-tight">
                                                {{ Str::limit($ticket['subject'], 30) }}</p>
                                            <p class="text-[11px] font-semibold text-slate-400 mt-1.5">#{{ $ticket['tid'] }}</p>
                                        </td>
                                        <td class="px-8 py-6">
                                            <span class="px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-widest 
                                                        @if(strtolower($ticket['status']) === 'open') bg-emerald-50 text-emerald-500 dark:bg-emerald-500/10 
                                                        @elseif(strtolower($ticket['status']) === 'answered') bg-blue-50 text-primary dark:bg-blue-500/10
                                                        @else bg-slate-100 text-slate-500 @endif border border-transparent">
                                                {{ $ticket['status'] }}
                                            </span>
                                        </td>
                                        <td class="px-8 py-6 text-xs font-semibold text-slate-500 dark:text-slate-400">
                                            {{ \Carbon\Carbon::parse($ticket['lastreply'])->diffForHumans() }}
                                        </td>
                                        <td class="px-8 py-6 text-right">
                                            <a href="#"
                                                class="inline-flex px-4 py-1.5 bg-primary/5 dark:bg-white/5 text-primary rounded-full text-[10px] font-bold uppercase tracking-[0.1em] hover:bg-primary hover:text-white transition-all">Open</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4"
                                            class="p-16 text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest italic font-medium">
                                            No recent tickets</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Full Width Row: Recent Invoices -->
            <div class="lg:col-span-2 space-y-6 pt-12 border-t border-slate-50 dark:border-white/5">
                <div class="flex items-center justify-between px-2">
                    <h4 class="text-base font-bold text-[#1a233a] dark:text-white tracking-tight">Recent Invoices</h4>
                    <a href="{{ route('client.invoices') }}"
                        class="text-[10px] font-bold text-primary uppercase tracking-[0.1em] hover:underline">View All</a>
                </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-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">ID
                                    </th>
                                    <th class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Amount</th>
                                    <th class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                        Date</th>
                                    <th
                                        class="px-8 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em] text-right">
                                        Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse(collect($invoices['invoices']['invoice'] ?? [])->take(5) as $invoice)
                                    <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-3">
                                                <div
                                                    class="w-2 h-2 rounded-full {{ $invoice['status'] == 'Unpaid' ? 'bg-rose-500 shadow-lg shadow-rose-500/20' : 'bg-emerald-500 shadow-lg shadow-emerald-500/20' }}">
                                                </div>
                                                <p class="text-sm font-bold text-[#1a233a] dark:text-white tracking-tight">
                                                    INV-{{ $invoice['id'] }}</p>
                                            </div>
                                        </td>
                                        <td class="px-8 py-6">
                                            <p class="text-sm font-bold text-[#1a233a] dark:text-white tracking-tight">
                                                {{ $invoice['total'] }}</p>
                                        </td>
                                        <td class="px-8 py-6 text-xs font-semibold text-slate-500 dark:text-slate-400">
                                            {{ \Carbon\Carbon::parse($invoice['date'])->format('d M, Y') }}
                                        </td>
                                        <td class="px-8 py-6 text-right">
                                            <a href="#"
                                                class="inline-flex px-4 py-1.5 bg-primary/5 dark:bg-white/5 text-primary rounded-full text-[10px] font-bold uppercase tracking-[0.1em] hover:bg-primary hover:text-white transition-all">View</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4"
                                            class="p-16 text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest italic font-medium">
                                            No recent invoices</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function domainSearch() {
            return {
                query: '',
                loading: false,
                result: null,

                async checkDomain() {
                    if (!this.query || this.query.length < 3) return;

                    this.loading = true;
                    this.result = null;

                    try {
                        const response = await fetch(`/domains/check?domain=${encodeURIComponent(this.query)}`);
                        const data = await response.json();

                        if (data.success) {
                            this.result = data;
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    } finally {
                        this.loading = false;
                    }
                }
            }
        }
    </script>
@endpush