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

<style>
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px; /* Optional: Adds some spacing below the logo */
    }
</style>
    <div class="login-bg">
        <div class="">
            <div class="container login-container">

                <div class="logo">
                    <img src={{ asset('images/school.png') }} style="width: 120px; height: 120px; align-items: center;"
                        alt="" />
                </div>

                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xl-12">

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

                        <div class="row justify-content-center">
                            <div class="col-md-5 col-sm-12 col-xl-4 order-mobile-first d-flex justify-content-center">
                                <div class="card loginCard login-card-padding">
                                    
                                    <p class="teacher-login-title text-center">লগইন</p>
        
                                    @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
        
                                    <!-- Form Start -->
                                    <form action="{{ route('account.verify') }}" method="POST">
                                        @csrf
        
                                        <input type="hidden" name="redirect_uri" value="{{ old('redirect_uri', $redirect_uri) }}">
        
                                        <div class="form-group mb-0 d-none">
                                            <label for="user_type_id" class="login-field-title"> ইউজার টাইপ</label>
                                            <div class="input-group">
                                                <select class="form-control np-login-form-field_" name="user_type_id" required>
                                                    {{-- <option value="1" selected>শিক্ষক</option> --}}
                                                    <!-- <option value="2">শিক্ষার্থী</option> -->
                                                    <option value="3" selected>প্রতিষ্ঠান</option>
                                                    <option value="4">অন্যান্য</option>
                                                </select>
                                            </div>
        
                                            @if ($errors->has('user_type_id'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('user_type_id') }}
                                                </div>
                                            @endif
                                        </div>
        
                                        <div class="form-group mb-0">
                                            <label for="caid" class="login-field-title"> ইউজার আইডি </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span> <img src="{{ asset('images/user-square.svg') }}"
                                                            class="np-login-field-icon" alt="logo"></span>
                                                </div>
                                                <input type="text" id="caid" required autocomplete="caid"
                                                    placeholder="ইউজার আইডি" name="caid" value=""
                                                    class="form-control np-login-form-field" data-toggle="tooltip"
                                                    data-placement="top"
                                                    title="প্রতিষ্ঠান হিসেবে লগইন করার জন্য EIIN/SGN প্রদান করুন">
                                            </div>
        
                                            @if ($errors->has('caid'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('caid') }}
                                                </div>
                                            @endif
                                        </div>
        
                                        <div class="form-group mb-0">
                                            <label for="pin" 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"
                                                    class="form-control np-login-form-field {{ $errors->has('password') ? ' is-invalid' : '' }}"
                                                    data-toggle="tooltip" data-placement="top"
                                                    title="৬ (ছয়) ডিজিটের পিন প্রদান করুন" name="password" required
                                                    pattern="[0-9]{6}" placeholder="126345" 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>
        
                                        <button type="submit" class="btn login-button text-white mt-3"> লগইন করুন </button>
        
                                        <div class="form-group form-check">
                                            {{-- <input type="checkbox" class="form-check-input np-login-checkbox" id="remember" name="remember">
                                        <label class="form-check-label np-login-checbox-text" for="remember">পিন সংরক্ষণ করুন</label> --}}
        
                                            @if (Route::has('account.password-reset'))
                                                <p class="mt-3 text-center">
                                                    <a href="#" id="password-reset-link" class="link-success"
                                                        style="color: #428F92">
                                                        পিন ভুলে গেছেন? ক্লিক করুন
                                                    </a>
                                                </p>
                                            @endif
                                        </div>
        
                                    </form>
                                    <!-- Form End -->
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    @include('auth.sso.account-login-modal-common')
    <!-- @include('auth.sso.chat-popup') -->

    <script>
        $(document).ready(function() {
            $('#password-reset-link').click(function(e) {
                e.preventDefault();

                var form = $('<form>', {
                    'method': 'POST',
                    'action': '{{ route('account.password-reset') }}'
                });
                var caid = $('#caid').val();

                form.append('{{ csrf_field() }}');
                form.append($('<input>', {
                    'type': 'hidden',
                    'name': 'caid',
                    'value': caid
                }));

                form.appendTo('body').submit();
            });
        });
    </script>

    <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
            }
        }
    </script>
@endsection