@extends('back.layout.app')
@section('title', __('profil.menu.overview'))

@php
    $breadcrumb = 'profil.overview';
    // $breadcrumbParams = [$user];
@endphp


@section('content')
@include('back.profil.partials.menu')

<div class="kt-container-fixed">
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 lg:gap-7.5">

        <div class="col-span-1">
            <div class="flex flex-col gap-5 lg:gap-7.5">

                {{-- Profile Card --}}
                <div class="kt-card">
                    <div class="kt-card-content pt-5 pb-7.5">
                        <div class="flex items-center flex-wrap justify-center gap-3.5 pb-10">
                            <div class="grid place-items-center gap-4">
                                <div
                                    class="flex items-center justify-center rounded-full size-20 border-2 border-green-500 overflow-hidden">
                                    @if(auth()->user()->getAvatarUrl())
                                    <img src="{{ auth()->user()->getAvatarUrl() }}" alt="{{ auth()->user()->fullName }}"
                                        class="w-full h-full object-cover">
                                    @else
                                    {{ auth()->user()->initials() }}
                                    @endif
                                </div>
                                <div class="grid place-items-center">
                                    <a class="text-lg font-medium text-mono hover:text-primary"
                                        href="{{ route('admin.profile.settings') }}">
                                        {{ auth()->user()->fullName }}
                                    </a>
                                    @if(auth()->user()->name)
                                    <span class="text-sm text-secondary-foreground">
                                        {{ '@' . auth()->user()->name }}
                                    </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="grid">
                            <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                                <span class="text-xs text-secondary-foreground uppercase">
                                    Email
                                </span>
                                <div class="flex flex-wrap gap-1.5">
                                   <span class="text-sm text-mono">
                                        <a class="text-foreground hover:text-primary"
                                            href="mailto:{{ auth()->user()->email }}">
                                            {{ auth()->user()->email }}
                                        </a>
                                    </span>
                                </div>
                            </div>

                            @if(auth()->user()->infos?->phone)
                             <div class="border-t border-input border-dashed"></div>
                                <div class="flex items-center justify-between flex-wrap my-2.5 gap-2">
                                    <span class="text-xs text-secondary-foreground uppercase">
                                        {{ __('profil.personal_info.phone') }}
                                    </span>
                                    <div class="flex flex-wrap gap-1.5">
                                    <span class="text-sm text-mono">{{auth()->user()->infos?->phone}}</span>
                                    </div>
                                </div>
                            @endif
                            <div class="border-t border-input border-dashed mb-3"></div>
                            <div class="flex items-center justify-between flex-wrap gap-2">
                                <span class="text-xs text-secondary-foreground uppercase">
                                    {{ __('profil.overview.role') }}
                                </span>
                                <div class="flex flex-wrap gap-1.5">
                                    <span class="kt-badge kt-badge-outline kt-badge-primary">
                                       {{ __('profil.overview.administrator') }} TO DO
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Security Status Card --}}
                <div class="kt-card">
                    <div class="kt-card-header">
                        <h3 class="kt-card-title">
                            {{ __('profil.overview.security_apps') }}
                        </h3>
                    </div>
                    <div class="kt-card-content pt-4 pb-5">

                        <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                               {{ __('profil.overview.password_changed') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                @if(auth()->user()->password_changed_at)
                                <span class="kt-badge kt-badge-sm kt-badge-secondary kt-badge-outline">
                                    {{ auth()->user()->password_changed_at->diffForHumans() }}
                                </span>
                                @else
                                <span class="kt-badge kt-badge-sm kt-badge-warning kt-badge-outline">
                                    {{ __('profil.password_never_changed') }}
                                </span>
                                @endif
                            </div>
                        </div>
                        <div class="border-t border-input border-dashed mb-3"></div>
                        <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.overview.two_factor_auth') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                @if(auth()->user()->two_factor_secret)
                                <span class="kt-badge kt-badge-sm kt-badge-success kt-badge-outline">
                                    <i class="ki-filled ki-check text-xs"></i>
                                    {{ __('security.two_factor.enabled') }}
                                </span>
                                @else
                                <span class="kt-badge kt-badge-sm kt-badge-destructive kt-badge-outline">
                                    {{ __('security.two_factor.disabled') }}
                                </span>
                                @endif
                            </div>
                        </div>
                        {{-- <div class="border-t border-input border-dashed mb-3"></div>
                        <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.overview.social_login') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                <div class="flex items-center gap-2.5">
                                    <a class="flex items-center justify-center size-7 bg-background rounded-full border border-input" href="#">
                                        <img alt="" class="size-4" src="{{asset('assets/media/brand-logos/google.svg')}}">
                                    </a>
                                    <a class="flex items-center justify-center size-7 bg-background rounded-full border border-input" href="#">
                                        <img alt="" class="size-4" src="{{asset('assets/media/brand-logos/facebook.svg')}}">
                                    </a>
                                    <a class="flex items-center justify-center size-7 bg-background rounded-full border border-input" href="#">
                                        <img alt="Apple" class="hidden dark:block h-4" src="{{asset('assets/media/brand-logos/apple-white.svg')}}">
                                        <img alt="Apple" class="block dark:hidden h-4" src="{{asset('assets/media/brand-logos/apple-black.svg')}}">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="border-t border-input border-dashed"></div>
                        <div class="flex items-center justify-between flex-wrap my-3 mb-0 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.overview.api_token') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                               @if(auth()->user()->tokens()->exists())
                                <span class="kt-badge  kt-badge-sm kt-badge-outline kt-badge-success">
                                    {{ __('profil.overview.active') }}
                                </span>
                                @else
                                <span class="kt-badge kt-badge-sm kt-badge-destructive kt-badge-outline">
                                    {{ __('profil.overview.inactive') }}
                                </span>
                                @endif
                            </div>
                        </div> --}}

                    </div>
                </div>




                {{-- Address Card --}}
                @if(auth()->user()->infos && (auth()->user()->infos->city || auth()->user()->infos->adress_1))
                <div class="kt-card mb-20">
                    <div class="kt-card-header">
                        <h3 class="kt-card-title">
                            {{ __('profil.address.title') }}
                        </h3>
                    </div>
                    <div class="kt-card-content pt-4 pb-5">
                        @if(auth()->user()->infos->adress_1)
                        <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.address.street') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                <span class="text-sm text-mono text-right">
                                    {{ auth()->user()->infos->adress_1 }}
                                    @if(auth()->user()->infos->adress_2)
                                    <br>{{ auth()->user()->infos->adress_2 }}
                                    @endif
                                </span>
                            </div>
                        </div>
                        <div class="border-t border-input border-dashed mb-3"></div>
                        @endif
                        @if(auth()->user()->infos->city)
                        <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.address.city') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                <span class="text-sm text-mono">
                                    {{ auth()->user()->infos->city }}
                                </span>
                            </div>
                        </div>
                        <div class="border-t border-input border-dashed mb-3"></div>
                        @endif
                        @if(auth()->user()->infos->zipcode)
                        <div class="flex items-center justify-between flex-wrap mb-3 gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.address.zipcode') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                <span class="text-sm text-mono">
                                    {{ auth()->user()->infos->zipcode }}
                                </span>
                            </div>
                        </div>
                        <div class="border-t border-input border-dashed mb-3"></div>
                        @endif
                        @if(auth()->user()->infos->country)
                        <div class="flex items-center justify-between flex-wrap gap-2">
                            <span class="text-xs text-secondary-foreground uppercase">
                                {{ __('profil.address.country') }}
                            </span>
                            <div class="flex flex-wrap gap-1.5">
                                <span class="text-sm text-mono">
                                    {{ auth()->user()->infos->country->label() }}
                                </span>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                @endif


            </div>
        </div>

        {{-- Right Column - Activity (placeholder for future) --}}

        <livewire:back.profil.activity />

    </div>
</div>
@endsection