@extends('layouts.app')

@section('title', 'Master Device')

@section('content')
<style>
    .dv-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .dv-head h1 {
        font-size: 20px;
        font-weight: 700;
        color: #0D2B5E;
        margin: 0 0 4px 0;
    }

    .dv-head p {
        font-size: 12.5px;
        color: rgba(0,0,0,0.45);
        margin: 0;
    }

    .dv-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #F5B800;
        color: #0D2B5E;
        font-weight: 700;
        font-size: 12.5px;
        padding: 9px 16px;
        border-radius: 8px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.15s;
    }

    .dv-btn-primary:hover {
        background: #e0a600;
        color: #0D2B5E;
    }

    .dv-alert {
        padding: 11px 16px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 500;
        margin-bottom: 16px;
    }

    .dv-alert.success { background: #dcfce7; color: #16a34a; }
    .dv-alert.warning { background: #fef3c7; color: #b45309; }

    .dv-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 3px rgba(13,43,94,0.06);
        overflow: hidden;
    }

    .dv-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;
    }

    .dv-table thead th {
        background: #F7F9FC;
        color: #0D2B5E;
        font-weight: 700;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 11px 16px;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .dv-table tbody td {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        color: rgba(0,0,0,0.75);
        vertical-align: middle;
    }

    .dv-table tbody tr:last-child td { border-bottom: none; }
    .dv-table tbody tr:hover { background: #FAFBFD; }

    .dv-name { font-weight: 600; color: #0D2B5E; }
    .dv-loc { font-size: 11.5px; color: rgba(0,0,0,0.4); }

    .dv-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
    }

    .dv-badge.on { background: #dcfce7; color: #16a34a; }
    .dv-badge.off { background: #f1f5f9; color: #64748b; }

    .dv-actions { display: flex; gap: 6px; flex-wrap: wrap; }

    .dv-action-btn {
        border: 1px solid rgba(0,0,0,0.1);
        background: #fff;
        color: rgba(0,0,0,0.6);
        font-size: 11.5px;
        font-weight: 600;
        padding: 6px 11px;
        border-radius: 7px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s;
        font-family: inherit;
        white-space: nowrap;
    }

    .dv-action-btn:hover { border-color: #0D2B5E; color: #0D2B5E; }
    .dv-action-btn.danger:hover { border-color: #dc2626; color: #dc2626; }
    .dv-action-btn.accent { border-color: rgba(245,184,0,0.5); color: #b45309; }
    .dv-action-btn.accent:hover { border-color: #F5B800; background: #fffbeb; color: #b45309; }

    .dv-empty {
        text-align: center;
        padding: 48px 20px;
        color: rgba(0,0,0,0.35);
        font-size: 13px;
    }
</style>

<div class="dv-head">
    <div>
        <h1>Master Device</h1>
        <p>Daftar terminal absensi wajah yang terhubung ke sistem</p>
    </div>
    <a href="{{ route('devices.create') }}" class="dv-btn-primary">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
        Tambah Device
    </a>
</div>

@if (session('success'))
    <div class="dv-alert success">{{ session('success') }}</div>
@endif
@if (session('warning'))
    <div class="dv-alert warning">{{ session('warning') }}</div>
@endif

<div class="dv-card">
    <table class="dv-table">
        <thead>
            <tr>
                <th>Nama Device</th>
                <th>IP : Port</th>
                <th>Status</th>
                <th>Terakhir Sync</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($devices as $device)
                <tr>
                    <td>
                        <div class="dv-name">{{ $device->name }}</div>
                        @if ($device->location)
                            <div class="dv-loc">{{ $device->location }}</div>
                        @endif
                    </td>
                    <td>{{ $device->ip_address }}:{{ $device->port }}</td>
                    <td>
                        @if ($device->is_active)
                            <span class="dv-badge on">Aktif</span>
                        @else
                            <span class="dv-badge off">Nonaktif</span>
                        @endif
                    </td>
                    <td>{{ $device->last_synced_at?->diffForHumans() ?? 'Belum pernah' }}</td>
                    <td>
                        <div class="dv-actions">
                            <a href="{{ route('devices.schedules.index', $device) }}" class="dv-action-btn accent">Jadwal</a>
                            <a href="{{ route('devices.edit', $device) }}" class="dv-action-btn">Edit</a>

                            <form action="{{ route('devices.test', $device) }}" method="POST">
                                @csrf
                                <button type="submit" class="dv-action-btn">Tes Koneksi</button>
                            </form>

                            <form action="{{ route('devices.destroy', $device) }}" method="POST"
                                  onsubmit="return confirm('Yakin hapus device ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="dv-action-btn danger">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5">
                        <div class="dv-empty">Belum ada device terdaftar. Klik "Tambah Device" untuk mulai.</div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection