@extends('layouts.dashboard')

@section('title', 'الأجهزة والمستخدمين')

@php
// Country code to Arabic name mapping
$countryNames = [
    'SA' => 'السعودية',
    'AE' => 'الإمارات',
    'KW' => 'الكويت',
    'QA' => 'قطر',
    'BH' => 'البحرين',
    'OM' => 'عمان',
    'EG' => 'مصر',
    'JO' => 'الأردن',
    'LB' => 'لبنان',
    'SY' => 'سوريا',
    'IQ' => 'العراق',
    'YE' => 'اليمن',
    'PS' => 'فلسطين',
    'SD' => 'السودان',
    'LY' => 'ليبيا',
    'TN' => 'تونس',
    'DZ' => 'الجزائر',
    'MA' => 'المغرب',
    'US' => 'أمريكا',
    'GB' => 'بريطانيا',
    'CA' => 'كندا',
    'AU' => 'أستراليا',
    'DE' => 'ألمانيا',
    'FR' => 'فرنسا',
    'TR' => 'تركيا',
    'IN' => 'الهند',
    'PK' => 'باكستان',
    'MY' => 'ماليزيا',
    'ID' => 'إندونيسيا',
];

function getCountryName($code, $countryNames) {
    if (!$code) return null;
    $code = strtoupper($code);
    return $countryNames[$code] ?? $code;
}
@endphp

