@extends('layouts.app')
@section('title', trans('menu.vacationhour_title'))
@section('page-styles')
    <link type="text/css" rel="stylesheet" href="{{ asset('vendors/daterangepicker/css/daterangepicker.css') }}" />
@endsection
@section('content')
    <div class="content">
        @php
            $links = [
                [
                    'route' => route('vacationhours.index'),
                    'text' => __('menu.vacationhour_title'),
                    'active' => 1,
                ],
                [
                    'route' => route('leaves.index'),
                    'text' => __('menu.absence_title'),
                    'active' => 0,
                ],
                [
                    'route' => route('overtimes.indexById'),
                    'text' => __('menu.extra_hour_title'),
                    'active' => 0,
                ],
                [
                    'route' => route('overtimes.compensations'),
                    'text' => __('forms.overtime_compensation_history'),
                    'active' => 0,
                ],
            ];

            $links = is_module_enabled('TimeClock')
                ? array_merge($links, [
                    'route' => route('time-clocks.index'),
                    'text' => __('menu.time_clock_title'),
                    'active' => 0,
                ])
                : $links;
        @endphp

        @include('layouts.partials.single-page-header', [
            'menu' => [
                'image' => asset('images/side-bar-icon/urenregistratie_orange.svg'),
                'links' => $links,
            ],
            'userData' => $user,
            'dateWiseContract' => $contract,
        ])
        @include('timetracker::vacationhours.vacation-hours-starts', [
            'user' => $user,
        ])

        @include('timetracker::vacationhours.filters', ['dashboard' => 1, 'isTeam' => 0])

        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    <th class="min-w-[135px]">{{ __('tables.start_date') }}</th>
                    <th class="min-w-[135px]">{{ __('tables.end_date') }}</th>
                    <th>{{ __('tables.hours') }}</th>
                    <th>{{ __('tables.adjust_hours') }}</th>
                    <th>{{ __('tables.status_title') }}</th>
                    <th>{{ __('tables.reason') }}</th>
                    <th>{{ __('tables.requested_by') }}</th>
                    <th>{{ __('tables.action_title') }}</th>
                </tr>
            </thead>
            <tfoot>
                <tr class="bg-custom-blue-25">
                    <th class="text-right" colspan="2">{{ __('forms.lbl_total') }}</th>
                    <th id="total-hours" class="!text-custom-grey-900 !text-sm-semibold">0</th>
                    <th colspan="5"></th>
                </tr>
            </tfoot>
        </table>
        @include('timetracker::vacationhours.comments')
        @include('timetracker::vacationhours.duplicatTimeTracker')
    </div>

@endsection

@section('panel-content')
    @include('timetracker::vacationhours.show')
    @include('timetracker::vacationhours.form')
@stop


@section('footer-script')
    <script type="text/javascript" src="{{ asset('vendors/daterangepicker/js/daterangepicker.js') }}"></script>
    @include('timetracker::vacationhours.scripts')

    <script type="text/javascript">

        jQuery(document).ready(function() {
            const $position = $('.position-div');

            const updatePosition = () => {
                if ($(window).width() <= 550) {
                    $position.removeClass('position-absolute');
                    return;
                }

                $position.addClass('position-absolute');
            }

            updatePosition();

            $(window).resize(function() {
                updatePosition();
            });

            PDDataTable({
                searching: false,
                url: "{{ route('vacationhours.index') }}",
                //searching : false,
                drawCallback: function(settings, json) {
                    AddReadMore();
                    // Calculate total hours
                    let totalHours = 0;
                    this.api().rows().every(function() {
                        const data = this.data();
                        if (data.hours) {
                            totalHours += parseFloat(data.hours) || 0;
                        }
                    });

                    // Update total hours display with 2 decimal places
                    $('#total-hours').text(totalHours.toFixed(2));
                },
                columns: [{
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        data: 'hours_length',
                        name: 'hours'
                    },
                    {
                        data: 'adjust_hours',
                        name: 'compensation.hours'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        className: "text-center"
                    },
                    {
                        data: 'type',
                        name: 'type.name',
                        className: "text-center"
                    },
                    {
                        data: 'requested_by',
                        name: 'requested_by'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: "text-right"
                    }
                ],
                order: [0, 'asc'],
                callbackFunc: function(d) {
                    d.term = $('input[name="query"]').val();
                    d.status = $('input[name="status[]"]:checked').map(function() {
                            return $(this).val();
                        })
                        .get();

                    d.type = $('#type').val();

                    d.range = $('input[name="range"]').val();
                }
            });

            $('body').on('click', '.btn-comments-save', function(event) {
                event.preventDefault();
                data = $('#comments-form').serialize();

                PDRequest({
                    type: "POST",
                    url: $('#comments-form').prop("action"),
                    data: data,
                    event: event
                }).then((response) => {
                    if (PDCommentsTable) {
                        $('#comments-form').find("textarea").val("");
                        PDCommentsTable.draw();
                        $("#modal-comments-dialog").modal('hide');
                    }
                });
            });

            $('.reportrange').daterangepicker({
                opens: 'left',
                autoApply: true,
                autoUpdateInput: false,
                showWeekNumbers: true,
                startDate: moment(),
                endDate: moment(),
                locale: {
                    format: "{{ getDateFormat() }}",
                    customRangeLabel: "{{ trans('label.pick_date_range') }}",
                    "firstDay": 1,
                    "daysOfWeek": daysOfWeek,
                    "monthNames": monthNames
                },
                //ranges  : rangeFilters,
                alwaysShowCalendars: true,
                showWeekNumbers: true,
                showDropdowns: true
            }, function(start, end) {
                $('.reportrange span.date-text').html(start.format('D MMM, YYYY') + ' - ' + end.format(
                    'D MMM, YYYY'));
                $(document).trigger('onRangeChanged');
            });

            $('.reportrange').on('apply.daterangepicker', function(ev, picker) {
                $("input[name='range']").val(picker.startDate.format("{{ getDateFormat() }}") + ' - ' +
                    picker.endDate.format("{{ getDateFormat() }}"));
                PDTable.draw();
            });

            $('.reportrange').on('cancel.daterangepicker', function(ev, picker) {
                $("input[name='range']").val('');
                PDTable.draw();
            });


        });
    </script>
@stop