@extends('auth.layouts.authentication')

@section('content')
<style>
    :root {
        --primary-color: #371ac8;
        --primary-hover: #2f17b0;
        --text-dark: #000;
        --text-muted: #6c757d;
        --color-white: #ffffff;
        --background-light-gray: #f8f9fa;
        --p-border: #dee2e6;
        --gradient-start: #371AC8;
        --gradient-end: #1B0D62;
        --font-body: "Inter", sans-serif;
    }

    body {
        font-family: var(--font-body);
        background-color: #fff;
    }

    .auth-container {
        min-height: 100vh;
        display: flex;
    }

    /* Left Side: Illustration & Branding */
    .auth-sidebar {
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        padding: 40px;
        overflow: hidden;
    }

    .auth-sidebar-content {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 500px;
    }

    .auth-sidebar::after {
        content: "";
        position: absolute;
        top: -10%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    /* Right Side: Form */
    .auth-form-section {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }

    .login-card {
        width: 100%;
        max-width: 450px;
    }

    .form-control {
        height: 50px;
        border: 1.5px solid var(--p-border);
        border-radius: 8px !important;
        padding: 10px 15px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(55, 26, 200, 0.1);
    }

    .btn-primary {
        background-color: var(--primary-color);
        border: none;
        height: 50px;
        border-radius: 8px !important;
        font-weight: 700;
        transition: all 0.3s;
    }

    .btn-primary:hover {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(55, 26, 200, 0.2);
    }

    .password-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--text-muted);
        font-size: 1.2rem;
    }

    .social-btn {
        width: 45px;
        height: 45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 8px;
        border: 1px solid var(--p-border);
        transition: all 0.3s;
        color: var(--text-dark);
        font-size: 1.2rem;
        text-decoration: none;
    }

    .social-btn:hover {
        background-color: var(--background-light-gray);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .animate-underline-primary {
        color: var(--primary-color);
        text-decoration: none;
        position: relative;
    }

    .animate-underline-primary::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        background-color: var(--primary-color);
        transition: width 0.3s;
    }

    .animate-underline-primary:hover::after {
        width: 100%;
    }

    /* Floating Site Icon */
    .site-icon-wrapper {
        width: 40px;
        height: 60px;
        background: #fff;
        padding: 12px;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
    }

    @media (max-width: 991px) {
        .auth-sidebar {
            display: none;
        }
    }
</style>

