@php
    if (\Modules\TimeTracker\Entities\VacationHour::hasNonStatutoryVacationHours($user)) {
        $satHoursAvailable = $vacationHourStats['availableNonStatutoryVacationHourPercentage'];
        $satHoursAvailableTotal = (int) round(177.52 * ($satHoursAvailable / 100));
        if ($satHoursAvailable <= 0) {
            $satHoursAvailableTotal = 0; // for 0 hours
            $satColor = '#FF914D';
        } elseif ($satHoursAvailable == 100) {
            $satColor = '#F5FBFF';
        } else {
            $satColor = '#FF914D';
        }
    }

    $hoursAvailable = $vacationHourStats['availableVacationHourPercentage'];
    $hoursAvailableTotal = (int) round(177.52 * ($hoursAvailable / 100));
    if ($hoursAvailable <= 0) {
        $hoursAvailableTotal = 0; // for 0 hours
        $color = '#E94437';
    } elseif ($hoursAvailable == 100) {
        $color = '#F5FBFF';
    } else {
        $color = '#FF914D';
    }
@endphp

<div class="bg-custom-blue-50 rounded-lg p-6 grid grid-cols-1 lg:grid-cols-2 justify-between items-center gap-2">
    <div class="bg-base-white p-6 rounded-lg flex flex-wrap-reverse justify-between gap-2">
        <div class="flex flex-col gap-2 grow">
            <div class="flex flex-row items-center justify-between">
                <div>
                    <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.available_leave_hours') }}</span>
                    <h1
                        class="text-xl-bold @if ($vacationHourStats['availableVacationHours'] < 0) text-custom-red-800 @else text-custom-gray-800 @endif">
                        {{ $vacationHourStats['availableVacationHours'] }} {{ trans('forms.lbl_hours') }}
                    </h1>
                </div>
                <div class="progress-container flex">
                    <div class="progress-content w-[70px] h-[70px]">
                        <svg class="" width="70" height="70" stroke-linecap="round">
                            <circle r="28.3" cx="35" cy="35"
                                class="stroke-custom-blue-25 fill-none stroke-[6.8px]"></circle>
                            <circle style="stroke-dasharray: 177.52; stroke-dashoffset: {{ $hoursAvailableTotal }};"
                                r="28.3" cx="35" cy="35"
                                class="progress fill-none stroke-[6.8px] -rotate-90 origin-center"
                                stroke="{{ $color }}">
                            </circle>
                        </svg>
                    </div>
                    <div>
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.lbl_available') }}</span>
                        <h1 class="text-xl-bold text-custom-gray-800">
                            {{ $vacationHourStats['availableVacationHourPercentage'] > 0 ? $vacationHourStats['availableVacationHourPercentage'] : 0 }}
                            %
                        </h1>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-x-8 gap-y-2">
                <div class="flex flex-col gap-1">
                    @if ($contract?->end_date)
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.contract_period') }}</span>
                    @else
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.per_year') }}</span>
                    @endif

                    <div class="flex items-center gap-1 w-max relative group">
                        <span class="btn-square-success truncate">
                            + {{ $vacationHourStats['totalVacationHours'] }} {{ trans('forms.lbl_hours') }}
                        </span>
                        <!-- Icon with tooltip -->
                        @if(isset($contract) && !$contract->isPermanent())
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange cursor-pointer group-hover:opacity-100 transition-opacity" 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 w-[250px] p-4 bg-white text-xs rounded-xl shadow-lg opacity-0 group-hover:opacity-100 transition-opacity border border-gray-200 z-10 pointer-events-none">
                                
                                <h1 class="text-sm-bold text-custom-gray-800">{{ trans('forms.vacation_hour_py') }}</h1>
                                <p class="text-xs-medium">
                                    <span class="text-orange"></span>
                                    <b class="text-custom-orange-500">{{ $contract->vacation_hour_py }}</b>
                                    {{ trans('forms.lbl_hours') }}
                                </p>

                                <hr class="my-2">
                                <h1 class="text-sm-bold text-custom-gray-800">{{ trans('forms.leave_hours_breakdown') }}</h1>
                                <hr class="my-1">

                                @foreach($vacationHourStats['calculateYearLeaveHours'] as $key => $hours)
                                    @if(str_starts_with($key, 'leaveHoursOf_'))
                                        <p class="text-xs-medium">
                                            <span>{{ str_replace('leaveHoursOf_', trans('forms.lbl_year'). ' ', $key) }}:</span>
                                            <b class="text-custom-orange-500">{{ $hours }}</b> {{ trans('forms.lbl_hours') }}
                                        </p>
                                    @endif
                                @endforeach

                                @if($vacationHourStats['calculateYearLeaveHours']['restOfYearLeaveHours'] != 0)
                                    <hr class="my-2">
                                    <h1 class="text-sm-bold text-custom-gray-800">{{ trans('forms.rest_of_year_leaves_hours') }}</h1>
                                    <p class="text-xs-medium">
                                        <span class="text-orange"></span>
                                        <b class="text-custom-orange-500">{{ $vacationHourStats['calculateYearLeaveHours']['restOfYearLeaveHours'] }}</b>
                                        {{ trans('forms.lbl_hours') }}
                                    </p>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.carried_over') }}</span>
                    <span class="btn-square-success truncate">
                        @if ($vacationHourStats['carriedOverVacationHours'] > 0)
                            +
                        @endif {{ $vacationHourStats['carriedOverVacationHours'] }}
                        {{ trans('forms.lbl_hours') }}
                    </span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.hours_taken') }}</span>
                    <span class="btn-square-danger truncate">
                        @if ($vacationHourStats['deductablePaidVacationHoursTaken'] > 0)
                            +
                        @endif
                        {{ $vacationHourStats['deductablePaidVacationHoursTaken'] }}
                        {{ trans('forms.lbl_hours') }}
                    </span>
                </div>
            </div>
        </div>
    </div>
    @if (\Modules\TimeTracker\Entities\VacationHour::hasNonStatutoryVacationHours($user))
        <div class="bg-base-white p-6 rounded-lg flex flex-wrap-reverse justify-between gap-2">
            <div class="flex flex-col gap-2 grow">
                <div class="flex flex-row items-center justify-between">
                    <div>
                        <span
                            class="text-xs-medium text-custom-grey-500">{{ trans('forms.available_non_statutory_leave_hours') }}</span>
                        <h1
                            class="text-xl-bold @if ($vacationHourStats['availableNonStatutoryVacationHours'] < 0) text-custom-red-800 @else text-custom-gray-800 @endif">
                            {{ $vacationHourStats['availableNonStatutoryVacationHours'] }}
                            {{ trans('forms.lbl_hours') }}
                        </h1>
                    </div>
                    <div class="progress-container flex">
                        <div class="progress-content w-[70px] h-[70px]">
                            <svg class="" width="70" height="70" stroke-linecap="round">
                                <circle r="28.3" cx="35" cy="35"
                                    class="stroke-custom-blue-25 fill-none stroke-[6.8px]"></circle>
                                <circle
                                    style="stroke-dasharray: 177.52; stroke-dashoffset: {{ $satHoursAvailableTotal }};"
                                    r="28.3" cx="35" cy="35"
                                    class="progress fill-none stroke-[6.8px] -rotate-90 origin-center"
                                    stroke="{{ $satColor }}">
                                </circle>
                            </svg>
                        </div>
                        <div>
                            <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.lbl_available') }}</span>
                            <h1 class="text-xl-bold text-custom-gray-800">
                                {{ $vacationHourStats['availableNonStatutoryVacationHourPercentage'] > 0 ? $vacationHourStats['availableNonStatutoryVacationHourPercentage'] : 0 }}
                                %
                            </h1>
                        </div>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-x-8 gap-y-2">
                    <div class="flex flex-col gap-1">
                        @if ($contract?->end_date)
                            <span
                                class="text-xs-medium text-custom-grey-500">{{ trans('forms.contract_period') }}</span>
                        @else
                            <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.per_year') }}</span>
                        @endif
                        <div class="flex items-center gap-1 w-max relative group">
                            <span class="btn-square-success truncate">
                                @if ($vacationHourStats['totalNonStatutoryVacationHours'] > 0)
                                    +
                                @endif
                                {{ $vacationHourStats['totalNonStatutoryVacationHours'] }}
                                {{ trans('forms.lbl_hours') }}
                            </span>
                                @if(isset($contract) && !$contract->isPermanent())
                                    <!-- Icon with tooltip -->
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="h-4 w-4 text-orange cursor-pointer group-hover:opacity-100 transition-opacity"
                                        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 w-[250px] p-4 bg-white text-xs rounded-xl shadow-lg opacity-0 group-hover:opacity-100 transition-opacity border border-gray-200 z-10 pointer-events-none">
                                        
                                        <h1 class="text-sm-bold text-custom-gray-800">{{ trans('forms.non_statutory_leave_hours_per_cal_year') }}</h1>
                                        <p class="text-xs-medium">
                                            <span class="text-orange"></span>
                                            <b class="text-custom-orange-500">{{ $contract->non_statutory_leave_hours_per_cal_year ?? 0 }}</b>
                                            {{ trans('forms.lbl_hours') }}
                                        </p>
                                        <hr class="my-2">
                                        <h1 class="text-sm-bold text-custom-gray-800">{{ trans('forms.leave_hours_breakdown') }}</h1>
                                        <hr class="my-1">

                                        @foreach($vacationHourStats['calculateYearNonStatutoryLeaveHours'] as $key => $hours)
                                            @if(str_starts_with($key, 'leaveHoursOf_'))
                                                <p class="text-xs-medium">
                                                    <span>{{ str_replace('leaveHoursOf_', trans('forms.lbl_year'). ' ', $key) }}:</span>
                                                    <b class="text-custom-orange-500">{{ $hours }}</b> {{ trans('forms.lbl_hours') }}
                                                </p>
                                            @endif
                                        @endforeach

                                        @if($vacationHourStats['calculateYearNonStatutoryLeaveHours']['restOfYearLeaveHours'] != 0)
                                            <hr class="my-2">
                                            <h1 class="text-sm-bold text-custom-gray-800">{{ trans('forms.rest_of_year_leaves_hours') }}</h1>
                                            <p class="text-xs-medium">
                                                <span class="text-orange"></span>
                                                <b class="text-custom-orange-500">{{ $vacationHourStats['calculateYearNonStatutoryLeaveHours']['restOfYearLeaveHours'] }}</b>
                                                {{ trans('forms.lbl_hours') }}
                                            </p>
                                        @endif
                                    </div>
                                @endif
                        </div>

                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.carried_over') }}</span>
                        <span class="btn-square-success truncate">
                            @if ($vacationHourStats['carriedOverNonStatutoryVacationHours'] > 0)
                                +
                            @endif
                            {{ $vacationHourStats['carriedOverNonStatutoryVacationHours'] }}
                            {{ trans('forms.lbl_hours') }}
                        </span>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs-medium text-custom-grey-500">{{ trans('forms.hours_taken') }}</span>
                        <span class="btn-square-danger truncate">+
                            {{ $vacationHourStats['nonStatutoryVacationHoursTaken'] }}
                            {{ trans('forms.lbl_hours') }}</span>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>