@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Events'))
@push('css')
    <link href="{{ asset('assets/plugins/magnific-popup/magnific-popup.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content')
    <style>
        /* Scoped only to this page — avoids sidebar / layout font blow-up */
        .emp-event-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-event-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-event-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .emp-event-wrap .card-footer {
            background: #fff;
            border-top: 1px solid #edf0f6;
            padding: 0.75rem 1.15rem;
        }
        .emp-event-filters {
            background: #f8fafc;
            border-bottom: 1px solid #edf0f6;
            padding: 14px 16px;
        }
        .emp-event-filters label {
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-event-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .emp-event-filters .form-group { margin-bottom: 0; } }
        .emp-event-stat {
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
            height: 100%;
        }
        .emp-event-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .emp-event-stat .lbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
        }
        .emp-event-list { padding: 0.75rem; }
        .emp-event-wrap .event-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 1rem;
            transition: box-shadow .2s ease, border-color .2s ease;
        }
        .emp-event-wrap .event-card:hover {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
            border-color: #cbd5e1;
        }
        .emp-event-wrap .event-card:last-child { margin-bottom: 0; }
        .emp-event-wrap .event-card__img {
            display: block;
            width: 100%;
            height: 180px;
            overflow: hidden;
            background: #f1f5f9;
        }
        .emp-event-wrap .event-card__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }
        .emp-event-wrap .event-card:hover .event-card__img img { transform: scale(1.04); }
        .emp-event-wrap .event-card__body { padding: 1rem 1.15rem; flex: 1; }
        .emp-event-wrap .event-card__date {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #0369a1;
            background: rgba(14, 165, 233, .1);
            padding: 4px 10px;
            border-radius: 999px;
            margin-bottom: 0.65rem;
        }
        .emp-event-wrap .event-card__title {
            font-size: 1.05rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 0.35rem;
            line-height: 1.35;
        }
        .emp-event-wrap .event-card__venue {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 0.5rem;
        }
        .emp-event-wrap .event-card__venue i { width: 1rem; }
        .emp-event-wrap .event-card__desc {
            font-size: 13px;
            color: #475569;
            line-height: 1.55;
            margin-bottom: 0;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .emp-event-empty {
            padding: 3rem 1.5rem;
            text-align: center;
            color: #64748b;
        }
        .emp-event-empty i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 0.75rem; }
        @media (min-width: 768px) {
            .emp-event-wrap .event-card {
                flex-direction: row;
                align-items: stretch;
            }
            .emp-event-wrap .event-card__img {
                width: 200px;
                min-width: 200px;
                height: auto;
                min-height: 160px;
            }
            .emp-event-wrap .event-card__date-col {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 1rem 0.75rem;
                min-width: 88px;
                border-right: 1px solid #edf0f6;
                background: #f8fafc;
            }
            .emp-event-wrap .event-card__day {
                font-size: 1.75rem;
                font-weight: 800;
                line-height: 1;
                color: #0f172a;
            }
            .emp-event-wrap .event-card__mon {
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .08em;
                color: #64748b;
                margin-top: 0.2rem;
            }
            .emp-event-wrap .event-card__yr {
                font-size: 11px;
                color: #94a3b8;
                margin-top: 0.15rem;
            }
        }
    </style>

    @php
        $hasFilters = request()->filled('year') || request()->filled('month');
    @endphp

    <div class="container-fluid emp-event-wrap">
        <div class="row mt-3">
            <div class="col-12 col-xl-10 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Events') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Company events, programs, and activities.') }}</p>
                    </div>
                    <a class="btn btn-outline-primary btn-sm" href="{{ route('google.calendar.sync') }}">
                        <i class="fab fa-google mr-1"></i> {{ __('Sync Google Calendar') }}
                    </a>
                </div>

                <div class="form-row mb-3">
                    <div class="col-12 col-md-6 mb-2">
                        <div class="emp-event-stat">
                            <div class="num text-primary">{{ $events->total() }}</div>
                            <div class="lbl">{{ __('Events') }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 mb-2">
                        <div class="emp-event-stat">
                            <div class="num text-info">{{ $hasFilters ? __('Filtered') : __('All time') }}</div>
                            <div class="lbl">{{ __('View') }}</div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span><i class="fas fa-calendar-day mr-1 text-muted"></i> {{ __('Event list') }}</span>
                        @if($hasFilters)
                            <a href="{{ route('Employee.event') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear filters') }}</a>
                        @endif
                    </div>

                    <form method="get">
                        <div class="emp-event-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-6 col-md-3 col-lg-2">
                                    <label>{{ __('Year') }}</label>
                                    <select name="year" class="form-control">
                                        <option value="">{{ __('All') }}</option>
                                        @for($i = 2023; $i <= (int) date('Y'); $i++)
                                            <option value="{{ $i }}" @selected((string) request('year') === (string) $i)>{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-6 col-md-3 col-lg-2">
                                    <label>{{ __('Month') }}</label>
                                    <select name="month" class="form-control">
                                        <option value="">{{ __('All') }}</option>
                                        @for($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}" @selected((string) request('month') === (string) $i)>{{ date('F', mktime(0, 0, 0, $i, 1)) }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-12 col-md-6 col-lg-2 mb-0">
                                    <label class="d-none d-lg-block">&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="fas fa-filter"></i> {{ __('Filter') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="card-body p-2">
                        <div class="emp-event-list">
                            @forelse($events as $event)
                                @php
                                    $startTs = strtotime($event->start);
                                    $hasImage = ! empty($event->files);
                                @endphp
                                <article class="event-card">
                                    <div class="d-none d-md-flex event-card__date-col">
                                        <div class="event-card__day">{{ date('j', $startTs) }}</div>
                                        <div class="event-card__mon">{{ date('M', $startTs) }}</div>
                                        <div class="event-card__yr">{{ date('Y', $startTs) }}</div>
                                    </div>
                                    @if($hasImage)
                                        <a href="{{ asset('storage/'.$event->files) }}"
                                           class="event-card__img image-popup-no-margins"
                                           title="{{ $event->title }}">
                                            <img src="{{ asset('storage/'.$event->files) }}" alt="{{ $event->title }}">
                                        </a>
                                    @endif
                                    <div class="event-card__body">
                                        <div class="d-md-none event-card__date">
                                            <i class="far fa-calendar-alt"></i>
                                            {{ date('M j, Y', $startTs) }}
                                        </div>
                                        <h3 class="event-card__title">{{ $event->title }}</h3>
                                        @if($event->venue)
                                            <div class="event-card__venue">
                                                <i class="fas fa-map-marker-alt mr-1"></i>{{ $event->venue }}
                                            </div>
                                        @endif
                                        @if($event->description)
                                            <p class="event-card__desc">{{ $event->description }}</p>
                                        @endif
                                    </div>
                                </article>
                            @empty
                                <div class="emp-event-empty">
                                    <div><i class="far fa-calendar-times d-block"></i></div>
                                    @if($hasFilters)
                                        {{ __('No events match your filters.') }}
                                    @else
                                        {{ __('No events scheduled yet.') }}
                                    @endif
                                </div>
                            @endforelse
                        </div>
                    </div>

                    @if($events->hasPages())
                        <div class="card-footer">{{ $events->links() }}</div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/plugins/magnific-popup/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ asset('assets/pages/lightbox.js') }}"></script>
@endsection