@extends('layouts.super-admin')

@section('title', 'Devices')
@section('page-title', 'Device Management')
@section('page-description', 'Kelola semua device yang terdaftar')

@section('content')
<div class="devices-content">
    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ $stats['total'] }}</div>
            <div class="stat-label">Total Devices</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ $stats['online'] }}</div>
            <div class="stat-label">Online</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ $stats['offline'] }}</div>
            <div class="stat-label">Offline</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ $stats['pending'] }}</div>
            <div class="stat-label">Pending</div>
        </div>
    </div>

    <!-- Devices Table -->
    <div class="card-section">
        <div class="card-header">
            <h3>All Devices</h3>
            <div class="search-box">
                <input type="text" id="searchDevice" placeholder="Search devices..." class="search-input">
            </div>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Device ID</th>
                        <th>Type</th>
                        <th>Owner</th>
                        <th>Status</th>
                        <th>Last Heartbeat</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($devices as $device)
                    <tr>
                        <td>#{{ $device->id }}</td>
                        <td><strong>{{ $device->name }}</strong></td>
                        <td><code>{{ $device->device_id }}</code></td>
                        <td>{{ ucfirst($device->type) }}</td>
                        <td>{{ $device->user->name ?? 'N/A' }}</td>
                        <td>
                            <span class="status-badge status-{{ $device->status }}">
                                {{ ucfirst($device->status) }}
                            </span>
                        </td>
                        <td>{{ $device->last_heartbeat ? $device->last_heartbeat->diffForHumans() : 'Never' }}</td>
                        <td>
                            <button class="btn-icon" onclick="viewDevice({{ $device->id }})" title="View">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                    <circle cx="12" cy="12" r="3"/>
                                </svg>
                            </button>
                            <button class="btn-icon danger" onclick="deleteDevice({{ $device->id }})" title="Delete">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <polyline points="3 6 5 6 21 6"/>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                                </svg>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="pagination">
            {{ $devices->links() }}
        </div>
    </div>
</div>

<script>
function viewDevice(id) {
    window.location.href = `/super-admin/devices/${id}`;
}

function deleteDevice(id) {
    if (confirm('Are you sure you want to delete this device?')) {
        fetch(`/super-admin/devices/${id}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(() => window.location.reload());
    }
}

document.getElementById('searchDevice')?.addEventListener('keyup', function() {
    const search = this.value.toLowerCase();
    document.querySelectorAll('.data-table tbody tr').forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(search) ? '' : 'none';
    });
});
</script>

<style>
.devices-content { max-width: 1400px; margin: 0 auto; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-value { font-size: 1.875rem; font-weight: 700; color: #dc2626; }
.stat-label { font-size: 0.875rem; color: #64748b; }
.card-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.search-input {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 250px;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
.data-table th { background: #f9fafb; font-weight: 600; font-size: 0.75rem; }
.status-badge { padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.7rem; }
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-pending { background: #fed7aa; color: #92400e; }
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #64748b;
}
.btn-icon:hover { color: #dc2626; }
.pagination { padding: 1rem; text-align: center; }
</style>
@endsection