@extends('layouts.auth')

@section('title', 'Login')

@section('content')
    @php
        $activeTemplate = in_array(($loginTemplate ?? 'classic'), ['classic', 'ocean', 'mint'], true) ? $loginTemplate : 'classic';
        $templatePalette = [
            'classic' => ['visual' => '#9b82d6', 'bg' => '#f3f3f4'],
            'ocean' => ['visual' => '#77a5fb', 'bg' => '#eff4ff'],
            'mint' => ['visual' => '#7ecdbf', 'bg' => '#edf7f5'],
        ];
        $primaryColor = preg_match('/^#[0-9A-Fa-f]{6}$/', (string) ($loginPrimaryColor ?? '')) ? $loginPrimaryColor : '#6f4cc3';
        $visualBg = $templatePalette[$activeTemplate]['visual'] ?? '#9b82d6';
        $pageBg = $templatePalette[$activeTemplate]['bg'] ?? '#f3f3f4';
        $visualImageUrl = filter_var((string) ($loginVisualImageUrl ?? ''), FILTER_VALIDATE_URL) ? $loginVisualImageUrl : '';
        if ($visualImageUrl === '' && str_starts_with((string) ($loginVisualImageUrl ?? ''), '/storage/')) {
            $visualImageUrl = (string) $loginVisualImageUrl;
        }
        $companyName = trim((string) ($loginCompanyName ?? '')) ?: 'TheCubeFactory';
        $demoEmail = app()->environment('local') ? (env('DEMO_ADMIN_EMAIL', 'admin@rbac.test')) : '';
        $demoPassword = app()->environment('local') ? (env('DEMO_ADMIN_PASSWORD', 'password')) : '';
    @endphp
    <style>
        :root {
            --login-primary: {{ $primaryColor }};
            --login-bg: {{ $pageBg }};
            --login-card: #ffffff;
            --login-text: #1f2024;
            --login-muted: #7b7f89;
            --visual-bg: {{ $visualBg }};
            --visual-ink: #6f4cc3;
        }

        .login-page-wrap {
            min-height: 100vh;
            background: var(--login-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.4rem;
        }

        .login-frame {
            width: min(1180px, 100%);
            min-height: 680px;
            background: var(--login-card);
            border: 1px solid #e4e5ea;
            display: grid;
            grid-template-columns: 1fr 1fr;
            overflow: hidden;
        }

        .left-pane {
            padding: 2.8rem 4rem;
            display: flex;
            flex-direction: column;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            color: #21242a;
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 3.4rem;
        }

        .brand .brand-mark {
            width: 22px;
            height: 22px;
            position: relative;
            display: inline-grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2px;
        }

        .brand .brand-mark span {
            background: var(--login-primary);
            border-radius: 2px;
            opacity: .95;
        }

        .brand .brand-mark span:nth-child(2) { opacity: .45; }
        .brand .brand-mark span:nth-child(3) { opacity: .7; }

        .signin-box {
            width: min(355px, 100%);
            margin: 0 auto;
        }

        .signin-title {
            color: var(--login-text);
            font-size: 2.85rem;
            line-height: 1.05;
            margin: 0;
            font-weight: 700;
        }

        .signin-sub {
            margin: .45rem 0 1.7rem;
            color: var(--login-muted);
            font-size: .95rem;
        }

        .field-label {
            font-size: .82rem;
            color: #3e424b;
            margin-bottom: .35rem;
            display: block;
            font-weight: 600;
        }

        .signin-box .form-control {
            height: 42px;
            border-radius: 4px;
            border-color: #d8dbe3;
            box-shadow: none;
        }

        .signin-box .form-control:focus {
            border-color: var(--login-primary);
            box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--login-primary) 19%, white);
        }

        .login-ops {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: .7rem 0 1rem;
            font-size: .82rem;
            color: var(--login-muted);
        }

        .login-ops .form-check {
            margin: 0;
        }

        .login-ops a {
            color: var(--login-primary);
            text-decoration: underline;
        }

        .btn-signin {
            width: 100%;
            border: 0;
            height: 42px;
            border-radius: 4px;
            background: var(--login-primary);
            color: #fff;
            font-weight: 600;
        }

        .btn-signin:hover { filter: brightness(.96); }

	        .btn-google {
	            width: 100%;
	            margin-top: 1rem;
	            height: 40px;
	            border-radius: 4px;
	            border: 1px solid #d7dbe5;
	            background: #fff;
	            color: #444a56;
	            font-size: .92rem;
	        }

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

	        .btn-shortcut {
	            width: 100%;
	            margin-top: .75rem;
	            height: 40px;
	            border-radius: 4px;
	            border: 1px dashed #cbd5e1;
	            background: #f8fafc;
	            color: #0f172a;
	            font-size: .92rem;
	            display: inline-flex;
	            align-items: center;
	            justify-content: center;
	            gap: .5rem;
	            text-decoration: none;
	        }

	        .btn-shortcut:hover {
	            background: #f1f5f9;
	            color: #0f172a;
	            text-decoration: none;
	        }

	        .btn-shortcut i { color: #0ea5e9; }

        .signup-note {
            margin-top: .85rem;
            text-align: center;
            font-size: .82rem;
            color: var(--login-muted);
        }

        .signup-note a {
            color: var(--login-primary);
            text-decoration: underline;
        }

        .mobile-app-banner {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 16px;
            padding: 14px 16px;
            background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
            border: 1px solid #bfdbfe;
            border-radius: 12px;
        }
        .mobile-app-banner-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #2563eb;
            color: #fff;
            border-radius: 10px;
            font-size: 18px;
        }
        .mobile-app-banner-content {
            flex: 1;
            min-width: 0;
        }
        .mobile-app-banner-title {
            font-size: 13px;
            font-weight: 700;
            color: #1e3a8a;
        }
        .mobile-app-banner-msg {
            font-size: 11px;
            color: #475569;
            margin-top: 2px;
        }
        .mobile-app-banner-version {
            font-size: 11px;
            color: #64748b;
            margin-top: 4px;
        }
        .mobile-app-banner-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: #2563eb;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s ease;
        }
        .mobile-app-banner-btn:hover {
            background: #1d4ed8;
            color: #fff;
        }

        .right-pane {
            background: var(--visual-bg);
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .right-pane.has-image {
            background-color: #d5d8e2;
            background-image: var(--custom-visual-image);
        }

        .right-pane.has-image .hero-card {
            display: none;
        }

        .right-pane.maintenance-mode {
            background: linear-gradient(165deg, #4f4f5a 0%, #6a6a78 55%, #858598 100%);
        }

        .right-pane.maintenance-mode .hero-card {
            display: none;
        }

        .maintenance-visual {
            display: none;
            color: #fff;
            text-align: center;
            z-index: 2;
        }

        .right-pane.maintenance-mode .maintenance-visual {
            display: block;
        }

        .maintenance-visual i {
            font-size: 3rem;
            margin-bottom: .8rem;
            opacity: .95;
        }

        .maintenance-visual .title {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: .2px;
        }

        .maintenance-visual .sub {
            font-size: .92rem;
            opacity: .92;
            margin-top: .25rem;
        }

        .right-pane::before,
        .right-pane::after {
            content: "";
            position: absolute;
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 999px;
        }

        .right-pane::before {
            width: 460px;
            height: 460px;
            top: -120px;
            right: -130px;
        }

        .right-pane::after {
            width: 340px;
            height: 340px;
            bottom: -100px;
            left: -80px;
        }

        .hero-card {
            width: min(430px, 80%);
            aspect-ratio: 1/1;
            border-radius: 26px;
            border: 2px solid rgba(255,255,255,.55);
            background: linear-gradient(165deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
            box-shadow: 0 20px 50px rgba(44, 18, 103, .24);
            position: relative;
        }

        .hero-card .hero-blob {
            position: absolute;
            border-radius: 999px;
            background: rgba(111, 76, 195, .85);
        }

        .hero-card .hero-blob.one { width: 92px; height: 92px; top: 22%; left: 18%; }
        .hero-card .hero-blob.two { width: 132px; height: 132px; bottom: 20%; right: 16%; }
        .hero-card .hero-blob.three { width: 58px; height: 58px; top: 12%; right: 20%; opacity: .55; }

        .hero-icon {
            position: absolute;
            color: rgba(255,255,255,.86);
            font-size: 1.4rem;
        }

        .hero-icon.mail { top: 26%; right: 23%; }
        .hero-icon.msg { top: 14%; left: 20%; }
        .hero-icon.shield { bottom: 24%; left: 26%; }

        @media (max-width: 992px) {
            .login-frame {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .left-pane {
                padding: 2rem 1.4rem;
            }

            .right-pane {
                min-height: 260px;
            }

            .brand {
                margin-bottom: 2rem;
                font-size: 1.45rem;
            }

            .signin-title {
                font-size: 2.2rem;
            }
        }
    </style>

    <div class="login-page-wrap">
        <div class="login-frame">
            <div class="left-pane">
                <div class="brand">
                    <span class="brand-mark">
                        <span></span><span></span><span></span><span></span>
                    </span>
                    <span>{{ $companyName }}</span>
                </div>

                <div class="signin-box">
                    <h1 class="signin-title">Welcome back</h1>
                    <p class="signin-sub">Please enter your details</p>
                    @if (($loginMode ?? 'login') === 'announcement' && (!empty($loginAnnouncementTitle) || !empty($loginAnnouncementMessage)))
                        <div class="alert alert-info py-2">
                            <strong>{{ $loginAnnouncementTitle ?: 'Announcement' }}</strong>
                            <div>{{ $loginAnnouncementMessage }}</div>
                        </div>
                    @endif

	                    <form method="POST" action="{{ route('login.store') }}" id="loginForm" data-refresh-token-url="{{ route('login.refresh_token') }}">
	                        @csrf
	                        <div class="mb-3">
	                            <label class="field-label">Email address</label>
	                            <input type="email" name="email" class="form-control" value="{{ old('email', $demoEmail) }}" required />
	                        </div>

                        <div class="mb-2">
                            <label class="field-label">Password</label>
                            <input type="password" name="password" class="form-control" value="{{ $demoPassword }}" required />
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger py-2 mt-2 mb-2">
                                {{ $errors->first() }}
                            </div>
                        @endif

                        <div class="login-ops">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="remember" name="remember" />
                                <label class="form-check-label" for="remember">Remember for 30 days</label>
                            </div>
                            <a href="#">Forgot password</a>
                        </div>

	                        <button type="submit" class="btn-signin">Sign in</button>
	                    </form>

	                    <a class="btn-shortcut" href="{{ route('public.attendance_check') }}">
	                        <i class="fas fa-fingerprint"></i>
	                        Cek Absensi (Tanpa Login)
	                    </a>

	                    <button class="btn-google" type="button">
	                        <i class="fab fa-google me-2"></i>Sign in with Google
	                    </button>

                    <div class="signup-note">
                        Don't have an account? <a href="#">Sign up</a>
                    </div>

                    @if (!empty($mobileAppRequiredVersion))
                    <div class="mobile-app-banner">
                        <div class="mobile-app-banner-icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="mobile-app-banner-content">
                            <div class="mobile-app-banner-title">{{ $mobileAppUpdateTitle }}</div>
                            <div class="mobile-app-banner-msg">{{ $mobileAppUpdateMessage }}</div>
                            <div class="mobile-app-banner-version">Versi terbaru: <strong>v{{ $mobileAppRequiredVersion }}</strong></div>
                        </div>
                        @if (!empty($mobileAppUpdateUrl))
                        <a href="{{ $mobileAppUpdateUrl }}" target="_blank" rel="noopener" class="mobile-app-banner-btn">
                            <i class="fas fa-download me-1"></i>Download
                        </a>
                        @endif
                    </div>
                    @endif
                </div>
            </div>

            <div
                id="rightPane"
                class="right-pane {{ $visualImageUrl ? 'has-image' : '' }} {{ ($loginMode ?? 'login') === 'maintenance' ? 'maintenance-mode' : '' }}"
                style="{{ $visualImageUrl ? '--custom-visual-image: url(\'' . e($visualImageUrl) . '\');' : '' }}"
            >
                <div class="maintenance-visual">
                    <i class="fas fa-screwdriver-wrench"></i>
                    <div class="title">Maintenance Mode</div>
                    <div class="sub">Sistem sedang dalam perawatan.</div>
                </div>
                <div class="hero-card">
                    <div class="hero-blob one"></div>
                    <div class="hero-blob two"></div>
                    <div class="hero-blob three"></div>
                    <i class="far fa-envelope hero-icon mail"></i>
                    <i class="far fa-comment-dots hero-icon msg"></i>
                    <i class="far fa-circle-check hero-icon shield"></i>
                </div>
            </div>
        </div>
    </div>

    <script>
        (() => {
            const form = document.getElementById('loginForm');
            if (!form) return;

            const refreshUrl = form.getAttribute('data-refresh-token-url');
            const submitButton = form.querySelector('button[type="submit"]');
            const csrfMeta = document.querySelector('meta[name="csrf-token"]');
            let isSubmitting = false;
            let keepAliveTimer = null;

            const applyCsrfToken = (token) => {
                if (!token) return;
                if (csrfMeta) csrfMeta.setAttribute('content', token);
                const hiddenInput = form.querySelector('input[name="_token"]');
                if (hiddenInput) hiddenInput.value = token;
            };

            const refreshLoginToken = async ({ quiet = false } = {}) => {
                if (!refreshUrl) return false;
                try {
                    const response = await fetch(refreshUrl, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        credentials: 'same-origin',
                        cache: 'no-store',
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    const payload = await response.json();
                    applyCsrfToken(payload.csrf_token || '');
                    return true;
                } catch (error) {
                    if (!quiet) {
                        window.location.reload();
                    }
                    return false;
                }
            };

            keepAliveTimer = window.setInterval(() => {
                refreshLoginToken({ quiet: true });
            }, 5 * 60 * 1000);

            form.addEventListener('submit', async (event) => {
                if (isSubmitting) {
                    return;
                }

                event.preventDefault();
                isSubmitting = true;

                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.dataset.originalText = submitButton.textContent || 'Sign in';
                    submitButton.textContent = 'Signing in...';
                }

                const ok = await refreshLoginToken();
                if (!ok) {
                    isSubmitting = false;
                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.textContent = submitButton.dataset.originalText || 'Sign in';
                    }
                    return;
                }

                if (keepAliveTimer) {
                    window.clearInterval(keepAliveTimer);
                }

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