@extends('layouts.app')
@section('title', trans('menu.overtime_compensation_history'))
@section('page-styles')
<link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
@endsection
@section('content')
    @php $user = 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'=> 0
                ],
                [
                    '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'=> 1
                ]


            ]
        ], 'dateWiseContract' => $contract,
        ])

        @include('timetracker::compensation.filters', ['permissionCheck' => 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>{{trans('tables.hours')}}</th>
                    <th>{{trans('forms.lbl_type')}}</th>
                    <th>{{__('tables.status_title')}}</th>
                    <th>{{__('tables.requested_by')}}</th>
                    <th>{{trans('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="4"></th>
                </tr>
            </tfoot>
        </table>
        @include('timetracker::vacationhours.duplicatTimeTracker')
    </div>

@endsection

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

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

    <script type="text/javascript">
        const $datable = $('#datatable');

        PDDataTable({
            searching : false,
            serverSide : true,
            url: "{{route('users.overtimes.compensations', $id)}}",
            columns:[
                { data: 'start_date', name: 'start_date' },
                { data: 'end_date', name: 'end_date' },
                { data: 'hours_length', name: 'hours' },
				{ data: 'type', name: 'type',  className:"text-center"},
                { data: 'status', name: 'status',  className:"text-center"},
                { data: 'requested_by', name: 'requested_by' },
				{ data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right"}
            ],
            order : [2, 'asc'],
            callbackFunc  : function(d){
                updateTotalApprovedHours();
                d.term = $('input[name="query"]').val();
                d.status = $('input[name="status[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                d.type = $('input[name="type[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                d.range = $('input[name="range"]').val();
			},
            "drawCallback": function(settings, start, end, max, total, pre) {
                // 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));
            },
        });

        $('.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();
        });

        function updateTotalApprovedHours() {
            $.ajax({
                url: "{{ route('compensations.hours') }}",
                type: 'GET',
                data: {
                    user_id: {{$userData->id}},
                },
                success: function(data) {
                    var totalHours = data.total_hours === null ? 0 : data.total_hours;

                    $('.approvedHour').text(totalHours);
                }
            });
        }

        $("body").on("click", ".btn-delete", function(e) {
            setTimeout(function() {
                updateTotalApprovedHours();
            }, 1000);
        });
    </script>
@stop