@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">
        @php
            $links = [
                [
                    'route' => route('vacationhours.index'),
                    'text' => __('menu.vacationhour_title'),
                    'active' => 0,
                ],
                [
                    'route' => route('leaves.index'),
                    'text' => __('menu.absence_title'),
                    'active' => 1,
                ],
                [
                    '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,
        ])

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

        <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: "{{ route('leaves.index') }}",
            //searching : false,
            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: [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();
            },
            "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