@extends('layouts.admin')
@section('title', 'Push Notifications')
@section('page-title', 'Push Notification Center')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

    {{-- Send Form --}}
    <div class="lg:col-span-2">
        <div class="card p-6 rounded-xl">
            <h3 class="text-white font-bold mb-5">Send Notification</h3>
            <form method="POST" action="{{ route('admin.notifications.send') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Send To</label>
                    <select name="target" id="targetSelect" onchange="toggleTargetField()" required class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                        <option value="all">All Users</option>
                        <option value="user">Specific User (by phone)</option>
                        <option value="tournament">Tournament Players</option>
                    </select>
                </div>

                <div id="targetIdField" class="hidden">
                    <label class="text-slate-400 text-sm mb-1.5 block" id="targetIdLabel">Phone / Tournament</label>
                    <input type="text" name="target_id" placeholder="Enter value..." class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                    <select id="tournamentSelect" name="target_id_select" class="hidden w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                        <option value="">Select tournament</option>
                        @foreach($tournaments as $t)
                        <option value="{{ $t->id }}">{{ $t->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Title</label>
                    <input type="text" name="title" required placeholder="Notification title" maxlength="100"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                    @error('title')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Message Body</label>
                    <textarea name="body" required rows="4" placeholder="Write your notification message..." maxlength="500"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500 resize-none"></textarea>
                    @error('body')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Preview --}}
                <div class="bg-slate-900 rounded-xl p-4 border border-slate-700">
                    <p class="text-slate-500 text-xs mb-2 uppercase tracking-wider">Preview</p>
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-white text-xs font-bold">AX</span>
                        </div>
                        <div>
                            <p class="text-white text-sm font-semibold" id="previewTitle">Notification Title</p>
                            <p class="text-slate-400 text-xs mt-0.5" id="previewBody">Your message will appear here...</p>
                        </div>
                    </div>
                </div>

                <button type="submit" class="w-full btn-primary py-3 font-bold">
                    🔔 Send Notification
                </button>
            </form>
        </div>
    </div>

    {{-- History --}}
    <div class="lg:col-span-3">
        <div class="card rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700">
                <h3 class="text-white font-bold">Notification History</h3>
            </div>
            <div class="divide-y divide-slate-800">
                @forelse($logs as $log)
                <div class="px-5 py-4 hover:bg-white/[0.02] transition">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 mb-1">
                                <p class="text-white font-semibold text-sm">{{ $log->title }}</p>
                                <span class="badge badge-info text-xs">{{ $log->target }}</span>
                            </div>
                            <p class="text-slate-400 text-sm">{{ $log->body }}</p>
                            <p class="text-slate-600 text-xs mt-1.5">
                                By {{ $log->admin->name ?? 'Admin' }} · {{ $log->created_at->diffForHumans() }}
                            </p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-white font-bold text-lg">{{ $log->sent_count }}</p>
                            <p class="text-slate-500 text-xs">sent</p>
                        </div>
                    </div>
                </div>
                @empty
                <div class="px-5 py-12 text-center text-slate-500">No notifications sent yet.</div>
                @endforelse
            </div>
            <div class="px-5 py-4">{{ $logs->links() }}</div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function toggleTargetField() {
        const target = document.getElementById('targetSelect').value;
        const field = document.getElementById('targetIdField');
        const input = field.querySelector('input[name="target_id"]');
        const select = document.getElementById('tournamentSelect');
        const label = document.getElementById('targetIdLabel');

        if (target === 'all') {
            field.classList.add('hidden');
        } else {
            field.classList.remove('hidden');
            if (target === 'user') {
                label.textContent = 'User Phone Number';
                input.classList.remove('hidden');
                select.classList.add('hidden');
                input.placeholder = '01XXXXXXXXX';
            } else {
                label.textContent = 'Select Tournament';
                input.classList.add('hidden');
                select.classList.remove('hidden');
                select.name = 'target_id';
            }
        }
    }

    // Live preview
    document.querySelector('input[name="title"]').addEventListener('input', function() {
        document.getElementById('previewTitle').textContent = this.value || 'Notification Title';
    });
    document.querySelector('textarea[name="body"]').addEventListener('input', function() {
        document.getElementById('previewBody').textContent = this.value || 'Your message will appear here...';
    });
</script>
@endpush