@extends('layouts.app', ['title' => 'Urlaubsplaner'])
@section('content')

<div class="container-fluid py-4" style="max-width:1600px;">

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
        <h4 class="fw-bold mb-0">
            <i class="bi bi-calendar-heart me-2 text-primary"></i>Urlaubsplaner
            <span class="text-muted fw-normal ms-2" style="font-size:1rem;">{{ Carbon\Carbon::now()->format('Y') }}</span>
        </h4>
        <div class="d-flex align-items-center gap-2">
            <div class="card border-0 shadow-sm px-3 py-2">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-sun text-warning fs-5"></i>
                    <div>
                        <div class="text-muted" style="font-size:.72rem;">Im Urlaub heute</div>
                        <div class="fw-bold">{{ $Vacation_Request_heute }} Mitarbeiter</div>
                    </div>
                </div>
            </div>
            @if(Auth::user()->get_employee->is_hrm)
                <button type="button" class="btn btn-success rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#new-urlaubstage">
                    <i class="bi bi-plus-lg me-1"></i>Urlaubsantrag
                </button>
            @endif
        </div>
    </div>

    @if(session('msg'))
        <div class="alert alert-success alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            {{ session('msg') }}
        </div>
    @endif

    @if(Auth::user()->get_employee->is_hrm)

        {{-- Stat Cards --}}
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <a href="{{ route('hrm.vacation') }}" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="text-muted small mb-1">Neue Anträge</div>
                            <h3 class="fw-bold mb-0">{{ $Vacation_new }}</h3>
                            <div class="mt-2 rounded" style="height:4px;background:#0dcaf0;"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{ route('hrm.vacation.status', ['id' => '1']) }}" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="text-muted small mb-1">Genehmigt</div>
                            <h3 class="fw-bold mb-0">{{ $Vacation_gen }}</h3>
                            <div class="mt-2 rounded" style="height:4px;background:#198754;"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{ route('hrm.vacation.status', ['id' => '0']) }}" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="text-muted small mb-1">Abgelehnt</div>
                            <h3 class="fw-bold mb-0">{{ $Vacation_abl }}</h3>
                            <div class="mt-2 rounded" style="height:4px;background:#dc3545;"></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- Aktive Anträge --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom px-3 py-2">
                <span class="fw-semibold">Offene Anträge</span>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover align-middle mb-0" style="font-size:0.82rem;">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3">Urlaubskonto (Vorjahr | Anspruch | Gesamt — genommen | geplant)</th>
                            <th>Verfügbar</th>
                            <th>Mitarbeiter</th>
                            <th>Von</th>
                            <th>Bis</th>
                            <th>Tage</th>
                            <th>Bemerkung</th>
                            <th>Status</th>
                            <th class="pe-3" style="width:110px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($Vacation_Request as $item)
                            <tr>
                                <td class="ps-3">
                                    @if($item->get_employee->contract && $item->get_employee->contract->get_days)
                                        <span class="text-muted">{{ $item->get_employee->contract->get_days->last_year_vacation_rest }} T</span>
                                        <span class="text-muted mx-1">|</span>
                                        {{ $item->get_employee->contract->get_days->vacation_entitlement }} T
                                        <span class="text-muted mx-1">|</span>
                                        <strong>{{ $item->get_employee->contract->get_days->last_year_vacation_rest + $item->get_employee->contract->get_days->vacation_entitlement }} T</strong>
                                        @php
                                            $got_vacations = 0;
                                            for ($start = Carbon\Carbon::now()->startOfYear(); $start <= now()->toDateString(); $start->addDay()) {
                                                $isVacationDay = $Vacation_all->where('fk_employee_id', $item->get_employee->employee_id)->where('is_accepted', '1')->where('date_from', '<=', $start->toDateString())->where('date_to', '>=', $start->toDateString())->count();
                                                $isWorkDay = $item->get_employee->contract->get_days[strtolower($start->format('l'))] > 0;
                                                $isHoliday = in_array($start->toDateString(), $holidays->pluck('date')->toArray());
                                                if ($isVacationDay && $isWorkDay && !$isHoliday) { $got_vacations += 1; }
                                            }
                                        @endphp
                                        <span class="text-muted mx-1">—</span>
                                        {{ $got_vacations }} T
                                        <span class="text-muted mx-1">|</span>
                                        {{ $Vacation_all->where('fk_employee_id', $item->get_employee->employee_id)->where('is_accepted', '1')->where('date_from', '>', now()->toDateString())->sum('days_number') }} T
                                    @else
                                        <span class="text-muted">Kein Vertrag angelegt</span>
                                    @endif
                                </td>
                                <td>
                                    @if($item->get_employee->contract && $item->get_employee->contract->get_days)
                                        <span class="fw-semibold">{{ $item->get_employee->contract->get_days->last_year_vacation_rest }} T</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="fw-semibold">{{ $item->get_employee->first_name }} {{ $item->get_employee->last_name }}</td>
                                <td>{{ Carbon\Carbon::parse($item->date_from)->format('d.m.Y') }}</td>
                                <td>{{ Carbon\Carbon::parse($item->date_to)->format('d.m.Y') }}</td>
                                <td>{{ $item->days_number }}</td>
                                <td class="text-muted">{{ $item->note }}</td>
                                <td>
                                    @if($item->is_accepted == 1)
                                        <span class="badge bg-success rounded-pill">Genehmigt</span>
                                    @elseif($item->is_accepted === 0)
                                        <span class="badge bg-danger rounded-pill">Abgelehnt</span>
                                    @else
                                        <span class="badge bg-warning text-dark rounded-pill">Ausstehend</span>
                                    @endif
                                </td>
                                <td class="pe-3 text-end">
                                    <div class="d-flex gap-1 justify-content-end">
                                        @if($item->is_accepted == 1)
                                            <button class="btn btn-outline-danger rounded-circle p-0 ablehnung_btn"
                                                style="width:28px;height:28px;" data-bs-toggle="modal"
                                                data-bs-target="#Abl-item" data-id="{{ $item->id }}" title="Ablehnen">
                                                <i class="bi bi-x-lg" style="font-size:.7rem;"></i>
                                            </button>
                                        @elseif($item->is_accepted === 0)
                                            <button class="btn btn-outline-success rounded-circle p-0 accept_btn"
                                                style="width:28px;height:28px;" data-bs-toggle="modal"
                                                data-bs-target="#gen-item" data-id="{{ $item->id }}" title="Genehmigen">
                                                <i class="bi bi-check-lg" style="font-size:.7rem;"></i>
                                            </button>
                                        @else
                                            <button class="btn btn-outline-success rounded-circle p-0 accept_btn"
                                                style="width:28px;height:28px;" data-bs-toggle="modal"
                                                data-bs-target="#gen-item" data-id="{{ $item->id }}" title="Genehmigen">
                                                <i class="bi bi-check-lg" style="font-size:.7rem;"></i>
                                            </button>
                                            <button class="btn btn-outline-danger rounded-circle p-0 ablehnung_btn"
                                                style="width:28px;height:28px;" data-bs-toggle="modal"
                                                data-bs-target="#Abl-item" data-id="{{ $item->id }}" title="Ablehnen">
                                                <i class="bi bi-x-lg" style="font-size:.7rem;"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox d-block fs-2 opacity-25 mb-2"></i>
                                    Keine offenen Anträge
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Alte Anträge (collapsible) --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom px-3 py-2 d-flex align-items-center justify-content-between">
                <span class="fw-semibold text-muted">Alte Anträge ({{ $Vacation_all->where('is_closed', '==', '1')->count() }})</span>
                <button class="btn btn-outline-secondary btn-sm rounded-pill px-3" type="button"
                    data-bs-toggle="collapse" data-bs-target="#alte-antraege">
                    <i class="bi bi-chevron-down me-1" style="font-size:.75rem;"></i>Anzeigen
                </button>
            </div>
            <div class="collapse" id="alte-antraege">
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0" style="font-size:0.82rem;">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3">Mitarbeiter</th>
                                <th>Von</th>
                                <th>Bis</th>
                                <th>Tage</th>
                                <th>Bemerkung</th>
                                <th class="pe-3">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($Vacation_all->where('is_closed', '==', '1')->sortByDesc('date_from') as $item)
                                <tr>
                                    <td class="ps-3 fw-semibold">{{ $item->get_employee->first_name }} {{ $item->get_employee->last_name }}</td>
                                    <td>{{ Carbon\Carbon::parse($item->date_from)->format('d.m.Y') }}</td>
                                    <td>{{ Carbon\Carbon::parse($item->date_to)->format('d.m.Y') }}</td>
                                    <td>{{ $item->days_number }}</td>
                                    <td class="text-muted">{{ $item->note }}</td>
                                    <td class="pe-3">
                                        @if($item->is_accepted == '1')
                                            @if($item->date_from <= now()->toDateString())
                                                <span class="badge bg-success rounded-pill">Genehmigt &amp; genommen</span>
                                            @else
                                                <span class="badge bg-success rounded-pill">Genehmigt</span>
                                            @endif
                                        @elseif($item->is_accepted == '0')
                                            <span class="badge bg-danger rounded-pill">Abgelehnt</span>
                                        @else
                                            <span class="badge bg-secondary rounded-pill">In Bearbeitung</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">
                                        <i class="bi bi-inbox d-block fs-2 opacity-25 mb-2"></i>
                                        Keine alten Anträge
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    @endif

    {{-- vis-timeline --}}
    <link href="{{ asset('assets/vendor/vis-timeline/vis-timeline-graph2d.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/vendor/vis-timeline/vis-timeline-graph2d.min.js') }}"></script>

    <style>
        #urlaubsplaner-timeline table, #urlaubsplaner-timeline thead, #urlaubsplaner-timeline tbody,
        #urlaubsplaner-timeline tr, #urlaubsplaner-timeline td, #urlaubsplaner-timeline th {
            margin: 0 !important; padding: 0 !important; border: none !important;
            background: transparent !important; color: inherit !important;
        }
        #urlaubsplaner-timeline .vis-labelset .vis-label { background: #fff !important; border-bottom: 1px solid #e9ecef !important; border-right: 1px solid #dee2e6 !important; }
        #urlaubsplaner-timeline .vis-labelset .vis-label .vis-inner { padding: 4px 10px !important; }
        #urlaubsplaner-timeline .vis-labelset .vis-label.vis-group-level-0 { background: #e9ecef !important; }
        #urlaubsplaner-timeline .vis-labelset .vis-label.vis-group-level-1 { background: #fff !important; }
        #urlaubsplaner-timeline .vis-group-level-unknown-but-gte1 { border: 1px solid #e9ecef !important; }
        #urlaubsplaner-timeline .vis-foreground .vis-group { background: #fff !important; border-bottom: 1px solid #f0f0f0 !important; }
        #urlaubsplaner-timeline .vis-foreground .vis-group.vis-group-level-0 { background: #f0f2f5 !important; }
        #urlaubsplaner-timeline .vis-time-axis .vis-text { color: #495057; font-size: 11px; }
        #urlaubsplaner-timeline .vis-panel.vis-top { border-color: #dee2e6 !important; }
        #urlaubsplaner-timeline .vis-label.group-feiertage, #urlaubsplaner-timeline .vis-group.group-feiertage { border-bottom: 3px solid #495057 !important; }
        #urlaubsplaner-timeline .vis-time-axis .vis-grid.vis-saturday,
        #urlaubsplaner-timeline .vis-time-axis .vis-grid.vis-sunday { background: rgba(0,0,0,0.03) !important; }
    </style>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom px-3 py-2">
            <div class="d-flex gap-3 flex-wrap align-items-center">
                <span class="fw-semibold"><i class="bi bi-calendar-range me-1 text-primary"></i>Urlaubskalender</span>
                <div class="d-flex gap-2 flex-wrap align-items-center ms-2" style="font-size:.82rem;">
                    <span><span class="badge" style="background:#198754">&nbsp;&nbsp;</span> Genehmigt</span>
                    <span><span class="badge" style="background:#0d6efd">&nbsp;&nbsp;</span> Antrag</span>
                    <span><span class="badge" style="background:#dc3545">&nbsp;&nbsp;</span> Krank</span>
                    <span><span class="badge" style="background:#adb5bd">&nbsp;&nbsp;</span> Abgelehnt</span>
                </div>
                <div class="ms-auto d-flex gap-1">
                    <button class="btn btn-sm btn-outline-secondary rounded-pill px-3" id="tl-prev"><i class="bi bi-chevron-left"></i> Monat</button>
                    <button class="btn btn-sm btn-outline-primary rounded-pill px-3" id="tl-today">Heute</button>
                    <button class="btn btn-sm btn-outline-secondary rounded-pill px-3" id="tl-next">Monat <i class="bi bi-chevron-right"></i></button>
                </div>
            </div>
        </div>
        <div class="card-body p-2">
            <div id="urlaubsplaner-timeline" style="min-height:300px;"></div>
        </div>
    </div>

