@extends('layouts.app')

@section('title', 'Locations')
@section('heading', 'Locations')

@section('content')
@include('settings.partials.back-to-home')
    <x-card>
        <div class="mb-4 flex items-center justify-between">
            <p class="text-slate-600">Manage company locations.</p>
            <a href="{{ route('locations.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700"><i class="bi bi-plus-lg me-1"></i>Add Location</a>
        </div>
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Code</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Address</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Geo-fence</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="whitespace-nowrap px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee (Auto Calculated)</th>
                    <th class="whitespace-nowrap px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($locations as $location)
                <tr>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $location->name }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">{{ $location->code }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">{{ $location->address ?: '-' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">
                        @if($location->latitude && $location->longitude)
                            {{ round($location->latitude, 5) }}, {{ round($location->longitude, 5) }}
                            @if($location->radius_meters)
                                · {{ $location->radius_meters }}m
                            @endif
                        @else
                            —
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">{{ ($location->is_active ?? true) ? 'Active' : 'Inactive' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">{{ $location->users_count ?? $location->users()?->count() ?? 0 }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                        <a href="{{ route('locations.edit', $location) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                        <form action="{{ route('locations.destroy', $location) }}" method="POST" class="inline" onsubmit="return confirm('Delete this location?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No locations yet.</td>
                </tr>
            @endforelse
        </x-table>
        @if($locations->hasPages())<div class="mt-4">{{ $locations->links() }}</div>@endif
    </x-card>
@endsection