<x-filament-panels::page>
    {{-- Profile Header Card --}}
    <x-filament::section>
        <x-slot name="heading">
            <div class="flex items-center gap-4">
                @if($user->avatar)
                    <img src="{{ asset($user->avatar) }}" alt="{{ $user->name }}"
                        class="w-16 h-16 rounded-full object-cover ring-4 ring-primary-500/20">
                @else
                    <div class="w-16 h-16 rounded-full bg-primary-500 flex items-center justify-center text-white text-xl font-bold ring-4 ring-primary-500/20">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                @endif
                <div>
                    <h2 class="text-xl font-bold">{{ $user->name }}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ $user->email }}</p>
                </div>
            </div>
        </x-slot>

        <x-slot name="description">
            <div class="flex flex-wrap gap-2 mt-2">
                <x-filament::badge color="primary">
                    {{ ucfirst($user->role) }}
                </x-filament::badge>
                @if($user->department)
                    <x-filament::badge color="gray">
                        {{ $user->department }}
                    </x-filament::badge>
                @endif
                @if($user->position)
                    <x-filament::badge color="gray">
                        {{ $user->position }}
                    </x-filament::badge>
                @endif
            </div>
        </x-slot>

        <x-filament::grid default="1" sm="2" lg="4" class="gap-4">
            <x-filament::grid.column>
                <div class="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-white/5">
                    <x-filament::icon
                        icon="heroicon-o-building-office"
                        class="w-8 h-8 text-primary-500"
                    />
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Perusahaan</p>
                        <p class="font-medium">{{ $user->company->name ?? '-' }}</p>
                    </div>
                </div>
            </x-filament::grid.column>

            <x-filament::grid.column>
                <div class="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-white/5">
                    <x-filament::icon
                        icon="heroicon-o-phone"
                        class="w-8 h-8 text-info-500"
                    />
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Telepon</p>
                        <p class="font-medium">{{ $user->phone ?? '-' }}</p>
                    </div>
                </div>
            </x-filament::grid.column>

            <x-filament::grid.column>
                <div class="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-white/5">
                    <x-filament::icon
                        icon="heroicon-o-identification"
                        class="w-8 h-8 text-success-500"
                    />
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">NIP/ID</p>
                        <p class="font-medium">{{ $user->employee_id ?? $user->nip ?? '-' }}</p>
                    </div>
                </div>
            </x-filament::grid.column>

            <x-filament::grid.column>
                <div class="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-white/5">
                    <x-filament::icon
                        icon="heroicon-o-map-pin"
                        class="w-8 h-8 text-warning-500"
                    />
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Lokasi Rumah</p>
                        <p class="font-medium">
                            @if($user->home_latitude && $user->home_longitude)
                                <x-filament::badge color="success" size="sm">Sudah diatur</x-filament::badge>
                            @else
                                <x-filament::badge color="warning" size="sm">Belum diatur</x-filament::badge>
                            @endif
                        </p>
                    </div>
                </div>
            </x-filament::grid.column>
        </x-filament::grid>
    </x-filament::section>

    {{-- Forms --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
        {{-- Left: Profile Form --}}
        <div>
            <form wire:submit="updateProfile">
                {{ $this->profileForm }}

                <div class="mt-6">
                    <x-filament::button type="submit" icon="heroicon-m-check">
                        Simpan Profil
                    </x-filament::button>
                </div>
            </form>
        </div>

        {{-- Right: Home Location & Password --}}
        <div class="space-y-6">
            {{-- Home Location --}}
            @if($canEditHomeLocation || ($user->home_latitude && $user->home_longitude))
                <form wire:submit="updateHomeLocation">
                    {{ $this->homeLocationForm }}

                    @if($canEditHomeLocation)
                        <div class="mt-6">
                            <x-filament::button type="submit" color="info" icon="heroicon-m-map-pin">
                                Simpan Lokasi Rumah
                            </x-filament::button>
                        </div>
                    @endif
                </form>
            @endif

            {{-- Password --}}
            <form wire:submit="updatePassword">
                {{ $this->passwordForm }}

                <div class="mt-6">
                    <x-filament::button type="submit" color="warning" icon="heroicon-m-key">
                        Ubah Password
                    </x-filament::button>
                </div>
            </form>
        </div>
    </div>
</x-filament-panels::page>
