@extends('layouts.guest')

@section('content')
    <div class="flex items-center justify-center min-h-screen bg-theme_black">
        <div
            class="relative flex flex-col m-6 space-y-8 border shadow-md shadow-teheme_third_gray border-theme_secondary_gray bg-theme_secondary_black rounded-2xl md:flex-row md:space-y-0">
            <div class="p-8">
                <h1 class="text-xl mb-4 font-bold text-theme_white">
                    Doğrulama Kodu
                </h1>
                <div class="flex flex-col justify-center">
                    <label class="mb-2 text-md text-gray-400">
                        Telefonunuza Gelen Doğrulama Kodunu Giriniz
                    </label>
                    <input type="text" class="input-1" id="code" />
                </div>
                <div class="my-4 flex gap-2 flex-col">
                    <span class="text-sm font-medium hidden rounded-lg p-2 bg-red-700 text-white" id="error"></span>
                    <span class="text-sm font-medium hidden rounded-lg p-2 bg-red-700 text-white" id="error2"></span>
                    <span class="text-sm font-medium hidden rounded-lg p-2 bg-green-700 text-white" id="success">Yeni Kod
                        Gönderildi</span>
                </div>
                <div class="w-full flex items-center justify-between">
                    <button class="text-sm font-medium hidden rounded-lg p-2 text-white" id="tryAgain">Tekrar Kod
                        Gönder
                    </button>
                    <button type="submit" id="sendButton"
                        class="text-gray-300 px-4 inline-flex justify-center items-center gap-3 border rounded-[10px] hover:bg-theme_gray transition-all delay-100 hover:text-theme_black font-bold h-[42px]">
                        Gönder
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <script>
        var sendButton = $('#sendButton');
        var tryButton = $('#tryAgain');
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        sendButton.click(function() {
            var code = $('#code').val();
            $.ajax({
                url: '/check_token',
                method: 'POST',
                data: {
                    _token: csrfToken,
                    token: code
                },
                success: function(response) {
                    window.location.href = '/workers/registration/pre-register';
                },
                error: function(response) {
                    $('#error').fadeIn('slow');
                    $('#error').html(response.responseJSON.message);
                    setTimeout(function() {
                        $('#error').fadeOut('slow');
                    }, 4000);
                    if (response.status == 404) {
                        $('#tryAgain').fadeIn('slow');
                    }
                }
            });
        });
        tryButton.click(function() {
            $.ajax({
                url: '/check_time',
                method: 'POST',
                data: {
                    _token: csrfToken,
                },
                success: function(response) {
                    $('#success').fadeIn('slow');
                    setTimeout(function() {
                        $('#success').fadeOut('slow');
                    }, 4000);
                },
                error: function(response) {
                    $('#error2').fadeIn('slow');
                    $('#error2').html(response.responseJSON[1]);
                    setTimeout(function() {
                        $('#error2').fadeOut('slow');
                    }, 4000);
                }
            });
        })
    </script>
@endsection