@extends('layouts.dashboard')

@section('title', 'إرسال الإشعارات')

@section('styles')
<style>
    .filter-card {
        background: var(--surface-hover);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 20px;
        margin-bottom: 24px;
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .filter-summary {
        margin-top: 16px;
        padding: 12px 16px;
        background: var(--primary-subtle);
        border-radius: var(--radius-sm);
        color: var(--primary-dark);
        font-weight: 500;
    }

    .user-list {
        max-height: 300px;
        overflow-y: auto;
        border: 2px solid var(--border);
        border-radius: var(--radius-md);
        padding: 16px;
        background: var(--surface);
    }

    .user-list-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    .user-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        transition: background var(--transition-fast);
        cursor: pointer;
    }

    .user-item:hover {
        background: var(--surface-hover);
    }

    .user-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
    }

    .user-item label {
        cursor: pointer;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .page-select {
        margin-top: 8px;
    }

    .page-select optgroup {
        font-weight: 700;
        color: var(--text-primary);
        padding: 8px 0;
    }

    .page-select option {
        padding: 8px 12px;
        font-weight: 400;
    }

    .selected-count {
        background: var(--primary-subtle);
        color: var(--primary);
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
    }

    /* Swipeable Pages Container */
    .pages-wrapper {
        overflow: hidden;
        position: relative;
    }

    .pages-container {
        display: flex;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    .tab-pane {
        min-width: 100%;
        flex-shrink: 0;
        padding: 24px;
        opacity: 0.3;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .tab-pane.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Tabs Header with Navigation */
    .tabs-header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 24px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .tabs-nav {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .tab-nav-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid var(--border);
        background: var(--surface);
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
    }

    .tab-nav-btn:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-subtle);
    }

    .tab-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

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

    .tabs-indicator {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        min-width: 50px;
        text-align: center;
    }

    /* Improved Tab Buttons */
    .tabs {
        display: flex;
        gap: 8px;
        padding: 16px 24px;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        background: var(--surface-hover);
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        background: transparent;
        border: 2px solid transparent;
        border-radius: var(--radius-md);
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--transition-fast);
        white-space: nowrap;
        font-family: inherit;
        min-width: fit-content;
    }

    .tab-btn svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .tab-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
    }

    .tab-title {
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .tab-subtitle {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 400;
    }

    .tab-btn:hover {
        background: var(--surface);
        color: var(--text-primary);
    }

    .tab-btn.active {
        background: var(--surface);
        color: var(--primary);
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
    }

    .tab-btn.active .tab-subtitle {
        color: var(--primary-light);
    }

    .section-header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
    }

    .section-header > svg {
        width: 32px;
        height: 32px;
        color: var(--primary);
        flex-shrink: 0;
        margin-top: 4px;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 4px 0;
    }

    .section-subtitle {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
    }

    /* Info Card */
    .info-card {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
        background: linear-gradient(135deg, var(--primary-subtle) 0%, rgba(93, 63, 211, 0.04) 100%);
        border: 1px solid rgba(93, 63, 211, 0.15);
        border-radius: var(--radius-md);
        margin-bottom: 24px;
    }

    .info-card-icon {
        width: 44px;
        height: 44px;
        background: var(--primary);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .info-card-icon svg {
        width: 22px;
        height: 22px;
        color: white;
    }

    .info-card-content h4 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary-dark);
        margin: 0 0 8px 0;
    }

    .info-card-content p {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.6;
    }

    /* Page Indicator Dots */
    .page-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 20px;
        background: var(--surface-hover);
        border-top: 1px solid var(--border);
    }

    .page-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--border);
        background: transparent;
        cursor: pointer;
        transition: all var(--transition-fast);
        padding: 0;
    }

    .page-dot:hover {
        border-color: var(--primary);
        background: var(--primary-subtle);
    }

    .page-dot.active {
        background: var(--primary);
        border-color: var(--primary);
        transform: scale(1.2);
    }

    .warning-banner {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.3);
        border-radius: var(--radius-md);
        margin-bottom: 24px;
    }

    .warning-banner svg {
        width: 24px;
        height: 24px;
        color: #D97706;
        flex-shrink: 0;
    }

    .warning-banner-content {
        flex: 1;
    }

    .warning-banner-title {
        font-weight: 600;
        color: #92400E;
        margin-bottom: 4px;
    }

    .warning-banner-text {
        font-size: 0.875rem;
        color: #B45309;
    }
