@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/media/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">
                <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"Stay ahead in the game of Gymnastics. alt="images" />
                <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" 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="bg-body 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"><i class="ti-flag-alt"></i>&nbsp; {{ 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($select)
                    <form class="form w-100" method="POST" action="{{ route('store_generate_new_password') }}" id="updatePasswordForm">
                        <div class="text-center mb-10">
                            <h1 class="text-dark fw-bolder mb-3">Setup New Password</h1>
                            <div class="text-gray-500 fw-semibold fs-6">Have you already set the password ?
                            <a href="{{url('/login')}}" class="link-primary fw-bold">Sign in</a></div>
                        </div>
                        <input type="hidden" name="user_id" value="{{ $select ? $select->id : "" }}">
                        <div class="fv-row mb-8">
                            <input type="text" placeholder="Email" readonly id="email" name="email" value="{{ $select ? $select->email : '' }}" autocomplete="off" class="form-control stop_first_space bg-transparent @error('email') is-invalid @enderror" />
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        @csrf
                        <div class="fv-row mb-8" data-kt-password-meter="true">
                            <div class="mb-1">
                                <div class="position-relative mb-3">
                                    <input class="form-control stop_first_space bg-transparent login_eyes @error('password_error') is-invalid @enderror" data-error="#password_error" type="password"  placeholder="Password" name="password" id="password" autocomplete="off"  autofocus/>
                                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                        <i class="bi bi-eye-slash fs-2"></i>
                                        <i class="bi bi-eye fs-2 d-none"></i>
                                    </span>
                                </div>
                                <span class="error" id="password_error"></span>
                                @error('password')
                                <br/> <span class="invalid-feedback red" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="fv-row mb-8" data-kt-password-meter="true">
                            <div class="mb-1">
                                <div class="position-relative">
                                    <input type="password" placeholder="Confirm Password" id="password-confirm" name="password_confirmation" class="login_eyes form-control stop_first_space bg-transparent @error('password_confirmation') is-invalid @enderror" data-error="#password_confirmation_error" />
                                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                        <i class="bi bi-eye-slash fs-2"></i>
                                        <i class="bi bi-eye fs-2 d-none"></i>
                                    </span>   
                                </div>
                                <span class="error" id="password_confirmation_error"></span>
                                @error('password_confirmation')
                                <br/><span class="invalid-feedback red" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="d-grid mb-10">
                            <button type="submit"  class="btn btn-primary">
                                <span class="indicator-label">Submit</span>
                            </button>
                        </div>
                    </form>
                    @else 
                        <div class="text-center mb-10">
                            <h1 class="text-dark fw-bolder mb-3">Opps...</h1>
                            <div class="text-gray-500 fw-semibold fs-6">Something went wrong. Please try later or login here.
                            <a href="{{url('/login')}}" class="link-primary fw-bold">Sign in</a></div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
   </div>
@endsection
@push("script")
<script>  

$(document).on('click', '.change_icon', function(){
    if($('#password-confirm').attr('data-iconType') == "open"){
        document.getElementById('password-confirm').type = "text";
        $('#password-confirm').attr('data-iconType', 'close');
        $('#icon_class').html('<i class="bi bi-eye-slash fs-4 change_icon" title="hide"></i>');
    }else{
        document.getElementById('password-confirm').type = "password";
        $('#password-confirm').attr('data-iconType', 'open');
        $('#icon_class').html('<i class="bi bi-eye fs-4 change_icon" title="show"></i>');
    }
});

$(document).ready (function () {  
    jQuery.validator.addMethod("alphanumeric", function(value, element) {
        return this.optional(element) || /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i.test(value);
    }, "Must contain at least one number and one uppercase and lowercase letter, and one symbol and  at least 8 or more characters");


  $('form[id="updatePasswordForm"]').validate({  
    errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                }, 
    rules: {  
      email: {  
        required: true,  
        email: true,  
      },  
      password: {  
        required: true,  
        minlength: 8,  
        alphanumeric: true
      },
      password_confirmation: {
        required: true,  
        minlength: 8,
        equalTo: "#password"
      },
    },  
    messages: {
        email:{  
            email: 'Enter a valid email',  
            required: 'Email field is required.'
        },   
        password: {  
            minlength: 'Password must be at least 8 characters long.',
            required: 'Password field is required.'
        },
        password_confirmation: {
            minlength: 'Password must be at least 8 characters long.',
            required: 'Confirm Password field is required.',
            equalTo: "Password does not match."
        },
    },  
    submitHandler: function(form) {  
      form.submit();  
    }  
  });  
});  
</script>  
@endpush