@php
    $record = $getRecord();

    $markers = [];
    $offices = [];

    // Add check-in marker
    if ($record->check_in_latitude && $record->check_in_longitude) {
        $markers[] = [
            'lat' => (float) $record->check_in_latitude,
            'lng' => (float) $record->check_in_longitude,
            'type' => 'check_in',
            'name' => $record->user?->name ?? 'User',
            'time' => $record->check_in_time ? \Carbon\Carbon::parse($record->check_in_time)->format('H:i') : null,
            'address' => $record->check_in_address,
            'distance' => $record->check_in_distance,
        ];
    }

    // Add check-out marker
    if ($record->check_out_latitude && $record->check_out_longitude) {
        $markers[] = [
            'lat' => (float) $record->check_out_latitude,
            'lng' => (float) $record->check_out_longitude,
            'type' => 'check_out',
            'name' => $record->user?->name ?? 'User',
            'time' => $record->check_out_time ? \Carbon\Carbon::parse($record->check_out_time)->format('H:i') : null,
            'address' => $record->check_out_address,
            'distance' => $record->check_out_distance,
        ];
    }

    // Add office marker if available
    if ($record->office && $record->office->latitude && $record->office->longitude) {
        $offices[] = [
            'lat' => (float) $record->office->latitude,
            'lng' => (float) $record->office->longitude,
            'name' => $record->office->name,
            'address' => $record->office->address,
            'radius' => $record->office->radius ?? 100,
        ];
    }

    $hasLocation = count($markers) > 0;
@endphp

@if($hasLocation)
    <x-google-map
        :markers="$markers"
        :offices="$offices"
        height="350px"
        :zoom="16"
        :showRadius="true"
        :fitBounds="true"
    />

    {{-- Legend --}}
    <div class="mt-3 flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
        @if(count($offices) > 0)
            <div class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-blue-500"></span>
                <span>Kantor</span>
            </div>
        @endif
        <div class="flex items-center gap-1.5">
            <span class="w-3 h-3 rounded-full bg-green-500"></span>
            <span>Check In</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span class="w-3 h-3 rounded-full bg-red-500"></span>
            <span>Check Out</span>
        </div>
    </div>
@else
    <div class="flex flex-col items-center justify-center py-8 text-gray-400 dark:text-gray-500">
        <x-heroicon-o-map class="w-12 h-12 mb-2" />
        <p class="text-sm">Tidak ada data lokasi</p>
    </div>
@endif