@extends('layouts.app')

@section('title', 'Edit biometric device')
@section('heading', 'Edit biometric device')

@section('content')
    @php
        $isOnline = $device->last_seen_at && $device->last_seen_at->gt(now()->subMinutes(30));
        $statusLabel = $device->is_active
            ? ($isOnline ? 'Online · Enabled' : 'Enabled')
            : 'Disabled';
        $statusClass = $device->is_active
            ? ($isOnline ? 'bg-emerald-50 text-emerald-700 ring-emerald-100' : 'bg-slate-100 text-slate-700 ring-slate-200')
            : 'bg-red-50 text-red-700 ring-red-100';
    @endphp

    <div class="mb-6 flex flex-wrap items-start justify-between gap-4">
        <div>
            <nav class="mb-2 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-400">
                <a href="{{ route('biometric-devices.index') }}" class="hover:text-slate-600">Devices</a>
                <span>/</span>
                <span class="font-mono text-slate-500">{{ $device->terminal_sn }}</span>
            </nav>
            <h1 class="text-2xl font-semibold tracking-tight text-slate-900">Edit biometric device</h1>
            <p class="mt-1 max-w-xl text-sm text-slate-500">Terminal settings control how punches are recorded and which network can reach the device.</p>
        </div>
        <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-inset {{ $statusClass }}">
            <i class="bi {{ $device->is_active ? ($isOnline ? 'bi-broadcast' : 'bi-check-circle') : 'bi-slash-circle' }}"></i>
            {{ $statusLabel }}
        </span>
    </div>

    <form action="{{ route('biometric-devices.update', $device) }}" method="POST" class="space-y-5" novalidate data-biometric-form="edit">
        @csrf
        @method('PUT')
        @include('biometric-devices.partials.form')

        <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3.5 shadow-sm">
            <div class="flex flex-wrap items-center gap-2">
                <x-button type="submit" variant="primary">Save changes</x-button>
                <a href="{{ route('biometric-devices.show', $device) }}" class="inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900">Cancel</a>
            </div>
            <p class="text-xs text-slate-400">
                @if($device->last_seen_at)
                    Last synced {{ $device->last_seen_at->diffForHumans() }}
                @else
                    Not synced yet
                @endif
            </p>
        </div>
    </form>
@endsection

@push('scripts')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/biometric-form-validation.js') }}"></script>
@endpush