@extends('admin.auth.layouts.app')

@section('title', panel_setting_title('OTP'))

@section('content')
<section class="fxt-template-animation fxt-template-layout9">
    <div class="container" style="text-align: -webkit-center;">
        <div class="row align-items-center justify-content-center cardd" style="max-width: 700px;">
            <div class="col-lg-8">
                <h2 style="color: #4b67b9">OTP Girin</h2>
                <div class="fxt-form">
                    <form action="{{ route('admin.auth.otp::post')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <div class="fxt-transformY-50 fxt-transition-delay-1">
                                <input type="text" id="otp" class="form-control" name="otp" placeholder="OTP " required="required">
                            </div>
                        </div>
                        <label for="" style="margin: 1rem;">
                            <span style="color: red;margin-right: 10px;">*</span>Mail adresinize veya telefonunuza gelen kodu giriniz.
                        </label>
                        <div class="form-group">
                            <div class="fxt-transformY-50 fxt-transition-delay-4">
                                <button type="submit" class="fxt-btn-fill" style="background-color:#4b67b9;">OTP Doğrula</button>
                            </div>
                        </div>
                    </form>

                    <div>
                        <form action="{{ route('admin.auth.resend-otp')}}" method="POST" id="resendForm">
                            @csrf
                            <button type="submit" class="fxt-btn-fill" id="resendButton" style="display: none;">
                                OTP'yi Tekrar Gönder
                            </button>
                        </form>
                    </div>

                    <div id="countdownContainer" style="margin-top: 20px;">
                        <div id="countdownText" style="font-size: 1rem; text-align: center; margin-bottom: 5px;">
                            Kalan Süre:
                        </div>
                        <div id="countdown" style="font-size: 2rem; text-align: center; color: #4b67b9; font-weight: bold;">
                        </div>
                    </div>

                    <div id="errorMessage" style="color: red; text-align: center; margin-top: 10px;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .fxt-template-layout9 .checkbox label:before {
        border-color: #4b67b9 !important;
    }
    .fxt-template-layout9 .switcher-text {
        color: #4b67b9;
    }
    .fxt-template-layout9 .fxt-form .form-control {
        color: black;
    }
    .cardd {
        box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
        border-radius: 5px;
        backdrop-filter: blur(14px);
        background-color: rgba(255, 255, 255, 0.2);
        padding: 5rem 0 5rem 0;
    }
    #resendButton {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 1rem;
        background-color: #4b67b9;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
    }
    #resendButton:hover {
        background-color: #3a5499;
    }
    .countdown-warning {
        color: #dc3545 !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const COUNTDOWN_MINUTES = 3;
        const COUNTDOWN_SECONDS = COUNTDOWN_MINUTES * 60;
        let timeLeft = COUNTDOWN_SECONDS;
        const countdownElement = document.getElementById('countdown');
        const resendButton = document.getElementById('resendButton');
        const errorMessage = document.getElementById('errorMessage');
        let countdownInterval;

        // OTP sayfası her yüklendiğinde localStorage'ı temizle ve sayacı yeniden başlat
        function initializeCountdown() {
            localStorage.removeItem('otpStartTime');
            startCountdown();
        }

        function startCountdown() {
            // Önceki interval'i temizle
            if (countdownInterval) {
                clearInterval(countdownInterval);
            }

            const startTime = new Date().getTime();
            localStorage.setItem('otpStartTime', startTime);

            // Sayaç elementlerini sıfırla
            countdownElement.classList.remove('countdown-warning');
            resendButton.style.display = 'none';
            errorMessage.textContent = '';

            updateCountdown();
            countdownInterval = setInterval(updateCountdown, 1000);
        }

        function updateCountdown() {
            const startTime = parseInt(localStorage.getItem('otpStartTime'));
            if (!startTime) {
                // Eğer startTime yoksa sayacı yeniden başlat
                startCountdown();
                return;
            }

            const currentTime = new Date().getTime();
            const elapsedSeconds = Math.floor((currentTime - startTime) / 1000);
            timeLeft = COUNTDOWN_SECONDS - elapsedSeconds;

            if (timeLeft <= 0) {
                clearInterval(countdownInterval);
                countdownElement.textContent = '00:00';
                countdownElement.classList.add('countdown-warning');
                resendButton.style.display = 'block';
                errorMessage.textContent = 'OTP kodunun süresi doldu. Lütfen yeni kod talep ediniz.';
                return;
            }

            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;

            countdownElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            if (timeLeft <= 30) {
                countdownElement.classList.add('countdown-warning');
            }
        }

        // Resend form submit event listener
        document.getElementById('resendForm').addEventListener('submit', function(e) {
            e.preventDefault();

            fetch(this.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'Accept': 'application/json'
                }
            }).then(response => response.json())
            .then(data => {
                if (data.error) {
                    errorMessage.textContent = data.error;
                    return;
                }
                resendButton.style.display = 'none';
                errorMessage.textContent = '';
                countdownElement.classList.remove('countdown-warning');
                startCountdown();
            }).catch(error => {
                errorMessage.textContent = 'Bir hata oluştu. Lütfen tekrar deneyiniz.';
            });
        });

        // Sayfa yüklendiğinde sayacı başlat
        initializeCountdown();
    });
    document.addEventListener("DOMContentLoaded", function () {
        @if (session('clearLocalStorage'))
            localStorage.removeItem("countdownEndTime");
        @endif
    });
    </script>

@endsection