@php
    $finishTime = \Carbon\Carbon::parse($verification->expired_at);
    $totalDuration = now() > $finishTime ? 0 : $finishTime->diffInSeconds(now());
@endphp

<div class="text-center mb-6 bg-primary-950 rounded-t-2xl px-5 py-6">

    {{-- Instruction Message --}}
    @if ($verification->send_via == 'email')
        <p class="text-primary-100 text-sm">@lang('Please check your email to get a six digit OTP')</p>
    @elseif ($verification->send_via == 'transfer_pin')
        <p class="text-primary-100 text-sm">@lang('Please Enter Your Transfer Pin to proceed')</p>
    @else
        <p class="text-primary-100 text-sm">@lang('Please check your mobile to get a six digit OTP')</p>
    @endif

    @if ($verification->send_via != 'transfer_pin')

        {{-- Expiry Warning --}}
        @if ($totalDuration)
            <p class="mt-3 text-amber-400 text-xs font-medium otp-warning">
                @lang('OTP will be expired in the next')
            </p>
        @endif

        {{-- Circular Countdown Timer --}}
        {{-- expired-time-circle, border-circle, exp-time, animation-circle, danger-border --}}
        {{-- are defined in otp_timer.css and must stay as-is --}}
        <div class="flex justify-center my-4">
            <div class="expired-time-circle @if (!$totalDuration) danger-border @endif">
                <div class="exp-time">{{ $totalDuration }}</div>
                @lang('Seconds')
                <div class="animation-circle"></div>
            </div>
            <div class="border-circle"></div>
        </div>

        {{-- Expired State: Resend OTP --}}
        <div class="try-btn-wrapper mt-3 hidden">
            <p class="text-accent-400 text-xs font-medium mb-2">@lang('Your OTP has been expired')</p>
            <form method="POST" action="{{ route('user.otp.resend', $verification->id) }}" class="w-full">
                @csrf
                <button type="submit"
                        class="px-5 py-2 rounded-xl text-sm font-semibold bg-emerald-600 text-white hover:bg-emerald-500 transition-all duration-200">
                    @lang('Resend OTP')
                </button>
            </form>
        </div>

    @endif
</div>

@push('script')
    <script>
        'use strict';
        (function ($) {
            let secondsLeft = `{{ $totalDuration }}` * 1;

            setInterval(function () {
                if (secondsLeft) secondsLeft--;

                if (secondsLeft === 0) {
                    $('.try-btn-wrapper').removeClass('hidden');
                    $('.otp-warning').addClass('hidden');
                    $('.expired-time-circle').addClass('danger-border');
                }

                $('.exp-time').text(secondsLeft);
            }, 1000);
        })(jQuery);
    </script>
@endpush

@push('style-lib')
    <link href="{{ asset('assets/global/css/otp_timer.css') }}" rel="stylesheet">
@endpush

@push('style')
    <style>
        .animation-circle {
            position: absolute;
            top: 0;
            left: 0;
            border: 4px solid #f44336;
            height: 100%;
            width: 100%;
            border-radius: 150px;
            box-shadow: 1px 1px 1px 1px rgba(255, 0, 0, 0.5);
            transform: rotateY(180deg);
            animation-name: clipCircle;
            animation-duration: {{ @$totalDuration }}s;
            animation-iteration-count: 1;
            animation-timing-function: cubic-bezier(0, 0, 1, 1);
            z-index: 1;
        }
    </style>
@endpush