@php
    $settings = \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::settings();
    $countries = \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::countryOptions();
    $defaultCountry = \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::defaultCountry();
    $savedCountryIso = old('phone_country_iso', session('referral_auth.login_country_iso', $defaultCountry['iso']));
    $savedDialCode = old('phone_dial_code', session('referral_auth.login_dial_code', $defaultCountry['dial']));
    $savedLocal = old('phone_local', session('referral_auth.login_local', ''));
    $loginMode = $settings->login_mode;
    $showPasswordForm = $loginMode !== 'phone_otp_only';
    $showPhoneForm = $loginMode !== 'username_password';
    $otpSent = session('referral_auth.login_phone');
@endphp
<x-layout-auth>
    @slot('title', __('Login'))

    <div class="authentication-wrapper authentication-cover">
        <a href="{{ url('/') }}" class="app-brand auth-cover-brand">
            <span class="app-brand-logo demo">
                <span class="text-primary">
                    <x-logo></x-logo>
                </span>
            </span>
        </a>
        <div class="authentication-inner row m-0">
            <div class="d-none d-xl-flex col-xl-7 p-0">
                <div class="auth-cover-bg d-flex justify-content-center align-items-center">
                    <div class="p-5 text-white" style="max-width: 560px;">
                        <span class="badge bg-white text-primary mb-3">{{ __('Modern Access Flow') }}</span>
                        <h2 class="text-white mb-3">{{ __('Flexible sign in built for faster conversion.') }}</h2>
                        <p class="fs-5 opacity-75 mb-0">{{ __('Use classic credentials, phone OTP, or both, depending on how your admin has configured this workspace.') }}</p>
                    </div>
                </div>
            </div>
            <div class="d-flex col-12 col-xl-5 align-items-center authentication-bg p-sm-12 p-6">
                <div class="w-px-420 mx-auto mt-12 pt-5">
                    <h4 class="mb-1">{{ __('Sign In') }}</h4>
                    <p class="mb-6">{{ __('Welcome back to :site_name.', ['site_name' => config('config.site_name')]) }}</p>

                    @if (session()->has('alert'))
                        <div class="alert alert-{{ session('alert')['type'] === 'danger' ? 'danger' : 'success' }} mb-4">
                            {{ session('alert')['msg'] }}
                        </div>
                    @endif

                    @if ($showPasswordForm)
                        <form class="mb-4" action="{{ route('plugins.referral-auth-suite.login.password') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label for="username" class="form-label">{{ __('Username') }}</label>
                                <input type="text" class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}" id="username" name="username" value="{{ old('username') }}" placeholder="{{ __('Username') }}">
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-4">
                                <label for="password" class="form-label">{{ __('Password') }}</label>
                                <input type="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" id="password" name="password" placeholder="{{ __('Enter Password') }}">
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="remember-me" name="remember" value="1">
                                    <label class="form-check-label" for="remember-me">{{ __('Remember Me') }}</label>
                                </div>
                                <a href="{{ route('password.request') }}">{{ __('Reset Password') }}</a>
                            </div>
                            <button class="btn btn-primary d-grid w-100">{{ __('Sign In') }}</button>
                        </form>
                    @endif

                    @if ($showPhoneForm)
                        @if ($showPasswordForm)
                            <div class="text-center text-muted small fw-semibold mb-4">{{ __('OR CONTINUE WITH PHONE OTP') }}</div>
                        @endif
                        <form action="{{ route('plugins.referral-auth-suite.login.otp') }}" method="POST">
                            @csrf
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">{{ __('Country') }}</label>
                                    <select name="phone_country_iso" class="form-select" data-phone-country data-target="login_phone_dial_code">
                                        @foreach ($countries as $country)
                                            <option value="{{ $country['iso'] }}" data-dial="{{ $country['dial'] }}" @selected($savedCountryIso === $country['iso'])>{{ $country['name'] }} ({{ $country['dial'] }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label class="form-label">{{ __('Dial') }}</label>
                                    <input type="text" readonly id="login_phone_dial_code" name="phone_dial_code" class="form-control" value="{{ $savedDialCode }}">
                                </div>
                                <div class="col-8">
                                    <label class="form-label">{{ __('Mobile Number') }}</label>
                                    <input type="text" name="phone_local" class="form-control {{ $errors->has('phone_local') ? 'is-invalid' : '' }}" value="{{ $savedLocal }}" placeholder="{{ __('8012345678') }}">
                                    @error('phone_local')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                @if ($otpSent)
                                    <div class="col-12">
                                        <label class="form-label">{{ __('OTP Code') }}</label>
                                        <input type="text" name="otp_code" inputmode="numeric" class="form-control {{ $errors->has('otp_code') ? 'is-invalid' : '' }}" placeholder="{{ __('Enter the code sent to your phone') }}">
                                        @error('otp_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif
                                <div class="col-12 d-grid gap-2">
                                    @if ($otpSent)
                                        <button type="submit" name="otp_action" value="verify" class="btn btn-primary">{{ __('Verify OTP and Sign In') }}</button>
                                        <button type="submit" name="otp_action" value="request" class="btn btn-outline-primary">{{ __('Send New OTP') }}</button>
                                    @else
                                        <button type="submit" name="otp_action" value="request" class="btn btn-outline-primary">{{ __('Send OTP') }}</button>
                                    @endif
                                </div>
                            </div>
                        </form>
                    @endif

                    <p class="text-center mt-5 mb-0">
                        <span>{{ __("Don't have an account yet?") }}</span>
                        <a href="{{ route('register') }}">{{ __('Sign up here') }}</a>
                    </p>
                    @if ($loginMode === 'phone_otp_only')
                        <p class="text-center mt-3 mb-0 small text-muted">
                            <a href="{{ route('password.request') }}">{{ __('Need recovery access because you have not added your phone number yet?') }}</a>
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('[data-phone-country]').forEach(function (select) {
            var target = document.getElementById(select.getAttribute('data-target'));
            var syncDialCode = function () {
                var option = select.options[select.selectedIndex];
                if (target && option) {
                    target.value = option.getAttribute('data-dial') || '';
                }
            };
            syncDialCode();
            select.addEventListener('change', syncDialCode);
        });
    </script>
</x-layout-auth>