@extends('site.layouts.master')

@section('title')
    <title>{{ __('site.OTP') }}</title>
@endsection
@section('metatags')
    <link rel="canonical" href="{{str_replace('public/', '', url()->current())}}">
    <link rel="alternate" hreflang="@if (app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
        href="@if (app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')) {{str_replace('/en/', '/ar/', str_replace('public/', '', url()->current()))}}@else{{str_replace('/ar/', '/en/', str_replace('public/', '', url()->current()))}}@endif">
    <link rel="alternate" hreflang="@if (app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif"
        href="{{str_replace('public/', '', url()->current())}}">
@endsection
@section('content')
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            display: none;
        }
    </style>
    <div class="px-4">
        <div class="my-3">
            <h1 class="tab_font text-2b2b2b mb-2">@lang('site.OTP')</h1>
            <p class="SFBold12_14Light text-707070 mb-2">@lang('site.otp_quote')</p>
        </div>
        @if ($errors->any())
            <div class="alert alert-danger text-center">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (session()->has('msg'))
            <div class="alert alert-danger text-center">
                <ul>
                    <li>{{ session()->get('msg') }}</li>
                </ul>
            </div>
        @endif
        @if (session()->has('success'))
            <div class="alert alert-success text-center">
                <ul>
                    <li>{{ session()->get('success') }}</li>
                </ul>
            </div>
        @endif
        <form method="post" action="{{ route('site.changePassword') }}">
            @csrf
            <input id="email" type="hidden"
                class="form-control text-3b3b3b SF18_21RegularImportant py-3 rounded-3 my-3" name="email"
                value="{{ request()->email }}">
            <div class="d-flex justify-content-between">
                <div class="form-group col-2">
                    <input type="number"
                        class="form-control text-center text-3b3b3b SF18_21RegularImportant py-3 rounded-3 my-3"
                        name="otp[]" autofocus="true">
                </div>
                <div class="form-group col-2">
                    <input type="number"
                        class="form-control text-center text-3b3b3b SF18_21RegularImportant py-3 rounded-3 my-3"
                        name="otp[]">
                </div>
                <div class="form-group col-2">
                    <input type="number"
                        class="form-control text-center text-3b3b3b SF18_21RegularImportant py-3 rounded-3 my-3"
                        name="otp[]">
                </div>
                <div class="form-group col-2">
                    <input type="number"
                        class="form-control text-center text-3b3b3b SF18_21RegularImportant py-3 rounded-3 my-3"
                        name="otp[]">
                </div>
                <div class="form-group col-2">
                    <input type="number"
                        class="form-control text-center text-3b3b3b SF18_21RegularImportant py-3 rounded-3 my-3"
                        name="otp[]">
                </div>
            </div>
            <div class="d-lg-flex justify-content-lg-between align-items-lg-center my-lg-3">
                <div class="form-group col-12">
                    <button class="w-100 border-0 py-3 rounded-3 bg-3b3b3b SF22_26Bold text-white"
                        type="submit">@lang('site.submit')</button>
                </div>
            </div>
            <div class="text-center my-2">
                <p id="timerParent">@lang('site.Resend Code') <span id="timer"
                        class="mx-2 p-1 rounded-3 timerBorder text-blue SFBold14_16">01:00</span></p>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        email = $('#email').val();
        $(document).ready(function() {
            timerFunction();
        });

        function timerFunction() {
            let x = 59;
            $('#timer').html('00:' + x);
            let intervalId = setInterval(function() {
                x--;

                if (x >= 0) {
                    $('#timer').html('00:' + (x < 10 ? '0' + x : x));
                } else {
                    clearInterval(intervalId);
                    $('#timerParent').html(
                        '<a class="text-blue SFBold14_16" href="#" id="sendCode" onclick="postForgotPassword()">{{ __('site.Send Code Again') }}</a>'
                    );
                }
            }, 1000);
        }

        function postForgotPassword() {
            $('#sendCode').click(function(e){
                e.preventDefault();
            })
            $.ajax({
                url: "{{ route('site.postforgotPassword') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    email: this.email
                },
                success: function(response) {
                    console.log(response);
                    $('#timerParent').html('{{__("site.Resend Code")}} <span id="timer" class="mx-2 p-1 rounded-3 timerBorder text-blue SFBold14_16">01:00</span>');
                    timerFunction();
                },
                error: function(error) {
                    alert('something is wrong');
                }
            });
        }
    </script>
@endsection