@extends('layouts.admin')

@section('title', 'Manage Devices')

@section('content')
<div class="admin-devices">
    <div class="page-header">
        <div>
            <h1>Manage Devices</h1>
            <p>View and manage all devices across all users</p>
        </div>
        <a href="{{ route('admin.devices.create') }}" class="btn-primary">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Add Device
        </a>
    </div>

    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                    <line x1="8" y1="2" x2="8" y2="22"/>
                    <line x1="16" y1="2" x2="16" y2="22"/>
                </svg>
            </div>
            <div class="stat-number" id="statTotalDevices">Loading...</div>
            <div class="stat-label">Total Devices</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 8v4l3 3"/>
                    <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                </svg>
            </div>
            <div class="stat-number" id="statOnlineDevices">Loading...</div>
            <div class="stat-label">Online</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                    <path d="M12 2a10 10 0 0 0-10 10c0 5.523 4.477 10 10 10"/>
                </svg>
            </div>
            <div class="stat-number" id="statOfflineDevices">Loading...</div>
            <div class="stat-label">Offline</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 6v6l4 2"/>
                </svg>
            </div>
            <div class="stat-number" id="statPendingDevices">Loading...</div>
            <div class="stat-label">Pending</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="filter-bar">
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                <input type="text" name="search" placeholder="Search by name or ID" value="{{ request('search') }}">
            </div>
            <div class="filter-group">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 6v6l4 2"/>
                </svg>
                <select name="status">
                    <option value="all">All Status</option>
                    <option value="online" {{ request('status') == 'online' ? 'selected' : '' }}>Online</option>
                    <option value="offline" {{ request('status') == 'offline' ? 'selected' : '' }}>Offline</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="maintenance" {{ request('status') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                </select>
            </div>
            <div class="filter-group">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                    <line x1="8" y1="2" x2="8" y2="22"/>
                    <line x1="16" y1="2" x2="16" y2="22"/>
                </svg>
                <select name="type">
                    <option value="all">All Types</option>
                    <option value="sensor" {{ request('type') == 'sensor' ? 'selected' : '' }}>Sensor</option>
                    <option value="gateway" {{ request('type') == 'gateway' ? 'selected' : '' }}>Gateway</option>
                    <option value="actuator" {{ request('type') == 'actuator' ? 'selected' : '' }}>Actuator</option>
                </select>
            </div>
            <button type="submit" class="btn-filter">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                Filter
            </button>
            <a href="{{ route('admin.devices.index') }}" class="btn-reset">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M23 4v6h-6M1 20v-6h6"/>
                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                </svg>
                Reset
            </a>
            <a href="{{ route('admin.devices.export') }}" class="btn-export">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                Export CSV
            </a>
        </form>
    </div>

    <!-- Bulk Actions -->
    <div class="bulk-actions">
        <select id="bulkAction" class="bulk-select">
            <option value="">Bulk Actions</option>
            <option value="activate">Set Online</option>
            <option value="deactivate">Set Offline</option>
            <option value="delete">Delete</option>
        </select>
        <button onclick="executeBulkAction()" class="btn-bulk">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="6 9 12 15 18 9"/>
            </svg>
            Apply
        </button>
    </div>

    <!-- Devices Table -->
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll"></th>
                    <th>Device ID</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Owner</th>
                    <th>Status</th>
                    <th>Last Heartbeat</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($devices as $device)
                <tr>
                    <td><input type="checkbox" class="device-checkbox" value="{{ $device->id }}"></td>
                    <td>
                        <div class="device-id-cell">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                                <line x1="8" y1="2" x2="8" y2="22"/>
                                <line x1="16" y1="2" x2="16" y2="22"/>
                            </svg>
                            <code>{{ $device->device_id ?? $device->id }}</code>
                        </div>
                    </td>
                    <td><strong>{{ $device->name }}</strong></td>
                    <td>
                        <span class="type-badge type-{{ $device->type }}">
                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                @if($device->type == 'sensor')
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="M12 8v4l3 3"/>
                                @elseif($device->type == 'gateway')
                                    <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                                    <line x1="8" y1="2" x2="8" y2="22"/>
                                @else
                                    <rect x="2" y="2" width="20" height="20" rx="2"/>
                                    <circle cx="12" cy="12" r="2"/>
                                @endif
                            </svg>
                            {{ ucfirst($device->type) }}
                        </span>
                    </td>
                    <td>
                        <div class="owner-cell">
                            <div class="owner-avatar">
                                {{ substr($device->user->name ?? 'N/A', 0, 2) }}
                            </div>
                            <span>{{ $device->user->name ?? 'N/A' }}</span>
                        </div>
                    </td>
                    <td>
                        <span class="status-badge status-{{ $device->status }}">
                            <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
                                <circle cx="12" cy="12" r="10"/>
                            </svg>
                            {{ ucfirst($device->status) }}
                        </span>
                    </td>
                    <td>
                        <div class="heartbeat-cell">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path d="M2 12h3l2-5 2 5 2-5 2 5 2-5 2 5h3"/>
                            </svg>
                            {{ $device->last_heartbeat ? $device->last_heartbeat->diffForHumans() : 'Never' }}
                        </div>
                    </td>
                    <td class="actions">
                        <a href="{{ route('admin.devices.show', $device) }}" class="btn-icon" 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>
                        </a>
                        <a href="{{ route('admin.devices.edit', $device) }}" class="btn-icon" title="Edit">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"/>
                                <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"/>
                            </svg>
                        </a>
                        <button onclick="deleteDevice({{ $device->id }})" class="btn-icon danger" 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-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                            </svg>
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#9ca3af">
                            <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                            <line x1="8" y1="2" x2="8" y2="22"/>
                            <line x1="16" y1="2" x2="16" y2="22"/>
                        </svg>
                        <p>No devices found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination">
        {{ $devices->appends(request()->query())->links() }}
    </div>
</div>

<script>
// Fungsi untuk memuat statistik devices dari API
async function loadDeviceStats() {
    try {
        const response = await fetch('/api/v1/admin/devices/stats', {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error('Failed to fetch stats');
        }
        
        const data = await response.json();
        
        // Update stat cards dengan data dari response
        if (data.success) {
            // Total Devices
            const totalElem = document.getElementById('statTotalDevices');
            if (totalElem) totalElem.textContent = data.data?.total ?? data.total ?? '0';
            
            // Online Devices
            const onlineElem = document.getElementById('statOnlineDevices');
            if (onlineElem) onlineElem.textContent = data.data?.online ?? data.online ?? '0';
            
            // Offline Devices
            const offlineElem = document.getElementById('statOfflineDevices');
            if (offlineElem) offlineElem.textContent = data.data?.offline ?? data.offline ?? '0';
            
            // Pending Devices
            const pendingElem = document.getElementById('statPendingDevices');
            if (pendingElem) pendingElem.textContent = data.data?.pending ?? data.pending ?? '0';
        } else if (data.total !== undefined) {
            // Alternative response structure
            document.getElementById('statTotalDevices').textContent = data.total ?? '0';
            document.getElementById('statOnlineDevices').textContent = data.online ?? '0';
            document.getElementById('statOfflineDevices').textContent = data.offline ?? '0';
            document.getElementById('statPendingDevices').textContent = data.pending ?? '0';
        } else {
            // Fallback: hitung dari tabel yang sudah ada
            calculateStatsFromTable();
        }
    } catch (error) {
        console.error('Error loading device stats:', error);
        // Fallback: hitung dari data yang sudah ada di tabel
        calculateStatsFromTable();
    }
}

// Fallback: hitung statistik dari tabel yang sudah dirender
function calculateStatsFromTable() {
    const rows = document.querySelectorAll('.data-table tbody tr:not(.empty-row)');
    let total = 0;
    let online = 0;
    let offline = 0;
    let pending = 0;
    
    rows.forEach(row => {
        total++;
        
        // Cek status dari badge
        const statusCell = row.cells[5];
        if (statusCell) {
            const statusText = statusCell.textContent.toLowerCase();
            if (statusText.includes('online')) {
                online++;
            } else if (statusText.includes('offline')) {
                offline++;
            } else if (statusText.includes('pending')) {
                pending++;
            }
        }
    });
    
    document.getElementById('statTotalDevices').textContent = total;
    document.getElementById('statOnlineDevices').textContent = online;
    document.getElementById('statOfflineDevices').textContent = offline;
    document.getElementById('statPendingDevices').textContent = pending;
}

// Select All checkbox
document.getElementById('selectAll')?.addEventListener('change', function(e) {
    document.querySelectorAll('.device-checkbox').forEach(cb => cb.checked = e.target.checked);
});

// Execute bulk action
function executeBulkAction() {
    const action = document.getElementById('bulkAction').value;
    if (!action) {
        alert('Please select an action');
        return;
    }
    
    const selectedIds = Array.from(document.querySelectorAll('.device-checkbox:checked')).map(cb => cb.value);
    if (selectedIds.length === 0) {
        alert('Please select at least one device');
        return;
    }
    
    if (confirm(`Are you sure you want to ${action} ${selectedIds.length} device(s)?`)) {
        fetch('{{ route('admin.devices.bulk-action') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ device_ids: selectedIds, action: action })
        }).then(response => {
            if (response.ok) {
                window.location.reload();
            } else {
                response.json().then(data => {
                    alert(data.message || 'Failed to execute action');
                });
            }
        }).catch(error => {
            console.error('Error:', error);
            alert('Failed to execute action');
        });
    }
}

// Delete single device
function deleteDevice(id) {
    if (confirm('Are you sure you want to delete this device?')) {
        fetch(`/admin/devices/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if (response.ok) {
                window.location.reload();
            } else {
                response.json().then(data => {
                    alert(data.message || 'Failed to delete device');
                });
            }
        }).catch(error => {
            console.error('Error:', error);
            alert('Failed to delete device');
        });
    }
}

// Load stats when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadDeviceStats();
    
    // Refresh stats every 30 seconds
    setInterval(loadDeviceStats, 30000);
});
</script>

<style>
.admin-devices { max-width: 1400px; margin: 0 auto; padding: 2rem; }

/* Page Header */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.page-header h1 { font-size: 1.875rem; font-weight: 700; color: #1a1a1a; margin-bottom: 0.25rem; }
.page-header p { color: #6b7280; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-primary:hover { background: #b91c1c; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.25rem; text-align: center; transition: all 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: #fecaca; }
.stat-icon { width: 48px; height: 48px; background: #fef2f2; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: #dc2626; }
.stat-number { font-size: 1.875rem; font-weight: 700; color: #1a1a1a; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.875rem; color: #6b7280; }

/* Filter Bar */
.filter-bar { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; }
.filter-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
.filter-group { position: relative; flex: 1; min-width: 160px; }
.filter-group svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.filter-group input, .filter-group select { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.875rem; }
.btn-filter, .btn-reset, .btn-export { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.btn-filter { background: #dc2626; color: white; border: none; cursor: pointer; }
.btn-filter:hover { background: #b91c1c; }
.btn-reset { background: #f3f4f6; color: #374151; }
.btn-reset:hover { background: #e5e7eb; }
.btn-export { background: #10b981; color: white; }
.btn-export:hover { background: #059669; }

/* Bulk Actions */
.bulk-actions { display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center; }
.bulk-select { padding: 0.5rem 1rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.875rem; }
.btn-bulk { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #4b5563; color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.btn-bulk:hover { background: #374151; }

/* Table Container */
.table-container { background: white; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
.data-table th { background: #f9fafb; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; }
.data-table td { font-size: 0.875rem; color: #1f2937; }
.data-table tr:hover td { background: #fef2f2; }

/* Cell Styles */
.device-id-cell { display: flex; align-items: center; gap: 0.5rem; }
.owner-cell { display: flex; align-items: center; gap: 0.5rem; }
.owner-avatar { width: 28px; height: 28px; background: #fef2f2; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: #dc2626; }
.heartbeat-cell { display: flex; align-items: center; gap: 0.5rem; }
.heartbeat-cell svg { color: #10b981; }

/* Badges */
.type-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 500; }
.type-sensor { background: #e0e7ff; color: #3730a3; }
.type-gateway { background: #d1fae5; color: #065f46; }
.type-actuator { background: #fed7aa; color: #92400e; }

.status-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.7rem; font-weight: 500; }
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-pending { background: #fed7aa; color: #92400e; }
.status-maintenance { background: #e0e7ff; color: #3730a3; }

/* Actions */
.actions { display: flex; gap: 0.5rem; }
.btn-icon { background: none; border: none; cursor: pointer; padding: 0.25rem; color: #6b7280; border-radius: 6px; transition: all 0.2s; }
.btn-icon:hover { background: #fef2f2; color: #dc2626; }
.btn-icon.danger:hover { background: #fee2e2; color: #dc2626; }

.text-center { text-align: center; padding: 3rem; }
.text-center svg { margin-bottom: 1rem; color: #9ca3af; }
.text-center p { color: #6b7280; }

/* Pagination */
.pagination { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: center; }

/* Responsive */
@media (max-width: 1024px) {
    .admin-devices { padding: 1rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr; }
    .filter-form { flex-direction: column; }
    .filter-group { width: 100%; }
    .data-table th, .data-table td { padding: 0.5rem 0.75rem; }
}
</style>
@endsection