@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') }}" />
@section('content')
    @php
        $authUser = request()->user();
    @endphp
    <div class="content">
        @include('layouts.partials.single-page-header', [
            'menu' => [
                'image' => asset('images/side-bar-icon/urenregistratie_orange.svg'),
                'links' => [
                    [
                        'route' => route('users.vacationhours.index', $id),
                        'text' => __('menu.vacationhour_title'),
                        'active' => 1,
                    ],
                    [
                        'route' => route('users.leaves.index', $id),
                        'text' => __('menu.absence_title'),
                        'active' => 0,
                    ],
                    [
                        'route' => route('users.overtimes.indexByUserOverView', $id),
                        'text' => __('menu.extra_hour_title'),
                        'active' => 0,
                    ],
                    [
                        'route' => route('users.overtimes.compensations', $id),
                        'text' => __('forms.overtime_compensation_history'),
                        'active' => 0,
                    ],
                ],
            ],
            'userData' => $user,
            'dateWiseContract' => $contract,
        ])
        @include('timetracker::vacationhours.vacation-hours-starts', [
            'user' => $user,
        ])

        <h4 class="-mb-4">{{ __('title.vacation_hours_summery') }} :</h4>

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

        <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">
        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: "{{ isset($id) ? route('users.vacationhours.index', $id) : route('vacationhours.index') }}",
            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'
                },
                {
                    data: 'type',
                    name: 'type.name'
                },
                {
                    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 (window.summeryTable) {
                    $('#comments-form').find("textarea").val("");
                    window.summeryTable.draw();
                }
            });
        });

        $('.reportrange').daterangepicker({
            opens: 'left',
            autoApply: true,
            autoUpdateInput: false,
            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