@extends(siberfx_view('layouts.auth'))

@php
    $links = [];

    if (siberfx_theme_config('privacy_link')) {
        $links[] = [
            'url' => siberfx_theme_config('privacy_link'),
            'label' => __('siberfx::base.privacy_title')
        ];
    }

    if (siberfx_theme_config('disclaimer_url')) {
        $links[] = [
            'url' => siberfx_theme_config('disclaimer_url'),
            'label' => __('siberfx::base.disclaimer_title')
        ];
    }

    if (siberfx_theme_config('contact_url')) {
        $links[] = [
            'url' => siberfx_theme_config('contact_url'),
            'label' => __('siberfx::base.contact_title')
        ];
    }

    if (siberfx_theme_config('live_support_url')) {
        $links[] = [
            'url' => siberfx_theme_config('live_support_url'),
            'label' => __('siberfx::base.support_title')
        ];
    }
    @endphp

@section('content')
    <div class="row g-0 flex-fill">
        <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
            <div class="container container-tight my-5 px-lg-5">
                <div class="text-center mb-4 display-6 auth-logo-container">
                    {!! siberfx_theme_config('project_logo') !!}
                </div>

                <h2 class="h2 text-center my-4">{{ trans('siberfx::base.login') }}</h2>

                <form method="POST" action="{{ route('siberfx.auth.login') }}" autocomplete="off" novalidate="">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="{{ $username }}">{{ trans('siberfx::base.'.strtolower(config('siberfx.base.authentication_column_name'))) }}</label>

                        <input autofocus tabindex="1" type="text" name="{{ $username }}" value="{{ old($username) }}" id="{{ $username }}" class="form-control {{ $errors->has($username) ? 'is-invalid' : '' }}">
                        @if ($errors->has($username))
                            <div class="invalid-feedback">{{ $errors->first($username) }}</div>
                        @endif
                    </div>
                    <div class="mb-2">
                        <label class="form-label" for="password">
                            {{ trans('siberfx::base.password') }}
                        </label>
                        <div class="input-group input-group-flat password-visibility-toggler">
                            <input tabindex="2" type="password" name="password" id="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" value="">
                            @if(siberfx_theme_config('options.showPasswordVisibilityToggler'))
                                <span class="input-group-text p-0 px-2">
                <a href="#" data-input-type="text" class="link-secondary p-2" data-bs-toggle="tooltip" aria-label="{{ trans('siberfx::theme-tabler.password-show') }}" data-bs-original-title="{{ trans('siberfx::theme-tabler.password-show') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path></svg>
                </a>
                <a href="#" data-input-type="password" class="link-secondary p-2 d-none" data-bs-toggle="tooltip" aria-label="{{ trans('siberfx::theme-tabler.password-hide') }}" data-bs-original-title="{{ trans('siberfx::theme-tabler.password-hide') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>
                </a>
            </span>
                            @endif
                        </div>
                        @if ($errors->has('password'))
                            <div class="invalid-feedback">{{ $errors->first('password') }}</div>
                        @endif
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-check mb-0">
                            <input name="remember" tabindex="3" type="checkbox" class="form-check-input">
                            <span class="form-check-label">{{ trans('siberfx::base.remember_me') }}</span>
                        </label>
                        @if (siberfx_users_have_email() && siberfx_email_column() == 'email' && config('siberfx.base.setup_password_recovery_routes', true))
                            <div class="form-label-description">
                                <a tabindex="4" href="{{ route('siberfx.auth.password.reset') }}">{{ trans('siberfx::base.forgot_your_password') }}</a>
                            </div>
                        @endif
                    </div>

                    <div class="form-footer">
                        <button tabindex="5" type="submit" class="btn btn-primary w-100">{{ trans('siberfx::base.login') }}</button>
                    </div>
                </form>

                {{-- 🔗 Footer links --}}
                <div class="text-center text-muted small mt-4">
                    <div class="mb-1">
                        {{ __('siberfx::base.copyright', ['year' => date('Y'), 'site' => config('app.name')]) }}
                    </div>
                    <div class="mb-1">
                        @foreach ($links as $i => $link)
                            <a href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer">{{ $link['label'] }}</a>
                            @if (!$loop->last)
                                &nbsp;|&nbsp;
                            @endif
                        @endforeach
                    </div>
                </div>

                @if (config('siberfx.base.registration_open'))
                    <div class="text-center mt-3">
                        <a tabindex="6" href="{{ route('siberfx.auth.register') }}" class="btn btn-outline-secondary">
                            {{ __('siberfx::base.claim-account') }}
                        </a>
                    </div>
                @endif

            </div>
        </div>

        <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
            <div class="bg-cover h-100 min-vh-100"
                 style="background-image: url({{ random_splash(config('siberfx.theme-tabler.login-sidebar')) }})">
            </div>
        </div>
    </div>
@endsection

@section('after_scripts')
    <script>
        $('body').on('click', '.toggle-password', function () {
            var selector = $(this).closest(".input-group").find("input.form-control");
            $("i#toggler").toggleClass("la-eye la-eye-slash");
            var type = selector.attr('type') === 'password' ? 'text' : 'password';
            selector.attr("type", type);
        });

    </script>

    <script type="module">
        let input = document.querySelector('.password-visibility-toggler input');
        let buttons = document.querySelectorAll('.password-visibility-toggler a');

        buttons.forEach(button => {
            button.addEventListener('click', () => {
                buttons.forEach(b => b.classList.toggle('d-none'));
                input.type = input.type === 'password' ? 'text' : 'password';
                input.focus();
            });
        });
    </script>
@endsection
