@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Biometric Devices')
@section('page-title', 'Biometric Devices')

@section('content')
{{-- Stat strip (same widgets as Dashboard) --}}
<div class="row stat-strip">
    <div class="col-lg-3 col-md-6 col-6">
        <div class="stat-mini">
            <span class="stat-icon bg-info"><i class="fas fa-fingerprint"></i></span>
            <div class="stat-text"><strong>{{ number_format($devices->count()) }}</strong><span>Devices registered</span></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-6">
        <div class="stat-mini">
            <span class="stat-icon bg-success"><i class="fas fa-plug"></i></span>
            <div class="stat-text"><strong>{{ number_format($devices->where('is_active', true)->count()) }}</strong><span>Active devices</span></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-6">
        <div class="stat-mini">
            <span class="stat-icon bg-primary"><i class="fas fa-clipboard-check"></i></span>
            <div class="stat-text"><strong>{{ number_format($devices->sum('today_logs_count')) }}</strong><span>Punches today</span></div>
            <a href="{{ route('attendance.index') }}" class="stat-link"><i class="fas fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-6">
        <div class="stat-mini">
            <span class="stat-icon bg-warning"><i class="fas fa-question-circle"></i></span>
            <div class="stat-text"><strong>{{ number_format($unmatchedCount) }}</strong><span>Unmatched punches</span></div>
        </div>
    </div>
</div>

@if(! $sdkInstalled)
<div class="alert alert-info alert-dismissible shadow-sm">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <i class="fas fa-info-circle mr-1"></i>
    <strong>Built-in ZKTeco driver active.</strong>
    It handles K40 Pro / F18 / iClock panels over TCP port 4370 out of the box.
    For wider firmware coverage you may optionally run <code>composer require rats/zkteco</code> — the system will use it automatically when present.
</div>
@else
<div class="alert alert-success alert-dismissible shadow-sm">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <i class="fas fa-check-circle mr-1"></i> <strong>rats/zkteco SDK detected</strong> — full firmware support enabled.
</div>
@endif

