@php
    $device = $device ?? null;
    $allowedIpsValue = old('allowed_ips', $device && is_array($device->allowed_ips) ? implode(', ', $device->allowed_ips) : '');
    $punchMode = old('punch_mode', $device->punch_mode ?? \App\Models\BiometricDevice::PUNCH_MODE_BOTH);
    if (old('is_active') !== null) {
        $isActive = in_array((string) old('is_active'), ['1', 'true', 'on'], true);
    } else {
        $isActive = (bool) ($device->is_active ?? true);
    }
    $inputClass = 'mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-200';
@endphp

<div class="space-y-5" x-data="{ punchMode: @js($punchMode), enabled: @js($isActive) }">
    {{-- Identity --}}
    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        <div class="mb-5">
            <h2 class="text-base font-semibold text-slate-900">Identity</h2>
            <p class="mt-0.5 text-sm text-slate-500">How this terminal is identified in reports.</p>
        </div>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-700">
                    <i class="bi bi-upc-scan text-slate-400"></i>
                    Terminal serial number (SN) *
                </label>
                <input type="text" name="terminal_sn" value="{{ old('terminal_sn', $device->terminal_sn ?? '') }}"
                       class="{{ $inputClass }} font-mono" placeholder="Device serial from ZKTeco">
                @error('terminal_sn')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="terminal_sn" class="mt-1.5 text-xs text-red-600 hidden"></p>
            </div>
            <div>
                <label class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-700">
                    <i class="bi bi-tag text-slate-400"></i>
                    Device alias
                </label>
                <input type="text" name="terminal_alias" value="{{ old('terminal_alias', $device->terminal_alias ?? '') }}"
                       class="{{ $inputClass }}" placeholder="Front gate">
                @error('terminal_alias')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="terminal_alias" class="mt-1.5 text-xs text-red-600 hidden"></p>
            </div>
        </div>
    </section>

    {{-- Punch behaviour --}}
    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        <div class="mb-5">
            <h2 class="text-base font-semibold text-slate-900">Punch behaviour</h2>
            <p class="mt-0.5 text-sm text-slate-500">Choose how the terminal interprets a scan.</p>
        </div>

        <input type="hidden" name="punch_mode" :value="punchMode">

        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            @foreach([
                'login' => ['title' => 'Login only', 'desc' => 'Dedicated entry terminal.', 'icon' => 'bi-box-arrow-in-right'],
                'logout' => ['title' => 'Logout only', 'desc' => 'Dedicated exit terminal.', 'icon' => 'bi-box-arrow-right'],
                'both' => ['title' => 'Both', 'desc' => 'First IN / Last OUT.', 'icon' => 'bi-arrow-left-right'],
            ] as $value => $meta)
                <button type="button"
                        @click="punchMode = '{{ $value }}'"
                        :class="punchMode === '{{ $value }}'
                            ? 'border-emerald-500 bg-emerald-50/60 ring-1 ring-emerald-500'
                            : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'"
                        class="relative rounded-2xl border p-4 text-left transition">
                    <span x-show="punchMode === '{{ $value }}'"
                          class="absolute right-3 top-3 inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500 text-white"
                          x-cloak>
                        <i class="bi bi-check text-xs"></i>
                    </span>
                    <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-slate-600">
                        <i class="bi {{ $meta['icon'] }}"></i>
                    </span>
                    <span class="mt-3 block text-sm font-semibold text-slate-900">{{ $meta['title'] }}</span>
                    <span class="mt-0.5 block text-xs leading-relaxed text-slate-500">{{ $meta['desc'] }}</span>
                </button>
            @endforeach
        </div>

        <div class="mt-4 flex gap-2.5 rounded-xl border border-sky-100 bg-sky-50/80 px-3.5 py-3 text-sm text-slate-600">
            <i class="bi bi-info-circle mt-0.5 shrink-0 text-sky-600"></i>
            <p>Login/Logout = entry/exit gates. Both = store every auth; first valid punch is IN, last is OUT, middles are INTERMEDIATE.</p>
        </div>
        @error('punch_mode')<p class="mt-2 text-xs text-red-600">{{ $message }}</p>@enderror
    </section>

    {{-- Placement & access --}}
    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        <div class="mb-5">
            <h2 class="text-base font-semibold text-slate-900">Placement &amp; access</h2>
            <p class="mt-0.5 text-sm text-slate-500">Where the device sits and which networks may talk to it.</p>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-700">
                    <i class="bi bi-geo-alt text-slate-400"></i>
                    Location
                </label>
                <select name="location_id" class="{{ $inputClass }} js-select2">
                    <option value="">— Optional —</option>
                    @foreach($locations as $location)
                        <option value="{{ $location->id }}" @selected((string) old('location_id', $device->location_id ?? '') === (string) $location->id)>{{ $location->name }}</option>
                    @endforeach
                </select>
                @error('location_id')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-700">
                    <i class="bi bi-hdd-network text-slate-400"></i>
                    Allowed IPs (optional)
                </label>
                <input type="text" name="allowed_ips" value="{{ $allowedIpsValue }}"
                       class="{{ $inputClass }}" placeholder="203.0.113.4, 198.51.100.10">
                <p class="mt-1.5 text-xs text-slate-500">Comma-separated. Leave blank to allow any address.</p>
                @error('allowed_ips')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="mt-5 flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-slate-50/80 px-4 py-3.5">
            <div>
                <p class="text-sm font-semibold text-slate-900">Device enabled</p>
                <p class="mt-0.5 text-xs text-slate-500">Disabled devices stop accepting punches immediately.</p>
            </div>
            <input type="hidden" name="is_active" :value="enabled ? 1 : 0">
            <button type="button"
                    role="switch"
                    :aria-checked="enabled.toString()"
                    @click="enabled = !enabled"
                    :class="enabled ? 'bg-slate-800' : 'bg-slate-300'"
                    class="relative inline-flex h-7 w-12 shrink-0 cursor-pointer rounded-full transition">
                <span :class="enabled ? 'translate-x-6' : 'translate-x-1'"
                      class="pointer-events-none mt-1 inline-block h-5 w-5 rounded-full bg-white shadow transition"></span>
            </button>
        </div>
    </section>
</div>