@php
    // Helper function
    if (!function_exists('getEventTypeColor')) {
        function getEventTypeColor($type)
        {
            $colors = [
                'announcements' => 'success',
                'webinars' => 'info',
                'workshops' => 'warning',
                'other' => 'secondary',
            ];
            return $colors[$type] ?? 'secondary';
        }
    }

    // Response colors mapping
    $responseColors = [
        'accepted' => 'success',
        'rejected' => 'danger',
        'maybe' => 'warning',
    ];

    // Priority icons mapping
    $priorityIcons = [
        'high' => 'fa-flag text-danger',
        'medium' => 'fa-flag text-warning',
        'low' => 'fa-flag text-info',
    ];

    // Audience type mapping with translation
    $audienceTypes = [
        'staff_training' => __('labels.staff_training'),
        'customer_event' => __('labels.customer_event'),
        'both' => __('labels.both'),
    ];

    // Audience colors and icons
    $audienceColors = [
        'staff_training' => 'primary',
        'customer_event' => 'info',
        'both' => 'success',
    ];

    $audienceIcons = [
        'staff_training' => 'fa-users-cog',
        'customer_event' => 'fa-handshake',
        'both' => 'fa-users',
    ];

@endphp
<div class="card events-card">
    <!-- Card Header -->
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <h4 class="card-title mb-0">{{ __('labels.todays_events') }}</h4>
            <small class="text-white-50">{{ now()->format('l, F j, Y') }}</small>
        </div>
        <div>
            @if(isset($events['count']) && $events['count'])
                <span class="badge bg-white text-primary">
                    {{ $events['count'] ?? '' }} {{ __('labels.event_s') }}
                </span>
            @endif
        </div>
    </div>

    <!-- Card Body - Today's Events List -->
    <div class="card-body news-feed">
        @if (count($events['list'] ?? []) > 0)
            <div class="events-timeline">
                @foreach ($events['list'] as $event)
                    <div class="event-card mb-3" data-event-id="{{ $event['id'] }}">
                        <!-- Event Header -->
                        @php
                            // Get user's response - you'll need to adjust this based on your data structure
                            $hasResponded = $event['has_responded'] ?? false;
                        @endphp
                        <div class="event-header d-flex justify-content-between align-items-start mb-2">
                            <div class="d-flex align-items-center">
                                <div class="event-type-icon me-2">
                                    @if ($event['type'] == 'webinars')
                                        <i class="fas fa-video text-info"></i>
                                    @elseif($event['type'] == 'workshops')
                                        <i class="fas fa-chalkboard-teacher text-warning"></i>
                                    @elseif($event['type'] == 'announcements')
                                        <i class="fas fa-bullhorn text-success"></i>
                                    @else
                                        <i class="fas fa-calendar-alt text-secondary"></i>
                                    @endif
                                </div>
                                <h6 class="event-title mb-0">
                                    {{ Str::limit($event['title'], 35) }}
                                </h6>
                            </div>
                            <span class="badge bg-{{ getEventTypeColor($event['type']) }}">
                                {{ ucfirst($event['type']) }}
                            </span>
                        </div>

                        <!-- Event Time -->
                        <div class="event-time mb-2">
                            <span class="time-badge">
                                <i class="fas fa-clock me-1"></i>
                                {{ \Carbon\Carbon::parse($event['started_at'])->format('h:i A') }}
                                @if ($event['ended_at'])
                                    - {{ \Carbon\Carbon::parse($event['ended_at'])->format('h:i A') }}
                                @endif
                            </span>
                        </div>

                        <!-- Event Description -->
                        @if ($event['description'])
                            <p class="event-description text-muted small mb-2">
                                {{ Str::limit(strip_tags($event['description']), 60) }}
                            </p>
                        @endif

                        <!-- Event Footer -->
                        <div class="event-footer d-flex justify-content-between align-items-center mt-2">
                            <!-- Audience Badge -->
                            @if (isset($event['audience_type']) && array_key_exists($event['audience_type'], $audienceTypes))
                                @php
                                    $audienceType = $event['audience_type'];
                                    $audienceLabel = $audienceTypes[$audienceType];
                                    $audienceColor = $audienceColors[$audienceType] ?? 'secondary';
                                    $audienceIcon = $audienceIcons[$audienceType] ?? 'fa-users';
                                @endphp

                                <span class="audience-badge">
                                    <span class="audience-badge audience-{{ $audienceColor }}">
                                        <i class="fas {{ $audienceIcon }} me-1"></i>
                                        {{ $audienceLabel }}
                                    </span>
                                </span>
                            @else
                                <span class="audience-badge audience-secondary">
                                    <i class="fas fa-question-circle me-1"></i>
                                    {{ __('labels.all_users') }}
                                </span>
                            @endif

                            <!-- Event Links/Actions -->
                            <div class="event-actions">
                                @if (!$hasResponded && now()->lt($event->ended_at) && now()->gt($event->started_at))
                                    <a href="{{ route('events.show', $event['id']) }}" target="_blank"
                                        class="btn btn-sm btn-outline-primary btn-join">
                                        <i class="fas fa-external-link-alt me-1"></i> {{ __('labels.join') }}
                                    </a>
                                @endif
                                <button class="btn btn-sm btn-outline-secondary btn-details ms-1"
                                    data-event-id="{{ $event['id'] }}">
                                    <i class="fas fa-info-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    @if (!$loop->last)
                        <hr class="event-divider">
                    @endif
                @endforeach
            </div>
        @else
            <!-- No Events State -->
            <div class="no-events text-center py-5">
                <div class="empty-state-icon mb-3">
                    <i class="fas fa-calendar-check fa-3x text-muted"></i>
                </div>
                <h5 class="text-muted mb-2">{{ __('labels.no_events_today') }}</h5>
                <p class="text-muted small mb-3">{{ __('labels.all_caught_up') }}</p>
                @can('create', \App\Models\Event::class)
                <a href="{{ route('events.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i> {{ __('labels.schedule_event') }}
                </a>
                @endcan
            </div>
        @endif
    </div>

    <!-- Card Footer -->
    <div class="card-footer bg-light">
        <div class="row">
            @can('create', \App\Models\Event::class)
                <div class="col-6">
                    <a href="{{ route('events.index') }}" target="_blank" class="btn btn-outline-primary btn-sm w-100">
                        <i class="fas fa-calendar-alt me-1"></i> {{ __('labels.all_events') }}
                    </a>
                </div>
                <div class="col-6">
                    <a href="{{ route('events.create') }}" target="_blank" class="btn btn-primary btn-sm w-100">
                        <i class="fas fa-plus-circle me-1"></i> {{ __('labels.new_event') }}
                    </a>
                </div>
            @else
                <div class="col-12">
                    <a href="{{ route('events.index') }}" target="_blank" class="btn btn-outline-primary btn-sm w-100">
                        <i class="fas fa-calendar-alt me-1"></i> {{ __('labels.all_events') }}
                    </a>
                </div>
            @endcan
        </div>
    </div>
