@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">{{ $stats['total'] }}</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">{{ $stats['online'] }}</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">{{ $stats['offline'] }}</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">{{ $stats['pending'] }}</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 }}</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>
document.getElementById('selectAll')?.addEventListener('change', function(e) {
    document.querySelectorAll('.device-checkbox').forEach(cb => cb.checked = e.target.checked);
});

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();
            }
        });
    }
}

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() }}'
            }
        }).then(response => {
            if (response.ok) {
                window.location.reload();
            }
        });
    }
}
</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; }

/* 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