@extends('layouts.app')
@section('content')

<style>
    #message {
      display: none;
    }
</style>

    <div class="login-bg">
        <div class="">
            {{-- <p class="login-box-msg">
            {{ trans('global.reset_pin') }}
        </p> --}}

            <div class="container login-container">
                <div class="logo">
                    <img src={{ asset('images/noipunno-new-logo.svg') }} style="width: 120px; height: 120px;"
                        alt="" />
                </div>
                
                <div class="row">
                    <div class="col-md-7 col-sm-12 col-xl-8">

                        @include('auth.sso.account-login-common-left')
  
                    </div>
  
                    <div class="col-md-5 col-sm-12 col-xl-4 order-mobile-first">
                        <div class="card loginCard max-width-540 login-card-padding">
                            <p class="teacher-login-title text-center">{{$title}}</p>

                            <div id="message" class="alert alert-danger"></div>

                            @if (session()->has('message'))
                                <p class="alert alert-info">
                                    {{ session()->get('message') }}
                                </p>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif

                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif
                            <!-- Form Start -->
                            <form action="{{ route('account.pin-update') }}" method="POST">
                                @csrf

                                <div class="form-group">
                                    <label for="id" class="login-field-title"> নতুন পিন দিন </label>
                                    <div class="input-group">
                                        <img src="{{ asset('images/lock.svg') }}" class="np-login-field-icon" alt="logo">
                                            <input type="password" id="password" name="password" class="form-control np-login-form-field {{ $errors->has('password') ? ' is-invalid' : '' }}"
                                            data-toggle="tooltip" data-placement="top" title="৬ (ছয়) ডিজিটের নতুন পিন প্রদান করুন। শুধুমাত্র ইংরেজি সংখ্যা ০ থেকে 9 পর্যন্ত।" required pattern="[0-9]{6}" placeholder="নতুন পিন দিন"
                                            maxlength="6" oninput="this.value = this.value.replace(/\D/g, '')">

                                            <div class="input-group-append password-toggle">
                                                <span>
                                                    <i id="password-toggle" class="fa fa-eye-slash"
                                                        onclick="togglePassword()"></i>
                                                </span>
                                            </div>

                                            

                                            @if ($errors->has('password'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('password') }}
                                                </div>
                                            @endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="id" class="login-field-title"> নতুন পিনটি পুনরায় দিন </label>
                                    <div class="input-group">
                                        <img src="{{ asset('images/lock.svg') }}" class="np-login-field-icon" alt="logo">
                                            <input type="password" id="password_confirmation" name="password_confirmation" class="form-control np-login-form-field {{ $errors->has('password') ? ' is-invalid' : '' }}"
                                            data-toggle="tooltip" data-placement="top" title="৬ (ছয়) ডিজিটের নতুন পিনটি পুনরায় প্রদান করুন।" required pattern="[0-9]{6}" placeholder="নতুন পিনটি পুনরায় দিন"
                                            maxlength="6" oninput="this.value = this.value.replace(/\D/g, '')">

                                            <div class="input-group-append password-toggle">
                                                <span>
                                                    <i id="password-toggle2" class="fa fa-eye-slash"
                                                        onclick="togglePassword2()"></i>
                                                </span>
                                            </div>
                                            @if ($errors->has('password_confirmation'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('password_confirmation') }}
                                                </div>
                                            @endif
                                            
                                    </div>
                                </div>
                                <button type="submit" class="btn login-button text-white"> নিশ্চিত </button>
                            </form>
                            <!-- Form End -->
                        </div>
                    </div>
                </div>

            </div>
            {{-- <div class="switch-container">
                <input type="checkbox" id="switch" class="language-switch">
                <label for="switch" class="switch-label">
                    <small class="login-language">আপনি কি বাংলাকে আপনার ডিফল্ট ভাষা হিসেবে রাখতে চান ?</small>
                    <div class="switch-rail">
                        <div class="switch-slider"></div>
                    </div>

                </label>
            </div> --}}
        </div>

        @include('auth.sso.account-login-modal-common')

    </div>

    <script>
        function togglePassword(){
            var passwordInput = document.getElementById("password");
            var passwordToggle = document.getElementById("password-toggle");

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                passwordToggle.classList.remove("fa-eye-slash");
                passwordToggle.classList.add("fa-eye");
                passwordInput.setAttribute("placeholder", ""); // Clear placeholder
            } else {
                passwordInput.type = "password";
                passwordToggle.classList.remove("fa-eye");
                passwordToggle.classList.add("fa-eye-slash");
                passwordInput.setAttribute("placeholder", "••••••"); // Restore placeholder
            }
        }

        function togglePassword2(){
            var passwordInput = document.getElementById("password_confirmation");
            var passwordToggle = document.getElementById("password-toggle2");

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                passwordToggle.classList.remove("fa-eye-slash");
                passwordToggle.classList.add("fa-eye");
                passwordInput.setAttribute("placeholder", ""); // Clear placeholder
            } else {
                passwordInput.type = "password";
                passwordToggle.classList.remove("fa-eye");
                passwordToggle.classList.add("fa-eye-slash");
                passwordInput.setAttribute("placeholder", "••••••"); // Restore placeholder
            }
        }
    </script>

    <script>
        // password and confirm password matching 
        const passwordInput = document.getElementById('password');
        const confirmPasswordInput = document.getElementById('password_confirmation');
        const messageDiv = document.getElementById('message');
            confirmPasswordInput.addEventListener('input', checkPasswords);
            function checkPasswords(){
            const passwordValue = passwordInput.value;
            const confirmPasswordValue = confirmPasswordInput.value;
            if (passwordValue !== confirmPasswordValue) {
                messageDiv.textContent = "নতুন পিন এবং পুনরায় পিন মিল নেই!";
                messageDiv.style.display = "block";
            } else {
                messageDiv.textContent = "";
                messageDiv.style.display = "none";
            }
        }
    </script>

@endsection