@extends('frontend.main_master')
@section('page-context', 'login')
@section('body-class', 'login-page')
@section('no-header', 'true')
@section('no-footer', 'true')
@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/auth/login-page.css') }}">
@endpush
@section('content')
    <div class="container-fluid p-0 overflow-hidden login-auth-shell">
        <div class="row g-0 login-auth-row">

            <div
                class="col-lg-6 col-md-12 d-flex align-items-center justify-content-center login-form-section overflow-hidden">
                <div class="login-wrapper w-100 p-2 p-sm-3 p-md-5">
                    {{-- Logo --}}
                    <div class="d-flex justify-content-center mb-4 mb-sm-3">
                        <img src="{{ site_setting('site_logo_gif', 'assets/processed.webp') }}" alt="{{ t('site-title') }}"
                            class="img-fluid object-fit-contain login-logo-img">
                    </div>
                    <div class="col-12 d-none mb-2 mb-sm-3 mb-md-4 justify-content-center">
                        <div class="astrological-circle text-center">
                            <img src="{{ asset('assets/firstSlider.gif') }}" alt="Astrolojik Grafik"
                                class="img-fluid login-mobile-gif">
                        </div>
                    </div>
                    <h2 class="h4 fs-5 mb-2 mb-sm-3 mb-md-4 fw-bold text-start login-heading-color">
                        {{ t('login') }}
                    </h2>
                    <form action="{{ route('login') }}" method="POST" class="login-form" autocomplete="on">
                        @csrf
                        <div class="mb-2 mb-sm-3">
                            <label for="email" class="form-label">{{ t('e-mail') }}</label>
                            <input type="email" class="form-control form-control-lg login-input" id="email"
                                name="email" value="{{ old('email', request()->cookie('saved_login_email')) }}" required autocomplete="username"
                                autocapitalize="off" spellcheck="false">
                            @error('email')
                                <span class="text-danger small d-block">{{ $message }}</span>
                                @if(str_contains($message, 'Doğrulama oturumu'))
                                    <span class="text-muted small d-block mt-1">419 hatası alırsanız sayfayı yenileyin (F5) ve tekrar giriş yapın.</span>
                                @endif
                            @enderror
                        </div>
                        <div class="mb-2 mb-sm-3">
                            <label for="password" class="form-label">{{ t('password') }}</label>
                            <div class="password-input-wrapper">
                                <input type="password" class="form-control form-control-lg login-input" id="password"
                                    name="password" required autocomplete="current-password">
                                <button type="button" class="btn-password-toggle" aria-label="{{ t('show-password') }}"
                                    data-password-toggle="password" title="{{ t('show-password') }}">
                                    <i class="bi bi-eye" aria-hidden="true"></i>
                                </button>
                            </div>
                            @error('password')
                                <span class="text-danger small">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-2 mb-sm-3 mb-md-4 d-flex align-items-center justify-content-between">
                            <div class="form-check m-0">
                                <input class="form-check-input" type="checkbox" value="1" id="remember"
                                    name="remember" {{ old('remember', request()->cookie('saved_login_email') ? true : false) ? 'checked' : '' }}>
                                <label class="form-check-label small" for="remember">
                                    {{ t('remember-me') }}
                                </label>
                            </div>
                            <a href="{{ route('password.request') }}" class="forgot-password-link text-decoration-none">
                                {{ t('forgot-my-password') }}
                            </a>
                        </div>
                        <button type="submit" class="btn btn-login btn-lg w-100 mb-2 mb-sm-3 mb-md-4 shadow-sm"
                            id="login-submit-btn">
                            <span class="login-btn-text">{{ t('login') }}</span>
                            <span class="spinner-border spinner-border-sm ms-2 d-none" role="status"
                                aria-hidden="true"></span>
                        </button>
                        @if(($socialAuth['google'] ?? false) || ($socialAuth['facebook'] ?? false))
                        <div class="position-relative mb-2 mb-sm-3 mb-md-4 text-center">
                            <hr>
                            <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted small">
                                {{ t('or') }}
                            </span>
                        </div>
                        <div class="row g-2 mb-2 mb-sm-3 mb-md-4">
                            @if($socialAuth['google'] ?? false)
                            <div class="col-12 col-sm-6">
                                <a href="{{ route('auth.google') }}"
                                    class="btn btn-outline-dark w-100 d-flex align-items-center justify-content-center py-2">
                                    <svg class="me-2" width="18" height="18" viewBox="0 0 18 18">
                                        <path fill="#4285F4"
                                            d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" />
                                        <path fill="#34A853"
                                            d="M9 18c2.43 0 4.467-.806 5.96-2.184l-2.908-2.258c-.806.54-1.837.86-3.052.86-2.347 0-4.335-1.585-5.043-3.714H.957v2.332C2.438 15.983 5.482 18 9 18z" />
                                        <path fill="#FBBC05"
                                            d="M3.957 10.704c-.18-.54-.282-1.117-.282-1.704s.102-1.164.282-1.704V4.964H.957C.348 6.175 0 7.55 0 9s.348 2.825.957 4.036l3-2.332z" />
                                        <path fill="#EA4335"
                                            d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.964L3.957 7.296C4.665 5.167 6.653 3.58 9 3.58z" />
                                    </svg>
                                    <span class="small text-nowrap">Google</span>
                                </a>
                            </div>
                            @endif
                            @if($socialAuth['facebook'] ?? false)
                            <div class="col-12 col-sm-6">
                                <a href="{{ route('auth.facebook') }}"
                                    class="btn btn-primary w-100 d-flex align-items-center justify-content-center py-2"
                                    style="background-color: #1877F2;">
                                    <svg class="me-2" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path
                                            d="M18 9C18 4.03 13.97 0 9 0S0 4.03 0 9c0 4.5 3.3 8.22 7.61 8.9v-6.3H5.31V9h2.3V7.02c0-2.27 1.35-3.52 3.42-3.52.99 0 2.03.18 2.03.18v2.23h-1.14c-1.13 0-1.48.7-1.48 1.42V9h2.51l-.4 2.6h-2.11v6.3C14.7 17.22 18 13.5 18 9z"
                                            fill="#ffffff" />
                                    </svg>
                                    <span class="small text-nowrap">Facebook</span>
                                </a>
                            </div>
                            @endif
                        </div>
                        @endif

                        <div class="text-center">
                            <p class="signup-text mb-0">
                                {{ t('dont-have-an-account') }}
                                <a href="{{ route('register') }}"
                                    class="signup-link fw-bold text-decoration-none login-heading-color">
                                    {{ t('register') }}
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
            <div
                class="col-lg-6 d-none d-lg-flex align-items-center justify-content-center login-graphic-section overflow-hidden">
                <div class="astrological-circle text-center">
                    <img src="{{ asset('assets/firstSlider.gif') }}" alt="Astrolojik Grafik" class="img-fluid w-75">
                </div>
                
            </div>
        </div>
    </div>
    
    {{-- Sayfa yükleme overlay: Panele geçiş ekranı --}}
    <div id="page-load-overlay" style="display: none;">
        <img src="{{ asset('assets/firstSlider.gif') }}" alt="">
        <span class="page-load-status-text">Kullanıcı Doğrulanıyor...</span>
    </div>

    <style>
        #page-load-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
            background: #f8fafc;
            transition: opacity 0.55s ease;
        }
        body[data-theme="dark"] #page-load-overlay {
            background: #0f172a;
        }
        #page-load-overlay img {
            width: 220px;
            height: 220px;
            object-fit: contain;
        }
        #page-load-overlay .page-load-status-text {
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            color: #64748b;
            transition: opacity 0.38s ease-in-out, transform 0.38s ease-in-out;
            transform: translateY(0);
        }
        body[data-theme="dark"] #page-load-overlay .page-load-status-text {
            color: #94a3b8;
        }
    </style>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('.login-form');
            if (!form) return;

            const submitBtn = form.querySelector('#login-submit-btn');
            if (!submitBtn) return;

            const spinner = submitBtn.querySelector('.spinner-border');
            const overlay = document.getElementById('page-load-overlay');
            const statusEl = overlay ? overlay.querySelector('.page-load-status-text') : null;
            let isSubmitting = false;

            const statusSteps = [
                'Kullanıcı Doğrulanıyor...',
                'Gezegenler Hesaplanıyor...',
                'Asteroidler Hesaplanıyor...',
                'Sabit Yıldızlar Hesaplanıyor...',
                'Haritanız Hesaplandı...',
                'Haritanız Çizdiriliyor...',
                'Natal Haritanız Çiziliyor...',
                'Transit Haritanız Çiziliyor...'
            ];
            let stepIdx = 0;
            let statusInterval = null;

            function startStatusRotation() {
                if (!statusEl || statusInterval) return;
                sessionStorage.setItem('astro_step_idx', '0');
                statusInterval = setInterval(function() {
                    stepIdx = (stepIdx + 1) % statusSteps.length;
                    sessionStorage.setItem('astro_step_idx', String(stepIdx));
                    statusEl.style.opacity = '0';
                    statusEl.style.transform = 'translateY(-4px)';
                    setTimeout(function() {
                        statusEl.textContent = statusSteps[stepIdx];
                        statusEl.style.transform = 'translateY(4px)';
                        setTimeout(function() {
                            statusEl.style.opacity = '1';
                            statusEl.style.transform = 'translateY(0)';
                        }, 35);
                    }, 380);
                }, 2000);
            }

            window.addEventListener('beforeunload', function() {
                if (isSubmitting) {
                    sessionStorage.setItem('astro_step_idx', String(stepIdx));
                }
            });

            form.addEventListener('submit', function(e) {
                if (isSubmitting) {
                    return;
                }

                // HTML5 validasyon kontrolü (boş zorunlu alan varsa overlay açılmasın)
                if (form.checkValidity && !form.checkValidity()) {
                    return;
                }

                e.preventDefault();
                isSubmitting = true;
                submitBtn.disabled = true;
                submitBtn.classList.add('disabled');

                if (spinner) {
                    spinner.classList.remove('d-none');
                }

                // 1300 ms (1.30 sn) sonra bekleme overlay'i açılsın.
                // Bu esnada form.submit() hemen tetiklenerek /panel yükleme süreci eşzamanlı başlar.
                // 1.30 sn süre toplam yükleme süresinin içinden kullanılır, kullanıcıya fazladan yapay gecikme eklenmez.
                setTimeout(function() {
                    if (overlay) {
                        overlay.style.display = 'flex';
                        startStatusRotation();
                    }
                }, 1300);

                form.submit();
            });
        });
    </script>
@endsection