</div>

@if(Auth::user()->get_employee->is_hrm)

{{-- Modal: Neuer Urlaubsantrag --}}
<div class="modal fade" id="new-urlaubstage" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Urlaubsantrag</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hrm.vacation.new') }}" method="POST" novalidate>
                @csrf
                <input type="text" name="reason" hidden>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Mitarbeiter <span class="text-danger">*</span></label>
                            @if(!empty($employees))
                                <select class="form-select" id="emp-id" name="emp-id" required>
                                    @foreach($employees as $item)
                                        <option value="{{ $item->employee_id }}">{{ $item->first_name }} {{ $item->last_name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Startdatum <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="date_from" name="date_from" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Enddatum <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="date_to" name="date_to" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Arbeitstage <span class="text-danger">*</span></label>
                            <input type="text" pattern="^[1-9][0-9]?$|^30$" oninput="validateNumberInput(event)"
                                class="form-control" id="days_number" name="days_number" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Kommentar</label>
                            <input type="text" class="form-control" id="note" name="note">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-success rounded-pill px-3">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Genehmigen --}}
<div class="modal fade" id="gen-item" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold text-success"><i class="bi bi-check-circle me-2"></i>Urlaub genehmigen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hrm.vacation.permit') }}" method="POST">
                @csrf
                <input id="id" name="id" value="" hidden>
                <div class="modal-body">
                    <p class="mb-0">Möchten Sie diesen Urlaubsantrag genehmigen?</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-success rounded-pill px-3">Ja, genehmigen</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Genehmigen oder Ablehnen (von Timeline) --}}
<div class="modal fade" id="req-item" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Urlaubsantrag bearbeiten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Möchten Sie diesen Urlaubsantrag genehmigen oder ablehnen?</p>
            </div>
            <div class="modal-footer border-0 gap-2">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                <form action="{{ route('hrm.vacation.permit') }}" method="POST" class="d-inline">
                    @csrf
                    <input id="id" name="id" value="" hidden>
                    <button type="submit" class="btn btn-success rounded-pill px-3">Genehmigen</button>
                </form>
                <form action="{{ route('hrm.vacation.rejection') }}" method="POST" class="d-inline">
                    @csrf
                    <input id="id" name="id" value="" hidden>
                    <button type="submit" class="btn btn-danger rounded-pill px-3">Ablehnen</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Ablehnen --}}
