@php
    use App\Helpers\Helper;
    $configData = Helper::applClasses();
    $showLoginCarousel = $loginCarouselEnabled && $loginCarouselSlides->isNotEmpty();
@endphp

@extends('layouts/fullLayoutMaster')

@section('title', __('locale.auth.login'))

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/authentication.css')) }}">
    @if(config('no-captcha.login'))
        {!! RecaptchaV3::initJs() !!}
    @endif

    <style>
        .auth-bg {
            position: relative;
            min-height: 100vh;
        }

        .login-carousel-shell {
            overflow: hidden;
        }

        .login-carousel-shell,
        .login-carousel-shell .carousel,
        .login-carousel-shell .carousel-inner,
        .login-carousel-shell .carousel-item {
            height: 100%;
            min-height: 420px;
        }

        .login-carousel-slide {
            position: relative;
            height: 100%;
            min-height: 420px;
            overflow: hidden;
            border-radius: 1rem;
        }

        .login-carousel-slide .login-slider-media {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
        }

        .login-carousel-slide .login-slider-media--svg {
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
        }

        .login-carousel-slide--svg {
            background: rgba(15, 23, 42, 0.35);
        }

        .login-carousel-slide::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.72) 100%);
        }

        .login-carousel-copy {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 2rem;
            color: #fff;
        }

        .login-carousel-copy h2,
        .login-carousel-copy p,
        .login-carousel-copy span {
            color: #fff;
        }

        .login-carousel-copy .btn {
            margin-top: 1rem;
        }

        .login-default-visual {
            border-radius: 1rem;
            overflow: hidden;
        }

        .login-default-visual img {
            width: 100%;
            height: auto;
            display: block;
        }

        @media (max-width: 991.98px) {
            .login-carousel-shell,
            .login-carousel-shell .carousel,
            .login-carousel-shell .carousel-inner,
            .login-carousel-shell .carousel-item,
            .login-carousel-slide {
                min-height: 320px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="auth-wrapper auth-cover">
        <div class="auth-inner row m-0">
            <a class="brand-logo" href="{{ route('login') }}">
                <img src="{{ app_logo_url() }}" alt="{{ config('app.name') }}" />
            </a>

            <div class="d-none d-lg-flex col-lg-8 align-items-center p-5">
                <div class="w-100 d-lg-flex align-items-center justify-content-center px-5">
                    @if($showLoginCarousel)
                        <div class="login-carousel-shell w-100">
                            <div
                                id="loginCarousel"
                                class="carousel slide carousel-fade"
                                data-bs-ride="{{ ($loginCarouselSettings['login_carousel_autoplay'] ?? false) ? 'carousel' : 'false' }}"
                                data-bs-interval="{{ (int) ($loginCarouselSettings['login_carousel_autoplay_interval'] ?? 6000) }}"
                            >
                                @if($loginCarouselSettings['login_carousel_show_indicators'] ?? false)
                                    <div class="carousel-indicators">
                                        @foreach($loginCarouselSlides as $slide)
                                            <button
                                                type="button"
                                                data-bs-target="#loginCarousel"
                                                data-bs-slide-to="{{ $loop->index }}"
                                                class="{{ $loop->first ? 'active' : '' }}"
                                                @if($loop->first) aria-current="true" @endif
                                                aria-label="Slide {{ $loop->iteration }}"
                                            ></button>
                                        @endforeach
                                    </div>
                                @endif

                                <div class="carousel-inner rounded">
                                    @foreach($loginCarouselSlides as $slide)
                                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                            <div class="login-carousel-slide {{ $slide->isSvg() ? 'login-carousel-slide--svg' : '' }}">
                                                @include('partials.login-slider-media', [
                                                    'slide' => $slide,
                                                    'eager' => $loop->first,
                                                ])
                                                <div class="login-carousel-copy">
                                                    @if($slide->subtitle)
                                                        <span class="text-uppercase small fw-bold">{{ $slide->subtitle }}</span>
                                                    @endif
                                                    <h2 class="fw-bolder mt-50">{{ $slide->title }}</h2>
                                                    @if($slide->description)
                                                        <p class="mb-0">{{ $slide->description }}</p>
                                                    @endif
                                                    @if($slide->button_text && $slide->button_url)
                                                        <a href="{{ $slide->button_url }}" class="btn btn-primary" target="_blank" rel="noopener noreferrer">
                                                            {{ $slide->button_text }}
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                @if($loginCarouselSettings['login_carousel_show_navigation'] ?? false)
                                    <button class="carousel-control-prev" type="button" data-bs-target="#loginCarousel" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#loginCarousel" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="login-default-visual">
                            @if($configData['theme'] === 'dark')
                                <img class="img-fluid" src="{{ asset('images/pages/login-v2-dark.svg') }}" alt="{{ config('app.name') }}" />
                            @else
                                <img class="img-fluid" src="{{ asset('images/pages/login-v2.svg') }}" alt="{{ config('app.name') }}" />
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <div class="d-flex col-lg-4 align-items-center auth-bg px-2 p-lg-5">
                <div class="col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto">
                    <h2 class="card-title fw-bold mb-1">{{ __('locale.labels.welcome_to') }} {{ config('app.name') }}</h2>
                    <p class="card-text mb-2">{{ __('locale.auth.welcome_message') }}</p>

                    @if(config('app.stage') == 'demo')
                        <div class="d-flex justify-content-between" style="cursor: pointer;">
                            <span class="text-primary font-medium-1 admin-login text-uppercase">Admin View</span>
                            <span class="text-success font-medium-1 pull-right customer-login text-uppercase">Campaign View</span>
                            <span class="text-danger font-medium-1 dlt-login text-uppercase">DLT View</span>
                        </div>
                    @endif

                    @if($allowPasskeyLogin ?? false)
                        <button type="button" class="btn btn-outline-primary w-100 mt-2"
                                data-passkey-verify
                                data-options-url="{{ route('passkeys.login.options') }}"
                                data-submit-url="{{ route('passkeys.login.store') }}"
                                data-remember-target="#remember-me">
                            <i data-feather="key" class="me-50"></i> Login with Passkey
                        </button>
                        <div class="divider my-2">
                            <div class="divider-text">{{ __('locale.auth.or') }}</div>
                        </div>
                    @endif

                    <form class="auth-login-form mt-2" method="POST" action="{{ route('login') }}" data-demo-allow>
                        @csrf
                        <div class="mb-1">
                            <label class="form-label" for="email">{{ __('locale.labels.email') }}</label>
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
                                   name="email" placeholder="{{ __('locale.labels.email') }}" value="{{ old('email') }}"
                                   required autocomplete="email" autofocus>

                            @error('email')
                            <div class="alert alert-danger mt-1 alert-validation-msg" role="alert">
                                <div class="alert-body d-flex align-items-center">
                                    <i data-feather="info" class="me-50"></i>
                                    <span>{{ $message }}</span>
                                </div>
                            </div>
                            @enderror

                            @error('g-recaptcha-response')
                            <div class="alert alert-danger mt-1 alert-validation-msg" role="alert">
                                <div class="alert-body d-flex align-items-center">
                                    <i data-feather="info" class="me-50"></i>
                                    <span>{{ __('locale.labels.g-recaptcha-response') }}</span>
                                </div>
                            </div>
                            @enderror
                        </div>

                        <div class="mb-1">
                            <div class="d-flex justify-content-between">
                                <label class="form-label" for="password">{{ __('locale.labels.password') }}</label>

                                @if (Route::has('password.request'))
                                    <a href="{{ route('password.request') }}">
                                        <small>{{ __('locale.auth.forgot_password') }}?</small>
                                    </a>
                                @endif
                            </div>

                            <div class="input-group input-group-merge form-password-toggle">
                                <input id="password" type="password" class="form-control" name="password"
                                       placeholder="{{ __('locale.labels.password') }}"
                                       required autocomplete="password"
                                       @if(config('app.stage') == 'demo') value="12345678" @endif>
                                <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                            </div>
                        </div>

                        @if(config('no-captcha.login'))
                            <div class="mb-1">
                                {!! RecaptchaV3::field('login') !!}
                            </div>
                        @endif

                        @if($allowRememberMe ?? true)
                            <div class="mb-1">
                                <div class="form-check">
                                    <input class="form-check-input" {{ old('remember') ? 'checked' : '' }} name="remember"
                                           id="remember-me" type="checkbox" value="1" tabindex="3" />
                                    <label class="form-check-label" for="remember-me">{{ __('locale.auth.remember_me') }}</label>
                                </div>
                            </div>
                        @endif
                        <button type="submit" class="btn btn-primary w-100" tabindex="4" data-demo-allow>{{ __('locale.auth.login') }}</button>
                    </form>

                    @if(config('account.can_register'))
                        <p class="text-center mt-2">
                            <span>{{ __('locale.auth.new_on_our_platform') }}?</span>
                            <a href="{{ route('register') }}"><span>&nbsp;{{ __('locale.auth.register') }}</span></a>
                        </p>
                    @endif

                    @if(config('services.facebook.active') || config('services.twitter.active') || config('services.google.active') || config('services.github.active'))
                        <div class="divider my-2">
                            <div class="divider-text">{{ __('locale.auth.or') }}</div>
                        </div>

                        <div class="auth-footer-btn d-flex justify-content-center">
                            @if(config('services.facebook.active'))
                                <a class="btn btn-facebook" href="{{ route('social.login', 'facebook') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook">
                                    <i data-feather="facebook"></i>
                                </a>
                            @endif
                            @if(config('services.twitter.active'))
                                <a class="btn btn-twitter" href="{{ route('social.login', 'twitter') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter">
                                    <i data-feather="twitter"></i>
                                </a>
                            @endif
                            @if(config('services.google.active'))
                                <a class="btn btn-google" href="{{ route('social.login', 'google') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Google">
                                    <i data-feather="mail"></i>
                                </a>
                            @endif
                            @if(config('services.github.active'))
                                <a class="btn btn-github" href="{{ route('social.login', 'github') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Github">
                                    <i data-feather="github"></i>
                                </a>
                            @endif
                        </div>
                    @endif

                    @php
                        $termsOfUseHtml = Helper::app_config('terms_of_use');
                        $privacyPolicyHtml = Helper::app_config('privacy_policy');
                        $hasTermsOfUse = Helper::hasLegalDocumentContent($termsOfUseHtml);
                        $hasPrivacyPolicy = Helper::hasLegalDocumentContent($privacyPolicyHtml);
                        $customScript = Helper::app_config('custom_script');
                        $hasCustomScript = $customScript && Helper::cookieConsentAllows('marketing')
                            ? $customScript
                            : null;
                    @endphp

                    @if($hasPrivacyPolicy || $hasTermsOfUse)
                        <p class="text-center text-uppercase position-absolute bottom-0 start-50 translate-middle-x mb-2">
                            @if($hasTermsOfUse)
                                <a class="ms-25 text-success" target="_blank" href="{{ route('terms-of-use') }}">{{ __('locale.labels.terms_of_use') }}</a>
                            @endif
                            @if($hasPrivacyPolicy)
                                <a class="ms-25 text-info" target="_blank" href="{{ route('privacy-policy') }}">{{ __('locale.labels.privacy_policy') }}</a>
                            @endif
                        </p>
                    @endif

                    @if($hasCustomScript !== null)
                        {!! $hasCustomScript !!}
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @if($allowPasskeyLogin ?? false)
        <script src="{{ asset(mix('js/passkeys.js')) }}"></script>
    @endif
    <script>
      $(".admin-login").on("click", function() {
        $("#email").val("admin@codeglen.com");
      });

      $(".customer-login").on("click", function() {
        $("#email").val("customer@codeglen.com");
      });

      $(".dlt-login").on("click", function() {
        $("#email").val("dlt@codeglen.com");
      });
    </script>
@endpush