@extends('layouts.app', ['class' => 'bg'])

@section('content')
@include('layouts.headers.guest')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<div class="container mt--6 pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">

            @if (session('status'))
            <div class="card bg-secondary shadow border-0">
                <div class="card-body">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('status') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            </div>
            @endif
            <div class="card bg-secondary shadow border-0">
                <div class="card-body px-lg-5 py-lg-5">
                    @php
                    use Illuminate\Support\Facades\DB;
                    $settings = DB::table('system_settings')->where('key', 'recaptcha')->first();
                    if ($settings) {
                    $settingsData = json_decode($settings->value, true);
                    } else {
                    $settingsData = [];
                    }
                    $isRecaptchaActive = $settings ? json_decode($settings->value, true)['status'] == '1' : false;
                    $siteKey = isset($settingsData['site_key']) ? $settingsData['site_key'] : '';
                    @endphp
                    <form id="loginForm" role="form" method="POST" action="{{ route('admin.login.post') }}">
                        @csrf
                        <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }} mb-3">
                            <div class="input-group input-group-alternative">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                                </div>
                                <input id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ old('email', $email) }}" required autofocus>
                            </div>
                            @if ($errors->has('email'))
                            <span class="invalid-feedback" style="display: block;" role="alert">
                                <strong>{{ $errors->first('email') }}</strong>
                            </span>
                            @endif
                        </div>
                        <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                            <div class="input-group input-group-alternative">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="bi bi-lock"></i>
                                    </span>
                                </div>
                                <input id="password"
                                    class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                    name="password"
                                    placeholder="{{ __('Password') }}"
                                    value="{{ old('password', $password) }}"
                                    type="password"
                                    required>
                                <div class="input-group-append">
                                    <span class="input-group-text password-toggle" onclick="togglePassword()">
                                        <i class="bi bi-eye" id="togglePasswordIcon"></i>
                                    </span>
                                </div>
                            </div>
                            @if ($errors->has('password'))
                            <span class="invalid-feedback" style="display: block;" role="alert">
                                <strong>{{ $errors->first('password') }}</strong>
                            </span>
                            @endif
                        </div>

                        <style>
                            .password-toggle {
                                cursor: pointer;
                            }

                            .password-toggle i {
                                font-size: 18px;
                                color: #8898aa;
                                transition: color 0.2s;
                            }

                            .password-toggle:hover i {
                                color: #0d6efd;
                                /* Bootstrap primary */
                            }
                        </style>

                        <script>
                            function togglePassword() {
                                const passwordInput = document.getElementById("password");
                                const toggleIcon = document.getElementById("togglePasswordIcon");

                                if (passwordInput.type === "password") {
                                    passwordInput.type = "text";
                                    toggleIcon.classList.remove("bi-eye");
                                    toggleIcon.classList.add("bi-eye-slash");
                                } else {
                                    passwordInput.type = "password";
                                    toggleIcon.classList.remove("bi-eye-slash");
                                    toggleIcon.classList.add("bi-eye");
                                }
                            }
                        </script>

                        <div class="custom-control custom-control-alternative custom-checkbox">
                            <input class="custom-control-input" name="remember" id="customCheckLogin" type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                            <label class="custom-control-label" for="customCheckLogin">
                                <span class="text-muted">{{ __('Remember me') }}</span>
                            </label>
                        </div>
                        @if($isRecaptchaActive)
                        <br>
                        <div class="form-group">
                            <div class="g-recaptcha" data-sitekey="{{ $siteKey }}"></div>
                        </div>
                        @if ($errors->has('g-recaptcha-response'))
                        <span class="invalid-feedback" style="display: block;" role="alert">
                            <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                        </span>
                        @endif
                        @endif
                        <div class="text-center">
                            <button type="submit" class="btn btn-danger my-4">{{ __('Sign in') }}</button>
                        </div>
                    </form>
                </div>
            </div>
            
        </div>
    </div>
</div>
{{-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> --}}
@endsection