@extends('auth.layouts.authentication')

@section('content')
<style>
    :root {
        --primary-color: #00CBD6;
        --primary-hover: #05eefa;
        --text-dark: #000;
        --text-muted: #6c757d;
        --color-white: #ffffff;
        --background-light-gray: #f8f9fa;
        --p-border: #dee2e6;
        --gradient-start: #05eefa;
        --gradient-end: #00757b;
        --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));
        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%;
    }

    @media (max-width: 991px) {
        .auth-sidebar {
            display: none;
        }
    }
        .site-icon-wrapper {
        width: 120px;
        height: 74px;
        background: #fff;
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 2rem;
    }
</style>

<div class="aiz-main-wrapper d-flex flex-column justify-content-center bg-white">
    <div class="row no-gutters auth-container">

        <!-- Left Side: Branding / Image -->
        <div class="col-lg-6 col-xl-6 auth-sidebar">
            <div class="auth-sidebar-content">
                {{--  <img src="{{ uploaded_asset(get_setting('site_icon')) }}" alt="{{ translate('Site Icon')}}" class="img-fluid mb-4 rounded-lg shadow-lg" style="max-height: 400px; object-fit: contain;">  --}}
                <h2 class="fw-700 mb-3">Welcome to {{ env('APP_NAME') }} Admin Panel</h2>
                <p class="fs-16 opacity-80">Access your dashboard, manage your account, and enjoy a seamless experience with our platform.</p>
            </div>
        </div>

        <!-- Right Side: Login Form -->
        <div class="col-lg-6 col-xl-6 auth-form-section">
            <div class="login-card">

                <!-- Site Icon -->
                <div class="site-icon-wrapper mb-4">
                    <img src="{{ uploaded_asset(get_setting('site_icon')) }}" alt="Logo" class="img-fit">
                </div>

                <!-- Titles -->
                <div class="mb-4 text-center text-lg-left">
                    <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>

                <!-- Login Form -->
                <form class="form-default" id="user-login-form" action="{{ route('login') }}" method="POST">
                    @csrf
                    <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" autocomplete="off">
                        @error('email')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <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>
                       
                    </div>

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

                <!-- Social Login -->
                @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

            </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 autoFillAdmin(){
        $('#email').val('admin@example.com');
        $('#password').val('123456');
    }

    // reCAPTCHA integration
    @if(get_setting('google_recaptcha') == 1 && get_setting('recaptcha_admin_login') == 1)
        $('#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_admin_login">`);
                    document.getElementById('user-login-form').submit();
                });
            });
        });
    @endif
</script>
@endsection