@extends('layouts.app-sidebar')

@section('content')
<div class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <a href="{{ route('admin.index') }}" class="text-db-text-muted hover:text-db-text-primary transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                </a>
                <h1 class="text-2xl lg:text-3xl font-bold text-db-text-primary">Global Broadcasts</h1>
            </div>
            <p class="text-db-text-secondary">Send messages to all active streams</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                {{ $activeStreams }} Active Streams
            </span>
        </div>
    </div>

    @if(session('success'))
    <div class="p-4 bg-emerald-500/15 border border-emerald-500/25 rounded-xl text-emerald-400">
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="p-4 bg-red-500/15 border border-red-500/25 rounded-xl text-red-400">
        {{ session('error') }}
    </div>
    @endif

    <!-- Tab Navigation -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="flex border-b border-db-border">
            <button type="button" onclick="switchTab('instant')" id="tab-instant"
                class="flex-1 px-6 py-4 text-sm font-medium text-db-text-primary bg-purple-500/10 border-b-2 border-purple-500 transition-colors">
                Instant Broadcast
            </button>
            <button type="button" onclick="switchTab('timer')" id="tab-timer"
                class="flex-1 px-6 py-4 text-sm font-medium text-db-text-muted hover:text-db-text-primary border-b-2 border-transparent transition-colors">
                Timer Broadcast
            </button>
        </div>

        <!-- Instant Broadcast Form -->
        <div id="form-instant" class="p-6">
            <div class="flex items-center gap-3 mb-6">
                <div class="p-2 bg-purple-500/20 rounded-lg">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                    </svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-db-text-primary">Send Instant Broadcast</h2>
                    <p class="text-xs text-db-text-muted">Message will be sent to all {{ $activeStreams }} active streams immediately</p>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.broadcasts.store') }}">
                @csrf
                <input type="hidden" name="type" value="instant">

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Message</label>
                        <textarea name="message" required rows="3" maxlength="500"
                            placeholder="e.g., DayBot v2.0 is live! Check out new features at daybot.tv"
                            class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-colors resize-none"></textarea>
                        <p class="text-xs text-db-text-muted mt-1">Max 500 characters</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Notes (Optional)</label>
                        <input type="text" name="notes" maxlength="255"
                            placeholder="e.g., Version 2.0 announcement"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-colors">
                    </div>
                </div>

                <div class="mt-6 p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl">
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-amber-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        <div class="text-xs text-db-text-muted">
                            <p class="font-medium text-amber-400 mb-1">Before sending:</p>
                            <ul class="list-disc list-inside space-y-0.5">
                                <li>This will send to ALL {{ $activeStreams }} active streams instantly</li>
                                <li>Message cannot be recalled once sent</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-purple-500 hover:bg-purple-400 text-white font-medium rounded-lg transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                        </svg>
                        Send Broadcast Now
                    </button>
                </div>
            </form>
        </div>

        <!-- Timer Broadcast Form -->
        <div id="form-timer" class="p-6 hidden">
            <div class="flex items-center gap-3 mb-6">
                <div class="p-2 bg-blue-500/20 rounded-lg">
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-db-text-primary">Create Timer Broadcast</h2>
                    <p class="text-xs text-db-text-muted">Message will repeat on all active streams based on interval and chat activity</p>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.broadcasts.store') }}">
                @csrf
                <input type="hidden" name="type" value="timer">

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Message</label>
                        <textarea name="message" required rows="3" maxlength="500"
                            placeholder="e.g., Try DayBot FREE at daybot.tv - The smartest Urdu chatbot for YouTube streamers!"
                            class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors resize-none"></textarea>
                        <p class="text-xs text-db-text-muted mt-1">Max 500 characters</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-db-text-secondary mb-2">Interval (Minutes)</label>
                            <input type="number" name="interval_minutes" required min="1" max="1440" value="10"
                                class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors">
                            <p class="text-xs text-db-text-muted mt-1">Send message every X minutes (1-1440)</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-db-text-secondary mb-2">Minimum Unique Users</label>
                            <input type="number" name="min_chat_lines" required min="1" max="1000" value="3"
                                class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors">
                            <p class="text-xs text-db-text-muted mt-1">Required unique users chatting before sending (1-1000)</p>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Notes (Optional)</label>
                        <input type="text" name="notes" maxlength="255"
                            placeholder="e.g., DayBot promotion timer"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors">
                    </div>
                </div>

                <div class="mt-6 p-4 bg-blue-500/5 border border-blue-500/20 rounded-xl">
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div class="text-xs text-db-text-muted">
                            <p class="font-medium text-blue-400 mb-1">How Timer Broadcasts Work:</p>
                            <ul class="list-disc list-inside space-y-0.5">
                                <li>Message will be sent to ALL active streams automatically</li>
                                <li>Both conditions must be met: interval passed AND minimum unique users reached</li>
                                <li>Same user chatting multiple times counts as 1 (within 5 minutes)</li>
                                <li>You can enable/disable timer broadcasts anytime</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-400 text-white font-medium rounded-lg transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        Create Timer Broadcast
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Active Timer Broadcasts -->
    @if($timerBroadcasts->count() > 0)
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-db-border bg-gradient-to-r from-blue-500/10 to-cyan-500/10">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-blue-500/20 rounded-lg">
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-db-text-primary">Timer Broadcasts</h2>
                    <p class="text-xs text-db-text-muted">Recurring messages sent to all active streams</p>
                </div>
            </div>
        </div>

        <div class="divide-y divide-db-border">
            @foreach($timerBroadcasts as $timer)
            <div class="p-4 hover:bg-db-card-hover transition-colors">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-2">
                            @if($timer->is_active)
                            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                                Active
                            </span>
                            @else
                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-500/10 text-gray-400 border border-gray-500/20">
                                Inactive
                            </span>
                            @endif
                            <span class="text-xs text-db-text-muted">
                                Every {{ $timer->interval_minutes }} min | {{ $timer->min_chat_lines }} users
                            </span>
                            @if($timer->admin)
                            <span class="text-xs text-db-text-muted">
                                by {{ $timer->admin->name }}
                            </span>
                            @endif
                        </div>
                        <p class="text-sm text-db-text-primary break-words">{{ $timer->message }}</p>
                        @if($timer->notes)
                        <p class="text-xs text-db-text-muted mt-1 italic">{{ $timer->notes }}</p>
                        @endif
                        <div class="flex items-center gap-4 mt-2 text-xs text-db-text-muted">
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                                {{ $timer->total_sends }} total sends
                            </span>
                            @if($timer->last_sent_at)
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Last: {{ $timer->last_sent_at->diffForHumans() }}
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <!-- Toggle Active -->
                        <form method="POST" action="{{ route('admin.broadcasts.toggle', $timer) }}" class="inline">
                            @csrf
                            <button type="submit" class="p-2 rounded-lg transition-colors {{ $timer->is_active ? 'text-emerald-400 hover:bg-emerald-500/10' : 'text-db-text-muted hover:text-emerald-400 hover:bg-emerald-500/10' }}" title="{{ $timer->is_active ? 'Deactivate' : 'Activate' }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    @if($timer->is_active)
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    @else
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    @endif
                                </svg>
                            </button>
                        </form>
                        <!-- Edit -->
                        <button type="button" onclick="editTimer({{ $timer->id }}, '{{ addslashes($timer->message) }}', {{ $timer->interval_minutes }}, {{ $timer->min_chat_lines }}, '{{ addslashes($timer->notes ?? '') }}')" class="p-2 rounded-lg text-db-text-muted hover:text-blue-400 hover:bg-blue-500/10 transition-colors" title="Edit">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                        </button>
                        <!-- Delete -->
                        <form method="POST" action="{{ route('admin.broadcasts.destroy', $timer) }}" class="inline" onsubmit="return confirm('Delete this timer broadcast?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 rounded-lg text-db-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Broadcast History (Instant Only) -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-db-border">
            <h2 class="text-base font-semibold text-db-text-primary">Instant Broadcast History</h2>
            <p class="text-xs text-db-text-muted mt-0.5">Previous instant broadcasts sent to streams</p>
        </div>

        @if($broadcasts->count() > 0)
        <div class="divide-y divide-db-border">
            @foreach($broadcasts as $broadcast)
            <div class="p-4 hover:bg-db-card-hover transition-colors">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-2">
                            @php
                                $statusColors = [
                                    'pending' => 'bg-amber-500/10 text-amber-400 border-amber-500/20',
                                    'sending' => 'bg-blue-500/10 text-blue-400 border-blue-500/20',
                                    'completed' => 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
                                    'failed' => 'bg-red-500/10 text-red-400 border-red-500/20',
                                ];
                            @endphp
                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full border {{ $statusColors[$broadcast->status] ?? $statusColors['pending'] }}">
                                {{ ucfirst($broadcast->status) }}
                            </span>
                            <span class="text-xs text-db-text-muted">
                                {{ $broadcast->created_at->diffForHumans() }}
                            </span>
                            @if($broadcast->admin)
                            <span class="text-xs text-db-text-muted">
                                by {{ $broadcast->admin->name }}
                            </span>
                            @endif
                        </div>
                        <p class="text-sm text-db-text-primary break-words">{{ $broadcast->message }}</p>
                        @if($broadcast->notes)
                        <p class="text-xs text-db-text-muted mt-1 italic">{{ $broadcast->notes }}</p>
                        @endif
                        <div class="flex items-center gap-4 mt-2 text-xs text-db-text-muted">
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                {{ $broadcast->sent_count }} sent
                            </span>
                            @if($broadcast->failed_count > 0)
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3.5 h-3.5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                {{ $broadcast->failed_count }} failed
                            </span>
                            @endif
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                {{ $broadcast->target_streams }} targeted
                            </span>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <form method="POST" action="{{ route('admin.broadcasts.resend', $broadcast) }}" class="inline">
                            @csrf
                            <button type="submit" class="p-2 rounded-lg text-db-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-colors" title="Resend">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.broadcasts.destroy', $broadcast) }}" class="inline" onsubmit="return confirm('Delete this broadcast record?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 rounded-lg text-db-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($broadcasts->hasPages())
        <div class="px-6 py-4 border-t border-db-border">
            {{ $broadcasts->links() }}
        </div>
        @endif
        @else
        <div class="px-6 py-16 text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-db-surface rounded-2xl flex items-center justify-center">
                <svg class="w-8 h-8 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                </svg>
            </div>
            <h3 class="text-lg font-medium text-db-text-primary mb-1">No instant broadcasts yet</h3>
            <p class="text-sm text-db-text-muted">Send your first instant broadcast above.</p>
        </div>
        @endif
    </div>

