@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | ' . $device->name)
@section('page-title', $device->name)

@section('content')
<a href="{{ route('devices.index') }}" class="btn btn-sm btn-outline-secondary mb-3"><i class="fas fa-arrow-left mr-1"></i> All devices</a>

<div class="row">
    <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-fingerprint mr-1"></i> Device details</h3></div>
            <div class="card-body">
                <dl class="row small mb-0">
                    <dt class="col-5 text-muted">Network</dt><dd class="col-7"><code>{{ $device->ip_address }}:{{ $device->port }}</code></dd>
                    <dt class="col-5 text-muted">Model</dt><dd class="col-7">{{ $device->model ?? '—' }}</dd>
                    <dt class="col-5 text-muted">Serial</dt><dd class="col-7">{{ $device->serial_number ?? '—' }}</dd>
                    <dt class="col-5 text-muted">Location</dt><dd class="col-7">{{ $device->location ?? '—' }}</dd>
                    <dt class="col-5 text-muted">Used for</dt><dd class="col-7">{{ ucfirst($device->purpose) }}</dd>
                    <dt class="col-5 text-muted">Last seen</dt><dd class="col-7">{{ $device->last_seen_at?->diffForHumans() ?? 'Never' }}</dd>
                    <dt class="col-5 text-muted">Last sync</dt><dd class="col-7">{{ $device->last_sync_at?->diffForHumans() ?? 'Never' }}</dd>
                    <dt class="col-5 text-muted">Status</dt><dd class="col-7">
                        @if($device->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
                    </dd>
                </dl>
            </div>
            <div class="card-footer d-flex flex-wrap gap-2">
                <form method="POST" action="{{ route('devices.test', $device) }}" class="mr-1 mb-1">@csrf
                    <button class="btn btn-sm btn-info"><i class="fas fa-plug mr-1"></i> Test</button></form>
                <form method="POST" action="{{ route('devices.pull', $device) }}" class="mr-1 mb-1">@csrf
                    <button class="btn btn-sm btn-success" @disabled(! $device->is_active)><i class="fas fa-download mr-1"></i> Pull attendance</button></form>
                <form method="POST" action="{{ route('devices.toggle', $device) }}" class="mr-1 mb-1">@csrf @method('PATCH')
                    <button class="btn btn-sm btn-outline-secondary">{{ $device->is_active ? 'Disable' : 'Enable' }}</button></form>
                <form method="POST" action="{{ route('devices.clear', $device) }}" class="mb-1"
                      onsubmit="return confirm('Clear the on-device log? Only do this after a successful pull — synced history stays in the system.');">@csrf
                    <button class="btn btn-sm btn-outline-danger"><i class="fas fa-eraser mr-1"></i> Clear device log</button></form>
            </div>
        </div>

        <div class="card card-outline card-secondary shadow-sm">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-file-csv mr-1"></i> Offline CSV import</h3></div>
            <form method="POST" action="{{ route('devices.import', $device) }}" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <input type="file" name="file" accept=".csv,.txt" required class="form-control-file form-control-sm">
                    <p class="small text-muted mt-2 mb-0">Columns: <code>user_id, timestamp [, state]</code> — e.g. <code>104, 2026-09-19 07:12:00</code>. Used when the panel is unreachable.</p>
                </div>
                <div class="card-footer"><button class="btn btn-sm btn-secondary btn-block"><i class="fas fa-upload mr-1"></i> Import punches</button></div>
            </form>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card shadow-sm learner-card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-history mr-1"></i> Punch log
                <small class="text-muted ml-1">{{ number_format($logs->total()) }} 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>Time</th><th>Enrol ID</th><th>Matched to</th><th>State</th><th>Attendance</th></tr></thead>
                    <tbody>
                        @forelse($logs as $l)
                        <tr>
                            <td>{{ $l->punch_time->format('Y-m-d H:i') }}</td>
                            <td><code>{{ $l->device_user_id }}</code></td>
                            <td>
                                @if($l->learner)<span class="class-pill">{{ $l->learner->first_name }} {{ $l->learner->last_name }}</span>
                                    <small class="d-block text-muted">{{ $l->learner->admission_no }}</small>
                                @elseif($l->staff)<span class="badge badge-light border">{{ $l->staff->first_name }} {{ $l->staff->last_name }}</span>
                                    <small class="d-block text-muted">{{ $l->staff->staff_no }}</small>
                                @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>
                            <td>
                                @if($l->attendance_id)<span class="status-pill ok"><span class="dot"></span>Marked</span>
                                @elseif($l->processed)<span class="status-pill muted"><span class="dot"></span>Logged</span>
                                @else<span class="status-pill warn"><span class="dot"></span>Pending</span>@endif
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="font-weight-bold mb-1">No punches yet</p>
                            <p class="text-muted small mb-0">Pull attendance from the device or import a CSV.</p>
                        </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center flex-wrap">
                <small class="text-muted">Page {{ $logs->currentPage() }} of {{ $logs->lastPage() }}</small>
                <div class="mb-0">{{ $logs->links() }}</div>
            </div>
        </div>
    </div>
</div>
@endsection