@extends('layouts.app')
@section('page-title', 'Offices')

@section('content')

<x-admin-hero-header
    title="Offices"
    subtitle="Manage office locations by country"
    eyebrow="Office management"
>
    <x-slot:icon>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
        </svg>
    </x-slot:icon>

    <x-slot:actions>
        @can('create-offices')
            <a href="{{ route('admin.offices.create') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Add Office
            </a>
        @endcan
    </x-slot:actions>
</x-admin-hero-header>

<div class="card p-4 mb-6">
    <form method="GET" action="{{ route('admin.offices.index') }}" class="flex flex-wrap items-end gap-3">
        <div class="flex-1 min-w-[180px]">
            <label for="office_filter_search" class="form-label">Search</label>
            <input id="office_filter_search" type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Office name or address..." class="form-input form-icon-search" />
        </div>

        <div class="min-w-[180px]">
            <x-searchable-select
                name="country_id"
                id="country_id"
                label="Country"
                :options="$countries"
                :selected="$filters['country_id'] ?? ''"
                placeholder="All Countries"
                search-placeholder="Search country..."
                icon="country"
                :enhanced="true"
                :show-code="true"
            />
        </div>

        <div class="min-w-[130px]">
            <x-searchable-select
                name="status"
                id="status"
                label="Status"
                :options="[['value' => '1', 'label' => 'Active'], ['value' => '0', 'label' => 'Inactive']]"
                :selected="$filters['status'] ?? ''"
                placeholder="All"
            />
        </div>

        <div class="flex gap-2">
            <button type="submit" class="btn-primary">Filter</button>
            @if(array_filter($filters))
                <a href="{{ route('admin.offices.index') }}" class="btn-secondary">Clear</a>
            @endif
        </div>
    </form>
</div>

<div class="card overflow-hidden">
    @if($offices->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
            </div>
            <p class="mb-1 text-base font-semibold text-surface-900">No offices found</p>
            <p class="text-sm text-surface-400">
                @if(array_filter($filters))
                    Try adjusting your filters
                @else
                    Add your first office to get started
                @endif
            </p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-surface-100">
                        <th class="table-th">Office Name</th>
                        <th class="table-th">Country</th>
                        <th class="table-th text-center">Users</th>
                        <th class="table-th text-center">Status</th>
                        <th class="table-th text-right pr-6">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-50">
                    @foreach($offices as $office)
                        <tr class="table-row-hover">
                            <td class="table-td">
                                <div class="flex items-center gap-3">
                                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-surface-100 text-surface-500">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                                                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                        </svg>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-semibold text-surface-900">{{ $office->name }}</p>
                                        @if($office->address)
                                            <p class="mt-1 truncate text-xs text-surface-400">{{ $office->address }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="table-td text-surface-600">{{ $office->country?->name ?? '-' }}</td>
                            <td class="table-td text-center">
                                <span class="text-sm font-semibold text-surface-900">{{ $office->users_count }}</span>
                            </td>
                            <td class="table-td">
                                <div x-data="statusToggle(@js((bool) $office->status), @js(route('admin.offices.toggle-status', $office)))" class="flex items-center justify-center gap-2">
                                    @can('edit-offices')
                                        <button
                                            type="button"
                                            :disabled="loading"
                                            @click="toggle"
                                            role="switch"
                                            :aria-checked="active.toString()"
                                            aria-label="Toggle office status"
                                            class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:ring-offset-1 disabled:opacity-60"
                                            :class="active ? 'bg-emerald-500' : 'bg-surface-200'"
                                        >
                                            <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200" :class="active ? 'translate-x-[18px]' : 'translate-x-0.5'"></span>
                                        </button>
                                    @endcan
                                    <span class="text-xs font-medium" :class="active ? 'text-emerald-600' : 'text-surface-400'" x-text="active ? 'Active' : 'Inactive'"></span>
                                    <span x-show="error" x-text="error" class="sr-only"></span>
                                </div>
                            </td>
                            <td class="table-td">
                                <div class="flex items-center justify-end gap-2">
                                    @can('edit-offices')
                                        <a href="{{ route('admin.offices.edit', $office) }}" class="inline-icon-button-neutral" title="Edit" aria-label="Edit office">
                                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                            </svg>
                                        </a>
                                    @endcan

                                    @can('delete-offices')
                                        <div x-data="{ ok: false }">
                                            <button type="button" x-show="!ok" @click="ok = true"
                                                    class="inline-icon-button-danger" title="Delete" aria-label="Delete office">
                                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                                </svg>
                                            </button>
                                            <div x-show="ok" class="flex items-center gap-1">
                                                <span class="whitespace-nowrap text-[11px] font-semibold text-red-600">Delete?</span>
                                                <form method="POST" action="{{ route('admin.offices.destroy', $office) }}">
                                                    @csrf @method('DELETE')
                                                    <button type="submit"
                                                            class="rounded-md bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white transition-colors hover:bg-red-600">
                                                        Yes
                                                    </button>
                                                </form>
                                                <button type="button" @click="ok = false"
                                                        class="rounded-md px-1.5 py-0.5 text-[11px] font-semibold text-surface-500 transition-colors hover:text-surface-700">
                                                    No
                                                </button>
                                            </div>
                                        </div>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($offices->hasPages())
            <div class="border-t border-surface-100 px-5 py-4 sm:px-6">
                {{ $offices->links() }}
            </div>
        @endif
    @endif
</div>

@endsection