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

        <livewire:timetracker::widgets.overtime-schedule-overview :user="$userData" />

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

        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    {{-- <th class="text-left">{{ trans('forms.lbl_day') }}</th> --}}
                    <th class="min-w-[135px]">{{ __('tables.date') }}</th>
                    <th>{{ __('tables.hours') }}</th>
                    <th>{{ __('tables.note_title') }}</th>
                    <th>{{ __('tables.status_title') }}</th>
                    <th>{{__('tables.requested_by')}}</th>
                    <th class="text-right">{{ __('tables.action_title') }}</th>
                </tr>
            </thead>
            <tfoot>
                <tr class="bg-custom-blue-25">
                    <th class="text-right">{{ __('tables.total_hours') }}</th>
                    <th id="total-hours" class="!text-custom-gray-900 !text-sm-semibold">0</th>
                    <th class="text-custom-gray-900 text-sm-semibold" colspan="4"></th>
                </tr>
            </tfoot>
        </table>
    </div>
@stop

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

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

    @include('timetracker::overtimes.scripts')

    <script type="text/javascript">
        let date = '{{ request()->has('date') && request()->get('date') != '' ? date(request()->get('date')) : '' }}';

        date = (date != "") ? moment(date, "{{ getDateFormat() }}") : '';

        PDDataTable({
            searching : false,
            url: "{{ route('users.overtimes.indexByUserOverView', $id) }}",
            columns: [
                {data: 'date', name: 'date'},
                {data: 'hours', name: 'hours'},
                {data: 'description', name: 'description', className: "text-center", orderable: false},
                {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: [1, '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.raw_hours) {
                        totalHours += parseFloat(data.raw_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();
        });

        // Handle export button click to include filters
        $('#export-btn').on('click', function(e) {
            e.preventDefault();

            // Get current filters
            let filters = {
                user_id: {{ $id }},
                term: $('input[name="query"]').val(),
                status: $('input[name="status[]"]:checked').map(function() {
                    return $(this).val();
                }).get(),
                type: $('#type').val(),
                range: $('input[name="range"]').val(),
                date: $('#reportrange').find('span.date-text').text()
            };

            // Build query string
            let queryString = Object.keys(filters)
                .filter(key => filters[key] && (filters[key].length || filters[key] > 0))
                .map(key => {
                    if (Array.isArray(filters[key])) {
                        return filters[key].map(val => `${key}[]=${val}`).join('&');
                    }
                    return `${key}=${filters[key]}`;
                })
                .join('&');

                console.log(filters['user_id'].length);

            // Redirect to export URL with filters
            window.location.href = "{{ route('overtimes.overview.export') }}" + (queryString ? '?' + queryString : '');
        });

        $('#dateOverTime').on('dp.change', function(e) {
            var dateData = $('#dateOverTime').val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ url('overtimes/getDate') }}",
                data: {
                    'date': dateData
                },
                type: 'GET',
                dataType: 'html',
                success: function(result) {
                    if (result.length > 22) {
                        $('.getDate').html(result);
                    } else {
                        $('.getDate').html(' ');

                    }

                }
            });
        })
    </script>
@endsection