@use('App\Enums\PermissionName')

<x-app-layout>
    <x-slot name="header">
        <p class="text-xs font-semibold uppercase tracking-widest text-gray-500">{{ __('Settings') }}</p>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Locations') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />

            <!-- Locations -->
            <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 px-6 py-4">
                    <div>
                        <h3 class="text-base font-semibold text-gray-900">{{ __('Locations') }}</h3>
                        <p class="text-sm text-gray-600">{{ __('Offices, clinics and branches. Each one has a currency, and everyone placed there is paid in it.') }}</p>
                    </div>

                    <x-primary-button :href="route('settings.locations.create')">
                        <x-icon-plus />
                        {{ __('Add location') }}
                    </x-primary-button>
                </div>

                @if ($locations->isEmpty())
                    <div class="flex flex-col items-center gap-3 px-6 py-12 text-center">
                        <div class="grid h-12 w-12 place-items-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                            </svg>
                        </div>
                        <p class="text-sm text-gray-600">{{ __('No locations yet. Until you add one, everyone is paid in :currency.', ['currency' => $defaultCurrency->value]) }}</p>
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse text-sm">
                            <thead>
                                <tr class="border-y border-gray-200 bg-gray-50 text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    <th class="px-6 py-3 text-start">{{ __('Location') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Place') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Currency') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('People') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Status') }}</th>
                                    <th class="px-6 py-3 text-end">{{ __('Actions') }}</th>
                                </tr>
                            </thead>

                            <tbody class="divide-y divide-gray-100">
                                @foreach ($locations as $location)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 font-semibold text-gray-900">{{ $location->name }}</td>
                                        <td class="px-6 py-4 text-gray-700">{{ $location->place() }}</td>
                                        <td class="px-6 py-4">
                                            <x-badge tone="brand">{{ $location->currency->symbol() }} {{ $location->currency->value }}</x-badge>
                                            <span class="ms-1 text-xs text-gray-500">{{ $location->currency->label() }}</span>
                                        </td>
                                        <td class="px-6 py-4 text-gray-700">{{ trans_choice(':count person|:count people', $location->users_count, ['count' => $location->users_count]) }}</td>
                                        <td class="px-6 py-4">
                                            <x-badge :tone="$location->is_active ? 'emerald' : 'gray'" dot>{{ $location->is_active ? __('Open') : __('Closed') }}</x-badge>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="flex items-center justify-end gap-2">
                                                <x-table-action :href="route('users.index', ['location' => $location->id])">{{ __('People') }}</x-table-action>
                                                <x-table-action :href="route('settings.locations.edit', $location)">{{ __('Edit') }}</x-table-action>

                                                @if ($location->users_count > 0)
                                                    <x-table-action
                                                        type="button"
                                                        variant="danger"
                                                        class="opacity-60"
                                                        aria-disabled="true"
                                                        data-alert-title="{{ __('People still work here') }}"
                                                        data-alert-text="{{ __('Move them to another location first, or close this location instead so it cannot be chosen for new people.') }}"
                                                    >
                                                        {{ __('Delete') }}
                                                    </x-table-action>
                                                @else
                                                    <form
                                                        method="POST"
                                                        action="{{ route('settings.locations.destroy', $location) }}"
                                                        data-confirm
                                                        data-confirm-variant="danger"
                                                        data-confirm-title="{{ __('Delete :name?', ['name' => $location->name]) }}"
                                                        data-confirm-text="{{ __('This location will be removed for good.') }}"
                                                        data-confirm-button="{{ __('Yes, delete') }}"
                                                    >
                                                        @csrf
                                                        @method('delete')

                                                        <x-table-action variant="danger">{{ __('Delete') }}</x-table-action>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            <!-- Default currency -->
            <div class="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-raised sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-base font-semibold text-gray-900">{{ __('Default currency') }}</h3>
                    <p class="text-sm text-gray-600">{{ __('Used for people who have no location. Set with APP_CURRENCY in the .env file.') }}</p>
                </div>

                <x-badge tone="brand" class="text-sm">{{ $defaultCurrency->symbol() }} {{ $defaultCurrency->value }} · {{ $defaultCurrency->label() }}</x-badge>
            </div>
        </div>
    </div>
</x-app-layout>