@section('title', __('User Details'))
<div>

    <x-baseview title="">

        @empty($selectedModel)
            <div class="p-4 border-2 rounded-xl text-primary-500 border-primary-500 opacity-20 centered">
                {{ __('No User Found') }}
            </div>
        @else
            <div class="flex items-center">
                <div class="w-full">
                    <p class='text-2xl font-semibold'>{{ __('User Details') }}</p>

                    <div class="flex items-center space-x-2 font-medium text-gray-500">
                        <p class="text-sm">{{ $selectedModel->code }}</p>
                        <p class="text-sm">{{ $selectedModel->role_name }}</p>
                        <div class="flex space-x-1 items-center">
                            <x-heroicon-o-calendar class="w-5 h-5 rounded-full" />
                            <p>{{ __('Joined at') }} : {{ $selectedModel->created_at->format('d M Y h:i a') }}</p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    @if (!empty($prevUserId))
                        <a href="{{ route('users.details', $prevUserId) }}"
                            class="text-white bg-gray-500 rounded-full hover:text-gray-300 hover:bg-gray-700"
                            title="{{ __('Prev User') }}">
                            <x-heroicon-o-arrow-left class="w-8 h-8 p-2" />
                        </a>
                    @endif
                    @if (!empty($nextUserId))
                        <a href="{{ route('users.details', $nextUserId) }}"
                            class="text-white bg-gray-500 rounded-full hover:text-gray-300 hover:bg-gray-700"
                            title="{{ __('Next User') }}">
                            <x-heroicon-o-arrow-right class="w-8 h-8 p-2" />
                        </a>
                    @endif
                </div>
            </div>
            {{-- wallet and Loyalty points --}}
            <div class="grid gap-6 mt-8 md:grid-cols-2 lg:grid-cols-4">

                {{-- profile details --}}
                <x-dashboard-card-plain bg="bg-primary-500 text-theme border-primary-500">
                    <p class="text-2xl font-semibold">{{ $selectedModel->name }}</p>
                    @production
                        <p>{{ $selectedModel->email }} <span>|</span> {{ $selectedModel->phone }}</p>
                    @else
                        <p>{{ \Str::padLeft('', Str::of($selectedModel->email ?? '')->length(), '*') }} <span>|</span>
                            {{ \Str::padLeft('', Str::of($selectedModel->phone ?? '')->length(), '*') }}</p>
                    @endproduction
                </x-dashboard-card-plain>
                {{-- wallet balance --}}
                <x-dashboard-card bg="bg-primary-100" title="{{ __('Wallet Balance') }}"
                    value="{{ currencyformat($selectedModel->wallet->balance ?? 0.0) }}">
                    <x-lineawesome-wallet-solid class="w-16 " />
                </x-dashboard-card>

                {{-- loyalty point --}}
                @if ((bool) setting('finance.enableLoyalty', false))
                    <x-dashboard-card bg="bg-primary-100" title="{{ __('Loyalty Points') }}"
                        value="{{ $loyaltyPoints ?? 0.0 }}">
                        <x-lineawesome-gifts-solid class="w-16 " />
                    </x-dashboard-card>
                @endif

                {{-- Orders --}}
                <x-dashboard-card bg="bg-primary-500 text-theme border-primary-500" title="{{ __('Total Orders') }}"
                    value="{{ $ordersCount ?? 0 }}">
                    <x-heroicon-s-shopping-bag class="w-16 text-white" />
                </x-dashboard-card>
                {{-- most expensive order --}}
                @if (!(bool) setting('finance.enableLoyalty', false))
                    <x-dashboard-card bg="bg-primary-100" title="{{ __('Most Expensive Order') }}"
                        value="{{ currencyformat($expensiveOrders ?? 0) }}">
                        <x-lineawesome-superscript-solid class="w-16 " />
                    </x-dashboard-card>
                @endif
            </div>

            @if ($selectedModel->hasRole('driver'))
                <div class="grid gap-4 mt-6 md:grid-cols-2 lg:grid-cols-5">
                    <div class="p-4 bg-white border rounded-xl shadow-sm">
                        <p class="text-xs uppercase tracking-wide text-gray-500">{{ __('Tracked Alerts') }}</p>
                        <p class="mt-2 text-2xl font-semibold">{{ $driverNotificationStats['total'] ?? 0 }}</p>
                    </div>
                    <div class="p-4 bg-white border rounded-xl shadow-sm">
                        <p class="text-xs uppercase tracking-wide text-gray-500">{{ __('Channel Confirmed') }}</p>
                        <p class="mt-2 text-2xl font-semibold text-blue-600">{{ $driverNotificationStats['confirmed'] ?? 0 }}</p>
                    </div>
                    <div class="p-4 bg-white border rounded-xl shadow-sm">
                        <p class="text-xs uppercase tracking-wide text-gray-500">{{ __('Accepted') }}</p>
                        <p class="mt-2 text-2xl font-semibold text-green-600">{{ $driverNotificationStats['accepted'] ?? 0 }}</p>
                    </div>
                    <div class="p-4 bg-white border rounded-xl shadow-sm">
                        <p class="text-xs uppercase tracking-wide text-gray-500">{{ __('No Response') }}</p>
                        <p class="mt-2 text-2xl font-semibold text-yellow-600">{{ $driverNotificationStats['timed_out'] ?? 0 }}</p>
                    </div>
                    <div class="p-4 bg-white border rounded-xl shadow-sm">
                        <p class="text-xs uppercase tracking-wide text-gray-500">{{ __('Delivery Failures') }}</p>
                        <p class="mt-2 text-2xl font-semibold text-red-600">{{ $driverNotificationStats['failed'] ?? 0 }}</p>
                    </div>
                </div>

                <div class="p-4 mt-4 bg-white border rounded-xl shadow-sm">
                    <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                        <div>
                            <p class="text-sm font-semibold text-gray-900">{{ __('Device permissions') }}</p>
                            <p class="text-xs text-gray-500">
                                {{ __('Unknown means the current app telemetry has not reported this permission yet.') }}
                            </p>
                        </div>
                        <p class="text-xs text-gray-500">
                            {{ __('Telemetry last seen') }}:
                            {{ $driverPermissionLastSeenAt ? \Carbon\Carbon::parse($driverPermissionLastSeenAt)->format('d/m/Y H:i') : '—' }}
                        </p>
                    </div>

                    <div class="grid gap-4 mt-4 md:grid-cols-2 xl:grid-cols-4">
                        @foreach ($driverPermissionSnapshot as $permissionStatus)
                            @php($state = $permissionStatus['state'] ?? 'unknown')
                            <div class="p-4 border rounded-xl {{ $state === 'granted' ? 'border-emerald-200 bg-emerald-50' : ($state === 'denied' ? 'border-red-200 bg-red-50' : 'border-slate-200 bg-slate-50') }}">
                                <p class="text-xs font-semibold tracking-wide text-gray-600 uppercase">{{ $permissionStatus['label'] ?? '—' }}</p>
                                <p class="mt-2 text-lg font-semibold {{ $state === 'granted' ? 'text-emerald-700' : ($state === 'denied' ? 'text-red-700' : 'text-slate-700') }}">
                                    {{ $permissionStatus['value_label'] ?? '—' }}
                                </p>
                                <p class="mt-2 text-xs text-gray-500">
                                    {{ __('Source') }}: {{ $permissionStatus['source_key'] ?? __('Not reported') }}
                                </p>
                                <p class="mt-1 text-xs text-gray-500">
                                    {{ __('Event') }}: {{ $permissionStatus['event_name'] ?? __('Not reported') }}
                                </p>
                                @if (!empty($permissionStatus['screen_name']))
                                    <p class="mt-1 text-xs text-gray-500">
                                        {{ __('Screen') }}: {{ $permissionStatus['screen_name'] }}
                                    </p>
                                @endif
                                @if (!empty($permissionStatus['observed_at']))
                                    <p class="mt-1 text-xs text-gray-500">
                                        {{ __('Observed at') }}: {{ \Carbon\Carbon::parse($permissionStatus['observed_at'])->format('d/m/Y H:i') }}
                                    </p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- <div class="flex p-4 mt-10 space-x-0 bg-white rounded-md shadow md:space-x-6"> --}}

                <x-tab.tabview class="shadow pb-10 mt-2">

                    <x-slot name="header">
                        <x-tab.header tab="1" title="{{ __('Wallet Transactions') }}" />
                        <x-tab.header tab="2" title="{{ __('My Orders') }}" />
                        @if ($selectedModel->hasRole('driver'))
                            <x-tab.header tab="3" title="{{ __('Assigned Orders') }}" />
                            <x-tab.header tab="4" title="{{ __('Earning History') }}" />
                            <x-tab.header tab="5" title="{{ __('Alert History') }}" />
                        @endif
                    </x-slot>

                    <x-slot name="body">
                        <x-tab.body tab="1">
                            <livewire:tables.user-wallet-transaction-table
                                walletId="{{ $selectedModel->wallet->id ?? '' }}" />
                        </x-tab.body>
                        <x-tab.body tab="2">
                            <livewire:tables.user-order-table userId="{{ $selectedModel->id }}" />
                        </x-tab.body>
                        @if ($selectedModel->hasRole('driver'))
                            <x-tab.body tab="3">
                                <livewire:tables.driver-order-table userId="{{ $selectedModel->id }}" />
                            </x-tab.body>
                            <x-tab.body tab="4">
                                <livewire:tables.single-driver-earning-history-table userId="{{ $selectedModel->id }}" />
                            </x-tab.body>
                            <x-tab.body tab="5">
                                <livewire:tables.driver-notification-history-table userId="{{ $selectedModel->id }}" />
                            </x-tab.body>
                        @endif
                    </x-slot>

                </x-tab.tabview>

                {{--
            </div> --}}

        @endempty
    </x-baseview>

</div>