</div>

<!-- Edit Timer Modal -->
<div id="edit-timer-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-db-card border border-db-border rounded-xl w-full max-w-lg mx-4 p-6">
        <h3 class="text-lg font-semibold text-db-text-primary mb-4">Edit Timer Broadcast</h3>
        <form id="edit-timer-form" method="POST">
            @csrf
            @method('PUT')

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">Message</label>
                    <textarea name="message" id="edit-message" required rows="3" maxlength="500"
                        class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors resize-none"></textarea>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Interval (Minutes)</label>
                        <input type="number" name="interval_minutes" id="edit-interval" required min="1" max="1440"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Min Unique Users</label>
                        <input type="number" name="min_chat_lines" id="edit-lines" required min="1" max="1000"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">Notes (Optional)</label>
                    <input type="text" name="notes" id="edit-notes" maxlength="255"
                        class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-lg text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-colors">
                </div>
            </div>

            <div class="flex justify-end gap-3 mt-6">
                <button type="button" onclick="closeEditModal()" class="px-4 py-2 text-sm font-medium text-db-text-muted hover:text-db-text-primary transition-colors">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-400 text-white text-sm font-medium rounded-lg transition-colors">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function switchTab(tab) {
    const instantTab = document.getElementById('tab-instant');
    const timerTab = document.getElementById('tab-timer');
    const instantForm = document.getElementById('form-instant');
    const timerForm = document.getElementById('form-timer');

    if (tab === 'instant') {
        instantTab.classList.add('text-db-text-primary', 'bg-purple-500/10', 'border-purple-500');
        instantTab.classList.remove('text-db-text-muted', 'border-transparent');
        timerTab.classList.remove('text-db-text-primary', 'bg-blue-500/10', 'border-blue-500');
        timerTab.classList.add('text-db-text-muted', 'border-transparent');
        instantForm.classList.remove('hidden');
        timerForm.classList.add('hidden');
    } else {
        timerTab.classList.add('text-db-text-primary', 'bg-blue-500/10', 'border-blue-500');
        timerTab.classList.remove('text-db-text-muted', 'border-transparent');
        instantTab.classList.remove('text-db-text-primary', 'bg-purple-500/10', 'border-purple-500');
        instantTab.classList.add('text-db-text-muted', 'border-transparent');
        timerForm.classList.remove('hidden');
        instantForm.classList.add('hidden');
    }
}

function editTimer(id, message, interval, lines, notes) {
    document.getElementById('edit-timer-form').action = '/admin/broadcasts/' + id;
    document.getElementById('edit-message').value = message;
    document.getElementById('edit-interval').value = interval;
    document.getElementById('edit-lines').value = lines;
    document.getElementById('edit-notes').value = notes;
    document.getElementById('edit-timer-modal').classList.remove('hidden');
    document.getElementById('edit-timer-modal').classList.add('flex');
}

function closeEditModal() {
    document.getElementById('edit-timer-modal').classList.add('hidden');
    document.getElementById('edit-timer-modal').classList.remove('flex');
}

// Close modal on backdrop click
document.getElementById('edit-timer-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeEditModal();
    }
});
</script>
@endsection