@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
    <style>
    body {
        background-image: url({{asset("assets/images/auth/bg10.jpeg") }});
    }

    [data-theme="dark"] body {
        background-image: url({{asset("assets/images/auth/bg10-dark.jpeg")}});
    }
    </style>
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <div class="d-flex flex-lg-row-fluid">
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                <a href="{{url('/')}}">
                    <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                        src="{{ asset('assets/images/auth/agency-dark.png') }}" alt="images" />
                </a>
                <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                    src="{{asset("assets/images/auth/agency-dark.png")}}" alt="images" />
                <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">Stay ahead in the game of Gymnastics. </h1>
                <div class="text-gray-600 fs-base tzzext-center fw-semibold">Where precision, performance, and
                    excellence meet.!</div>
            </div>
        </div>
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <div class="d-flex flex-center rounded-4 w-md-600px p-10"
                style="background-color: var(--kt-body-bg)!important;">
                <div class="w-md-400px">
                @if (session('error_message'))
            <div class="clearfix"></div>
            <div class="alert alert-danger alert-dismissible"> {{ session('error_message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span
                        aria-hidden="true"></span> </button>
            </div>
          @endif
          @if (session('success_message'))
            <div class="clearfix"></div>
            <div class="alert alert-success alert-dismissible"> {{ session('success_message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span
                        aria-hidden="true"></span> </button>
            </div>
          @endif
             
                    <form class="form w-100" id="loginForm" action="{{url('/admin/storeotp')}}" method="POST">
                        <div class="text-center mb-11">
                            <h1 class="text-dark fw-bolder mb-3">OTP Verification</h1>
                        </div>
                        @csrf
                        <div class="fv-row mb-3">
                        <input type="hidden" name="otp_email" value="{{ $slug }}">
                        <input type="text" placeholder="OTP" name="otp" autocomplete="off" autofocus
                            class="form-control stop_first_space bg-transparent @error('email') is-invalid @enderror"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
                        @error('otp')
                            <span class="invalid-feedback red email" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        </div>
                       
                        <div class="d-grid mb-10">
                            <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                                <span class="indicator-label">Verify OTP</span>
                            </button>
                        </div>


                    </form>

                    <form action="{{ route('resendotp') }}" method="POST" id="re_send_form">
                        <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
                            @csrf
                            <input type="hidden" name="email" value="{{ $slug }}">
                            <button class="btn btn-primary" type="button" id="re_send_otp">Re-send OTP</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push("script")
<script>
$("#re_send_otp").click(function() {
    document.getElementById('re_send_otp').disabled = true;
    $("#loader-screen").show();
    setTimeout(() => {
        $("#re_send_form").submit();
    }, 200);
});

function removeError(i) {
    $("." + i).hide();
    $("#" + i).removeClass('is-invalid');
}

$(document).ready(function() {
    setTimeout(() => {
        $(".alert-dismissible").hide();
    }, 4500);

    $('form[id="loginForm"]').validate({
        errorPlacement: function(error, element) {
            var placement = $(element).data("error");
            if (placement) {
                $(placement).append(error)
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            otp: {
                required: true,
                minlength: 4,
                maxlength: 4,
            }
        },
        messages: {
            otp: {
                minlength: 'OTP must be at least 4 characters long.',
                maxlength: 'OTP must not be greater than 4 characters long.',
                required: 'OTP field is required.'
            }
        },
        submitHandler: function(form) {
            document.getElementById('kt_sign_in_submit').disabled = true;
            $("#loader-screen").show();
            setTimeout(() => {
                form.submit();
            }, 200);
        },
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('input').removeClass('error');
        },
    });
});
</script>
@endpush