<div class="modal fade" id="Abl-item" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold text-danger"><i class="bi bi-x-circle me-2"></i>Urlaub ablehnen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hrm.vacation.rejection') }}" method="POST">
                @csrf
                <input id="id" name="id" value="" hidden>
                <div class="modal-body">
                    <p class="mb-0">Möchten Sie diesen Urlaubsantrag ablehnen?</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-danger rounded-pill px-3">Ja, ablehnen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).on('click', '.accept_btn', function() {
    const id = $(this).attr('data-id');
    document.querySelectorAll('#gen-item #id').forEach(el => el.value = id);
});
$(document).on('click', '.ablehnung_btn', function() {
    const id = $(this).attr('data-id');
    document.querySelectorAll('#Abl-item #id').forEach(el => el.value = id);
});

function validateNumberInput(event) {
    const input = event.target;
    let value = input.value.replace(/[^\d]/g, '');
    const number = Math.min(Math.max(parseInt(value, 10) || 0, 1), 30);
    input.value = number.toString();
}
</script>

@endif

<script>
document.addEventListener('DOMContentLoaded', function() {

    @php
        $byDep = $employees->sortBy(fn($e) => ($e->get_department->code ?? 'ZZ') . $e->last_name)->groupBy(fn($e) => $e->get_department->department_id ?? 'none');
    @endphp
    var groups = new vis.DataSet([
        { id: 'feiertage', content: '<b style="font-size:12px">🗓 Feiertage</b>', className: 'group-feiertage', style: 'background:#fff9e6;' },
        @foreach($byDep as $depId => $depEmps)
            @php $dep = $depEmps->first()->get_department; @endphp
            { id: 'dep_{{ $depId }}', content: '<b style="font-size:12px">{{ e(addslashes($dep ? $dep->name : 'Ohne Abteilung')) }}</b>', nestedGroups: [{{ $depEmps->pluck('employee_id')->map(fn($id) => (int)$id)->join(', ') }}] },
            @foreach($depEmps as $emp)
                { id: {{ (int)$emp->employee_id }}, content: '<span style="font-size:12px">{{ e(addslashes($emp->first_name . ' ' . $emp->last_name)) }}</span>' },
            @endforeach
        @endforeach
    ]);

    var items = new vis.DataSet([
        @foreach($holidays->groupBy('date') as $date => $dayHolidays)
            @php
                $first = $dayHolidays->first();
                $color = $first->get_state->color ?? '#ffc107';
                $stateNames = $dayHolidays->map(fn($h) => $h->get_state->name ?? '')->filter()->join(', ');
                $tooltip = addslashes($first->fname . ($stateNames ? ' (' . $stateNames . ')' : ''));
            @endphp
            { id: 'h_{{ $date }}', group: 'feiertage', content: '<small style="font-size:10px;padding:0 3px">{{ e($first->fname) }}</small>', title: '{{ $tooltip }}', start: '{{ $date }}', end: '{{ \Carbon\Carbon::parse($date)->addDay()->format('Y-m-d') }}', type: 'range', style: 'background:{{ $color }};border-color:{{ $color }};color:#fff;border-radius:3px;cursor:default;' },
        @endforeach
    ]);

    var winStart = new Date(); winStart.setDate(1); winStart.setHours(0,0,0,0);
    var winEnd = new Date(winStart); winEnd.setMonth(winEnd.getMonth() + 3);

    function isoWeek(d) {
        var date = new Date(d.getTime()); date.setHours(0,0,0,0);
        date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
        var week1 = new Date(date.getFullYear(), 0, 4);
        return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
    }
    var DE_MONTHS = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];

    var options = {
        orientation: { axis: 'top', item: 'top' }, align: 'center',
        start: winStart, end: winEnd,
        min: new Date(winStart.getFullYear() - 1, 0, 1), max: new Date(winStart.getFullYear() + 2, 11, 31),
        selectable: true, editable: false, moveable: true, zoomable: true,
        zoomMin: 1000 * 60 * 60 * 24 * 1, zoomMax: 1000 * 60 * 60 * 24 * 180,
        stack: false, groupHeightMode: 'fixed', margin: { item: { horizontal: 0, vertical: 2 } },
        format: {
            minorLabels: function(date, scale, step) {
                var d = new Date(date);
                if (scale === 'day' || scale === 'weekday') {
                    if (d.getDay() === 1) return '<b style="font-size:13px">KW ' + isoWeek(d) + '</b> | ' + d.getDate();
                    return String(d.getDate());
                }
                if (scale === 'week') return '<b style="font-size:13px">KW ' + isoWeek(d) + '</b>';
                return '';
            },
            majorLabels: function(date, scale, step) {
                var d = new Date(date);
                if (scale === 'week' || scale === 'day' || scale === 'weekday') return DE_MONTHS[d.getMonth()] + ' ' + d.getFullYear();
                if (scale === 'month') return String(d.getFullYear());
                return '';
            }
        },
    };

    var container = document.getElementById('urlaubsplaner-timeline');
    var timeline = new vis.Timeline(container, items, groups, options);
    var eventsUrl = '{{ route('hrm.vacation.calendar-events') }}';
    var loadedRanges = {};

    function loadEvents(start, end) {
        var key = start.toISOString().split('T')[0] + '_' + end.toISOString().split('T')[0];
        if (loadedRanges[key]) return;
        loadedRanges[key] = true;
        function fmt(d) { return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); }
        fetch(eventsUrl + '?start=' + fmt(start) + '&end=' + fmt(end))
            .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
            .then(function(events) {
                var newItems = events.map(function(e) {
                    var p = e.extendedProps;
                    var tooltip = p.employee;
                    if (p.type === 'vacation') tooltip += ' | ' + (p.days || '') + ' Tage' + (p.note ? ' | ' + p.note : '');
                    return { id: e.id, group: parseInt(p.groupId), content: '<span style="font-size:11px;padding:0 3px">' + e.title + '</span>', start: e.start, end: e.end, title: tooltip, style: 'background:' + e.color + ';border-color:' + e.color + ';color:#fff;border-radius:3px;', vacationId: p.vacationId || null, eventType: p.type, status: p.status };
                });
                items.add(newItems);
            })
            .catch(function(err) { console.error('Timeline Fehler:', err); });
    }

    loadEvents(winStart, winEnd);
    timeline.on('rangechanged', function(props) { loadEvents(props.start, props.end); });

    @if(Auth::user()->get_employee->is_hrm)
        timeline.on('select', function(props) {
            if (!props.items.length) return;
            var item = items.get(props.items[0]);
            if (item && item.eventType === 'vacation' && item.status === null) {
                document.querySelectorAll('#req-item #id').forEach(function(el) { el.value = item.vacationId; });
                new bootstrap.Modal(document.getElementById('req-item')).show();
                timeline.setSelection([]);
            }
        });
    @endif

    document.getElementById('tl-today').addEventListener('click', function() {
        var s = new Date(); s.setDate(1); s.setHours(0,0,0,0);
        var e = new Date(s); e.setMonth(e.getMonth() + 3);
        timeline.setWindow(s, e, { animation: true });
    });
    document.getElementById('tl-prev').addEventListener('click', function() {
        var w = timeline.getWindow(), diff = w.end - w.start;
        timeline.setWindow(new Date(w.start - diff/3), new Date(w.end - diff/3), { animation: true });
    });
    document.getElementById('tl-next').addEventListener('click', function() {
        var w = timeline.getWindow(), diff = w.end - w.start;
        timeline.setWindow(new Date(w.start + diff/3), new Date(w.end + diff/3), { animation: true });
    });
});

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>

@endsection