@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Holiday Calendar'))
@section('content')
    <style>
        .fc-day-grid-container { height: auto !important; }
        .fc-other-month .fc-day-number { display: none !important; }

        .emp-holiday-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-holiday-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-holiday-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .emp-holiday-stat {
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
            height: 100%;
        }
        .emp-holiday-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .emp-holiday-stat .lbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
        }
        .emp-holiday-wrap .emp-hol-cal-event,
        .emp-holiday-wrap .fc-event.emp-hol-cal-event {
            background: linear-gradient(120deg, #f6d365 0%, #fda085 100%) !important;
            border: none !important;
            color: #fff !important;
        }
        .emp-holiday-legend {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 1rem;
            margin-bottom: 1rem;
        }
        .emp-holiday-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 12px;
            color: #64748b;
        }
        .emp-holiday-legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        }
        .emp-holiday-list { max-height: 520px; overflow-y: auto; }
        .emp-holiday-item {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid #edf0f6;
        }
        .emp-holiday-item:last-child { border-bottom: 0; }
        .emp-holiday-item-title { font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 0.25rem; }
        .emp-holiday-item-dates {
            font-size: 12px;
            color: #64748b;
            font-variant-numeric: tabular-nums;
        }
        .emp-holiday-item-days {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: #b45309;
            background: rgba(245, 158, 11, .12);
            padding: 2px 8px;
            border-radius: 999px;
            margin-top: 0.35rem;
        }
        .emp-holiday-item.is-past { opacity: 0.65; }
        .emp-holiday-empty {
            padding: 2rem 1rem;
            text-align: center;
            color: #64748b;
            font-size: 13px;
        }
        #calendar .fc-toolbar { margin-bottom: 1rem; }
        #calendar .fc-toolbar h2 { font-size: 1.1rem; font-weight: 700; }
    </style>

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

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Holiday calendar') }}</h4>
                        <p class="text-muted mb-0 small">
                            {{ __('Company holidays for your branch and organization-wide observances.') }}
                            @if($branchName)
                                — <strong>{{ $branchName }}</strong>
                            @endif
                        </p>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-6 col-md-4 mb-2">
                        <div class="emp-holiday-stat">
                            <div class="num text-primary">{{ $holidays->count() }}</div>
                            <div class="lbl">{{ __('Holiday periods') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 mb-2">
                        <div class="emp-holiday-stat">
                            <div class="num text-success">{{ $totalDaysThisYear }}</div>
                            <div class="lbl">{{ __('Days in :year', ['year' => $currentYear]) }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mb-2">
                        <div class="emp-holiday-stat">
                            <div class="num text-info">{{ $upcomingHolidays->count() }}</div>
                            <div class="lbl">{{ __('Upcoming') }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-8 mb-3">
                        <div class="card h-100">
                            <div class="card-header">
                                <i class="fas fa-calendar-alt mr-1 text-muted"></i> {{ __('Calendar view') }}
                            </div>
                            <div class="card-body">
                                <div class="emp-holiday-legend">
                                    <span class="emp-holiday-legend-item">
                                        <span class="emp-holiday-legend-dot"></span> {{ __('Holiday') }}
                                    </span>
                                </div>
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-3">
                        <div class="card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <span><i class="fas fa-list mr-1 text-muted"></i> {{ __('Holiday list') }}</span>
                                <span class="badge badge-light text-muted font-weight-normal">{{ $holidays->count() }}</span>
                            </div>
                            <div class="card-body p-2">
                                <div class="emp-holiday-list">
                                    @forelse($holidays as $holiday)
                                        @php
                                            $isPast = \Illuminate\Support\Carbon::parse($holiday->to)->lt(now()->startOfDay());
                                            $isSameDay = $holiday->from === $holiday->to;
                                        @endphp
                                        <div class="emp-holiday-item {{ $isPast ? 'is-past' : '' }}">
                                            <div class="emp-holiday-item-title">{{ $holiday->description }}</div>
                                            <div class="emp-holiday-item-dates">
                                                @if($isSameDay)
                                                    {{ $holiday->from }}
                                                @else
                                                    {{ $holiday->from }} — {{ $holiday->to }}
                                                @endif
                                            </div>
                                            <span class="emp-holiday-item-days">
                                                {{ $holiday->number_of_holiday }} {{ (int) $holiday->number_of_holiday === 1 ? __('day') : __('days') }}
                                            </span>
                                        </div>
                                    @empty
                                        <div class="emp-holiday-empty">{{ __('No holidays configured for your branch.') }}</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

@section('script')
    <script>
        !function ($) {
            "use strict";

            var CalendarPage = function () {};
            CalendarPage.prototype.init = function () {
                if (!$.isFunction($.fn.fullCalendar)) {
                    alert("Calendar plugin is not installed");
                    return;
                }

                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay'
                    },
                    editable: false,
                    eventLimit: false,
                    droppable: false,
                    events: [
                        @foreach($calendarEvents as $event)
                        {
                            title: @json($event['title']),
                            start: @json($event['date']),
                            className: 'emp-hol-cal-event',
                        },
                        @endforeach
                    ]
                });
            };

            $.CalendarPage = new CalendarPage;
            $.CalendarPage.Constructor = CalendarPage;
        }(window.jQuery);

        (function ($) {
            "use strict";
            $.CalendarPage.init();
        })(window.jQuery);
    </script>
@endsection