@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('Announcements'))

@section('content')
    <!-- Flash Messages -->
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Styles -->
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important;
                left: 5% !important;
            }
        }

        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important;
                left: 2.5% !important;
            }
        }

        .announcement-enter {
            opacity: 0;
            transform: translateY(20px);
            animation: slideFadeIn 0.5s ease forwards;
        }

        @keyframes slideFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown-menu {
            /* z-index: 1050 !important; */
            margin-top: -20px !important; /* Pull it upward slightly */
        }

        .announcement-delay-1 { animation-delay: 0.1s; }
        .announcement-delay-2 { animation-delay: 0.2s; }
        .announcement-delay-3 { animation-delay: 0.3s; }
    </style>

<div class="page-wrapper">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header d-flex flex-column" style="align-items: normal;">
                <div class="d-flex align-item-center justify-content-between">
                    <h3 class="card-title">{{ __('List of Announcements') }}</h3>
                    @if (auth()->user()->role == 'admin')
                        <a href="{{ route('announcements.create') }}" class="btn btn-success">New Announcement</a>
                    @endif
                </div>
            </div>

            <div class="card-body border-bottom py-2">
                @if ($announcements->isEmpty())
                    <div class="alert alert-warning text-center m-2">
                        <i class="ti ti-info-circle me-2"></i> There is no announcement available.
                    </div>
                @else
                    @foreach($announcements as $index => $announcement)
                        @php
                            $today = \Carbon\Carbon::now()->startOfDay();
                            $isActive =
                                (is_null($announcement->start_date) || $announcement->start_date->startOfDay() <= $today) &&
                                (is_null($announcement->end_date) || $announcement->end_date->startOfDay() >= $today);
                            $delayClass = 'announcement-delay-' . min($index + 1, 3);
                        @endphp

                        <div class="alert alert-info m-2 d-flex justify-content-between align-items-start announcement-enter {{ $delayClass }}">
                            <div style="width: 100%;">
                                <div class="d-flex align-item-center justify-content-between text-muted">
                                    <div class="d-flex align-item-center justify-content-start text-muted">
                                        <i class="ti ti-flag-exclamation text-danger fs-4 mt-1 mx-1"></i>
                                        <h4 class="mb-3">{{ $announcement->title }}</h4>
                                    </div>
                                    <div class="d-flex align-item-center justify-content-end text-muted">
                                        @if (auth()->user()->role == 'admin')
                                            @if ($isActive)
                                                <small>
                                                    <span class="status status-green" style="font-size: 13px;">
                                                        <span class="status-dot status-dot-animated"></span>Active
                                                    </span>
                                                </small>
                                            @endif
                                            <small>
                                                <span class="badge badge-outline text-blue ms-2" style="font-size: 12px;">
                                                    {{ $announcement->start_date->format('d M Y') }} - {{ $announcement->end_date->format('d M Y') }}
                                                </span>
                                            </small>
                                        @endif
                                    </div>
                                </div>
                                <p class="mb-3">{{ $announcement->body }}</p>
                                <small class="d-flex justify-content-between text-muted">
                                    Posted by {{ $announcement->creator->name }} on {{ $announcement->created_at->format('d M Y') }}
                                </small>
                            </div>

                            @if (auth()->user()->role == 'admin')
                            <div class="dropdown">
                                <button 
                                    class="btn btn-icon btn-light" 
                                    type="button" 
                                    id="dropdownMenuButton{{ $announcement->id }}" 
                                    data-bs-toggle="dropdown" 
                                    aria-expanded="false">
                                    <i class="ti ti-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $announcement->id }}">
                                    <li>
                                        <a href="{{ route('announcements.edit', $announcement) }}" class="dropdown-item text-warning">
                                            <i class="ti ti-edit me-2"></i> {{ __('Edit') }}
                                        </a>
                                    </li>
                                    <li>
                                        <form method="POST" action="{{ route('announcements.destroy', $announcement) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                <i class="ti ti-trash me-2"></i> {{ __('Delete') }}
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                            @endif
                        </div>
                    @endforeach
                    {{ $announcements->links() }}
                @endif
            </div>
            
            <div class="card-footer">
            </div>
        </div>
    </div>
</div>
@endsection