<div>

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.customer') }}" wire:navigate
            class="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
        </a>
        <div class="flex items-center gap-3 flex-1">
            <div class="w-11 h-11 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                <span class="text-orange-700 font-bold text-base">
                    {{ strtoupper(substr($name, 0, 1)) }}
                </span>
            </div>
            <div>
                <h1 class="text-xl font-bold text-slate-800">{{ $name }}</h1>
                <p class="text-sm text-slate-500">
                    {{ $type === 'user' ? 'Member' : 'Guest' }}
                </p>
            </div>
        </div>

        @if ($type === 'user')
            <span class="inline-flex px-3 py-1.5 rounded-full text-sm font-semibold
                {{ $isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                {{ $isActive ? 'Aktif' : 'Tidak Aktif' }}
            </span>
        @endif
    </div>

    {{-- Aksi --}}
    @if ($type === 'user')
        @can('customer.deactivate')
            <div class="flex flex-wrap gap-2 mb-6">
                <button type="button" wire:click="toggleActive"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors
                        {{ $isActive ? 'text-red-600 bg-white border border-red-200 hover:bg-red-50' : 'text-white bg-green-600 hover:bg-green-700' }}"
                    wire:loading.attr="disabled" wire:target="toggleActive">
                    @if ($isActive)
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                        </svg>
                        Nonaktifkan Akun
                    @else
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75l6 6 9-13.5"/>
                        </svg>
                        Aktifkan Akun
                    @endif
                </button>
            </div>
        @endcan
    @endif

    <div class="grid lg:grid-cols-3 gap-6">

        {{-- Kolom kiri (2/3) --}}
        <div class="lg:col-span-2 space-y-5">

            {{-- Statistik --}}
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div class="bg-white rounded-xl border border-slate-200 p-4">
                    <p class="text-xs text-slate-400 mb-1">Total Pesanan</p>
                    <p class="text-xl font-bold text-slate-800">{{ $stats['total_orders'] }}</p>
                </div>
                <div class="bg-white rounded-xl border border-slate-200 p-4">
                    <p class="text-xs text-slate-400 mb-1">Total Transaksi</p>
                    <p class="text-xl font-bold text-slate-800">{{ $stats['total_orders'] }}</p>
                    <p class="text-[10px] text-slate-400 mt-0.5">Seluruh status pesanan</p>
                </div>
                <div class="bg-white rounded-xl border border-slate-200 p-4 col-span-2 sm:col-span-1">
                    <p class="text-xs text-slate-400 mb-1">Total Belanja</p>
                    <p class="text-lg font-bold text-slate-800">Rp {{ number_format($stats['total_spent'], 0, ',', '.') }}</p>
                </div>
                <div class="bg-white rounded-xl border border-slate-200 p-4 col-span-2 sm:col-span-1">
                    <p class="text-xs text-slate-400 mb-1">Rata-rata Order</p>
                    <p class="text-lg font-bold text-slate-800">Rp {{ number_format($stats['average_order'], 0, ',', '.') }}</p>
                </div>
            </div>

            {{-- Riwayat Pesanan --}}
            <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-slate-100">
                    <h2 class="font-semibold text-slate-800">Riwayat Pesanan</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-slate-50 border-b border-slate-200">
                            <tr>
                                <th class="text-left px-4 py-3 font-semibold text-slate-600">No. Order</th>
                                <th class="text-left px-4 py-3 font-semibold text-slate-600">Tanggal</th>
                                <th class="text-right px-4 py-3 font-semibold text-slate-600">Total</th>
                                <th class="text-center px-4 py-3 font-semibold text-slate-600">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($orders as $order)
                                <tr class="hover:bg-slate-50 transition-colors" wire:key="order-{{ $order->id }}">
                                    <td class="px-4 py-3">
                                        <a href="{{ route('admin.pesanan.show', $order->id) }}" wire:navigate
                                            class="font-mono text-xs font-semibold text-orange-600 hover:text-orange-700">
                                            {{ $order->order_number }}
                                        </a>
                                    </td>
                                    <td class="px-4 py-3 text-slate-600 whitespace-nowrap">
                                        {{ $order->created_at->format('d M Y, H:i') }}
                                    </td>
                                    <td class="px-4 py-3 text-right font-semibold text-slate-800 whitespace-nowrap">
                                        Rp {{ number_format($order->grand_total, 0, ',', '.') }}
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        @php
                                            $color = match($order->status->value) {
                                                'pending'    => 'bg-slate-100 text-slate-600',
                                                'paid'       => 'bg-blue-100 text-blue-700',
                                                'processing' => 'bg-blue-100 text-blue-700',
                                                'delivering' => 'bg-orange-100 text-orange-700',
                                                'completed'  => 'bg-green-100 text-green-700',
                                                'cancelled'  => 'bg-red-100 text-red-700',
                                                default      => 'bg-slate-100 text-slate-600',
                                            };
                                        @endphp
                                        <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold {{ $color }}">
                                            {{ $order->status->label() }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-4 py-10 text-center text-slate-400">
                                        Belum ada riwayat pesanan.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3 border-t border-slate-100">{{ $orders->links() }}</div>
            </div>

        </div>

        {{-- Kolom kanan (1/3) --}}
        <div class="space-y-5">

            {{-- Informasi --}}
            <div class="bg-white rounded-xl border border-slate-200 p-5">
                <h2 class="font-semibold text-slate-800 mb-4">Informasi</h2>
                <div class="space-y-3 text-sm">
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Nama</p>
                        <p class="font-medium text-slate-800">{{ $name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Email</p>
                        <p class="font-medium text-slate-800">{{ $email ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Nomor HP</p>
                        @if ($phone)
                            <a href="https://wa.me/{{ preg_replace('/^0/', '62', $phone) }}" target="_blank"
                                class="font-medium text-green-600 hover:text-green-700">
                                {{ $phone }}
                            </a>
                        @else
                            <p class="font-medium text-slate-800">—</p>
                        @endif
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Status</p>
                        @if ($type === 'user')
                            <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold
                                {{ $isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $isActive ? 'Aktif' : 'Tidak Aktif' }}
                            </span>
                        @else
                            <p class="text-slate-400 text-sm">Guest (tanpa akun)</p>
                        @endif
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Tanggal Registrasi</p>
                        <p class="font-medium text-slate-800">
                            {{ $joinedAt?->translatedFormat('d F Y, H:i') ?? '—' }} WIB
                        </p>
                    </div>
                </div>
            </div>

            {{-- Pesanan Terakhir --}}
            <div class="bg-white rounded-xl border border-slate-200 p-5">
                <h2 class="font-semibold text-slate-800 mb-3">Pesanan Terakhir</h2>
                @if ($stats['last_order_at'])
                    <p class="text-sm text-slate-700">
                        {{ \Illuminate\Support\Carbon::parse($stats['last_order_at'])->translatedFormat('d F Y, H:i') }} WIB
                    </p>
                @else
                    <p class="text-sm text-slate-400">Belum pernah order.</p>
                @endif
            </div>

        </div>
    </div>

</div>