</div>

@push('css')
    <style>
        .events-card {
            border: none;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
            transition: transform 0.3s ease;
        }

        .events-card:hover {
            transform: translateY(-2px);
        }

        .events-card .card-header {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
            color: white;
            border-bottom: none;
            padding: 1rem 1.5rem;
        }

        .event-card {
            padding: 15px;
            background: #fff;
            border-radius: 10px;
            border: 1px solid #eaeaea;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .event-card:hover {
            border-color: #667eea;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
            transform: translateX(5px);
        }

        .event-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, #667eea, #764ba2);
            border-radius: 4px 0 0 4px;
        }

        .event-title {
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.95rem;
            transition: color 0.2s ease;
        }

        .event-card:hover .event-title {
            color: #667eea;
        }

        .event-type-icon {
            font-size: 1.2rem;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 8px;
        }

        .time-badge {
            background: #f8f9fa;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            color: #6c757d;
            display: inline-flex;
            align-items: center;
        }

        .event-description {
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .audience-badge {
            background: #e3f2fd;
            color: #1976d2;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
        }

        .btn-join {
            border-radius: 20px;
            padding: 3px 12px;
            font-size: 0.85rem;
            transition: all 0.2s ease;
        }

        .btn-join:hover {
            background: #667eea;
            border-color: #667eea;
            color: white;
            transform: translateY(-1px);
        }

        .btn-details {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .event-divider {
            margin: 1rem 0;
            border-top: 1px dashed #eaeaea;
            opacity: 0.5;
        }

        .no-events {
            opacity: 0.7;
        }

        .empty-state-icon {
            opacity: 0.4;
        }

        .badge.bg-success {
            background-color: #28a745 !important;
        }

        .badge.bg-info {
            background-color: #17a2b8 !important;
        }

        .badge.bg-warning {
            background-color: #ffc107 !important;
        }

        .badge.bg-secondary {
            background-color: #6c757d !important;
        }

        .card-footer {
            border-top: 1px solid #eaeaea;
            padding: 1rem;
        }

        .card-footer .btn {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
        }
    </style>
@endpush

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Event card click handler
            document.querySelectorAll('.event-card').forEach(card => {
                card.addEventListener('click', function(e) {
                    // Don't trigger if clicking on buttons or links
                    if (!e.target.closest('.btn') && !e.target.closest('a')) {
                        const eventId = this.dataset.eventId;
                        // Navigate to event detail page in new tab
                        window.open(`/events/${eventId}`, '_blank', 'noopener,noreferrer');
                    }
                });
            });

            // Event details button handler
            document.querySelectorAll('.btn-details').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const eventId = this.dataset.eventId;
                    // Show quick event details in modal
                    showEventDetails(eventId);
                });
            });

            function showEventDetails(eventId) {
                // You can implement a modal with event details
                // For now, just redirect to event page
                window.open(`/events/${eventId}`, '_blank', 'noopener,noreferrer');
            }

            // Add animation to cards on load
            const cards = document.querySelectorAll('.event-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateX(-20px)';

                setTimeout(() => {
                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateX(0)';
                }, index * 100);
            });
        });
    </script>
@endpush