@extends('layouts.app')

@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/formvalidation/dist/css/formValidation.min.css" />
<link rel="stylesheet" href="/assets/vendor/css/pages/page-auth.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet">

<style>
    html,
    body {
        height: 100%;
        min-height: 100svh;
        margin: 0;
        background: #f8efe6;
        overflow-x: hidden;
    }

    body.user-theme .layout-wrapper,
    body.user-theme .layout-container {
        min-height: 100svh;
        height: 100%;
        width: 100%;
        background: #f8efe6 !important;
    }

    body.user-theme .floating-chat-btn {
        display: none !important;
    }

    .login-page-shell {
        width: 100%;
        flex: 1 1 auto;
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.2rem 1rem;
        font-family: 'Manrope', 'Public Sans', sans-serif;
        background:
            radial-gradient(circle at top left, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0) 28%),
            linear-gradient(180deg, #faf1e7 0%, #f7ede3 100%);
    }

    .login-frame {
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-self: center;
        border-radius: 24px;
        border: 1px solid rgba(235, 220, 203, 0.95);
        background: #fef4eb;
        box-shadow: 0 14px 34px rgba(156, 119, 76, 0.08);
        padding: 1rem 1.1rem;
    }

    .login-frame-grid {
        display: grid;
        grid-template-columns: 400px 360px;
        align-items: center;
        justify-content: center;
        gap: 1.15rem;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
    }

    .login-visual-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 455px;
        overflow: hidden;
    }

    .login-visual-image {
        width: min(100%, 388px);
        height: auto;
        display: block;
        object-fit: contain;
    }

    .login-form-panel {
        width: 100%;
        max-width: 360px;
        padding: 0.35rem 0 0.35rem 0.15rem;
    }

    .login-copy {
        margin-bottom: 0.95rem;
    }

    .login-title {
        margin: 0 0 0.2rem;
        font-size: clamp(2rem, 3.2vw, 3rem);
        line-height: 1;
        letter-spacing: -0.04em;
        font-weight: 800;
        color: #2a2521;
        font-family: Georgia, 'Times New Roman', serif;
    }

    .login-subtitle {
        margin: 0;
        color: #82786e;
        font-size: 0.98rem;
        font-weight: 600;
    }

    .login-feedback .alert {
        margin-bottom: 0.9rem;
        border-radius: 12px;
    }

    .login-form {
        display: flex;
        flex-direction: column;
        gap: 0.82rem;
    }

    .login-field {
        text-align: left;
    }

    .login-label {
        display: inline-block;
        margin: 0 0 0.42rem;
        color: #4a433c;
        font-size: 0.94rem;
        font-weight: 700;
    }

    .login-input-group {
        min-height: 50px;
        display: flex;
        align-items: center;
        border: 1px solid #eadfce;
        border-radius: 10px;
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .login-input-group:hover,
    .login-input-group:focus-within {
        border-color: #e0a45d;
        box-shadow: 0 0 0 0.16rem rgba(224, 164, 93, 0.1);
    }

    .login-input-icon,
    .login-input-toggle {
        width: 42px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #dd9d52;
        font-size: 0.95rem;
    }

    .login-input {
        min-height: 48px;
        padding: 0.7rem 0.85rem 0.7rem 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #302b27;
        font-size: 0.96rem;
        font-weight: 600;
    }

    .login-input::placeholder {
        color: #aaa197;
        font-weight: 500;
    }

    .login-input-toggle {
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .login-field .invalid-feedback {
        margin-top: 0.35rem;
        font-size: 0.82rem;
    }

    .login-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: -0.08rem;
    }

    .login-remember {
        display: inline-flex;
        align-items: center;
        gap: 0.58rem;
        color: #6b6259;
        font-size: 0.94rem;
        font-weight: 700;
    }

    .login-remember input {
        width: 18px;
        height: 18px;
        margin: 0;
        border-color: rgba(214, 160, 94, 0.55);
    }

    .login-remember input:checked {
        background-color: #dd9646;
        border-color: #dd9646;
    }

    .login-forgot {
        color: #dd9646;
        text-decoration: none;
        font-size: 0.94rem;
        font-weight: 700;
    }

    .login-forgot:hover {
        color: #c98635;
    }

    .login-submit {
        min-height: 50px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(180deg, #df9640 0%, #d6852b 100%);
        color: #fff;
        font-size: 1rem;
        font-weight: 800;
        box-shadow: none;
    }

    .login-submit:hover,
    .login-submit:focus,
    .login-submit:active {
        background: linear-gradient(180deg, #d88b32 0%, #ca7c24 100%) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .login-divider {
        position: relative;
        margin: 0.3rem 0 0;
        text-align: center;
        color: #9b9084;
        font-size: 0.92rem;
        font-weight: 700;
    }

    .login-divider::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: rgba(216, 201, 185, 0.8);
    }

    .login-divider span {
        position: relative;
        display: inline-block;
        padding: 0 0.9rem;
        background: rgba(255, 252, 248, 0.97);
    }

    .login-social-row {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 0.1rem;
    }

    .login-social-button {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        border: 1px solid #eadfce;
        background: #fff;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .login-social-button:hover,
    .login-social-button:focus-visible {
        transform: translateY(-1px);
        border-color: #ddc7ad;
        box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
        color: #111827;
        outline: none;
    }

    .login-social-button svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .login-social-button--dark {
        color: #111111;
    }

    .login-register-note {
        margin: 0.08rem 0 0;
        text-align: center;
        color: #74695f;
        font-size: 0.98rem;
        font-weight: 700;
    }

    .login-register-note a {
        color: #dd9646;
        text-decoration: none;
        font-weight: 800;
    }

    .login-register-note a:hover {
        color: #c98635;
    }

    @media (max-width: 991.98px) {
        html,
        body {
            height: auto;
        }

        .login-frame {
            width: 100%;
            padding: 0.9rem;
        }

        .login-frame-grid {
            grid-template-columns: 1fr;
            width: 100%;
            margin: 0 auto;
            gap: 0.8rem;
        }

        .login-visual-panel {
            min-height: 260px;
        }

        .login-form-panel {
            padding: 0.2rem 0.2rem 0.1rem;
        }
    }

    @media (max-width: 575.98px) {
        .login-page-shell {
            align-items: flex-start;
            padding: 0.8rem;
        }

        .login-frame {
            max-width: 360px;
            border-radius: 20px;
            padding: 0.8rem;
        }

        .login-frame-grid {
            gap: 0.35rem;
        }

        .login-visual-panel {
            min-height: auto;
            padding-top: 0.15rem;
        }

        .login-visual-image {
            width: min(74%, 210px);
        }

        .login-form-panel {
            max-width: none;
            padding: 0.15rem 0.1rem 0.05rem;
        }

        .login-copy {
            margin-bottom: 0.8rem;
        }

        .login-title {
            font-size: 1.85rem;
        }

        .login-subtitle {
            font-size: 0.92rem;
        }

        .login-input-group {
            min-height: 48px;
        }

        .login-input {
            min-height: 46px;
            font-size: 0.94rem;
        }

        .login-submit {
            min-height: 48px;
            font-size: 1rem;
        }

        .login-social-button {
            width: 48px;
            height: 48px;
        }

        .login-options {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
@endpush

@section('content')
@php
    $socialProviders = [
        'google' => 'Google',
        'facebook' => 'Facebook',
        'kakao' => 'KakaoTalk',
    ];
@endphp

<div class="login-page-shell">
    <div class="login-frame">
        <div class="login-frame-grid">
            <section class="login-visual-panel" aria-label="Login illustration">
                <img
                    src="{{ asset('assets/img/login_2.jpeg') }}"
                    alt="Secure login illustration"
                    class="login-visual-image"
                >
            </section>

            <section class="login-form-panel" aria-label="Login form">
                <div class="login-copy">
                    <h1 class="login-title">Glad to see you!</h1>
                    <p class="login-subtitle">Log in to manage your subscriptions</p>
                </div>

                <div class="login-feedback">
                    @include('auth.partials.auth-feedback')
                </div>

                <form action="{{ route('login') }}" method="POST" class="login-form">
                    @csrf

                    <div class="login-field">
                        <label for="email" class="login-label">Email</label>
                        <div class="login-input-group">
                            <span class="login-input-icon">
                                <i class="icon-base ti tabler-mail"></i>
                            </span>
                            <input
                                id="email"
                                type="email"
                                class="form-control login-input @error('email') is-invalid @enderror"
                                name="email"
                                required
                                autocomplete="off"
                                autofocus
                                placeholder="member@example.com"
                                value="{{ old('email') }}"
                            >
                        </div>
                        @error('email')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="login-field form-password-toggle">
                        <label class="login-label" for="password">Password</label>
                        <div class="login-input-group">
                            <span class="login-input-icon">
                                <span class="icon-base ti tabler-lock"></span>
                            </span>
                            <input
                                id="password"
                                type="password"
                                class="form-control login-input @error('password') is-invalid @enderror"
                                name="password"
                                placeholder="........"
                            >
                            <button type="button" class="login-input-toggle" aria-label="Toggle password visibility">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </button>
                        </div>
                        @error('password')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="login-options">
                        <label class="login-remember" for="remember">
                            <input class="form-check-input" type="checkbox" name="remember" id="remember" @checked(old('remember'))>
                            <span>Remember me</span>
                        </label>

                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="login-forgot">Forgot password?</a>
                        @endif
                    </div>

                    <button class="btn login-submit" type="submit">Log In</button>

                    <div class="login-divider">
                        <span>Or continue with</span>
                    </div>

                    <div class="login-social-row">
                        @foreach ($socialProviders as $provider => $label)
                            <a
                                href="{{ route('social.redirect', ['provider' => $provider, 'context' => 'login']) }}"
                                class="login-social-button {{ $provider === 'kakao' ? 'login-social-button--dark' : '' }}"
                                aria-label="Continue with {{ $label }}"
                                title="Continue with {{ $label }}"
                            >
                                @switch($provider)
                                    @case('google')
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path fill="#EA4335" d="M12 10.2v3.98h5.64c-.25 1.28-.98 2.36-2.05 3.08l3.32 2.58c1.94-1.79 3.05-4.42 3.05-7.54 0-.72-.06-1.41-.19-2.1H12z"/>
                                            <path fill="#34A853" d="M12 22c2.76 0 5.08-.92 6.78-2.49l-3.32-2.58c-.92.62-2.1.99-3.46.99-2.66 0-4.92-1.8-5.72-4.22l-3.42 2.64A10 10 0 0 0 12 22z"/>
                                            <path fill="#4A90E2" d="M6.28 13.7A6 6 0 0 1 6 12c0-.59.1-1.17.28-1.7L2.86 7.66A10 10 0 0 0 2 12c0 1.61.39 3.13 1.08 4.46l3.2-2.76z"/>
                                            <path fill="#FBBC05" d="M12 6.08c1.5 0 2.84.52 3.9 1.54l2.92-2.92C17.07 3.06 14.76 2 12 2A10 10 0 0 0 3.08 7.54l3.2 2.76C7.08 7.88 9.34 6.08 12 6.08z"/>
                                        </svg>
                                        @break

                                    @case('facebook')
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path fill="#1877F2" d="M13.37 21v-8.06h2.71l.41-3.14h-3.12V7.8c0-.91.26-1.53 1.56-1.53h1.67V3.45c-.29-.04-1.28-.12-2.43-.12-2.4 0-4.04 1.46-4.04 4.15V9.8H7.4v3.14h2.73V21h3.24z"/>
                                        </svg>
                                        @break

                                    @case('kakao')
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path fill="currentColor" d="M16.37 12.61c-.03-2.54 2.08-3.76 2.17-3.81-1.18-1.72-3.01-1.95-3.66-1.98-1.56-.16-3.04.92-3.83.92-.8 0-2.03-.89-3.34-.87-1.72.03-3.31 1-4.2 2.56-1.8 3.11-.46 7.72 1.29 10.24.86 1.23 1.88 2.61 3.22 2.56 1.29-.05 1.77-.82 3.33-.82 1.56 0 2 .82 3.35.79 1.39-.02 2.27-1.26 3.12-2.5.98-1.43 1.38-2.82 1.4-2.89-.03-.01-2.68-1.03-2.85-4.2Z"/>
                                            <path fill="currentColor" d="M13.92 5.22c.71-.86 1.19-2.05 1.06-3.24-1.02.04-2.25.68-2.98 1.54-.65.76-1.21 1.97-1.06 3.12 1.14.09 2.27-.58 2.98-1.42Z"/>
                                        </svg>
                                        @break
                                @endswitch
                            </a>
                        @endforeach
                    </div>

                    <p class="login-register-note">
                        New here? <a href="{{ route('register') }}">Create an account</a>
                    </p>
                </form>
            </section>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="/assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js"></script>
<script src="/assets/js/pages-auth.js"></script>
@endpush