@php
    use Modules\TimeTracker\Entities\CompensationSetting;

    $days = [1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'];
    $endOfWeek = $date->copy()->endOfWeek();

    // Previous and Next 2-week dates
    $prev2WeekDate = $date->copy()->subDays(14)->format(config('settings.date_format'));
    $next2WeekDate = $date->copy()->addDays(14)->format(config('settings.date_format'));

    // Previous and Next month dates
    $prevMonthDate = $date->copy()->subDays(30)->format(config('settings.date_format'));
    $nextMonthDate = $date->copy()->addDays(30)->format(config('settings.date_format'));

    $compensationSetting = CompensationSetting::where('id',1)->first();

@endphp

<div class="bg-custom-blue-50 rounded-lg p-3 lg:p-6 relative">
    <div wire:loading.delay.longer wire:loading.class="!flex" class="absolute inset-0 bg-white/50 hidden items-center justify-center rounded-lg z-50">
        @include('livewire.livewire-loader')
    </div>
    <div class="bg-white rounded-lg p-4 lg:p-6" wire:loading.class="opacity-50">
        <div class="flex flex-col gap-2">
            <div class="flex flex-col gap-4 lg:flex-row justify-between">
                <div>
                    <div class="text-xs-bold text-custom-grey-500">{{ trans('title.total_hours_current_balance') }} - {{ $from->weekOfYear }}(<span class="text-xs-bold text-custom-grey-500">{{ $from->format(config('settings.date_format')) }} - {{ $to->format(config('settings.date_format')) }}</span>)</div>

                    <h1
                        class="text-xl-bold text-custom-gray-800 {{ $timeTrackerHours['userRemainingHours'] < 0 ? 'text-danger' : 'text-dark' }}">
                        {{ $timeTrackerHours['userRemainingHours'] }} {{ trans('forms.lbl_hours') }}
                    </h1>

                    <div class="text-xs-bold text-custom-grey-500">{{ trans('forms.total_work_hours_per_week') }}</div>

                    <h1 class="fw-bold text-dark">
                        {{ $timeTrackerHours['getTotalPerWeekHours'] }} {{ trans('forms.lbl_hours') }}
                    </h1>

                </div>

                <div class="flex flex-col lg:flex-row justify-start lg:justify-end gap-4 lg:w-auto items-start">
                    <div class="w-full lg:w-auto">
                        <div id="reportrange"
                            class="tw-card px-3 py-1 flex flex-row justify-between gap-2 w-full lg:w-auto"
                            x-data="{
                                initDatePicker() {
                                    if ($('#reportrange').data('daterangepicker')) {
                                        $('#reportrange').data('daterangepicker').remove();
                                    }

                                    $('#reportrange').daterangepicker({
                                        opens: 'left',
                                        singleDatePicker: true,
                                        showDropdowns: true,
                                        showWeekNumbers: true,
                                        startDate: moment('{{ $date->format(config('settings.date_format')) }}', '{{ getDateFormat() }}'),
                                        locale: {
                                            format: '{{ getDateFormat() }}',
                                            firstDay: 1,
                                            daysOfWeek: daysOfWeek,
                                            monthNames: monthNames
                                        }
                                    }, (start, end) => {
                                        $('#reportrange span.date-text').html(start.format('D MMM, YYYY'));
                                        $wire.dispatch('updateDate', {
                                            date: start.format(current_date_format)
                                        });
                                    });
                                }
                            }"
                            x-init="initDatePicker()"
                            >
                            <span class="date-text">{{ $date->format(config('settings.date_format')) }}</span>
                            <x-svg-icon icon="icon-chevron-down" class="w-4 h-4" />
                        </div>
                    </div>

                    <div class="flex gap-1 items-center justify-center lg:justify-end w-full lg:w-auto">
                        <a class="btn-secondary-sm px-3  py-2"
                            data-value="{{ $prevMonthDate }}"
                            data-toggle='tooltip'
                            wire:click="updateDate('{{ $prevMonthDate }}')"
                            data-placement='top' title="{{trans('menu.prev_month')}}"
                            href="javascript:;" style="letter-spacing: -2px;"><<<</a>

                        <a class="btn-tertiary-sm px-3 py-2"
                            data-value="{{ $prev2WeekDate }}"
                            data-toggle='tooltip'
                            wire:click="updateDate('{{ $prev2WeekDate }}')"
                            data-placement='top' title="{{trans('menu.prev_2_week')}}"
                            href="javascript:;"><i class="mdi mdi-chevron-double-left"></i></a>

                        <a class="btn-tertiary-sm px-3 py-2"
                            data-value="{{ $prevWeekDate }}" data-toggle='tooltip'
                            wire:click="updateDate('{{ $prevWeekDate }}')"
                            data-placement='top' title="{{trans('menu.prev_week')}}"
                            href="javascript:;"><i class="mdi mdi-chevron-left"></i></a>

                        <a class="btn-tertiary-sm px-3 py-2 btn-change-date"
                            data-value="{{ $nextWeekDate }}" data-toggle='tooltip'
                            wire:click="updateDate('{{ $nextWeekDate }}')"
                            data-placement='top' title="{{trans('menu.next_week')}}"
                            href="javascript:;"><i class="mdi mdi-chevron-right"></i></a>

                        <a class="btn-tertiary-sm px-3 py-2"
                            data-value="{{ $next2WeekDate }}" data-toggle='tooltip'
                            wire:click="updateDate('{{ $next2WeekDate }}')"
                            data-placement='top' title="{{trans('menu.next_2_week')}}"
                            href="javascript:;"><i class="mdi mdi-chevron-double-right"></i></a>

                        <a class="btn-secondary-sm px-3 py-2"
                            data-value="{{ $nextMonthDate }}" data-toggle='tooltip'
                            wire:click="updateDate('{{ $nextMonthDate }}')"
                            data-placement='top' title="{{trans('menu.next_month')}}"
                            href="javascript:;" style="letter-spacing: -2px;">>>></a>
                    </div>
                </div>
            </div>

            <hr class="w-full"/>
            @if (isset($error) && $error != "")
                <div class=" m-4 text-center">
                    <h4 class="text-danger"><i class="mdi mdi-alert-circle"></i> {{$error}}</h4>
                </div>
            @else
                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-1 justify-between w-full mt-2 lg:mt-0">
                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('title.per_week') }}</span>
                        <span class="btn-square-success w-max">+ {{ $timeTrackerHours['userPerWeekHours'] }}
                            {{ trans('forms.lbl_hours') }}</span>
                    </div>
                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('title.total_hours_week_schedule') }}</span>
                        <span class="btn-square-success w-max">+ {{ $timeTrackerHours['userScheduleWorkingHours'] }}
                            {{ trans('forms.lbl_hours') }}</span>
                    </div>
                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('menu.extra_hour_title') }}</span>
                        <span class="btn-square-success w-max flex items-center gap-1 relative group">
                            @if ($timeTrackerHours['userOvertimesHours'] > 0)
                                +
                            @endif
                            {{ $timeTrackerHours['userOvertimesHours'] }}
                            {{ trans('forms.lbl_hours') }}

                            <!-- Icon with tooltip -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M12 4v.01M6.343 19.656A9 9 0 0112 3a9 9 0 010 18 8.963 8.963 0 01-5.657-1.344z" />
                            </svg>

                            <!-- Tooltip -->
                            <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2  w-[250px] p-4 bg-white text-xs rounded-xl shadow-lg opacity-0 group-hover:opacity-100 transition-opacity border border-gray-200">
                                <p class="text-xs-medium"> {{trans('forms.lbl_manual')}} : <span class="text-orange"> {{ $timeTrackerHours['getUserOvertimesHoursIsDuduct'] }} </span> {{ trans('forms.lbl_hours') }}</br> {{trans('forms.lbl_auto_generated')}} : <span class="text-orange"> {{ $timeTrackerHours['getUserOvertimesHoursAuto'] }} </span> {{ trans('forms.lbl_hours') }}</p>
                            </div>


                        </span>
                    </div>

                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('compensations.title') }}</span>
                        <span class="btn-square-success w-max flex items-center gap-1 relative group">+ {{ $timeTrackerHours['userCompensationHours'] }}
                            {{ trans('forms.lbl_hours') }}
                            @if ($compensationSetting->both == 1)
                                <!-- Icon with tooltip -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M12 4v.01M6.343 19.656A9 9 0 0112 3a9 9 0 010 18 8.963 8.963 0 01-5.657-1.344z" />
                                </svg>

                                <!-- Tooltip -->
                                <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2  w-[250px] p-4 bg-white text-xs rounded-xl shadow-lg opacity-0 group-hover:opacity-100 transition-opacity border border-gray-200">
                                    <p class="text-xs-medium"> {{trans('forms.compensation_time')}} : <span class="text-orange"> {{ $timeTrackerHours['getUserCompensationForTime'] }} </span> {{ trans('forms.lbl_hours') }}</br> {{trans('forms.payment')}} : <span class="text-orange"> {{ $timeTrackerHours['userCompensationPaymentHours'] }} </span> {{ trans('forms.lbl_hours') }}</p>
                                </div>
                            @endif
                        </span>
                    </div>
                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('menu.vacationhour_title') }}</span>
                        <span
                            class=" {{ ($timeTrackerHours['userVacationHoursEditable'] == 1) ? "btn-square-danger" : "btn-square-success" }}  w-max truncate">+
                            {{ $timeTrackerHours['userVacationHours'] }} {{ trans('forms.lbl_hours') }}</span>
                    </div>
                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('menu.absence_title') }}</span>
                        <span
                            class=" {{ ($timeTrackerHours['userLeaveEditable'] == 1) ? "btn-square-danger" : "btn-square-success" }} w-max truncate">+
                            {{ $timeTrackerHours['userLeaveHours'] }} {{ trans('forms.lbl_hours') }}</span>
                    </div>
                    <div class="flex flex-col gap-1 justify-end">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('menu.holiday_title') }}</span>
                        <span class="btn-square-success truncate w-max">+ {{ $timeTrackerHours['userHolidayHours'] }}
                            {{ trans('forms.lbl_hours') }}</span>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>