@extends('garage.layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-3">
            <div>
                <div class="h4 mb-0">Attendance devices</div>
                <div class="text-muted small">Add your Dahua device(s), then map employees and sync logs.</div>
            </div>
            <div class="d-flex gap-2">
                <a class="btn btn-outline-secondary btn-sm" href="{{ route('garage.attendance.index') }}">Back</a>
                <a class="btn btn-primary btn-sm" href="{{ route('garage.attendance.devices.create') }}">Add device</a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success py-2 small">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
        @endif

        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead>
                        <tr>
                            <th>Device</th>
                            <th class="text-end">Last synced</th>
                            <th class="text-end">Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($devices as $d)
                            <tr>
                                <td>
                                    <div class="fw-semibold">{{ $d->name }}</div>
                                    <div class="text-muted small">{{ $d->vendor }} {{ $d->model }} · {{ $d->ip }}:{{ $d->port }}</div>
                                </td>
                                <td class="text-end small">
                                    {{ $d->last_synced_at ? \Carbon\Carbon::parse($d->last_synced_at)->format('Y-m-d H:i') : '—' }}
                                </td>
                                <td class="text-end">
                                    @if($d->is_active)
                                        <span class="badge bg-success-subtle text-success border border-success-subtle">Active</span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactive</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        <a class="btn btn-outline-secondary btn-sm" href="{{ route('garage.attendance.devices.mapping', $d->id) }}">Mapping</a>
                                        <form method="post" action="{{ route('garage.attendance.devices.test', $d->id) }}">
                                            @csrf
                                            <button class="btn btn-outline-info btn-sm" type="submit">Test</button>
                                        </form>
                                        <form method="post" action="{{ route('garage.attendance.devices.sync', $d->id) }}">
                                            @csrf
                                            <button class="btn btn-outline-primary btn-sm">Sync</button>
                                        </form>
                                        <a class="btn btn-outline-secondary btn-sm" href="{{ route('garage.attendance.devices.edit', $d->id) }}">Edit</a>
                                        <form method="post" action="{{ route('garage.attendance.devices.destroy', $d->id) }}" onsubmit="return confirm('Remove this device?');">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-outline-danger btn-sm">Remove</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-muted p-3">No devices yet.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection