@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-2">
                <a href="{{ route('admin.users') }}" 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">Notifications</h1>
            </div>
            <p class="text-db-text-secondary">Send announcements and updates to all users</p>
        </div>
    </div>

    <!-- Navigation -->
    @include('admin.partials.nav')

    <!-- Create Notification Form -->
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <h3 class="text-lg font-semibold text-db-text-primary mb-4">Create New Notification</h3>
        <form action="{{ route('admin.notifications.store') }}" method="POST" class="space-y-4">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">Title</label>
                    <input type="text" name="title" required maxlength="200"
                           class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors"
                           placeholder="Notification title...">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Type</label>
                        <select name="type" class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors">
                            <option value="info">Info</option>
                            <option value="success">Success</option>
                            <option value="warning">Warning</option>
                            <option value="error">Error</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">Expires At (Optional)</label>
                        <input type="datetime-local" name="expires_at"
                               class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors">
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-db-text-secondary mb-2">Message</label>
                <textarea name="message" rows="3" required maxlength="2000"
                          class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors resize-none"
                          placeholder="Notification message..."></textarea>
            </div>

            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-db-accent-primary text-white font-medium hover:bg-db-accent-primary/90 transition-colors">
                <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="M12 4v16m8-8H4" />
                </svg>
                Create Notification
            </button>
        </form>
    </div>

    <!-- Existing Notifications -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-db-border">
            <h3 class="text-lg font-semibold text-db-text-primary">All Notifications</h3>
        </div>
        <div class="divide-y divide-db-border">
            @forelse($notifications as $notification)
            <div class="px-6 py-4 {{ !$notification->is_active ? 'opacity-50' : '' }}">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border {{ $notification->type_badge_class }}">
                                {{ ucfirst($notification->type) }}
                            </span>
                            @if(!$notification->is_active)
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-zinc-500/15 text-zinc-400">
                                Inactive
                            </span>
                            @endif
                            @if($notification->expires_at)
                            <span class="text-xs text-db-text-muted">
                                Expires: {{ $notification->expires_at->format('M d, Y H:i') }}
                            </span>
                            @endif
                        </div>
                        <h4 class="font-semibold text-db-text-primary">{{ $notification->title }}</h4>
                        <p class="text-sm text-db-text-secondary mt-1">{{ $notification->message }}</p>
                        <p class="text-xs text-db-text-muted mt-2">Created {{ $notification->created_at->diffForHumans() }}</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <form action="{{ route('admin.notifications.toggle', $notification) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg {{ $notification->is_active ? 'bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border-amber-500/20' : 'bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border-emerald-500/20' }} border transition-colors"
                                    title="{{ $notification->is_active ? 'Deactivate' : 'Activate' }}">
                                @if($notification->is_active)
                                <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                                </svg>
                                @else
                                <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                @endif
                            </button>
                        </form>
                        <form action="{{ route('admin.notifications.delete', $notification) }}" method="POST"
                              onsubmit="return confirm('Delete this notification?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 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>
            @empty
            <div class="px-6 py-16 text-center">
                <div class="w-16 h-16 rounded-2xl bg-db-surface flex items-center justify-center mx-auto mb-4">
                    <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="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-db-text-primary mb-2">No notifications yet</h3>
                <p class="text-db-text-muted">Create your first notification above</p>
            </div>
            @endforelse
        </div>
    </div>

    @if($notifications->hasPages())
    <div class="mt-6 flex justify-center">
        {{ $notifications->links() }}
    </div>
    @endif

</div>
@endsection