@extends('crm.layouts.app')

@section('title', 'Analytics')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('crm.dashboard') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"></path>
                            </svg>
                            Dashboard
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Analytics</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-semibold text-gray-900">Client Analytics</h1>
            <p class="mt-2 text-sm text-gray-700">Track appointments, revenue, and client insights</p>
        </div>
    </div>

    <!-- Date Filter -->
    <div class="mt-8 overflow-visible rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5" x-data="{
        startDatePicker: {
            open: false,
            selectedDate: '{{ $startDate }}',
            currentMonth: new Date('{{ $startDate }}'),
            today: new Date(),

            get formattedDate() {
                if (!this.selectedDate) return 'Select date';
                const d = new Date(this.selectedDate);
                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            },

            get monthYear() {
                return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
            },

            get daysInMonth() {
                const base = isNaN(this.currentMonth?.getTime?.()) ? new Date() : this.currentMonth;
                const year = base.getFullYear();
                const month = base.getMonth();
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                const daysInMonth = lastDay.getDate();
                const startingDayOfWeek = firstDay.getDay();
                const days = [];
                const prevMonthLastDay = new Date(year, month, 0).getDate();
                for (let i = startingDayOfWeek - 1; i >= 0; i--) {
                    days.push({ day: prevMonthLastDay - i, isCurrentMonth: false, date: new Date(year, month - 1, prevMonthLastDay - i) });
                }
                for (let i = 1; i <= daysInMonth; i++) {
                    days.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
                }
                const remainingDays = 42 - days.length;
                for (let i = 1; i <= remainingDays; i++) {
                    days.push({ day: i, isCurrentMonth: false, date: new Date(year, month + 1, i) });
                }
                return days;
            },

            isToday(date) {
                return date.toDateString() === this.today.toDateString();
            },

            isSelected(date) {
                if (!this.selectedDate) return false;
                return date.toDateString() === new Date(this.selectedDate).toDateString();
            },

            selectDate(date) {
                this.selectedDate = date.toISOString().split('T')[0];
                this.open = false;
            },

            previousMonth() {
                this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
            },

            nextMonth() {
                this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
            }
        },
        endDatePicker: {
            open: false,
            selectedDate: '{{ $endDate }}',
            currentMonth: new Date('{{ $endDate }}'),
            today: new Date(),

            get formattedDate() {
                if (!this.selectedDate) return 'Select date';
                const d = new Date(this.selectedDate);
                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            },

            get monthYear() {
                return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
            },

            get daysInMonth() {
                const base = isNaN(this.currentMonth?.getTime?.()) ? new Date() : this.currentMonth;
                const year = base.getFullYear();
                const month = base.getMonth();
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                const daysInMonth = lastDay.getDate();
                const startingDayOfWeek = firstDay.getDay();
                const days = [];
                const prevMonthLastDay = new Date(year, month, 0).getDate();
                for (let i = startingDayOfWeek - 1; i >= 0; i--) {
                    days.push({ day: prevMonthLastDay - i, isCurrentMonth: false, date: new Date(year, month - 1, prevMonthLastDay - i) });
                }
                for (let i = 1; i <= daysInMonth; i++) {
                    days.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
                }
                const remainingDays = 42 - days.length;
                for (let i = 1; i <= remainingDays; i++) {
                    days.push({ day: i, isCurrentMonth: false, date: new Date(year, month + 1, i) });
                }
                return days;
            },

            isToday(date) {
                return date.toDateString() === this.today.toDateString();
            },

            isSelected(date) {
                if (!this.selectedDate) return false;
                return date.toDateString() === new Date(this.selectedDate).toDateString();
            },

            selectDate(date) {
                this.selectedDate = date.toISOString().split('T')[0];
                this.open = false;
            },

            previousMonth() {
                this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
            },

            nextMonth() {
                this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
            }
        }
    }">
        <div class="px-6 py-5">
            <form method="GET" class="flex flex-col sm:flex-row gap-4">
                <!-- Start Date -->
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-900 mb-2">Start Date</label>
                    <div class="relative" @click.away="startDatePicker.open = false">
                        <button type="button"
                                @click="startDatePicker.open = !startDatePicker.open"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <div class="flex items-center gap-2">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                <span x-text="startDatePicker.formattedDate"></span>
                            </div>
                            <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                            </svg>
                        </button>

                        <!-- Calendar Dropdown -->
                        <div x-show="startDatePicker.open"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 z-[100] mt-2 w-80 origin-top-right rounded-lg bg-white shadow-lg outline-1 outline-black/5 p-4"
                             style="display: none;">
                            <div class="flex items-center justify-between mb-4">
                                <button type="button" @click.stop="startDatePicker.previousMonth()" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                        <path d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" />
                                    </svg>
                                </button>
                                <div class="flex-auto text-center text-sm font-semibold text-gray-900" x-text="startDatePicker.monthYear"></div>
                                <button type="button" @click.stop="startDatePicker.nextMonth()" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" />
                                    </svg>
                                </button>
                            </div>
                            <div class="grid grid-cols-7 text-center text-xs/6 text-gray-500 mb-2">
                                <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>
                            </div>
                            <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200">
                                <template x-for="(dayObj, index) in startDatePicker.daysInMonth" :key="index">
                                    <button type="button"
                                            @click="startDatePicker.selectDate(dayObj.date)"
                                            class="py-1.5 hover:bg-gray-100 focus:z-10"
                                            :class="{
                                                'bg-gray-50': !dayObj.isCurrentMonth,
                                                'bg-white': dayObj.isCurrentMonth,
                                                'text-gray-400': !dayObj.isCurrentMonth,
                                                'text-gray-900': dayObj.isCurrentMonth && !startDatePicker.isSelected(dayObj.date) && !startDatePicker.isToday(dayObj.date),
                                                'font-semibold': startDatePicker.isSelected(dayObj.date) || startDatePicker.isToday(dayObj.date)
                                            }">
                                        <time :datetime="dayObj.date.toISOString().split('T')[0]"
                                              class="mx-auto flex size-7 items-center justify-center rounded-full"
                                              :class="{
                                                  'bg-gray-900 text-white': startDatePicker.isSelected(dayObj.date) && !startDatePicker.isToday(dayObj.date),
                                                  'bg-indigo-600 text-white': startDatePicker.isSelected(dayObj.date) && startDatePicker.isToday(dayObj.date),
                                                  'text-indigo-600': startDatePicker.isToday(dayObj.date) && !startDatePicker.isSelected(dayObj.date)
                                              }"
                                              x-text="dayObj.day"></time>
                                    </button>
                                </template>
                            </div>
                        </div>

                        <input type="hidden" name="start_date" :value="startDatePicker.selectedDate">
                    </div>
                </div>

                <!-- End Date -->
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-900 mb-2">End Date</label>
                    <div class="relative" @click.away="endDatePicker.open = false">
                        <button type="button"
                                @click="endDatePicker.open = !endDatePicker.open"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <div class="flex items-center gap-2">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                <span x-text="endDatePicker.formattedDate"></span>
                            </div>
                            <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                            </svg>
                        </button>

                        <!-- Calendar Dropdown -->
                        <div x-show="endDatePicker.open"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 z-[100] mt-2 w-80 origin-top-right rounded-lg bg-white shadow-lg outline-1 outline-black/5 p-4"
                             style="display: none;">
                            <div class="flex items-center justify-between mb-4">
                                <button type="button" @click.stop="endDatePicker.previousMonth()" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                        <path d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" />
                                    </svg>
                                </button>
                                <div class="flex-auto text-center text-sm font-semibold text-gray-900" x-text="endDatePicker.monthYear"></div>
                                <button type="button" @click.stop="endDatePicker.nextMonth()" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" />
                                    </svg>
                                </button>
                            </div>
                            <div class="grid grid-cols-7 text-center text-xs/6 text-gray-500 mb-2">
                                <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>
                            </div>
                            <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200">
                                <template x-for="(dayObj, index) in endDatePicker.daysInMonth" :key="index">
                                    <button type="button"
                                            @click="endDatePicker.selectDate(dayObj.date)"
                                            class="py-1.5 hover:bg-gray-100 focus:z-10"
                                            :class="{
                                                'bg-gray-50': !dayObj.isCurrentMonth,
                                                'bg-white': dayObj.isCurrentMonth,
                                                'text-gray-400': !dayObj.isCurrentMonth,
                                                'text-gray-900': dayObj.isCurrentMonth && !endDatePicker.isSelected(dayObj.date) && !endDatePicker.isToday(dayObj.date),
                                                'font-semibold': endDatePicker.isSelected(dayObj.date) || endDatePicker.isToday(dayObj.date)
                                            }">
                                        <time :datetime="dayObj.date.toISOString().split('T')[0]"
                                              class="mx-auto flex size-7 items-center justify-center rounded-full"
                                              :class="{
                                                  'bg-gray-900 text-white': endDatePicker.isSelected(dayObj.date) && !endDatePicker.isToday(dayObj.date),
                                                  'bg-indigo-600 text-white': endDatePicker.isSelected(dayObj.date) && endDatePicker.isToday(dayObj.date),
                                                  'text-indigo-600': endDatePicker.isToday(dayObj.date) && !endDatePicker.isSelected(dayObj.date)
                                              }"
                                              x-text="dayObj.day"></time>
                                    </button>
                                </template>
                            </div>
                        </div>

                        <input type="hidden" name="end_date" :value="endDatePicker.selectedDate">
                    </div>
                </div>

                <div class="flex items-end">
                    <button type="submit" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                            <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
                        </svg>
                        Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Statistics -->
    <div class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Total Appointments</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $totalAppointments }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Revenue</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">${{ number_format($totalRevenue, 2) }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Tips</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">${{ number_format($totalTips, 2) }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">No-Shows</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $totalCancelled }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Top 5 Clients -->
    <div class="mt-8 overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
        <div class="px-6 py-5">
            <h3 class="text-base font-semibold text-gray-900 mb-6">Top 5 Clients</h3>
            @if(count($topClients) > 0)
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead>
                            <tr>
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Rank</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Client Name</th>
                                <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Visits</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @foreach ($topClients as $clientId => $count)
                                @php $index = $loop->index; @endphp
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-0">
                                        <div class="flex items-center">
                                            @if($index == 0)
                                                <svg viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-400">
                                                    <path fill-rule="evenodd" d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z" clip-rule="evenodd" />
                                                </svg>
                                            @else
                                                <span class="text-sm font-medium text-gray-700">{{ $index + 1 }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900">
                                        {{ \App\Models\Client::find($clientId)?->name ?? 'Unknown' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-center text-sm">
                                        <span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10">
                                            {{ $count }} visits
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-semibold text-gray-900">No client data</h3>
                    <p class="mt-1 text-sm text-gray-500">No appointments found for the selected period.</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Most Tattooed Body Zones -->
    <div class="mt-8 overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
        <div class="px-6 py-5">
            <h3 class="text-base font-semibold text-gray-900 mb-6">Most Tattooed Body Zones</h3>
            @if(count($bodyZoneCounts) > 0)
                <div class="space-y-3">
                    @foreach ($bodyZoneCounts as $zone => $count)
                        @php
                            $maxCount = max($bodyZoneCounts);
                            $percentage = $maxCount > 0 ? ($count / $maxCount) * 100 : 0;
                        @endphp
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-900">{{ $zone }}</span>
                                <span class="text-sm font-semibold text-gray-900">{{ $count }} times</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-indigo-600 h-2.5 rounded-full" style="width: {{ $percentage }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-semibold text-gray-900">No body zone data</h3>
                    <p class="mt-1 text-sm text-gray-500">No appointments found for the selected period.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection