@extends('layouts.app')
@section('title', trans('menu.absence_title'))
@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'=> 1
                ],
                [
                    '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
                ]

            ]
        ]])

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

        <table id="datatable" class="table-custom-striped !w-full">
            <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.reason')}}</th>
                    <th>{{__('tables.status_title')}}</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="4"></th>
                </tr>
            </tfoot>
        </table>

        @include('timetracker::vacationhours.duplicatTimeTracker')
    </div>

@endsection

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

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

    <script type="text/javascript">
        $.fn.modal.Constructor.prototype._enforceFocus = function() {};

        PDDataTable({
            searching : false,
            url: "{{(isset($id)? route('users.leaves.index', $id) : route('leaves.index'))}}",
            columns:[
                { data: 'start_date', name: 'start_date' },
				{ data: 'end_date', name: 'end_date' },
                { data: 'hours_length', name: 'hours' },
				{ data: 'type', name: 'type.name' },
                { data: 'status', name: 'status' },
                { data: 'requested_by', name: 'requested_by' },
				{ data: 'action', name: 'action', orderable: false, searchable : false,  className:"text-right" }
            ],
            order : [2, '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();
			},
            "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));
            },
        });

        function cb(start, end) {
            $('.reportrange span.date-text').html(start.format('D MMM, YYYY') + ' - ' + end.format(
                'D MMM, YYYY'));
            $(document).trigger('onRangeChanged');
        }

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

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