<div class="aiz-main-wrapper bg-white">
    <div class="row no-gutters auth-container">
        
        <!-- Left Side: Interactive Branding Area -->
        <div class="col-lg-6 col-md-6 col-xl-6 auth-sidebar">
            <div class="auth-sidebar-content">
                <!-- Replace with a static image as requested -->
                {{--  <img src="{{ uploaded_asset(get_setting('customer_login_page_image')) }}" 
                     alt="Login Visual" 
                     class="img-fluid mb-4 rounded-lg shadow-lg"
                     style="max-height: 400px; object-fit: cover; border: 4px solid rgba(255,255,255,0.1);">
                  --}}
                <h2 class="fw-700 mb-3">Elevate Your Experience</h2>
                <p class="fs-16 opacity-80">Access your personal dashboard, track your orders, and enjoy a seamless shopping experience with our premium services.</p>
            </div>
        </div>

        <!-- Right Side: Clean Login Form -->
        <div class="col-lg-6 col-xl-6 auth-form-section">
            <div class="login-card">
                
                <div class="site-icon-wrapper">
                    <img src="{{ uploaded_asset(get_setting('site_icon')) }}" alt="Logo" class="img-fit">
                </div>

                <div class="mb-4">
                    <h1 class="fs-24 fw-700 text-dark mb-1">{{ translate('Welcome Back')}}</h1>
                    <p class="text-muted">{{ translate('Please enter your details to sign in.')}}</p>
                </div>

                <form class="form-default" id="user-login-form" action="{{ route('login') }}" method="POST">
                    @csrf
                    
                    @if (addon_is_activated('otp_system'))
                        <div class="form-group phone-form-group mb-3">
                            <label class="fs-12 fw-700 text-soft-dark text-uppercase ml-1">{{ translate('Phone Number') }}</label>
                            <input type="tel" id="phone-code" class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}" placeholder="+1 234 567 890" name="phone">
                        </div>
                        <input type="hidden" name="country_code" value="">
                        
                        <div class="form-group email-form-group mb-3 d-none">
                            <label class="fs-12 fw-700 text-soft-dark text-uppercase ml-1">{{ translate('Email Address') }}</label>
                            <input type="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" placeholder="name@example.com" name="email" id="email">
                        </div>

                        <div class="text-right mb-3">
                            <button class="btn btn-link p-0 text-primary fs-12 fw-600" type="button" onclick="toggleEmailPhone(this)">
                                {{ translate('Use Email Instead') }}
                            </button>
                        </div>
                    @else
                        <div class="form-group mb-3">
                            <label class="fs-12 fw-700 text-soft-dark text-uppercase ml-1">{{ translate('Email Address') }}</label>
                            <input type="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" placeholder="name@example.com" name="email" id="email">
                            @error('email')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    @endif

                    <div class="form-group mb-3">
                        <label class="fs-12 fw-700 text-soft-dark text-uppercase ml-1">{{ translate('Password') }}</label>
                        <div class="position-relative">
                            <input type="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" placeholder="••••••••" name="password" id="password">
                            <i class="password-toggle las la-eye" id="toggle-password"></i>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <label class="aiz-checkbox mb-0">
                            <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                            <span class="fs-13 text-muted">{{ translate('Remember Me') }}</span>
                            <span class="aiz-square-check"></span>
                        </label>
                        <a href="{{ route('password.request') }}" class="fs-13 fw-600" style="color:#2f17b0">{{ translate('Forgot password?')}}</a>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block mb-4">
                        {{ translate('Sign In') }}
                    </button>
                </form>

                @if (env("DEMO_MODE") == "On")
                    <div class="p-3 border rounded mb-4 bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fs-12 fw-600 text-muted">DEMO ACCOUNT</span>
                            <button class="btn btn-soft-primary btn-xs" onclick="autoFillCustomer()">Copy Info</button>
                        </div>
                    </div>
                @endif

                @if(get_setting('google_login') == 1 || get_setting('facebook_login') == 1)
                    <div class="text-center position-relative mb-4">
                        <hr>
                        <span class="bg-white px-3 position-absolute" style="top:50%; left:50%; transform:translate(-50%, -50%); color:#adb5bd; font-size: 12px;">OR CONTINUE WITH</span>
                    </div>

                    <div class="text-center mb-4">
                        @if (get_setting('facebook_login') == 1)
                            <a href="{{ route('social.login', ['provider' => 'facebook']) }}" class="social-btn"><i class="lab la-facebook-f"></i></a>
                        @endif
                        @if(get_setting('google_login') == 1)
                            <a href="{{ route('social.login', ['provider' => 'google']) }}" class="social-btn"><i class="lab la-google"></i></a>
                        @endif
                        @if (get_setting('apple_login') == 1)
                            <a href="{{ route('social.login', ['provider' => 'apple']) }}" class="social-btn"><i class="lab la-apple"></i></a>
                        @endif
                    </div>
                @endif

                {{--  <p class="text-center text-muted fs-14">
                    {{ translate('New here?')}}
                    <a href="{{ route('user.registration') }}" class="fw-700 animate-underline-primary ml-1">{{ translate('Create an Account')}}</a>
                </p>  --}}

                {{--  <div class="text-center mt-4">
                    <a href="{{ url('/') }}" class="text-muted fs-13 d-inline-flex align-items-center">
                        <i class="las la-arrow-left mr-2"></i> {{ translate('Back to Home')}}
                    </a>
                </div>  --}}
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    // Toggle Password Visibility
    $('#toggle-password').on('click', function() {
        const input = $('#password');
        const type = input.attr('type') === 'password' ? 'text' : 'password';
        input.attr('type', type);
        $(this).toggleClass('la-eye la-eye-slash');
    });

    function autoFillCustomer(){
        $('#email').val('customer@example.com');
        $('#password').val('123456');
    }

    // Toggle logic for Email/Phone
    function toggleEmailPhone(el) {
        const phoneGrp = $('.phone-form-group');
        const emailGrp = $('.email-form-group');
        if (phoneGrp.hasClass('d-none')) {
            phoneGrp.removeClass('d-none');
            emailGrp.addClass('d-none');
            $(el).html('<i>*{{ translate("Use Email Instead") }}</i>');
        } else {
            phoneGrp.addClass('d-none');
            emailGrp.removeClass('d-none');
            $(el).html('<i>*{{ translate("Use Phone Instead") }}</i>');
        }
    }
</script>

@if(get_setting('google_recaptcha') == 1 && get_setting('recaptcha_customer_login') == 1)
    <script src="https://www.google.com/recaptcha/api.js?render={{ env('CAPTCHA_KEY') }}"></script>
    <script type="text/javascript">
        $('#user-login-form').on('submit', function(e) {
            e.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute(`{{ env('CAPTCHA_KEY') }}`, {action: 'login'}).then(function(token) {
                    $('#user-login-form').append(`<input type="hidden" name="g-recaptcha-response" value="${token}">`);
                    $('#user-login-form').append(`<input type="hidden" name="recaptcha_action" value="recaptcha_customer_login">`);
                    document.getElementById('user-login-form').submit();
                });
            });
        });
    </script>
@endif
@endsection