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

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

        {{-- new-urlaubstage --}}
        <div class="modal fade modal-dialog-scrollable modal-lg" id="new-urlaubstage" data-bs-backdrop="static"
            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="{{ route('hrm.vacation.new') }}" method="POST" class="needs-validation" novalidate>
                        {{-- <form action="{{ route('spm.department.new') }}" method="POST" class="needs-validation" novalidate> --}}
                        @csrf

                        <div class="modal-header">
                            <h5 class="modal-title " id="staticBackdropLabel"> Urlaubsantrag</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">



                            <div class="row mt-2">
                                <div class="col">
                                    Mitarbeiter :
                                    @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>
                                        {{-- @else
                                        <input type="text" class="form-control" id="emp_id2" name="emp_id2"> --}}
                                    @endif
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col">
                                    {{-- <label>Grund </label> --}}
                                    <input type="text" class="form-control" id="reason" name="reason" hidden>
                                    Hiermit beantrage ich Urlaub im Zeitraum:
                                </div>

                            </div>

                            <div class="row mt-2">
                                <div class="col">
                                    <label for="date_from">Startdatum </label>
                                    <input type="date" class="form-control" id="date_from" name="date_from" required>
                                </div>
                                <div class="col">
                                    <label for="date_to">Enddatum </label>
                                    <input type="date" class="form-control" id="date_to" name="date_to" required>
                                </div>
                            </div>

                            {{-- <div class="row mt-2">
                            <div class="col">
                                <label  >Enddatum: </label>
                                <input type="date" class="form-control" id="date_to" name="date_to">
                            </div>
                        </div> --}}






                            <div class="row mt-2">
                                <div class="col">
                                    <label>Kommentar: </label>
                                    <input type="text" class="form-control" id="note" name="note">
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col">
                                    <label>Arbeitstage </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>


                            {{-- <div class="row mt-2">
                            <div class="col">
                                <label  >Genehmigt von: </label>
                                <input type="date" class="form-control" id="genehmigt_von" name="genehmigt_von">
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col">
                                <label  >Genehmigt bis: </label>
                                <input type="date" class="form-control" id="genehmigt_bis" name="genehmigt_bis">
                            </div>
                        </div> --}}



                            {{-- <div class="row mt-2">
                            <div class="col">
                                <label  >Serverantwort: </label>
                                <input type="text" class="form-control" id="serverantwort" name="serverantwort">
                            </div>
                        </div> --}}

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                            <button type="submit" class="btn btn-success">speichern</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade modal-dialog-scrollable modal-lg" id="gen-item" data-bs-backdrop="static"
            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="{{ route('hrm.vacation.permit') }}" method="POST" class="needs-validation" novalidate>
                        @csrf

                        <input id="id" name="id" value="" hidden>
                        <div class="modal-header">
                            <h5 class="modal-title " id="staticBackdropLabel"> Urlaub Bestätigung</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">

                            <div class="row mt-2">
                                <div class="col">
                                    <h4 class="text-center">Möchten Sie den Urlaub genehmigen: </h4>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                            <button type="submit" class="btn btn-success">Ja</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade modal-dialog-scrollable modal-lg" id="req-item" data-bs-backdrop="static"
            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">



                    <div class="modal-header">
                        <h5 class="modal-title " id="staticBackdropLabel"> Urlaub Bestätigung</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <div class="row mt-2">
                            <div class="col">
                                <h4 class="text-center">Was soll es ? </h4>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <form action="{{ route('hrm.vacation.permit') }}" method="POST" class="needs-validation"
                            novalidate>
                            @csrf
                            <input id="id" name="id" value="" hidden>
                            <button type="submit" class="btn btn-success">Genehmigen</button>
                        </form>
                        <form action="{{ route('hrm.vacation.rejection') }}" method="POST" class="needs-validation"
                            novalidate>
                            @csrf
                            <input id="id" name="id" value="" hidden>
                            <button type="submit" class="btn btn-danger">Ablehnen</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>




        {{-- abl-item --}}
        <div class="modal fade modal-dialog-scrollable modal-lg" id="Abl-item" data-bs-backdrop="static"
            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="{{ route('hrm.vacation.rejection') }}" method="POST" class="needs-validation"
                        novalidate>
                        @csrf

                        <input id="id" name="id" value="" hidden>
                        <div class="modal-header">
                            <h5 class="modal-title " id="staticBackdropLabel"> Urlaub Ablehnung</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">

                            <div class="row mt-2">
                                <div class="col">
                                    <h4 class="text-center">Möchten Sie den Urlaub ablehnen: </h4>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                            <button type="submit" class="btn btn-danger">Ja</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    @endif


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

            <p class="text-center"> {{ session('msg') }}</p>

        </div>
        <script>
            $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
                $("#success-alert").slideUp(1000);
            });
        </script>
    @endif






    <div class="container-fluid bg-white border px-3 py-2 rounded shadow-sm mt-2">
        <div class="row align-items-center">
            <div class="col">
                <h6 class="mb-0 fw-bold">HRM - Urlaubsplaner {{ Carbon\Carbon::now()->format('Y') }}</h6>
            </div>
            <div class="col text-muted ">
                Heute, den {{ Carbon\Carbon::now()->format('d.m.Y') }}
                &nbsp;|&nbsp;
                Im Urlaub: <strong>{{ $Vacation_Request_heute }}</strong> Mitarbeiter
            </div>
            @if (Auth::user()->get_employee->is_hrm)
                <div class="col-auto">
                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                        data-bs-target="#new-urlaubstage">
                        <i class="bi bi-plus-square"></i> Urlaubsantrag
                    </button>
                </div>
            @endif
        </div>
    </div>

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


        <div class="container-fluid bg-white border px-2 p-1  fs-4 rounded shadow-sm mt-2">

            <div class="row">

                <div class="col">
                    <a href="{{ route('hrm.vacation') }}" class="text-decoration-none text-black">
                        <div class=" p-2 border rounded ">
                            <div class="card-body">
                                <div class="col-12">
                                    <h4>{{ $Vacation_new }}</h4>
                                    <h6 class="text-secondary ">Neue Anträge</h6>
                                </div>
                                <div class="col-12 bg-info border-2  rounded " style="height: 4px;">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col">
                    <a href="{{ route('hrm.vacation.status', ['id' => '1']) }}" class="text-decoration-none text-black">
                        <div class="p-2 border rounded">
                            <div class="card-body">
                                <div class="col-12">

                                    <h4>{{ $Vacation_gen }}</h4>
                                    <h6 class="text-secondary ">Genehmigent</h6>
                                </div>
                                <div class="col-12 bg-success border-2  rounded " style="height: 4px;">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col">
                    <a href="{{ route('hrm.vacation.status', ['id' => '0']) }}" class="text-decoration-none text-black">
                        <div class="p-2 border rounded">
                            <div class="card-body">
                                <div class="col-12">
                                    <h4>{{ $Vacation_abl }}</h4>
                                    <h6 class="text-secondary "> Ablehnung</h6>
                                </div>
                                <div class="col-12 bg-danger border-2  rounded " style="height: 4px;">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>





            </div>
        </div>



        <div class="container-fluid bg-white border px-2 p-1   rounded shadow-sm mt-2">









            <table class="table table-responsive table-hover contact-list ">
                <thead>
                    <tr>
                        {{-- <th class="col-1">
                                    <form action="{{ route('hrm.vacation.sort') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="sort" value="id">
                                        <button type="submit" class="btn btn-outline-info btn-sm"><small>ID</small>
                                            @if (Session::get('crm_dep_sort') == 'id')
                                                <span class="sorting-icons"> <i
                                                        class="bi bi-sort-numeric-{{ Session::get('crm_dep_sort_range') == 'asc' ? 'down' : 'up' }}"></i></span>
                                            @else
                                                <i class="bi bi-filter-left"></i>
                                            @endif
                                        </button>
                                    </form>
                                    <a class="text-decoration-none text-info"></a>
                                </th> --}}

                        <th class="col">
                            <small class="text-decoration-none text-info">Vorjahr | Ansp. | Gesamt -- genommen | genehmigt
                                auch
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        <th class="col-1">
                            <small class="text-decoration-none text-info">Verfügbar
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>
                        {{--
                        <th class="col-1">
                            <small class="text-decoration-none text-info">Geplant noch
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>
                        <th class="col-1">
                            <small class="text-decoration-none text-info">davon-genehmigt
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th> --}}

                        <th class="col-1">
                            <small class="text-decoration-none text-info">Mitarbeiter
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>
                        {{-- @endif --}}
                        <th class="col-1">
                            <small class="text-decoration-none text-info">Startdatum
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        <th class="col-1">
                            <small class="text-decoration-none text-info">Enddatum
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        <th class="col-1">
                            <small class="text-decoration-none text-info">Abeitstage
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        {{-- <th class="col-2">
                            <small class="text-decoration-none text-info">Grund
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th> --}}

                        <th class="col-2">
                            <small class="text-decoration-none text-info">Bemerkung
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        <th class="col-1">
                            <small class="text-decoration-none text-info">Status
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        <th class="col">
                            <small class="text-decoration-none text-info">Aktion
                                <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                        </th>

                        {{-- @if (Auth::user()->get_employee->is_mgt)
                                    <th class="col"><small class=" text-info">Action</small></th>
                                @endif --}}
                    </tr>
                </thead>
                <tbody id="clients-td-container" class="small">
                    <!--ajax content here-->
                    <!--each row-->
                    @if ($Vacation_Request->count() > 0)
                        @foreach ($Vacation_Request as $item)
                            <tr id="">
                                <td> {{ $item->get_employee->contract->get_days->last_year_vacation_rest }} Tage |
                                    {{ $item->get_employee->contract->get_days->vacation_entitlement }} Tage
                                    |
                                    <b>{{ $item->get_employee->contract->get_days->last_year_vacation_rest + $item->get_employee->contract->get_days->vacation_entitlement }}
                                        Tage</b>
                                    @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
                                    --
                                    {{ $got_vacations }} Tage
                                    |
                                    {{ $Vacation_all->where('fk_employee_id', $item->get_employee->employee_id)->where('is_accepted', '1')->where('date_from', '>', now()->toDateString())->sum('days_number') }}
                                    Tage

                                </td>

                                <td>
                                    <b>
                                        @if ($item->get_employee->contract != null)
                                            {{-- {{ $item->get_employee->contract->get_days->vacation_rest }}  --}}
                                            {{ $item->get_employee->contract->get_days->last_year_vacation_rest }}
                                            Tage
                                        @else
                                            ---
                                        @endif
                                    </b>



                                </td>
                                {{-- <td>
                                    <b>

                                        {{ $Vacation_all->where('fk_employee_id', $item->get_employee->employee_id)->where('date_from', '>', now()->toDateString())->sum('days_number') }}
                                    </b>
                                </td>
                                <td>

                                    {{ $Vacation_all->where('fk_employee_id', $item->get_employee->employee_id)->where('is_accepted', '1')->where('date_from', '>', now()->toDateString())->sum('days_number') }}

                                </td> --}}
                                <td class="small ">
                                    <small>{{ $item->get_employee->first_name }}
                                        {{ $item->get_employee->last_name }}</small>

                                </td>

                                <td class="small">
                                    {{ Carbon\Carbon::parse($item->date_from)->format('d.m.Y') }}
                                    {{-- {{ $item->date_from }} --}}
                                </td>

                                <td class="small">
                                    {{ Carbon\Carbon::parse($item->date_to)->format('d.m.Y') }}

                                </td>

                                <td>
                                    {{ $item->days_number }}
                                </td>

                                {{-- <td class="small">
                                    {{ $item->reason }}
                                </td> --}}

                                <td class="small">
                                    {{ $item->note }}
                                </td>
                                <td>


                                    @if ($item->is_accepted == 1)
                                        Genemigt
                                    @elseif ($item->is_accepted === 0)
                                        abgelehnt
                                    @elseif ($item->is_accepted == null)
                                        wartet
                                    @endif

                                </td>

                                <td>

                                    @if ($item->is_accepted == 1)
                                        {{-- <button class="btn btn-sm btn-danger"> --}}
                                        <button class="btn btn-sm btn-danger ablehnung_btn" data-bs-toggle="modal"
                                            data-bs-target="#Abl-item" data-id="{{ $item->id }}">
                                            <i class="bi bi-x-square"></i> Abl.
                                        </button>
                                    @elseif ($item->is_accepted === 0)
                                        <button class="btn btn-sm btn-success accept_btn" data-bs-toggle="modal"
                                            data-bs-target="#gen-item" data-id="{{ $item->id }}">
                                            <i class="bi bi-check-square"></i> Gen.
                                        </button>
                                    @elseif ($item->is_accepted == null)
                                        <button class="btn btn-sm btn-success accept_btn" data-bs-toggle="modal"
                                            data-bs-target="#gen-item" data-id="{{ $item->id }}">
                                            <i class="bi bi-check-square"></i> Gen.
                                        </button>


                                        {{-- <button class="btn btn-sm btn-danger"> --}}
                                        <button class="btn btn-sm btn-danger ablehnung_btn" data-bs-toggle="modal"
                                            data-bs-target="#Abl-item" data-id="{{ $item->id }}">
                                            <i class="bi bi-x-square"></i> Abl.
                                        </button>
                                    @endif

                                </td>



                            </tr>
                            <!--each row-->
                        @endforeach
                    @else
                        <tr>
                            <td class=" text-center" colspan="100%">
                                <h6 class=" text-center">Keine neue Anträge </h6>
                            </td>
                        </tr>
                    @endif
                </tbody>

            </table>


            {{-- <h5> + alte Anträge</h5> --}}

            @if (Auth::user()->get_employee->is_hrm)
                <div class="container-fluid">

                    <p class="d-inline-flex gap-1">

                        <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse"
                            data-bs-target="#c1" aria-expanded="false" aria-controls="c1">
                            + alte Anträge
                            ({{ $Vacation_all->where('is_closed', '==', '1')->count() }})
                        </button>
                    </p>

                    <div class="collapse" id="c1">
                        <div class="card card-body">
                            <table class="table table-responsive table-hover contact-list ">
                                <thead>
                                    <tr>


                                        {{-- <th class="col-1">
                                        <small class="text-decoration-none text-info">Verfügbar
                                            <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                                    </th> --}}

                                        <th class="col-1">
                                            <small class="text-decoration-none text-info">Mitarbeiter
                                                <span class="sorting-icons"><i
                                                        class="ti-arrows-vertical"></i></span></small>
                                        </th>
                                        {{-- @endif --}}
                                        <th class="col-1">
                                            <small class="text-decoration-none text-info">Startdatum
                                                <span class="sorting-icons"><i
                                                        class="ti-arrows-vertical"></i></span></small>
                                        </th>

                                        <th class="col-1">
                                            <small class="text-decoration-none text-info">Enddatum
                                                <span class="sorting-icons"><i
                                                        class="ti-arrows-vertical"></i></span></small>
                                        </th>

                                        <th class="col-1">
                                            <small class="text-decoration-none text-info">Abeitstage
                                                <span class="sorting-icons"><i
                                                        class="ti-arrows-vertical"></i></span></small>
                                        </th>

                                        {{-- <th class="col-2">
                                        <small class="text-decoration-none text-info">Grund
                                            <span class="sorting-icons"><i class="ti-arrows-vertical"></i></span></small>
                                    </th> --}}

                                        <th class="col-2">
                                            <small class="text-decoration-none text-info">Bemerkung
                                                <span class="sorting-icons"><i
                                                        class="ti-arrows-vertical"></i></span></small>
                                        </th>

                                        <th class="col-1">
                                            <small class="text-decoration-none text-info">Status
                                                <span class="sorting-icons"><i
                                                        class="ti-arrows-vertical"></i></span></small>
                                        </th>


                                        {{-- @if (Auth::user()->get_employee->is_mgt)
                                                <th class="col"><small class=" text-info">Action</small></th>
                                            @endif --}}
                                    </tr>
                                </thead>
                                <tbody id="clients-td-container" class="">
                                    <!--ajax content here-->
                                    <!--each row-->
                                    @if ($Vacation_all->where('is_closed', '==', '1')->count() > 0)
                                        @foreach ($Vacation_all->where('is_closed', '==', '1')->sortByDesc('date_from') as $item)
                                            <tr id=""
                                                class="@if ($item->is_accepted & ($item->date_from <= now()->toDateString())) text-success fs-5 @else fs-6 @endif">


                                                <td class="">
                                                    {{ $item->get_employee->first_name }}
                                                    {{ $item->get_employee->last_name }}

                                                </td>

                                                <td class="">
                                                    {{ Carbon\Carbon::parse($item->date_from)->format('d.m.Y') }}
                                                    {{-- {{ $item->date_from }} --}}
                                                </td>

                                                <td class="">
                                                    {{ Carbon\Carbon::parse($item->date_to)->format('d.m.Y') }}

                                                </td>

                                                <td>
                                                    {{ $item->days_number }}
                                                </td>

                                                {{-- <td class="small">
                                                {{ $item->reason }}
                                            </td> --}}

                                                <td class="">
                                                    {{ $item->note }}
                                                </td>
                                                <td>

                                                    {{-- {{ $item->is_accepted }} --}}
                                                    @if ($item->is_accepted == '1')
                                                        genehmigt
                                                        @if ($item->is_accepted & ($item->date_from <= now()->toDateString()))
                                                            und genommen
                                                        @endif
                                                    @elseif ($item->is_accepted == '0')
                                                        abgelehnt
                                                    @elseif ($item->is_accepted == null)
                                                        in bearbeitung
                                                    @endif

                                                </td>






                                            </tr>
                                            <!--each row-->
                                        @endforeach
                                    @else
                                        <tr>
                                            <td class=" text-center" colspan="100%">
                                                <h6 class=" text-center">Keine neue Anträge </h6>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            @endif


        </div>

    @endif

    {{-- vis-timeline lokal (v7.7.3) --}}
    <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>
        /* Bootstrap-Reset: alle table/tr/td innerhalb Timeline neutralisieren */
        #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;
        }

        /* Gruppen-Labels (linke Spalte) */
        #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;
        }

        /* Abteilungs-Header (hat nestedGroups → level 0) */
        #urlaubsplaner-timeline .vis-labelset .vis-label.vis-group-level-0 {
            background: #e9ecef !important;
        }

        /* Mitarbeiter-Zeilen (level 1) */
        #urlaubsplaner-timeline .vis-labelset .vis-label.vis-group-level-1 {
            background: #fff !important;
        }

        /* vis-timeline interner Debug-Style überschreiben */
        #urlaubsplaner-timeline .vis-group-level-unknown-but-gte1 {
            border: 1px solid #e9ecef !important;
        }

        /* Inhalts-Zeilen (rechte Seite) */
        #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;
        }

        /* Zeitachse */
        #urlaubsplaner-timeline .vis-time-axis .vis-text {
            color: #495057;
            font-size: 11px;
        }

        #urlaubsplaner-timeline .vis-panel.vis-top {
            border-color: #dee2e6 !important;
        }

        /* Feiertage-Zeile: dicke untere Border */
        #urlaubsplaner-timeline .vis-label.group-feiertage,
        #urlaubsplaner-timeline .vis-group.group-feiertage {
            border-bottom: 3px solid #495057 !important;
        }

        /* Wochenende */
        #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="container-fluid bg-white border px-2 p-2 rounded shadow-sm mt-2">

        {{-- Legende --}}
        <div class="d-flex gap-3 mb-2 ps-1 fs-6 flex-wrap align-items-center">
            <span><span class="badge" style="background:#198754">&nbsp;&nbsp;</span> Urlaub genehmigt</span>
            <span><span class="badge" style="background:#0d6efd">&nbsp;&nbsp;</span> Urlaubsantrag</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 class="ms-auto d-flex gap-1">
                <button class="btn btn-sm btn-outline-secondary" id="tl-prev">‹ Monat</button>
                <button class="btn btn-sm btn-outline-primary" id="tl-today">Heute</button>
                <button class="btn btn-sm btn-outline-secondary" id="tl-next">Monat ›</button>
            </div>
        </div>

        <div id="urlaubsplaner-timeline" style="min-height:300px;"></div>
    </div>

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

            // Abteilungen + Mitarbeiter als verschachtelte Gruppen
            @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([
                // Feiertage-Zeile ganz oben
                {
                    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
            ]);

            // Feiertage als Buttons in der ersten Zeile
            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
            ]);

            // Zeitfenster: aktueller Monat + 2 Monate
            var winStart = new Date();
            winStart.setDate(1);
            winStart.setHours(0, 0, 0, 0);
            var winEnd = new Date(winStart);
            winEnd.setMonth(winEnd.getMonth() + 3);

            // ISO Kalendarwoche berechnen
            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, // min 1 Tag
                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);
                        // Einzelne Tage (normal & weekday scale)
                        if (scale === 'day' || scale === 'weekday') {
                            if (d.getDay() === 1) { // Montag → KW + Tag
                                return '<b style="font-size:13px">KW ' + isoWeek(d) + '</b> | ' + d
                                    .getDate();
                            }
                            return String(d.getDate());
                        }
                        // Wochen-Scale (weit rausgezoomt)
                        if (scale === 'week') {
                            return '<b style="font-size:13px">KW ' + isoWeek(d) + '</b>';
                        }
                        // Monate, Jahre usw. → Standard
                        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;

                // Datum lokal formatieren (kein UTC-Versatz)
                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) {
                        console.log('Timeline Events geladen:', events.length, 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);

            // Beim Scrollen nachladen
            timeline.on('rangechanged', function(props) {
                loadEvents(props.start, props.end);
            });

            @if (Auth::user()->get_employee->is_hrm)
                // Klick auf Antrag → Modal
                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

            // Navigation-Buttons
            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();
                var 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();
                var diff = w.end - w.start;
                timeline.setWindow(new Date(w.start + diff / 3), new Date(w.end + diff / 3), {
                    animation: true
                });
            });
        });
    </script>








    @if (Auth::user()->get_employee->is_hrm)
        <script>
            $(document).on('click', '.accept_btn', function() {
                    let id = $(this).attr('data-id');
                    // $('#id').val(id);
                    const elements1 = document.querySelectorAll('#id');

                    // Iterate through each element and set the value
                    elements1.forEach(element => {
                        element.value = id;
                    });
                    // document.getElementById('ptitle').innerHTML = "You pressed ";
                }

            );

            $(document).on('click', '.ablehnung_btn', function() {
                    let id = $(this).attr('data-id');
                    // $('#id').val(id);
                    const elements1 = document.querySelectorAll('#id');

                    // Iterate through each element and set the value
                    elements1.forEach(element => {
                        element.value = id;
                    });
                    // document.getElementById('ptitle').innerHTML = "You pressed ";
                }

            );
            $(document).on('click', '.req_btn', function() {
                let id = $(this).attr('data-id');


                const elements1 = document.querySelectorAll('#id');

                // Iterate through each element and set the value
                elements1.forEach(element => {
                    element.value = id;
                });


                // const elements2 = document.querySelectorAll('#id2');

                // // Iterate through each element and set the value
                // elements2.forEach(element2 => {
                //     element2.value = id;
                // });

            });

            function validateNumberInput(event) {
                const input = event.target;
                let value = input.value;
                // Remove all non-digit characters
                value = value.replace(/[^\d]/g, '');
                // Convert to number and limit to 1-99
                const number = Math.min(Math.max(parseInt(value, 10) || 0, 1), 30);
                input.value = number.toString();
            }
        </script>
    @endif
    <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
@endsection