@extends('admin.components.layouts.blank')

@section('page_title', 'ورود به پنل')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-7 col-12 bg-white shadow rounded mx-auto my-auto mb-5 p-3">
                <form id="login-form" method="POST" enctype="multipart/form-data" class="mt-4"
                      action="{{ route('admin.auth.do_login') }}">
                    @csrf
                    <img src="{{ asset('static/images/bss_logo.png') }}" class="w-100 h-auto border-bottom pb-3 mb-3" alt="logo">
                    <div>لطفا برای ورود نام کاربری و رمز عبور خود را وارد کنید</div>

                    <div class="form-floating my-3">
                        <input id="username" type="text" name="username" class="form-control"
                               value="{{ old('username') }}" placeholder>
                        <label for="username">نام کاربری</label>
                        @error('username') <div class="small text-danger mt-1 ps-3"><b>{{ $message }}</b></div> @enderror
                    </div>

                    <div class="form-floating my-3 position-relative">
                        <input id="password" type="password" name="password" class="form-control"
                               value="{{ old('password') }}" placeholder>
                        <label for="password">رمز عبور</label>
                        <span class="position-absolute top-50 end-0 translate-middle-y me-3"
                              style="cursor: pointer;" onclick="togglePassword()">
                        <i id="password-icon" class="bi bi-eye fs-5"></i>
                    </span>
                        @error('password') <div class="small text-danger mt-1 ps-3"><b>{{ $message }}</b></div> @enderror
                    </div>

                    <img src="{{ captcha_src() }}" onclick="this.src='{{ captcha_src() }}' + Math.random()"
                         style="cursor:pointer;" alt="captcha">
                    <div class="form-floating my-3">
                        <input id="captcha" type="text" name="captcha" class="form-control" placeholder>
                        <label for="captcha">کد امنیتی</label>
                        @error('captcha') <div class="small text-danger mt-1 ps-3"><b>{{ $message }}</b></div> @enderror
                    </div>

                    <button type="submit" class="btn btn-success mt-4 w-100">
                        ورود
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('internal_scripts')
<script>
    function togglePassword() {
        const passwordInput = document.getElementById('password');
        const icon = document.getElementById('password-icon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('bi-eye');
            icon.classList.add('bi-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('bi-eye-slash');
            icon.classList.add('bi-eye');
        }
    }
</script>
@endpush