@extends('layouts.dashboard')

@section('title', 'BNI Admin Dashboard')

@section('header-title', 'Dashboard')

@section('content')
    <div class="container mx-auto px-4 py-8">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-800 mb-4">Today's Meeting</h2>
            <div class="flex justify-center">
                <img src="{{ asset('images/meeting.jpeg') }}" alt="Today's Meeting Poster" class="w-[25%] h-auto rounded-lg shadow-lg animate-border">
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <style>
        @keyframes border-animation {
            0% { border-color: #A02128; box-shadow: 0 0 10px #A02128; }
            20% { border-color: #C53030; box-shadow: 0 0 15px #C53030; }
            40% { border-color: #E53E3E; box-shadow: 0 0 20px #E53E3E; }
            60% { border-color: #742A2A; box-shadow: 0 0 15px #742A2A; }
            80% { border-color: #5C1A1A; box-shadow: 0 0 12px #5C1A1A; }
            100% { border-color: #A02128; box-shadow: 0 0 10px #A02128; }
        }
        
        .animate-border {
            border: 3px solid #A02128;
            animation: border-animation 2s linear infinite;
        }
    </style>
    <script>
        // Add any dashboard-specific JavaScript here
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Dashboard loaded');
        });
    </script>
@endpush