@extends('layouts.app', ['class' => 'main-content-has-bg'])
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
@section('content')
@include('layouts.headers.guest')

<style>
    /* Base Styles */
    footer {
        display: none;
    }

    .navbar {
        display: none !important;
    }

    html>body {
        background-image: url('/imgs/bg-color.png');
    }

    .header {
        padding-bottom: 0px !important;
        display: none !important;
    }

    /* Main Container */
    .login-page-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 100px !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Login Card */
    .login-card {
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        width: 90%;
        display: flex;
        min-height: 650px;
    }

    /* Left Section - Login Form */
    .login-left {
        flex: 0.7;
        padding: 48px 40px;
        display: flex;
        background: white;
        align-items: center;
    }

    .login-form-container {
        width: 100%;
        max-width: 500px;
        padding-left: 50px;
    }

    /* Right Section - Testimonial */
    .login-right {
        flex: 1;
        padding: 116px 40px;
        display: flex;
        flex-direction: column;
        color: white;
        position: relative;
        padding-right: 80px;
    }

    .rightsection {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;
        position: relative;
        padding: 60px;
        border-radius: 24px;
    }

    /* SVG Decorations */
    .svg-decoration {
        position: absolute;
        top: -25px;
        right: -60px;
        width: 209px;
        height: 162px;
        color: white;
        z-index: 1;
    }

    .svg-decorations {
        position: absolute;
        bottom: 96px;
        right: 26px;
        width: 209px;
        height: 145px;
        z-index: 1;
    }

    .svg-decoration path {
        fill: currentColor;
    }

    /* Logo */
    .logo-icon {
        width: 100px;
        height: 56px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        font-size: 24px;
        color: white;
        font-weight: 600;
    }

    .sidebar-logo {
        text-align: left !important;
    }

    /* Typography */
    .greeting-text {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #1f2937 !important;
        line-height: 1.2;
        text-align: left;
    }

    .subtitle-text {
        font-size: 16px;
        color: #6b7280;
        margin-bottom: 40px;
        line-height: 1.5;
        text-align: left;
    }

    /* Form Elements */
    .form-group {
        margin-bottom: 24px;
    }

    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #374151;
        font-size: 14px;
    }

    .form-input {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        font-size: 16px;
        transition: all 0.2s ease;
        background: white;
        color: #1f2937;
        font-family: inherit;
        max-width: 450px;
    }

    .form-input:focus {
        outline: none;
        border-color: #6366f1;
    }

    .form-input::placeholder {
        color: #9ca3af;
    }

    /* Password Container */
    .password-container {
        position: relative;
        max-width: 450px;
        height: 50px;
    }

    .password-toggle {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #6b7280;
        font-size: 18px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .password-toggle:hover {
        color: #374151;
    }

    /* Options Row */
    .options-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        max-width: 450px;
    }

    .remember-me {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .remember-me input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #6366f1;
        border-radius: 4px;
    }

    .remember-me label {
        font-size: 14px;
        color: #374151;
        font-weight: 400;
        cursor: pointer;
    }

    .forgot-password {
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .forgot-password:hover {
        color: #4f46e5;
        text-decoration: none;
    }

    /* Sign In Button */
    .signin-btn {
        width: 100%;
        max-width: 450px;
        padding: 16px;
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 32px;
        font-family: inherit;
    }

    .signin-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        border: 1px solid;
    }

    /* Social Login */
    .social-login {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-bottom: 32px;
    }

    .social-btn {
        width: 48px;
        height: 48px;
        border: 1px solid #e5e7eb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 18px;
        color: #6b7280;
        text-decoration: none;
    }

    .social-btn:hover {
        border-color: #6366f1;
        color: #6366f1;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-decoration: none;
    }

    .social-btn.google {
        color: #ea4335;
    }

    .social-btn.github {
        color: #24292e;
    }

    .social-btn.facebook {
        color: #1877f2;
    }

    .social-btn.twitter {
        color: #1da1f2;
    }

    /* Signup Links */
    .signup-link {
        text-align: center;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

    .signup-link a {
        color: #6366f1;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .signup-link a:hover {
        color: #4f46e5;
        text-decoration: none;
    }

    .signup-links {
        color: #6366f1;
        font-size: 14px;
        font-weight: 500;
    }

    /* Testimonial Styles */
    .testimonial-title {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 24px;
        text-align: left;
        line-height: 1.3;
        color: #fff;
    }

    .testimonial-quote {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 32px;
        text-align: left;
        position: relative;
        padding-left: 20px;
    }

    .quote-icon {
        font-size: 48px;
        color: rgba(255, 255, 255, 0.3);
        position: absolute;
        top: -20px;
        left: -10px;
        font-family: serif;
    }

    .testimonial-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        color: #1f2937;
        position: relative;
        margin-top: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .testimonial-card .name {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 4px;
        color: #1f2937;
    }

    .testimonial-card .title {
        font-size: 14px;
        color: #6b7280;
        margin-bottom: 16px;
    }

    .testimonial-card .quote {
        font-size: 14px;
        line-height: 1.5;
        color: #4b5563;
    }

    .star-rating {
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: 24px;
        color: #fbbf24;
    }

    /* Pagination Dots */
    .pagination-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .dot.active {
        background: white;
    }

    /* Demo Buttons */
    .demo-buttons {
        margin-bottom: 24px;
        text-align: center;
    }

    .demo-btn {
        background: #dc2626;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 12px;
        margin: 0 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
    }

    .demo-btn:hover {
        background: #b91c1c;
        transform: translateY(-1px);
    }

    /* Error States */
    .form-input.is-invalid {
        border-color: #ef4444;
    }

    .form-input.is-invalid:focus {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 4px;
        font-size: 14px;
        color: #ef4444;
    }

    /* Swiper Styles */
    .testimonial-slider-container {
        max-width: 600px;
        /* margin: auto; */
    }

    .swiper-pagination-bullet {
        background-color: #000000;
        border: 1px solid;
        opacity: 0.5;
        transition: all 0.3s ease;
        border-radius: 50%;
    }

    /* Additional Styles */
    label::after {
        border: 1px solid #c8c8c8;
        border-radius: 5px;
    }

    .text-color {
        font-weight: 500;
        color: #374151;
        font-size: 14px;
    }

    button:focus {
        outline: none !important;
    }

    /* ========================================
       RESPONSIVE DESIGN - MOBILE FIRST APPROACH
       ======================================== */

    /* Extra Large Screens (1452px and below) */
    @media (max-width: 1618px) {
        .svg-decorations {
            bottom: 117px;
        }
    }

    @media (max-width: 1452px) {
        .svg-decorations {
            bottom: 117px;
            right: 27px;
        }

        .testimonial-slider-container {
            max-width: 347px !important;
            /* margin: auto; */
        }
    }

    /* Large Screens (1437px and below) */
    @media (max-width: 1437px) {
        .svg-decorations {
            display: none;
        }
    }

    /* Desktop Large (1200px and below) */
    @media (max-width: 1200px) {
        .login-page-container {
            padding: 0px 60px !important;
        }

        .login-card {
            max-width: 1000px;
        }

        .rightsection {
            padding: 40px;
        }

        .testimonial-title {
            font-size: 2.5rem;
        }
    }

    /* Desktop Medium (1024px and below) */
    @media (max-width: 1024px) {
        .login-page-container {
            padding: 0px 40px !important;
        }

        .login-card {
            max-width: 900px;
        }

        .login-form-container {
            width: 100%;
            max-width: 500px;
            padding-left: 0px;
        }

        .login-right {
            padding-right: 40px;
        }

        .rightsection {
            padding: 30px;
        }

        .testimonial-title {
            font-size: 2.2rem;
        }

        .testimonial-quote {
            font-size: 16px;
        }
    }

    /* Desktop Small (900px and below) */
    @media (max-width: 900px) {
        .login-page-container {
            padding: 0px 30px !important;
        }

        .login-card {
            max-width: 800px;
        }

        .rightsection {
            padding: 25px;
        }

        .testimonial-title {
            font-size: 2rem;
        }

        .testimonial-quote {
            font-size: 15px;
        }
    }

    /* Tablet (768px and below) */
    @media (max-width: 768px) {
        .login-page-container {
            padding: 20px 20px !important;
        }

        .login-card {
            flex-direction: column;
            max-width: 500px;
            min-height: auto;
        }

        .login-left {
            padding: 32px 24px;
        }

        .login-right {
            display: block;
            padding: 0;
        }

        .rightsection {
            padding: 30px 20px;
            border-radius: 0 0 24px 24px;
        }

        .greeting-text {
            font-size: 28px;
        }

        .testimonial-title {
            font-size: 1.8rem;
            text-align: left;
        }

        .testimonial-quote {
            font-size: 14px;
            text-align: left;
            padding-left: 15px;
        }

        .testimonial-card {
            margin: 20px auto 0;
        }

        .form-input,
        .password-container,
        .options-row,
        .signin-btn {
            max-width: 100%;
        }
    }

    /* Mobile Large (480px and below) */
    @media (max-width: 480px) {
        .login-page-container {
            padding: 10px 10px !important;
        }

        .login-left {
            padding: 24px 16px;
        }

        .rightsection {
            padding: 20px 15px;
        }

        .greeting-text {
            font-size: 24px;
        }

        .subtitle-text {
            font-size: 14px;
        }

        .testimonial-title {
            font-size: 1.5rem;
        }

        .testimonial-quote {
            font-size: 13px;
        }

        .testimonial-card {
            padding: 20px;
            margin: 15px auto 0;
        }

        .testimonial-slider-container {
            max-width: 300px !important;
            /* margin: auto; */
        }

        .social-login {
            gap: 12px;
        }

        .social-btn {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }
    }

    /* Mobile Medium (375px and below) */
    @media (max-width: 375px) {
        .testimonial-slider-container {
            max-width: 265px !important;
            /* margin: auto; */
        }
    }

    /* Mobile Small (360px and below) */
    @media (max-width: 360px) {
        .login-page-container {
            padding: 60px 5px !important;
            padding-bottom: 10px;
        }

        .login-left {
            padding: 20px 12px;
        }

        .rightsection {
            padding: 15px 10px;
        }

        .testimonial-title {
            font-size: 1.3rem;
        }

        .testimonial-quote {
            font-size: 12px;
        }

        .testimonial-card {
            padding: 15px;
            margin: 10px auto 0;
        }

        .testimonial-slider-container {
            max-width: 245px !important;
            /* margin: auto; */
        }
    }
</style>

@php
$currentAppTheme = '';
$currentAppTheme = getUserAppTheme();
@endphp

<div class="login-page-container">
    <div class="login-card row">
        <!-- Left Section - Login Form -->
        <div class="login-left col-lg-6 col-md-12 col-sm-12">
            <div class="login-form-container">
                <div class="logo-icon sidebar-logo">
                    <a class="navbar-brand p-1 d-sm-inline" href="{{ url('/') }}">
                        <!-- App Theme Change -->
                        @if ($currentAppTheme == 'dark')
                        <!-- dark theme -->
                        <img src="{{ getAppSettings('dark_theme_small_logo_image_url') }}"
                            class="navbar-brand-img lw-sidebar-logo-normal dark-theme-logo"
                            alt="{{ getAppSettings('name') }}">
                        @elseif($currentAppTheme == 'system_default')
                        <!-- dark theme -->
                        <img src="{{ getAppSettings('dark_theme_small_logo_image_url') }}"
                            class="navbar-brand-img lw-sidebar-logo-normal dark-theme-logo system-theme-dark-logo"
                            alt="{{ getAppSettings('name') }}" media="(prefers-color-scheme: dark)">

                        <img src="{{ getAppSettings('small_logo_image_url') }}"
                            class="navbar-brand-img lw-sidebar-logo-normal light-theme-logo system-theme-light-logo"
                            alt="{{ getAppSettings('name') }}">

                        @else
                        <img src="{{ getAppSettings('small_logo_image_url') }}"
                            class="navbar-brand-img lw-sidebar-logo-normal light-theme-logo"
                            alt="{{ getAppSettings('name') }}">

                        @endif
                    </a>
                </div>

                <h1 class="greeting-text">Account Access</h1>
                <p class="subtitle-text">Enter the information you entered while registering.</p>

                @if (isDemo())
                <div class="demo-buttons">
                    <button
                        onclick="document.getElementById('lwLoginEmail').value='demosuperadmin';document.getElementById('lwLoginPassword').value='demopass12';"
                        class="demo-btn">{{ __tr('Demo Super Admin Login') }}</button>
                    <button
                        onclick="document.getElementById('lwLoginEmail').value='testcompany';document.getElementById('lwLoginPassword').value='demopass12';"
                        class="demo-btn">{{ __tr('Demo Company Login') }}</button>
                </div>
                @endif

                <x-lw.form id="lwLoginForm" data-secured="true" :action="route('auth.login.process')">
                    <div class="form-group">
                        <label class="form-label">{{ __tr('Email') }}</label>
                        <input id="lwLoginEmail" class="form-input{{ $errors->has('email') ? ' is-invalid' : '' }}"
                            placeholder="{{ __tr('Email or Username or Mobile Number') }}" type="text"
                            name="email" value="{{ old('email') }}" required autofocus autocomplete="email">
                        @if ($errors->has('email'))
                        <div class="invalid-feedback">{{ $errors->first('email') }}</div>
                        @endif
                        <small
                            style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">{{ __tr('Mobile number should be with country code without 0 or +') }}</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">{{ __tr('Password') }}</label>
                        <div class="password-container">
                            <input id="lwLoginPassword"
                                class="form-input{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                name="password" placeholder="{{ __tr('Password') }}" type="password" value=""
                                required autocomplete="current-password">
                            <button type="button" class="password-toggle" onclick="togglePassword()">
                                <i class="mdi mdi-eye fs-15 "></i>
                            </button>
                        </div>
                        @if ($errors->has('password'))
                        <div class="invalid-feedback">{{ $errors->first('password') }}</div>
                        @endif
                    </div>

                    <div class="options-row custom-control custom-control-alternative custom-checkbox">
                        <div class="remember-me d-flex items-center">
                            <input class="custom-control-input" name="remember" id="customCheckLogin"
                                type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                            <label class="custom-control-label" for="customCheckLogin">
                                <span class="text-color">{{ __tr('Remember me') }}</span>
                            </label>
                        </div>

                        @if (Route::has('auth.password.request'))
                        <a href="{{ route('auth.password.request') }}" class="signup-links float-right">
                            {{ __tr('Forgot password?') }}
                        </a>
                        @endif
                    </div>

                    <button type="submit" class="signin-btn">{{ __tr('Sign In') }}</button>
                </x-lw.form>

                <div class="social-login">
                    @if (getAppSettings('allow_google_login'))
                    <a href="