<div class="row">
    {{-- Add device form --}}
    <div class="col-lg-4">
        <div class="card card-outline card-primary shadow-sm">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-plus mr-1"></i> Add scanning device</h3></div>
            <form method="POST" action="{{ route('devices.store') }}">
                @csrf
                <div class="card-body">
                    <label class="fld-label">Device name <span class="text-danger">*</span></label>
                    <input name="name" value="{{ old('name') }}" required maxlength="100" class="form-control form-control-sm" placeholder="e.g. Main Gate K40 Pro">

                    <div class="row mt-2">
                        <div class="col-8">
                            <label class="fld-label">IP address <span class="text-danger">*</span></label>
                            <input name="ip_address" value="{{ old('ip_address') }}" required maxlength="100" class="form-control form-control-sm" placeholder="e.g. 192.168.1.201">
                        </div>
                        <div class="col-4">
                            <label class="fld-label">Port</label>
                            <input name="port" value="{{ old('port', 4370) }}" type="number" min="1" max="65535" class="form-control form-control-sm">
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-6">
                            <label class="fld-label">Model</label>
                            <input name="model" value="{{ old('model') }}" maxlength="100" class="form-control form-control-sm" placeholder="e.g. K40 Pro, F18">
                        </div>
                        <div class="col-6">
                            <label class="fld-label">Serial no.</label>
                            <input name="serial_number" value="{{ old('serial_number') }}" maxlength="100" class="form-control form-control-sm" placeholder="Optional">
                        </div>
                    </div>

                    <label class="fld-label mt-2">Location</label>
                    <input name="location" value="{{ old('location') }}" maxlength="150" class="form-control form-control-sm" placeholder="e.g. Main Gate, Staffroom">

                    <div class="row mt-2">
                        <div class="col-6">
                            <label class="fld-label">Used for <span class="text-danger">*</span></label>
                            <select name="purpose" class="form-control form-control-sm">
                                <option value="both" @selected(old('purpose', 'both') === 'both')>Learners + Staff</option>
                                <option value="learners" @selected(old('purpose') === 'learners')>Learners only</option>
                                <option value="staff" @selected(old('purpose') === 'staff')>Staff only</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="fld-label">Comm key</label>
                            <input name="comm_key" value="{{ old('comm_key') }}" maxlength="50" class="form-control form-control-sm" placeholder="Default: blank/0">
                        </div>
                    </div>

                    <div class="form-check mt-2">
                        <input type="checkbox" name="is_active" value="1" class="form-check-input" id="devActive" @checked(old('is_active', true))>
                        <label class="form-check-label small" for="devActive">Active (pull attendance from this device)</label>
                    </div>

                    <p class="small text-muted mt-2 mb-0">
                        The device and this server must be on the same network. On the panel:
                        <strong>Menu → Comm. → Ethernet</strong>, set a static IP, and keep port <strong>4370</strong> open.
                        Saving tests the connection automatically.
                    </p>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-sm btn-primary btn-block"><i class="fas fa-check mr-1"></i> Save & test device</button>
                </div>
            </form>
        </div>

        <div class="card card-outline card-secondary shadow-sm">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-link mr-1"></i> Enrol fingerprints</h3></div>
            <div class="card-body small text-muted">
                <p class="mb-1">On the device, enrol each learner/staff and note their <strong>User ID</strong> number.</p>
                <p class="mb-1">Then enter that same number as the <strong>Biometric ID</strong> on the learner / staff record (admission or staff number also works as a fallback).</p>
                <p class="mb-0">Unmatched punches appear below so you can enrol them and re-pull.</p>
            </div>
        </div>
    </div>

    {{-- Device list --}}
    <div class="col-lg-8">
        <div class="card shadow-sm learner-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-fingerprint mr-1"></i> Registered devices
                    <small class="text-muted ml-1">{{ $devices->count() }} total</small>
                </h3>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table learner-table table-hover text-nowrap mb-0">
                    <thead><tr><th>Device</th><th>Network</th><th>Use</th><th>Last sync</th><th>Status</th><th class="text-right">Actions</th></tr></thead>
                    <tbody>
                        @forelse($devices as $d)
                        <tr>
                            <td>
                                <strong>{{ $d->name }}</strong>
                                <small class="d-block text-muted">{{ $d->model ?? 'ZKTeco panel' }}@if($d->location) · {{ $d->location }}@endif</small>
                                <small class="text-muted">{{ $d->logs_count }} punch(es) · {{ $d->today_logs_count }} today · {{ $d->unprocessed_logs_count }} unmatched</small>
                            </td>
                            <td><code>{{ $d->ip_address }}:{{ $d->port }}</code></td>
                            <td><span class="badge badge-light border">{{ ucfirst($d->purpose) }}</span></td>
                            <td>
                                <small>{{ $d->last_sync_at?->diffForHumans() ?? 'Never' }}</small>
                                @if($d->last_seen_at)<small class="d-block text-muted">seen {{ $d->last_seen_at->diffForHumans() }}</small>@endif
                            </td>
                            <td>
                                @if($d->is_active)<span class="status-pill ok"><span class="dot"></span>Active</span>
                                @else<span class="status-pill muted"><span class="dot"></span>Disabled</span>@endif
                            </td>
                            <td class="text-right">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('devices.show', $d) }}" class="btn btn-outline-secondary" title="Open"><i class="fas fa-eye"></i></a>
                                    <form method="POST" action="{{ route('devices.test', $d) }}" class="d-inline">@csrf<button class="btn btn-outline-info" title="Test connection"><i class="fas fa-plug"></i></button></form>
                                    <form method="POST" action="{{ route('devices.pull', $d) }}" class="d-inline">@csrf<button class="btn btn-outline-success" title="Pull attendance now" @disabled(! $d->is_active)><i class="fas fa-download"></i></button></form>
                                    <button type="button" class="btn btn-outline-primary" title="Edit" data-toggle="modal" data-target="#edit-{{ $d->id }}"><i class="fas fa-pen"></i></button>
                                    <button type="button" class="btn btn-outline-danger" title="Remove" data-toggle="modal" data-target="#del-{{ $d->id }}"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="6" class="text-center py-5">
                            <i class="fas fa-fingerprint fa-3x text-muted mb-3"></i>
                            <p class="font-weight-bold mb-1">No devices yet</p>
                            <p class="text-muted small mb-0">Add the first biometric scanner using the form.</p>
                        </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Recent punches --}}
        <div class="card shadow-sm learner-card mt-3">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-history mr-1"></i> Latest punches (all devices)</h3></div>
            <div class="card-body table-responsive p-0">
                <table class="table learner-table table-hover text-nowrap mb-0">
                    <thead><tr><th>Time</th><th>Enrol ID</th><th>Device</th><th>Matched to</th><th>State</th></tr></thead>
                    <tbody>
                        @forelse($recentLogs as $l)
                        <tr>
                            <td>{{ $l->punch_time->format('Y-m-d H:i') }}</td>
                            <td><code>{{ $l->device_user_id }}</code></td>
                            <td><small>{{ $l->device->name ?? '—' }}</small></td>
                            <td>
                                @if($l->learner)<span class="class-pill">{{ $l->learner->first_name }} {{ $l->learner->last_name }}</span>
                                @elseif($l->staff)<span class="badge badge-light border">{{ $l->staff->first_name }} {{ $l->staff->last_name }}</span>
                                @else<span class="status-pill warn"><span class="dot"></span>Unmatched</span>@endif
                            </td>
                            <td><small class="text-muted">{{ $l->punch_state == 1 ? 'Check-out' : 'Check-in' }}</small></td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-4 small">No punches synced yet — open a device and choose <strong>Pull attendance</strong>.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Edit / delete modals --}}
