@php($translatePrefix = "admin.products")
<div id="calculator" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-s dark:bg-gray-800 dark:border-gray-700" tabindex="-1">
    <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
        <h3 class="font-bold text-gray-800 dark:text-white">
            {{ __($translatePrefix . '.calculator.title') }}
        </h3>
        <button type="button" class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#calculator">
            <span class="sr-only">{{ __('global.close')  }}</span>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
    </div>
    <div class="p-4">
        <p class="text-gray-800 dark:text-gray-400">
            {{ __($translatePrefix . '.calculator.subheading') }}
            @include('admin/shared/input', ['name' => 'percentage', 'help' => __($translatePrefix . '.calculator.help'), 'label' => __($translatePrefix . '.calculator.percent'), 'value' => 5])
        </p>
        <button type="button" class="btn btn-primary mt-2" id="calculatorBtn" data-hs-overlay="#calculator">
            {{ __($translatePrefix . '.calculator.apply') }}
        </button>
    </div>
</div>