@extends('layouts.reference-feedback')
@section('reference-title', 'Reference feedback submitted')
@section('reference-form-content')
    <div class="text-center flex flex-col items-center">
        <svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.910156" width="64" height="64" rx="32" fill="#DEF7EC"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M49.007 20.7027C49.4569 21.1528 49.7096 21.7631 49.7096 22.3995C49.7096 23.0359 49.4569 23.6462 49.007 24.0963L29.807 43.2963C29.3569 43.7462 28.7466 43.999 28.1102 43.999C27.4738 43.999 26.8634 43.7462 26.4134 43.2963L16.8134 33.6963C16.3762 33.2436 16.1343 32.6374 16.1397 32.0081C16.1452 31.3789 16.3976 30.7769 16.8426 30.3319C17.2876 29.8869 17.8895 29.6345 18.5188 29.6291C19.1481 29.6236 19.7543 29.8655 20.207 30.3027L28.1102 38.2059L45.6134 20.7027C46.0634 20.2528 46.6738 20 47.3102 20C47.9466 20 48.5569 20.2528 49.007 20.7027Z" fill="#0E9F6E"/>
        </svg>
        <h3 class="text-3xl font-extrabold text-blue-900 mt-12">Thank you for your time in providing the referee details.</h3>

        <div class="mt-12 text-base font-normal text-gray-900">
            <p>Your details have been successfully submitted</p>
            <p>Redirecting back in <span id="countdown">6</span>...  </p>
        </div>
    </div>

@endsection
<script>

    function redirectBack() {
        window.location.href = "{{ route('references.index') }}";
    }

    // Function to start the countdown
    function startCountdown() {
        let countdown = 6;
        const countdownElement = document.getElementById('countdown');


        // Update countdown display every second
        const countdownInterval = setInterval(() => {
            countdown--;
            countdownElement.innerText = countdown;

            // If countdown reaches 0, redirect and clear interval
            if (countdown === 0) {
                clearInterval(countdownInterval);
                setTimeout(redirectBack, 1000);
            }
        }, 1000);
    }

    document.addEventListener('DOMContentLoaded', startCountdown);

</script>