@foreach($devices as $d)
<div class="modal fade" id="edit-{{ $d->id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="{{ route('devices.update', $d) }}" class="modal-content">@csrf @method('PUT')
            <div class="modal-header"><h5 class="modal-title">Edit {{ $d->name }}</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div>
            <div class="modal-body">
                <div class="form-group"><label class="small text-muted">Device name</label>
                    <input name="name" value="{{ $d->name }}" required maxlength="100" class="form-control form-control-sm"></div>
                <div class="row">
                    <div class="col-8 form-group"><label class="small text-muted">IP address</label>
                        <input name="ip_address" value="{{ $d->ip_address }}" required class="form-control form-control-sm"></div>
                    <div class="col-4 form-group"><label class="small text-muted">Port</label>
                        <input name="port" type="number" value="{{ $d->port }}" min="1" max="65535" class="form-control form-control-sm"></div>
                </div>
                <div class="row">
                    <div class="col-6 form-group"><label class="small text-muted">Model</label>
                        <input name="model" value="{{ $d->model }}" class="form-control form-control-sm"></div>
                    <div class="col-6 form-group"><label class="small text-muted">Serial no.</label>
                        <input name="serial_number" value="{{ $d->serial_number }}" class="form-control form-control-sm"></div>
                </div>
                <div class="form-group"><label class="small text-muted">Location</label>
                    <input name="location" value="{{ $d->location }}" class="form-control form-control-sm"></div>
                <div class="row">
                    <div class="col-6 form-group"><label class="small text-muted">Used for</label>
                        <select name="purpose" class="form-control form-control-sm">
                            <option value="both" @selected($d->purpose === 'both')>Learners + Staff</option>
                            <option value="learners" @selected($d->purpose === 'learners')>Learners only</option>
                            <option value="staff" @selected($d->purpose === 'staff')>Staff only</option>
                        </select></div>
                    <div class="col-6 form-group"><label class="small text-muted">Comm key</label>
                        <input name="comm_key" value="{{ $d->comm_key }}" class="form-control form-control-sm"></div>
                </div>
                <div class="form-check">
                    <input type="checkbox" name="is_active" value="1" class="form-check-input" id="devActive{{ $d->id }}" @checked($d->is_active)>
                    <label class="form-check-label small" for="devActive{{ $d->id }}">Active</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm">Save</button>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="del-{{ $d->id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Remove device?</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div>
            <div class="modal-body"><p class="mb-1">Remove <strong>{{ $d->name }}</strong> ({{ $d->ip_address }})?</p>
                <small class="text-muted">Synced punch history is kept for audit.</small></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ route('devices.destroy', $d) }}" class="d-inline">@csrf @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach
@endsection