@extends('layouts.buddy-screens')
@section('content')
<style>
b#cno {
    background: burlywood;
    color: #fff;
    padding: 4px;
}
</style> 
          <!-- Content wrapper -->
          <div class="container">
            <br/>
            <div class="card">
                
                <div class="card-body">
                   
                    <div style="text-align: center;">Your account is under process<br/>Timer:  <span id="timer">Loading...</span> Mins<br/>Please come back after 10 minutes to begin your investment journey with us.</div>
                  
                </div>
            </div>
          </div>

          <script>
            function startDynamicTimer(startTime, durationMinutes) {
                const timerDisplay = document.getElementById('timer');
                const endTime = new Date(startTime.getTime() + durationMinutes * 60000);
    
                function updateTimer() {
                    const currentTime = new Date();
                    const timeRemaining = endTime - currentTime;
    
                    if (timeRemaining <= 0) {
                        timerDisplay.textContent = '0';
                        clearInterval(timerInterval);
                    } else {
                        const minutes = Math.floor(timeRemaining / 60000);
                        const seconds = Math.floor((timeRemaining % 60000) / 1000);
                        timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
                    }
                }
    
                updateTimer(); // Initial call to avoid delay
                const timerInterval = setInterval(updateTimer, 1000);
            }
    
            // Example start time: 2024-12-24 10:55:01
            const startTime = new Date('{{ Auth::User()->investwell_request_sent_date}}');
            const durationMinutes = 10;
    
            startDynamicTimer(startTime, durationMinutes);
        </script>
@endsection