</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="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                </svg>
            </div>
            @if(($selectedCharity ?? 'all') !== 'all')
                إشعارات {{ $charityNames[$selectedCharity] ?? $selectedCharity }}
            @else
                إرسال الإشعارات
            @endif
        </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="changeCharity(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" id="stats-container" data-ios="{{ $stats['ios_devices'] ?? 0 }}" data-android="{{ $stats['android_devices'] ?? 0 }}" data-total="{{ $stats['total_devices'] ?? 0 }}">
    <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'] ?? 0) }}</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, 0) }}</div>
        <div class="stat-label">التبرعات (ر.س)</div>
    </div>
</div>

<!-- Alerts -->
@if(session('success'))
    <div class="alert alert-success">
        <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 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{ session('success') }}</span>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger">
        <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 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
        </svg>
        <span>{{ session('error') }}</span>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger">
        <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 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
        </svg>
        <div>
            <ul style="margin: 0; padding-right: 16px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<!-- Main Card with Tabs -->
<div class="card">
    <!-- Tab Navigation Header -->
    <div class="tabs-header">
        <div class="tabs-nav">
            <button class="tab-nav-btn" onclick="navigateTabs('prev')" id="tab-prev-btn" disabled>
                <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="M8.25 4.5l7.5 7.5-7.5 7.5" />
                </svg>
            </button>
            <div class="tabs-indicator">
                <span id="current-tab-num">1</span> / <span id="total-tabs">4</span>
            </div>
            <button class="tab-nav-btn" onclick="navigateTabs('next')" id="tab-next-btn">
                <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.75 19.5L8.25 12l7.5-7.5" />
                </svg>
            </button>
        </div>
    </div>

    <!-- Tabs -->
    <div class="tabs" id="tabs-container">
        <button class="tab-btn active" data-tab="single" data-index="0">
            <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>
            <span class="tab-text">
                <span class="tab-title">جهاز محدد</span>
                <span class="tab-subtitle">إرسال برمز FCM Token</span>
            </span>
        </button>
        <button class="tab-btn" data-tab="select" data-index="1">
            <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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
            </svg>
            <span class="tab-text">
                <span class="tab-title">اختيار مستخدمين</span>
                <span class="tab-subtitle">تحديد من القائمة</span>
            </span>
        </button>
        <button class="tab-btn" data-tab="all" data-index="2">
            <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="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
            </svg>
            <span class="tab-text">
                <span class="tab-title">بث للجميع</span>
                <span class="tab-subtitle">جميع الأجهزة المسجلة</span>
            </span>
        </button>
        <button class="tab-btn" data-tab="topic" data-index="3">
            <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="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
            </svg>
            <span class="tab-text">
                <span class="tab-title">قناة الاشتراك</span>
                <span class="tab-subtitle">إرسال لمشتركي قناة FCM</span>
            </span>
        </button>
    </div>

    <!-- Swipeable Pages Container -->
    <div class="pages-wrapper">
        <div class="pages-container" id="pages-container">
            <!-- Page 1: Single Device by FCM Token -->
            <div class="tab-pane active" id="tab-single">
        <div class="section-header">
            <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>
                <h2 class="section-title">إرسال لجهاز محدد</h2>
                <p class="section-subtitle">أدخل رمز FCM Token الخاص بالجهاز المستهدف</p>
            </div>
        </div>

        <form action="{{ route('notifications.sendToDevice') }}" method="POST">
            @csrf
            <input type="hidden" name="charity_id" value="{{ $selectedCharity ?? 'all' }}">

            <div class="form-group">
                <label class="form-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="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
                    </svg>
                    رمز الجهاز (FCM Token) <span class="required">*</span>
                </label>
                <input type="text" name="device_token" class="form-control" placeholder="أدخل رمز FCM للجهاز" required>
            </div>

            @include('notifications.partials.notification-fields')

            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg">
                    <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="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                    </svg>
                    إرسال الإشعار
                </button>
            </div>
        </form>
    </div>

            <!-- Page 2: Select Users -->
            <div class="tab-pane" id="tab-select">
        <div class="section-header">
            <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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
            </svg>
            <h2 class="section-title">إرسال إلى مستخدمين محددين</h2>
        </div>

        <form action="{{ route('notifications.sendToUsers') }}" method="POST" id="select-users-form">
            @csrf
            <input type="hidden" name="charity_id" value="{{ $selectedCharity ?? 'all' }}">

            <div class="form-group">
                <label class="form-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="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>
                    اختيار المستخدمين
                    @if(count($users) > 0)
                        <span class="badge badge-primary" style="margin-right: 8px;">{{ count($users) }} مستخدم</span>
                    @endif
                </label>

                @if(count($users) > 0)
                    <input type="text" id="user-search" class="form-control" placeholder="البحث عن مستخدم..." onkeyup="filterUsers()" style="margin-bottom: 12px;">

                    <div class="user-list">
                        <div class="user-list-header">
                            <button type="button" class="btn btn-secondary btn-sm" onclick="selectAllUsers()">تحديد الكل</button>
                            <button type="button" class="btn btn-secondary btn-sm" onclick="deselectAllUsers()">إلغاء التحديد</button>
                            <span class="selected-count" id="selected-count">تم تحديد: 0</span>
                        </div>
                        <div id="users-list">
                            @foreach($users as $user)
                                <div class="user-item" data-user-id="{{ strtolower($user) }}">
                                    <input class="user-checkbox" type="checkbox" name="user_ids[]" value="{{ $user }}" id="user_{{ $loop->index }}" onchange="updateSelectedCount()">
                                    <label for="user_{{ $loop->index }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 16px; height: 16px;">
                                            <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>
                                        {{ $user }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <div class="alert alert-warning">
                        <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 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                        لا يوجد مستخدمين مسجلين حاليا. يرجى تسجيل الأجهزة أولا من التطبيق.
                    </div>
                @endif
            </div>

            @include('notifications.partials.notification-fields')

            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg">
                    <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="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                    </svg>
                    إرسال إلى المستخدمين المحددين
                </button>
            </div>
        </form>
            </div>

            <!-- Page 3: Broadcast to All Users -->
            <div class="tab-pane" id="tab-all">
        <div class="section-header">
            <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="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
            </svg>
            <h2 class="section-title">بث إلى جميع المستخدمين</h2>
        </div>

        <div class="warning-banner">
            <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 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
            <div class="warning-banner-content">
                <div class="warning-banner-title">تنبيه هام</div>
                <div class="warning-banner-text">سيتم إرسال هذا الإشعار إلى جميع المستخدمين المسجلين. يرجى التأكد من المحتوى قبل الإرسال.</div>
            </div>
        </div>

        <form action="{{ route('notifications.sendFiltered') }}" method="POST" onsubmit="return confirmFilteredSend();">
            @csrf
            <input type="hidden" name="charity_id" value="{{ $selectedCharity ?? 'all' }}">

            <!-- Filters -->
            <div class="filter-card">
                <label class="form-label" style="margin-bottom: 16px;">
                    <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 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
                    </svg>
                    فلاتر الإرسال (اختياري)
                </label>

                <div class="filter-grid">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">نوع الجهاز</label>
                        <select name="device_type" class="form-select" id="device-type-filter" onchange="updateFilteredCount()">
                            <option value="">الكل (iOS + Android)</option>
                            <option value="ios">iOS فقط ({{ $stats['ios_devices'] }})</option>
                            <option value="android">Android فقط ({{ $stats['android_devices'] }})</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">حالة التبرع</label>
                        <select name="has_donated" class="form-select">
                            <option value="">الكل</option>
                            <option value="1">تبرعوا ({{ $stats['donated_devices'] ?? 0 }})</option>
                            <option value="0">لم يتبرعوا</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">الدولة</label>
                        <select name="country" class="form-select">
                            <option value="">جميع الدول</option>
                            @foreach($locations['countries'] ?? [] as $country => $count)
                                <option value="{{ $country }}">{{ $country }} ({{ $count }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="form-label">الحد الأدنى للتبرعات</label>
                        <input type="number" name="min_donations" class="form-control" placeholder="0" min="0">
                    </div>
                </div>

                <div id="filter-summary" class="filter-summary" style="display: none;">
                    <strong>سيتم الإرسال إلى:</strong> <span id="filter-description"></span>
                </div>
            </div>

            @include('notifications.partials.notification-fields')

            <div class="form-actions">
                <button type="submit" class="btn btn-danger btn-lg">
                    <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="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
                    </svg>
                    بث إلى جميع المستخدمين
                </button>
            </div>
            </form>
            </div>

            <!-- Page 4: Subscription Channel (Topic) -->
            <div class="tab-pane" id="tab-topic">
        <div class="section-header">
            <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="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
            </svg>
            <div>
                <h2 class="section-title">إرسال لقناة اشتراك</h2>
                <p class="section-subtitle">أرسل إشعار لجميع المشتركين في قناة FCM Topic معينة</p>
            </div>
        </div>

        <!-- Topic Info Card -->
        <div class="info-card">
            <div class="info-card-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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                </svg>
            </div>
            <div class="info-card-content">
                <h4>ما هي قناة الاشتراك؟</h4>
                <p>قناة الاشتراك (Topic) هي طريقة لتجميع الأجهزة التي تشترك في نفس الاهتمام. عند إرسال إشعار لقناة، يصل لجميع الأجهزة المشتركة فيها تلقائيا.</p>
            </div>
        </div>

        <form action="{{ route('notifications.sendToTopic') }}" method="POST">
            @csrf
            <input type="hidden" name="charity_id" value="{{ $selectedCharity ?? 'all' }}">

            <div class="form-group">
                <label class="form-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="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
                    </svg>
                    اسم القناة <span class="required">*</span>
                </label>
                <select name="topic" class="form-select" required>
                    <option value="">اختر قناة الاشتراك...</option>
                    <option value="all_charities">all_charities - جميع الجمعيات</option>
                    <option value="charity_livemaster">charity_livemaster - نمو</option>
                    <option value="charity_refaq">charity_refaq - رفق</option>
                    <option value="charity_atff">charity_atff - عطف</option>
                    <option value="charity_beraldarb">charity_beraldarb - البر بالدرب</option>
                    <option value="charity_numotwo">charity_numotwo - اختبار 2</option>
                </select>
                <span class="form-hint">
                    <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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                    </svg>
                    يمكنك أيضا إدخال اسم قناة مخصصة مثل: user_{userId}
                </span>
            </div>

            @include('notifications.partials.notification-fields')

            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg">
                    <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="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                    </svg>
                    إرسال إلى الموضوع
                </button>
                </div>
            </form>
            </div>
        </div><!-- End pages-container -->
    </div><!-- End pages-wrapper -->

    <!-- Page Indicator Dots -->
    <div class="page-dots">
        <button class="page-dot active" data-index="0" onclick="switchToTab(0)"></button>
        <button class="page-dot" data-index="1" onclick="switchToTab(1)"></button>
        <button class="page-dot" data-index="2" onclick="switchToTab(2)"></button>
        <button class="page-dot" data-index="3" onclick="switchToTab(3)"></button>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Tab state
    let currentTabIndex = 0;
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const pageDots = document.querySelectorAll('.page-dot');
    const pagesContainer = document.getElementById('pages-container');
    const totalTabs = tabButtons.length;

    // Tab switching with slide animation
    function switchToTab(index) {
        if (index < 0 || index >= totalTabs) return;

        currentTabIndex = index;

        // Remove active from all tabs, panes, and dots
        tabButtons.forEach(t => t.classList.remove('active'));
        tabPanes.forEach(p => p.classList.remove('active'));
        pageDots.forEach(d => d.classList.remove('active'));

        // Add active to selected tab, pane, and dot
        tabButtons[index].classList.add('active');
        tabPanes[index].classList.add('active');
        pageDots[index].classList.add('active');

        // Slide to the selected page (RTL: use positive translateX)
        const translateX = index * 100;
        pagesContainer.style.transform = `translateX(${translateX}%)`;

        // Scroll tab button into view
        tabButtons[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });

        // Update navigation
        updateNavigation();
    }

    function updateNavigation() {
        const prevBtn = document.getElementById('tab-prev-btn');
        const nextBtn = document.getElementById('tab-next-btn');
        const currentNum = document.getElementById('current-tab-num');

        prevBtn.disabled = currentTabIndex === 0;
        nextBtn.disabled = currentTabIndex === totalTabs - 1;
        currentNum.textContent = currentTabIndex + 1;
    }

    function navigateTabs(direction) {
        if (direction === 'next' && currentTabIndex < totalTabs - 1) {
            switchToTab(currentTabIndex + 1);
        } else if (direction === 'prev' && currentTabIndex > 0) {
            switchToTab(currentTabIndex - 1);
        }
    }

    // Tab button click
    tabButtons.forEach((btn, index) => {
        btn.addEventListener('click', () => switchToTab(index));
    });

    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            navigateTabs('next');
        } else if (e.key === 'ArrowRight') {
            navigateTabs('prev');
        }
    });

    // Touch swipe support with visual feedback
    let touchStartX = 0;
    let touchCurrentX = 0;
    let isSwiping = false;
    const pagesWrapper = document.querySelector('.pages-wrapper');

    pagesWrapper.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
        isSwiping = true;
        pagesContainer.style.transition = 'none';
    }, { passive: true });

    pagesWrapper.addEventListener('touchmove', (e) => {
        if (!isSwiping) return;
        touchCurrentX = e.changedTouches[0].screenX;
        const diff = touchStartX - touchCurrentX;
        const baseTranslate = currentTabIndex * 100;
        const swipePercent = (diff / pagesWrapper.offsetWidth) * 100;

        // Limit swipe at edges
        let newTranslate = baseTranslate + swipePercent;
        if (newTranslate < 0) newTranslate = 0;
        if (newTranslate > (totalTabs - 1) * 100) newTranslate = (totalTabs - 1) * 100;

        pagesContainer.style.transform = `translateX(${newTranslate}%)`;
    }, { passive: true });

    pagesWrapper.addEventListener('touchend', (e) => {
        if (!isSwiping) return;
        isSwiping = false;
        pagesContainer.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)';

        const touchEndX = e.changedTouches[0].screenX;
        const diff = touchStartX - touchEndX;
        const swipeThreshold = pagesWrapper.offsetWidth * 0.2; // 20% of width

        if (Math.abs(diff) > swipeThreshold) {
            if (diff > 0 && currentTabIndex < totalTabs - 1) {
                // Swipe left - next page
                switchToTab(currentTabIndex + 1);
            } else if (diff < 0 && currentTabIndex > 0) {
                // Swipe right - prev page
                switchToTab(currentTabIndex - 1);
            } else {
                // Bounce back
                switchToTab(currentTabIndex);
            }
        } else {
            // Bounce back
            switchToTab(currentTabIndex);
        }
    }, { passive: true });

    // Initialize navigation state
    updateNavigation();

    // Set initial position
    pagesContainer.style.transform = `translateX(0%)`;

    // Change charity
    function changeCharity(charityId) {
        window.location.href = '{{ route("notifications.index") }}?charity=' + charityId;
    }

    // Get device statistics
    const statsContainer = document.getElementById('stats-container');
    const deviceStats = {
        ios: parseInt(statsContainer?.dataset?.ios ?? '0', 10),
        android: parseInt(statsContainer?.dataset?.android ?? '0', 10),
        total: parseInt(statsContainer?.dataset?.total ?? '0', 10)
    };

    // User selection functions
    function selectAllUsers() {
        document.querySelectorAll('.user-checkbox').forEach(cb => cb.checked = true);
        updateSelectedCount();
    }

    function deselectAllUsers() {
        document.querySelectorAll('.user-checkbox').forEach(cb => cb.checked = false);
        updateSelectedCount();
    }

    function updateSelectedCount() {
        const count = document.querySelectorAll('.user-checkbox:checked').length;
        const el = document.getElementById('selected-count');
        if (el) el.textContent = 'تم تحديد: ' + count;
    }

    function filterUsers() {
        const search = document.getElementById('user-search').value.toLowerCase();
        document.querySelectorAll('.user-item').forEach(item => {
            const userId = item.getAttribute('data-user-id');
            item.style.display = userId.includes(search) ? '' : 'none';
        });
    }

    // Filter count update
    function updateFilteredCount() {
        const deviceType = document.getElementById('device-type-filter').value;
        const summary = document.getElementById('filter-summary');
        const description = document.getElementById('filter-description');

        let text = '';
        if (deviceType === 'ios') {
            text = deviceStats.ios + ' جهاز iOS';
        } else if (deviceType === 'android') {
            text = deviceStats.android + ' جهاز Android';
        } else {
            text = deviceStats.total + ' جهاز (iOS + Android)';
        }

        if (deviceType) {
            description.textContent = text;
            summary.style.display = 'block';
        } else {
            summary.style.display = 'none';
        }
    }

    // Confirm filtered send
    function confirmFilteredSend() {
        const deviceType = document.getElementById('device-type-filter').value;
        let message = 'هل أنت متأكد من إرسال هذا الإشعار إلى ';

        if (deviceType === 'ios') {
            message += 'جميع أجهزة iOS';
        } else if (deviceType === 'android') {
            message += 'جميع أجهزة Android';
        } else {
            message += 'جميع الأجهزة';
        }

        message += '؟';
        return confirm(message);
    }

    // Form validation
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('select-users-form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const count = document.querySelectorAll('.user-checkbox:checked').length;
                if (count === 0) {
                    e.preventDefault();
                    alert('يرجى اختيار مستخدم واحد على الأقل');
                    return false;
                }
            });
        }
    });
</script>
@endsection