@extends('layouts.app')
@section('title', trans('menu.approval_title'))
@section('page-styles')
    <link type="text/css" rel="stylesheet" href="{{ asset('vendors/daterangepicker/css/daterangepicker.css') }}" />
@endsection
@section('content')
    <div class="content">

    @section('content-header-right')
        <div class="w-full lg:w-auto">
            <h1 class="display-xs-semibold text-base-black"> {{ __('forms.lbl_total') }} <span id="total-requests"> </span>
            </h1>
            <p class="text-lg-regular text-custom-grey-600"> {{ __('title.' . $type . ' requests') }}
        </div>
    @endsection
    @include('layouts.partials.single-page-header', [
        'menu' => [
            //'image' => asset('images/side-bar-icon/urenregistratie_orange.svg'),
            'links' => [
                [
                    'route' => route('approvals.indexbytype', 'vacationhours'),
                    'text' => __('menu.vacationhour_title'),
                    'active' => $type == 'vacationhours' ? 1 : 0,
                ],
                [
                    'route' => route('approvals.indexbytype', 'leaves'),
                    'text' => __('menu.absence_title'),
                    'active' => $type == 'leaves' ? 1 : 0,
                ],
                [
                    'route' => route('approvals.indexbytype', 'overtimes'),
                    'text' => __('menu.extra_hour_title'),
                    'active' => $type == 'overtimes' ? 1 : 0,
                ],
                [
                    'route' => route('approvals.indexbytype', 'compensation'),
                    'text' => __('forms.overtime_compensation_history'),
                    'active' => $type == 'compensation' ? 1 : 0,
                ],
            ],
        ],
        'userData' => null,
        // 'pageTitle' => __('menu.approval_title'),
    ])

    @if ($allowedUser)

        @include('approval::filters')

        <div class="relative">
            <div class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />
                <a href="javascript:;" class="btn-approval-all text-sm-semibold text-custom-orange-500 flex items-center gap-2" data-type="{{ $type }}" data-uri="{{ route('approvals.request.accept', $type) }}"><x-svg-icon icon="icon-check"/></a>
                <x-svg-icon icon="vertical-bar" />
                <a href="javascript:;" class="btn-approval-all reject text-sm-semibold text-custom-red-600 flex items-center gap-2" data-type="{{ $type }}" data-uri="{{ route('approvals.request.reject', $type) }}"><x-svg-icon icon="icon-close"/></a>
                @if ($type == "overtimes")
                    <a href="javascript:;" class="btn-delete-all text-sm-semibold text-custom-red-600 flex items-center gap-2" data-uri="{{ route('overtimes.store') }}"><x-svg-icon icon="icon-delete"/></a>
                @endif

            </div>

            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
                <thead>
                    <tr>
                        <th scope="col">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                        <th scope="col">{{ __('tables.name_title') }}</th>

                        @if ($type == 'overtimes')
                            <th  scope="col" class="min-w-[135px]">{{ __('tables.date_title') }}</th>
                        @else
                            <th scope="col" class="min-w-[135px]">{{ __('tables.start_date') }}</th>
                            <th  scope="col" class="min-w-[135px]">{{ __('tables.end_date') }}</th>
                        @endif
                        @if ($type != 'leaves' && $type != 'vacationhours')
                            <th scope="col">{{ __('tables.note_title') }}</th>
                        @endif
                        <th scope="col">{{ __('tables.hours') }}</th>
                        @if ($type == 'leaves' || $type == 'vacationhours')
                            <th scope="col">{{ __('tables.reason') }}</th>
                        @endif
                        <th scope="col">{{ __('tables.status_title') }}</th>
                        <th scope="col">{{ __('tables.requested_by') }}</th>
                        <th scope="col">{{ __('tables.action_title') }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr class="bg-custom-blue-25">
                        <th class="text-right" colspan="{{ $type == 'overtimes' ? '4' : ($type == 'compensation' ? '5' : '4') }}">{{ __('forms.lbl_total') }}</th>
                        <th id="total-hours" class="!text-custom-grey-900 !text-sm-semibold">0</th>
                        <th colspan="{{ $type == 'overtimes' || $type == 'compensation' ? '3' : '4' }}"></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    @else
        <p class="text-danger text-center">{{ trans('label.not_authorized') }}</p>
    @endif

    @if($type == 'vacationhours' || $type == 'leaves')
        @include('timetracker::vacationhours.duplicatTimeTracker')
    @endif
</div>
@endsection

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


@section('footer-script')
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

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

@include('timetracker::'.$type.'.scripts')

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

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

    jQuery(document).ready(function() {
        PDDataTable({
            searching : false,
            url: "{{ route('approvals.indexbytype', $type) }}",
            "drawCallback": function(settings, start, end, max, total, pre) {
                AddReadMore();
                if (this.fnSettings().fnRecordsTotal() > 25) {
                    $('.dataTables_paginate').show();
                } else {
                    $('.dataTables_paginate').hide();
                }
                $('#total-requests').text(this.api().page.info().recordsDisplay);

                // 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: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},

                {
                    data: 'user.display_name',
                    name: 'user.display_name',
                    className: "!text-custom-grey-900 !font-medium"
                },
                @if ($type == 'overtimes')
                    {
                        data: 'date',
                        name: 'date',
                        searchable: false
                    },
                @else
                    {
                        data: 'start_date',
                        name: 'start_date'
                    }, {
                        data: 'end_date',
                        name: 'end_date'
                    },
                @endif
                @if ($type != 'leaves' && $type != 'vacationhours')
                    {
                        data: 'description',
                        name: 'description',
                        className: "add-read-more show-less-content",
                        orderable: false
                    },
                @endif

                {
                    data: 'hours',
                    name: 'hours'
                },
                @if ($type == 'leaves' || $type == 'vacationhours')
                    {
                        data: 'type',
                        name: 'type.name'
                    },
                @endif {
                    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();

                @if ($type == 'leaves')
                    d.type = $('#type').val();
                @endif

                @if ($type == 'overtimes')
                    d.requested_by = $('#requested_by').val();
                @endif

                d.range = $('input[name="range"]').val();
            },
            toolbar_design_class: 'justify-start'
        });


    });
    $(document).on('click', '.open-user-modal', function () {
        const userId = $(this).data('user-id');

        $.ajax({
            url: `/approvals/usermodal/${userId}`,
            method: 'GET',
            success: function (html) {
                $('#userModal-' + userId).remove();

                $('body').append(html);

                $('#userModal-' + userId).modal('show');
            },
            error: function () {
                alert('Failed to load user info.');
            }
        });
    });
    $('.reportrange').daterangepicker({
        opens: 'left',
        autoApply: true,
        autoUpdateInput: false,
        showWeekNumbers: true,
        startDate: moment(),
        endDate: moment(),
        locale: {
            format: "{{ getDateFormat() }}",
            customRangeLabel: "{{ trans('label.pick_date_range') }}",
            "firstDay": 1,
            "daysOfWeek": daysOfWeek,
            "monthNames": monthNames
        },
        //ranges  : rangeFilters,
        alwaysShowCalendars: 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();
    });

    $( document ).on( "multi_select_option_change", function( event, eventInfo ) {
        PDTable.draw();
    });


    $('#requested_by').on('change', function () {
        PDTable.draw();
    });
    // Handle balance tooltip
    $(document).on('click', '.show-balance', function() {
        const userId = $(this).data('user-id');
        const $tooltip = $(this);

        // Show loading state
        $tooltip.attr('title', '<div class="p-2">{{ trans("forms.lbl_loading") }}</div>')
               .tooltip('dispose').tooltip('show');

        $.get(`/approvals/user-balance/${userId}`, function(data) {
            if (data.status === 'success') {
                const tooltip = `
                    <div class="p-2">
                        <div class="mb-1"><span class="font-semibold">{{ trans('forms.total_leave_hours_balance') }}:</span> ${data.leave}</div>
                        <div class="mb-1"><span class="font-semibold">{{ trans('forms.total_over_time_balance') }}:</span> ${data.overtime}</div>
                        <div class="font-bold border-t pt-1 mt-1">{{ trans('forms.lbl_total') }}: ${data.total}</div>
                    </div>
                `;
                $tooltip.attr('title', tooltip).tooltip('dispose').tooltip('show');
            } else {
                $tooltip.attr('title', '<div class="p-2 text-red-500">{{ trans("forms.lbl_failed_to_load_balance") }}</div>')
                       .tooltip('dispose').tooltip('show');
            }
        }).fail(function() {
            $tooltip.attr('title', '<div class="p-2 text-red-500">{{ trans("forms.lbl_failed_to_load_balance") }}</div>')
                   .tooltip('dispose').tooltip('show');
        });
    });
</script>
@stop