@section('styles')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    /* View Tabs */
    .view-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
    }

    .view-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: var(--radius-lg);
        color: var(--text-secondary);
        cursor: pointer;
        font-weight: 600;
        transition: all var(--transition-fast);
    }

    .view-tab:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .view-tab.active {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .view-tab svg {
        width: 20px;
        height: 20px;
    }

    .view-content {
        display: none;
    }

    .view-content.active {
        display: block;
    }

    /* Map Styles */
    #devices-map {
        width: 100%;
        height: 500px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
    }

    .map-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 400px;
        background: var(--surface-hover);
        border-radius: var(--radius-lg);
        border: 2px dashed var(--border);
        text-align: center;
        padding: 40px;
    }

    .map-empty-state svg {
        width: 64px;
        height: 64px;
        color: var(--text-muted);
        margin-bottom: 16px;
    }

    .map-empty-state h3 {
        font-size: 1.25rem;
        color: var(--text-primary);
        margin-bottom: 8px;
    }

    .map-empty-state p {
        color: var(--text-muted);
        max-width: 400px;
    }

    .map-stats {
        display: flex;
        gap: 20px;
        margin-bottom: 16px;
        padding: 16px;
        background: var(--surface-hover);
        border-radius: var(--radius-md);
    }

    .map-stat {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .map-stat-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-subtle);
        border-radius: 50%;
    }

    .map-stat-icon svg {
        width: 18px;
        height: 18px;
        color: var(--primary);
    }

    .map-stat-value {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .map-stat-label {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .leaflet-popup-content {
        direction: rtl;
        text-align: right;
    }

    .device-popup {
        min-width: 180px;
    }

    .device-popup-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
    }

    .device-popup-platform {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .device-popup-platform.ios {
        background: #1C1C1E;
        color: white;
    }

    .device-popup-platform.android {
        background: #34A853;
        color: white;
    }

    .device-popup-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        font-size: 0.875rem;
    }

    .device-popup-label {
        color: #666;
    }

    .device-popup-value {
        font-weight: 600;
        color: #333;
    }

    .device-id-cell {
        font-family: 'Monaco', 'Consolas', monospace;
        font-size: 0.8125rem;
        color: var(--text-muted);
        background: var(--surface-hover);
        padding: 4px 8px;
        border-radius: 4px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .platform-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .platform-ios {
        background: linear-gradient(135deg, #1C1C1E 0%, #3A3A3C 100%);
        color: white;
    }

    .platform-android {
        background: linear-gradient(135deg, #34A853 0%, #4CAF50 100%);
        color: white;
    }

    .user-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .user-registered {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        color: white;
    }

    .user-guest {
        background: var(--surface-hover);
        color: var(--text-secondary);
        border: 1px solid var(--border);
    }

    .location-cell {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .location-flag {
        font-size: 1.25rem;
    }

    .donation-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .donation-count {
        font-weight: 600;
        color: var(--secondary);
    }

    .donation-amount {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .time-ago {
        font-size: 0.8125rem;
        color: var(--text-muted);
    }

    .charity-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: var(--primary-subtle);
        color: var(--primary);
        border-radius: 6px;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .location-breakdown {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .location-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--surface-hover);
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        transition: all var(--transition-fast);
    }

    .location-item:hover {
        border-color: var(--primary);
        background: var(--surface);
    }

    .location-name {
        font-weight: 500;
        color: var(--text-primary);
    }

    .location-count {
        background: var(--primary);
        color: white;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 12px;
    }

    .search-box {
        position: relative;
        margin-bottom: 20px;
    }

    .search-box input {
        padding-right: 44px;
    }

    .search-box svg {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: var(--text-muted);
    }
</style>
@endsection

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="page-header-content">
        <h1 class="page-title">
            <div class="page-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                </svg>
            </div>
            الأجهزة والمستخدمين
        </h1>
        <p class="page-subtitle">عرض وإدارة جميع الأجهزة المسجلة وبيانات المستخدمين</p>
    </div>

    <div class="charity-selector">
        <span class="charity-selector-label">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
            </svg>
            الجمعية
        </span>
        <select onchange="window.location.href='{{ route('devices.index') }}?charity=' + this.value">
            <option value="all" {{ ($selectedCharity ?? 'all') === 'all' ? 'selected' : '' }}>جميع الجمعيات</option>
            @foreach($charities ?? [] as $charity)
                <option value="{{ $charity }}" {{ ($selectedCharity ?? '') === $charity ? 'selected' : '' }}>
                    {{ $charityNames[$charity] ?? $charity }}
                </option>
            @endforeach
        </select>
    </div>
</div>

<!-- Statistics -->
<div class="stats-grid">
    <div class="stat-card" style="--stat-color: #3B82F6; --stat-bg: rgba(59, 130, 246, 0.1);">
        <div class="stat-icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px; height: 24px; color: #3B82F6;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['total_devices']) }}</div>
        <div class="stat-label">إجمالي الأجهزة</div>
    </div>
    <div class="stat-card" style="--stat-color: #10B981; --stat-bg: rgba(16, 185, 129, 0.1);">
        <div class="stat-icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px; height: 24px; color: #10B981;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['total_users']) }}</div>
        <div class="stat-label">المستخدمين المسجلين</div>
    </div>
    <div class="stat-card" style="--stat-color: #555555; --stat-bg: rgba(85, 85, 85, 0.1);">
        <div class="stat-icon">
            <!-- Apple Logo SVG -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 22px; height: 22px; fill: #555555;">
                <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['ios_devices']) }}</div>
        <div class="stat-label">أجهزة iOS</div>
    </div>
    <div class="stat-card" style="--stat-color: #3DDC84; --stat-bg: rgba(61, 220, 132, 0.1);">
        <div class="stat-icon">
            <!-- Android Logo SVG -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="width: 24px; height: 24px; fill: #3DDC84;">
                <path d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55"/>
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['android_devices']) }}</div>
        <div class="stat-label">أجهزة Android</div>
    </div>
    <div class="stat-card" style="--stat-color: #F59E0B; --stat-bg: rgba(245, 158, 11, 0.1);">
        <div class="stat-icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px; height: 24px; color: #F59E0B;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['donated_devices']) }}</div>
        <div class="stat-label">متبرعين</div>
    </div>
    <div class="stat-card" style="--stat-color: #8B5CF6; --stat-bg: rgba(139, 92, 246, 0.1);">
        <div class="stat-icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px; height: 24px; color: #8B5CF6;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['total_donations'], 0) }}</div>
        <div class="stat-label">إجمالي التبرعات (ر.س)</div>
    </div>
