@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('attendance.title'), 'url' => route('hr.attendance.index')],
        ['label' => __('attendance.devices_title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('attendance.devices_title')"
    :subtitle="__('attendance.devices_subtitle')"
    page-icon="fe fe-cpu"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('hr.attendance.index')" icon="fe fe-arrow-left">
            {{ __('attendance.title') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <x-ui.table.table :columns="[
        ['label' => __('attendance.fields.device_name')],
        ['label' => __('attendance.fields.brand')],
        ['label' => __('attendance.fields.ip')],
        ['label' => __('attendance.fields.port')],
        ['label' => __('attendance.fields.api_type')],
        ['label' => __('common.created_at')],
    ]">
        @forelse ($devices as $device)
            <x-ui.table.row>
                <td><strong>{{ $device->name }}</strong></td>
                <td>{{ $device->brand ?? '—' }}</td>
                <td>{{ $device->ip_address ?? '—' }}</td>
                <td>{{ $device->port ?? '—' }}</td>
                <td><code>{{ $device->api_type }}</code></td>
                <td>{{ $device->created_at?->format('Y-m-d H:i') }}</td>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="6" class="text-center text-muted py-4">
                    {{ __('attendance.devices_empty') }}
                </td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table.table>

    @can('attendance.import')
        <div class="mt-4 small text-muted">
            @foreach ($devices as $device)
                <p class="mb-2">
                    <strong>{{ $device->name }}:</strong>
                    {{ __('attendance.ingest_help', ['url' => route('hr.attendance.devices.ingest', $device)]) }}
                </p>
            @endforeach
        </div>
    @endcan

    @can('attendance.manage')
        <div class="card mt-4">
            <div class="card-header">
                <strong>{{ __('attendance.devices_title') }}</strong>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('hr.attendance.devices.store') }}" class="row g-3">
                    @csrf
                    <div class="col-md-6">
                        <x-ui.form.input name="name" :label="__('attendance.fields.device_name')" :value="old('name')" required />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input name="brand" :label="__('attendance.fields.brand')" :value="old('brand')" />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input name="ip_address" :label="__('attendance.fields.ip')" :value="old('ip_address')" />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input name="port" type="number" :label="__('attendance.fields.port')" :value="old('port')" />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.select
                            name="api_type"
                            :label="__('attendance.fields.api_type')"
                            :options="$apiTypeOptions"
                            :selected="old('api_type', array_key_first($apiTypeOptions))"
                            required
                        />
                    </div>
                    <div class="col-12">
                        <x-ui.buttons.primary type="submit" icon="fe fe-plus">
                            {{ __('common.save') }}
                        </x-ui.buttons.primary>
                    </div>
                </form>
            </div>
        </div>
    @endcan
</x-ui.layout.page>
