@extends('layouts.app')

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

@section('content')
    <div class="mb-6">
        <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="text-slate-500">New</span>
        </nav>
        <h1 class="text-2xl font-semibold tracking-tight text-slate-900">Add biometric device</h1>
        <p class="mt-1 max-w-xl text-sm text-slate-500">Register a ZKTeco terminal and choose how punches are recorded.</p>
    </div>

    <form action="{{ route('biometric-devices.store') }}" method="POST" class="space-y-5" novalidate data-biometric-form="create">
        @csrf
        @include('biometric-devices.partials.form')

        <div class="flex flex-wrap items-center gap-2 rounded-2xl border border-slate-200 bg-white px-4 py-3.5 shadow-sm">
            <x-button type="submit" variant="primary">Register device</x-button>
            <a href="{{ route('biometric-devices.index') }}" 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>
    </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