@extends('admin.layout')

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800">Push Notifications</h1>
    <p class="text-gray-600 mt-1">Send push notifications to your app users</p>
</div>

{{-- Success/Error Messages --}}
@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-lg shadow-sm flex items-center">
        <svg class="w-6 h-6 mr-3" style="fill: #059669;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-medium">{{ session('success') }}</span>
    </div>
@endif

@if(session('error'))
    <div class="mb-6 bg-red-50 border-l-4 border-red-500 text-red-800 px-6 py-4 rounded-lg shadow-sm flex items-center">
        <svg class="w-6 h-6 mr-3" style="fill: #dc2626;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-medium">{{ session('error') }}</span>
    </div>
@endif

{{-- Statistics Cards --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4" style="border-color: #3b82f6;">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Total Users</p>
                <h3 class="text-3xl font-bold text-gray-800">{{ number_format($totalUsers) }}</h3>
            </div>
            <div style="background-color: #3b82f6;" class="p-3 rounded-full">
                <svg class="w-6 h-6" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-md p-6 border-l-4" style="border-color: #10b981;">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Can Receive Notifications</p>
                <h3 class="text-3xl font-bold text-gray-800">{{ number_format($usersWithTokens) }}</h3>
            </div>
            <div style="background-color: #10b981;" class="p-3 rounded-full">
                <svg class="w-6 h-6" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-md p-6 border-l-4" style="border-color: #f59e0b;">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Without Push Tokens</p>
                <h3 class="text-3xl font-bold text-gray-800">{{ number_format($usersWithoutTokens) }}</h3>
            </div>
            <div style="background-color: #f59e0b;" class="p-3 rounded-full">
                <svg class="w-6 h-6" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Notification Form --}}
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="px-6 py-4">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                    </svg>
                    Compose Notification
                </h2>
            </div>

            <form action="{{ route('notifications.send') }}" method="POST" id="notificationForm" class="p-6">
                @csrf

                {{-- Title --}}
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">Notification Title *</label>
                    <input type="text"
                           name="title"
                           id="title"
                           maxlength="100"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                           placeholder="Enter notification title"
                           required
                           oninput="updatePreview()">
                    <div class="flex justify-between mt-1">
                        <span class="text-xs text-gray-500">Max 100 characters (Expo limit)</span>
                        <span class="text-xs text-gray-500"><span id="titleCount">0</span>/100</span>
                    </div>
                </div>

                {{-- Message --}}
                <div class="mb-6">
                    <label for="body" class="block text-sm font-medium text-gray-700 mb-2">Message *</label>
                    <textarea name="body"
                              id="body"
                              rows="5"
                              maxlength="100"
                              class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                              placeholder="Enter your notification message"
                              required
                              oninput="updatePreview()"></textarea>
                    <div class="flex justify-between mt-1">
                        <span class="text-xs text-gray-500">Max 100 characters (Expo limit)</span>
                        <span class="text-xs text-gray-500"><span id="bodyCount">0</span>/100</span>
                    </div>
                </div>

                {{-- User Selection --}}
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Target Audience *</label>
                    <div class="space-y-3">
                        <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                            <input type="radio" name="audience_type" value="all" checked onchange="toggleUserSelect()" class="w-4 h-4 text-blue-600">
                            <div class="ml-3">
                                <span class="font-medium text-gray-900">All Users</span>
                                <p class="text-sm text-gray-500">Send to all {{ number_format($usersWithTokens) }} users with push tokens</p>
                            </div>
                        </label>
                        <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                            <input type="radio" name="audience_type" value="specific" onchange="toggleUserSelect()" class="w-4 h-4 text-blue-600">
                            <div class="ml-3">
                                <span class="font-medium text-gray-900">Specific Users</span>
                                <p class="text-sm text-gray-500">Select individual users to send notifications</p>
                            </div>
                        </label>
                    </div>

                    <div id="userSelectContainer" class="mt-4 hidden">
                        <select name="user_ids[]" id="userSelect" multiple size="8" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">
                                    {{ $user->first_name }} {{ $user->last_name }} - {{ $user->email }}
                                </option>
                            @endforeach
                        </select>
                        <p class="text-xs text-gray-500 mt-2">Hold Ctrl/Cmd to select multiple users</p>
                    </div>
                </div>

                {{-- Submit Button --}}
                <div class="flex space-x-4">
                    <button type="submit" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="flex-1 inline-flex items-center justify-center px-6 py-3 rounded-lg text-white font-semibold shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5">
                        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                        </svg>
                        Send Notification
                    </button>
                    <button type="button" onclick="clearForm()" style="background-color: #6b7280;" class="px-6 py-3 rounded-lg text-white font-semibold shadow-md hover:shadow-lg transition-all duration-200">
                        Clear
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Preview Panel --}}
    <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden sticky top-6">
            <div style="background-color: #1f2937;" class="px-6 py-4">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"></path>
                    </svg>
                    Preview
                </h2>
            </div>

            <div class="p-6">
                <p class="text-sm text-gray-600 mb-4">How your notification will appear:</p>

                {{-- Phone Mockup --}}
                <div class="bg-gray-100 rounded-2xl p-4 shadow-inner">
                    <div class="bg-white rounded-xl shadow-lg p-4">
                        <div class="flex items-start space-x-3">
                            <div style="background-color: #667eea;" class="p-2 rounded-lg flex-shrink-0">
                                <svg class="w-6 h-6" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs text-gray-500 mb-1">Your App</p>
                                <h3 id="previewTitle" class="font-bold text-gray-900 text-sm mb-1">
                                    Notification Title
                                </h3>
                                <p id="previewBody" class="text-sm text-gray-600">
                                    Your notification message will appear here...
                                </p>
                                <p class="text-xs text-gray-400 mt-2">now</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Delivery Info --}}
                <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                    <h4 class="font-semibold text-sm text-blue-900 mb-2">Delivery Info</h4>
                    <ul class="space-y-2 text-sm text-blue-800">
                        <li class="flex items-center">
                            <svg class="w-4 h-4 mr-2" style="fill: #1e40af;" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            Instant delivery
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 mr-2" style="fill: #1e40af;" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            Push to mobile devices
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 mr-2" style="fill: #1e40af;" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            Shows in notification tray
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updatePreview() {
    const title = document.getElementById('title').value || 'Notification Title';
    const body = document.getElementById('body').value || 'Your notification message will appear here...';

    document.getElementById('previewTitle').textContent = title;
    document.getElementById('previewBody').textContent = body;

    document.getElementById('titleCount').textContent = document.getElementById('title').value.length;
    document.getElementById('bodyCount').textContent = document.getElementById('body').value.length;
}

function toggleUserSelect() {
    const audienceType = document.querySelector('input[name="audience_type"]:checked').value;
    const container = document.getElementById('userSelectContainer');
    const userSelect = document.getElementById('userSelect');
    const existingAllInput = document.getElementById('allUsersInput');

    if (audienceType === 'specific') {
        container.classList.remove('hidden');
        userSelect.required = true;
        // Remove the 'all' hidden input if it exists
        if (existingAllInput) {
            existingAllInput.remove();
        }
    } else {
        container.classList.add('hidden');
        userSelect.required = false;
        // Clear any selected users
        userSelect.selectedIndex = -1;
        // Add hidden input for 'all'
        if (!existingAllInput) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'user_ids[]';
            input.value = 'all';
            input.id = 'allUsersInput';
            document.getElementById('notificationForm').appendChild(input);
        }
    }
}

function clearForm() {
    document.getElementById('title').value = '';
    document.getElementById('body').value = '';
    document.querySelector('input[name="audience_type"][value="all"]').checked = true;
    toggleUserSelect();
    updatePreview();
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updatePreview();
    toggleUserSelect();
});
</script>
@endsection