@extends('garage.layouts.app')
@section('title', 'Add manual attendance')
@section('content')
@include('garage.hr.styles')
<div class="container-fluid px-3 py-3 hrx-page">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <div class="h4 mb-0"><i class="bi bi-plus-circle me-2 text-primary"></i>Add manual attendance</div>
            <div class="text-muted small">Record a punch in software and optionally send it to the Dahua device (same UserID as employee attendance code).</div>
        </div>
        <a href="{{ route('garage.attendance.logs.index') }}" class="btn btn-sm btn-outline-secondary">Back to logs</a>
    </div>

    @include('garage.attendance._nav')

    @if(session('error'))
        <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger py-2 small">
            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="post" action="{{ route('garage.attendance.manual.store') }}" class="card hrx-card">
        @csrf
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Employee <span class="text-danger">*</span></label>
                    <select name="garage_employee_id" class="form-select" required id="empSelect">
                        <option value="">— Select employee —</option>
                        @foreach($employees as $e)
                            <option value="{{ $e->id }}" data-userid="{{ $e->attendance_code ?? '' }}" @selected((int)old('garage_employee_id') === (int)$e->id)>
                                {{ $e->name }} @if($e->code) ({{ $e->code }}) @endif
                                @if($e->attendance_code) — UserID {{ $e->attendance_code }} @else — no UserID @endif
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Employee must have <strong>Attendance code</strong> set to push to device.</div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Punch date & time <span class="text-danger">*</span></label>
                    <input type="datetime-local" name="punch_time" class="form-control" required
                        value="{{ old('punch_time', now()->format('Y-m-d\TH:i')) }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Type <span class="text-danger">*</span></label>
                    <select name="event_kind" class="form-select" required>
                        <option value="checkin" @selected(old('event_kind', 'checkin') === 'checkin')>Check in</option>
                        <option value="checkout" @selected(old('event_kind') === 'checkout')>Check out</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Attendance device</label>
                    <select name="garage_attendance_device_id" class="form-select" id="deviceSelect">
                        <option value="">— None (software only) —</option>
                        @foreach($devices as $d)
                            <option value="{{ $d->id }}" @selected((int)old('garage_attendance_device_id') === (int)$d->id)>
                                {{ $d->name }} ({{ $d->ip }}:{{ $d->port }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Notes</label>
                    <input type="text" name="notes" class="form-control" maxlength="500" value="{{ old('notes') }}" placeholder="Optional reason">
                </div>
                <div class="col-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="push_to_device" value="1" id="pushToDevice"
                            @checked(old('push_to_device', $defaultPush))>
                        <label class="form-check-label" for="pushToDevice">
                            Also add this punch on the Dahua device (AccessControlCardRec)
                        </label>
                    </div>
                    <div class="form-text">Requires a device selected above. If push fails, the punch is still saved in software.</div>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between">
            <span class="small text-muted">Daily attendance for this date is rebuilt automatically after save.</span>
            <button type="submit" class="btn btn-primary btn-sm">Save attendance</button>
        </div>
    </form>
</div>
<script>
document.getElementById('pushToDevice')?.addEventListener('change', function () {
    const dev = document.getElementById('deviceSelect');
    if (this.checked && dev && !dev.value && dev.options.length > 1) {
        dev.selectedIndex = 1;
    }
});
</script>
@endsection