</div>

<!-- View Tabs -->
<div class="view-tabs">
    <button class="view-tab active" onclick="switchView('list')">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
        </svg>
        قائمة
    </button>
    <button class="view-tab" onclick="switchView('map')">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
        </svg>
        خريطة
    </button>
</div>

<!-- List View -->
<div class="view-content active" id="list-view">
<div class="card">
    <div class="card-header">
        <h2 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
            </svg>
            قائمة الأجهزة
        </h2>
    </div>
    <div class="card-body">
        <!-- Search -->
        <div class="search-box">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
            <input type="text" class="form-control" id="device-search" placeholder="البحث في الأجهزة..." onkeyup="filterDevices()">
        </div>

        <div class="table-wrapper">
            <table class="table" id="devices-table">
                <thead>
                    <tr>
                        <th>معرف الجهاز</th>
                        <th>الجمعية</th>
                        <th>المنصة</th>
                        <th>المستخدم</th>
                        <th>الهاتف</th>
                        <th>الموقع</th>
                        <th>التبرعات</th>
                        <th>آخر نشاط</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($devices as $device)
                        <tr class="device-row" data-search="{{ strtolower($device->device_id . ' ' . ($device->user_id ?? '') . ' ' . ($device->phone ?? '')) }}">
                            <td>
                                <span class="device-id-cell" title="{{ $device->device_id }}">
                                    {{ substr($device->device_id, 0, 12) }}...
                                </span>
                            </td>
                            <td>
                                <span class="charity-badge">{{ $charityNames[$device->charity_id] ?? $device->charity_id }}</span>
                            </td>
                            <td>
                                @if($device->platform === 'ios')
                                    <span class="platform-badge platform-ios">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 14px; height: 14px; fill: white;">
                                            <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
                                        </svg>
                                        iOS
                                    </span>
                                @else
                                    <span class="platform-badge platform-android">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="width: 16px; height: 16px; fill: white;">
                                            <path d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55"/>
                                        </svg>
                                        Android
                                    </span>
                                @endif
                            </td>
                            <td>
                                @if($device->user_id)
                                    <span class="user-badge user-registered">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 14px; height: 14px;">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                        </svg>
                                        {{ $device->user_id }}
                                    </span>
                                @else
                                    <span class="user-badge user-guest">زائر</span>
                                @endif
                            </td>
                            <td>
                                @if($device->phone)
                                    <span style="font-family: monospace; direction: ltr;">{{ $device->phone }}</span>
                                @else
                                    <span style="color: var(--text-muted);">-</span>
                                @endif
                            </td>
                            <td>
                                @if($device->country || $device->city)
                                    <div class="location-cell" title="{{ $device->city ?? '' }} {{ $device->region ?? '' }} {{ $device->country ?? '' }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 18px; height: 18px; color: var(--primary);">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                                        </svg>
                                        <span>
                                            @if($device->city)
                                                {{ $device->city }}
                                                @if($device->country) - {{ getCountryName($device->country, $countryNames) }}@endif
                                            @else
                                                {{ getCountryName($device->country, $countryNames) }}
                                            @endif
                                        </span>
                                    </div>
                                @else
                                    <span style="color: var(--text-muted);">غير محدد</span>
                                @endif
                            </td>
                            <td>
                                @if($device->donation_count > 0)
                                    <div class="donation-info">
                                        <span class="donation-count">{{ $device->donation_count }} تبرعات</span>
                                        <span class="donation-amount">{{ number_format($device->total_donations, 0) }} ر.س</span>
                                    </div>
                                @else
                                    <span class="badge badge-secondary">لم يتبرع</span>
                                @endif
                            </td>
                            <td>
                                <span class="time-ago">
                                    {{ $device->last_active_at ? $device->last_active_at->diffForHumans() : '-' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="empty-state">
                                    <div class="empty-state-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 40px; height: 40px; color: var(--text-muted);">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                                        </svg>
                                    </div>
                                    <h3 class="empty-state-title">لا توجد أجهزة مسجلة</h3>
                                    <p class="empty-state-text">سيظهر هنا الأجهزة عند تسجيلها من التطبيق</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($devices->hasPages())
            <div class="pagination">
                {{ $devices->appends(['charity' => $selectedCharity])->links() }}
            </div>
        @endif
    </div>
</div>
</div><!-- End List View -->

<!-- Map View -->
<div class="view-content" id="map-view">
<div class="card">
    <div class="card-header">
        <h2 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
            </svg>
            خريطة مواقع الأجهزة
        </h2>
    </div>
    <div class="card-body">
        @php
            $devicesWithCoords = \App\Models\Device::whereNotNull('latitude')
                ->whereNotNull('longitude')
                ->when($selectedCharity !== 'all', fn($q) => $q->where('charity_id', $selectedCharity))
                ->get();
        @endphp

        @if($devicesWithCoords->count() > 0)
            <!-- Map Stats -->
            <div class="map-stats">
                <div class="map-stat">
                    <div class="map-stat-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                        </svg>
                    </div>
                    <div>
                        <div class="map-stat-value">{{ $devicesWithCoords->count() }}</div>
                        <div class="map-stat-label">جهاز على الخريطة</div>
                    </div>
                </div>
                <div class="map-stat">
                    <div class="map-stat-icon">
                        <!-- Apple Logo -->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="fill: var(--primary);">
                            <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="map-stat-value">{{ $devicesWithCoords->where('platform', 'ios')->count() }}</div>
                        <div class="map-stat-label">iOS</div>
                    </div>
                </div>
                <div class="map-stat">
                    <div class="map-stat-icon">
                        <!-- Android Logo -->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="fill: var(--primary);">
                            <path d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55"/>
                        </svg>
                    </div>
                    <div>
                        <div class="map-stat-value">{{ $devicesWithCoords->where('platform', 'android')->count() }}</div>
                        <div class="map-stat-label">Android</div>
                    </div>
                </div>
            </div>

            <!-- Map Container -->
            <div id="devices-map"></div>

            @php
                $mapData = $devicesWithCoords->map(function($d) use ($charityNames) {
                    return [
                        'lat' => $d->latitude,
                        'lng' => $d->longitude,
                        'platform' => $d->platform,
                        'city' => $d->city,
                        'country' => $d->country,
                        'charity' => $charityNames[$d->charity_id] ?? $d->charity_id,
                        'user_id' => $d->user_id,
                        'donation_count' => $d->donation_count,
                        'total_donations' => $d->total_donations,
                    ];
                })->values();
            @endphp
            <script>
                var devicesData = @json($mapData);
            </script>
        @else
            <!-- No Coordinates Empty State -->
            <div class="map-empty-state">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                </svg>
                <h3>لا توجد بيانات موقع</h3>
                <p>لم يتم استلام إحداثيات GPS من الأجهزة بعد. سيتم عرض مواقع الأجهزة على الخريطة عندما يرسل التطبيق بيانات الموقع (latitude/longitude).</p>
            </div>
        @endif
    </div>
</div>
</div><!-- End Map View -->

<!-- Location Breakdown -->
@if(!empty($locations['countries']))
<div class="card" style="margin-top: 24px;">
    <div class="card-header">
        <h2 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
            </svg>
            توزيع المستخدمين حسب الدولة
        </h2>
    </div>
    <div class="card-body">
        <div class="location-breakdown">
            @foreach($locations['countries'] as $country => $count)
                <div class="location-item">
                    <span class="location-name">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 16px; height: 16px; color: var(--primary); vertical-align: middle; margin-left: 6px;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                        </svg>
                        {{ $country }}
                    </span>
                    <span class="location-count">{{ $count }}</span>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif
@endsection

@section('scripts')
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    // Global map reference
    var devicesMap = null;

    // View switching
    function switchView(view) {
        // Update tabs
        document.querySelectorAll('.view-tab').forEach(tab => {
            tab.classList.remove('active');
        });
        event.target.closest('.view-tab').classList.add('active');

        // Update content
        document.querySelectorAll('.view-content').forEach(content => {
            content.classList.remove('active');
        });
        document.getElementById(view + '-view').classList.add('active');

        // Initialize or refresh map when switching to map view
        if (view === 'map' && typeof devicesData !== 'undefined' && devicesData.length > 0) {
            if (!window.mapInitialized) {
                // Small delay to ensure container is fully visible before initializing
                setTimeout(function() {
                    initMap();
                }, 100);
            } else if (devicesMap) {
                // Map already initialized, just refresh the size
                setTimeout(function() {
                    devicesMap.invalidateSize();
                }, 100);
            }
        }
    }

    // Device search filter
    function filterDevices() {
        const searchValue = document.getElementById('device-search').value.toLowerCase();
        const rows = document.querySelectorAll('.device-row');

        rows.forEach(row => {
            const searchData = row.getAttribute('data-search');
            if (searchData.includes(searchValue)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    // Initialize map
    function initMap() {
        if (typeof devicesData === 'undefined' || devicesData.length === 0) return;

        window.mapInitialized = true;

        // Create map centered on Saudi Arabia
        devicesMap = L.map('devices-map').setView([24.7136, 46.6753], 5);

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(devicesMap);

        // Force map to recalculate size after tiles load
        setTimeout(function() {
            devicesMap.invalidateSize();
        }, 200);

        // Custom icons
        var iosIcon = L.divIcon({
            className: 'custom-marker',
            html: '<div style="background: #1C1C1E; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.3);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 16px; height: 16px; fill: white;"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg></div>',
            iconSize: [32, 32],
            iconAnchor: [16, 16]
        });

        var androidIcon = L.divIcon({
            className: 'custom-marker',
            html: '<div style="background: #34A853; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.3);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="width: 16px; height: 16px; fill: white;"><path d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55"/></svg></div>',
            iconSize: [32, 32],
            iconAnchor: [16, 16]
        });

        // Add markers
        var bounds = [];
        devicesData.forEach(function(device) {
            if (device.lat && device.lng) {
                var icon = device.platform === 'ios' ? iosIcon : androidIcon;
                var marker = L.marker([device.lat, device.lng], { icon: icon }).addTo(devicesMap);

                // Create popup content
                var popupHtml = '<div class="device-popup">' +
                    '<div class="device-popup-header">' +
                    '<span class="device-popup-platform ' + device.platform + '">' + (device.platform === 'ios' ? 'iOS' : 'Android') + '</span>' +
                    '<span>' + device.charity + '</span>' +
                    '</div>' +
                    '<div class="device-popup-row"><span class="device-popup-label">الموقع:</span> <span class="device-popup-value">' + (device.city || '-') + ', ' + (device.country || '-') + '</span></div>' +
                    '<div class="device-popup-row"><span class="device-popup-label">المستخدم:</span> <span class="device-popup-value">' + (device.user_id ? 'مسجل #' + device.user_id : 'زائر') + '</span></div>' +
                    '<div class="device-popup-row"><span class="device-popup-label">التبرعات:</span> <span class="device-popup-value">' + (device.donation_count > 0 ? device.donation_count + ' (' + device.total_donations + ' ر.س)' : 'لم يتبرع') + '</span></div>' +
                    '</div>';

                marker.bindPopup(popupHtml);
                bounds.push([device.lat, device.lng]);
            }
        });

        // Fit map to markers
        if (bounds.length > 0) {
            devicesMap.fitBounds(bounds, { padding: [50, 50] });
        }
    }
</script>
@endsection