@extends('layouts.app')
@section('full_width')
@endsection
@section('title', 'Maintenance')

@section('content')
    <div class="maint-shell">
        <div class="maint-card">
            <div class="maint-brand">
                <img src="{{ asset('website/assets/images/footer-logo.png') }}" alt="Veltrix" width="180" height="auto">
            </div>

            <div class="maint-hero">
                <div class="maint-orb" aria-hidden="true"></div>
                <h1 class="maint-title">This site is under maintenance</h1>
                <p class="maint-lead">We&rsquo;re preparing to serve you better.</p>

                <div class="maint-illustration" role="img" aria-label="Disconnected connection">
                    <svg class="maint-plugs-svg" viewBox="0 0 520 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <defs>
                            <linearGradient id="maint-plug-fill" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" stop-color="#ffe4e6"/>
                                <stop offset="100%" stop-color="#fecdd3"/>
                            </linearGradient>
                        </defs>
                        <line x1="0" y1="64" x2="118" y2="64" stroke="#c8111f" stroke-width="5" stroke-linecap="round"/>
                        <rect x="118" y="40" width="56" height="48" rx="8" fill="url(#maint-plug-fill)" stroke="#c8111f" stroke-width="2.5"/>
                        <rect x="174" y="52" width="14" height="8" rx="2" fill="#c8111f"/>
                        <rect x="174" y="68" width="14" height="8" rx="2" fill="#c8111f"/>
                        <line x1="248" y1="64" x2="272" y2="64" stroke="#e8192c" stroke-width="4" stroke-dasharray="8 10" stroke-linecap="round" opacity="0.85"/>
                        <rect x="272" y="38" width="60" height="52" rx="8" fill="url(#maint-plug-fill)" stroke="#c8111f" stroke-width="2.5"/>
                        <rect x="286" y="54" width="10" height="10" rx="2" fill="#fff" stroke="#c8111f" stroke-width="1.8"/>
                        <rect x="302" y="54" width="10" height="10" rx="2" fill="#fff" stroke="#c8111f" stroke-width="1.8"/>
                        <line x1="332" y1="64" x2="520" y2="64" stroke="#c8111f" stroke-width="5" stroke-linecap="round"/>
                    </svg>
                </div>
            </div>

            <div class="maint-divider"></div>

            <p class="maint-form-hint">Have access? Sign in below to continue to the site.</p>

            <form method="POST" action="{{ route('maintenance.unlock') }}" class="js-auth-form maint-form">
                @csrf

                <div class="form-group">
                    <label for="username">Username</label>
                    <div class="input-wrapper">
                        <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                            <polyline points="22,6 12,13 2,6"/>
                        </svg>
                        <input type="text" id="username" name="username" class="form-control" value="{{ old('username') }}"
                            required autofocus autocomplete="username" placeholder="your@email.com">
                    </div>
                    @error('username')
                        <span class="error">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                            {{ $message }}
                        </span>
                    @enderror
                </div>

                <div class="form-group">
                    <div class="label-row">
                        <label for="password">Password</label>
                    </div>
                    <div class="input-wrapper">
                        <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                        <input type="password" id="password" name="password" class="form-control form-control-eye" required
                            placeholder="Enter password" autocomplete="current-password">
                        <button type="button" class="eye-toggle" onclick="togglePassword('password', this)" tabindex="-1">
                            <svg class="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                <circle cx="12" cy="12" r="3"/>
                            </svg>
                        </button>
                    </div>
                    @error('password')
                        <span class="error">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                            {{ $message }}
                        </span>
                    @enderror
                </div>

                <button type="submit" class="btn btn-submit" data-loading-text="Verifying...">
                    Continue to site
                </button>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

        .maint-shell {
            --maint-accent: #e8192c;
            --maint-accent-dark: #b81220;
            --maint-stroke: #c8111f;
            --maint-stroke-soft: #e8192c;
            --maint-text: #111827;
            --maint-muted: #6b7280;
            --maint-soft-bg: #fef2f2;
            --maint-page-bg: #f3f4f6;

            width: 100%;
            box-sizing: border-box;

            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            font-family: 'Geist', system-ui, sans-serif;
        }

        .maint-card {
            position: relative;
            width: 100%;
            max-width: 520px;
            background: #ffffff;
            border-radius: 20px;
            padding: 2.25rem 2rem 2.5rem;
            border: 1px solid rgba(17, 24, 39, 0.06);
            box-shadow:
                0 1px 2px rgba(0, 0, 0, 0.04),
                0 12px 40px rgba(17, 24, 39, 0.08);
        }

        .maint-brand {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .maint-brand img {
            max-width: 200px;
            height: auto;
            object-fit: contain;
        }

        .maint-hero {
            position: relative;
            text-align: center;
            padding: 1.5rem 0.5rem 1.25rem;
            overflow: hidden;
        }

        .maint-orb {
            position: absolute;
            left: 50%;
            top: 42%;
            transform: translate(-50%, -50%);
            width: min(100%, 380px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(
                circle at 50% 45%,
                rgba(232, 25, 44, 0.09) 0%,
                rgba(254, 226, 226, 0.55) 45%,
                rgba(255, 255, 255, 0) 72%
            );
            pointer-events: none;
            z-index: 0;
        }

        .maint-title {
            position: relative;
            z-index: 1;
            font-size: clamp(1.25rem, 4vw, 1.5rem);
            font-weight: 700;
            color: var(--maint-text);
            margin: 0 0 0.5rem;
            letter-spacing: -0.025em;
            line-height: 1.3;
        }

        .maint-lead {
            position: relative;
            z-index: 1;
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--maint-muted);
            margin: 0 auto;
            max-width: 28rem;
            line-height: 1.5;
        }

        .maint-illustration {
            position: relative;
            z-index: 1;
            margin-top: 1.35rem;
            padding: 0 0.25rem;
        }

        .maint-plugs-svg {
            display: block;
            width: 100%;
            max-width: 420px;
            height: auto;
            margin: 0 auto;
        }

        .maint-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.1), transparent);
            margin: 0.25rem 0 1.25rem;
        }

        .maint-form-hint {
            font-size: 0.8125rem;
            color: var(--maint-muted);
            text-align: center;
            margin: 0 0 1.25rem;
            line-height: 1.45;
        }

        .maint-form .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 1.15rem;
        }

        .maint-form .label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .maint-form .form-group label,
        .maint-form .label-row label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .maint-form .label-row label {
            margin-bottom: 0;
        }

        .maint-form .input-wrapper {
            position: relative;
        }

        .maint-form .input-icon {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
        }

        .maint-form .form-control {
            width: 100%;
            padding: 0.6875rem 1rem 0.6875rem 2.625rem;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            font-size: 0.9375rem;
            color: #111827;
            background: #fafafa;
            transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
            font-family: inherit;
            box-sizing: border-box;
        }

        .maint-form .form-control-eye {
            padding-right: 2.75rem;
        }

        .maint-form .form-control::placeholder {
            color: #b0b7c3;
        }

        .maint-form .form-control:focus {
            outline: none;
            border-color: var(--maint-accent);
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(232, 25, 44, 0.1);
        }

        .maint-form .eye-toggle {
            position: absolute;
            right: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            color: #9ca3af;
            display: flex;
            align-items: center;
        }

        .maint-form .eye-toggle:hover {
            color: #6b7280;
        }

        .maint-form .error {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            color: #dc2626;
            font-size: 0.8125rem;
            margin-top: 0.375rem;
            font-weight: 500;
        }

        .maint-form .btn-submit {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: var(--maint-accent);
            color: #ffffff;
            font-size: 0.9375rem;
            font-weight: 600;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-family: inherit;
            letter-spacing: -0.01em;
            transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
            box-shadow: 0 1px 3px rgba(232, 25, 44, 0.28), 0 4px 14px rgba(232, 25, 44, 0.18);
            margin-top: 0.35rem;
        }

        .maint-form .btn-submit:hover {
            background: var(--maint-accent-dark);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(232, 25, 44, 0.35), 0 8px 22px rgba(232, 25, 44, 0.2);
        }

        .maint-form .btn-submit:active {
            transform: translateY(0);
        }

        .maint-form .btn-submit:disabled,
        .maint-form .btn-submit.btn-loading {
            background: #f08a93;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: maint-spin 0.7s linear infinite;
        }

        @keyframes maint-spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 480px) {
            .maint-card {
                padding: 1.75rem 1.25rem 2rem;
            }

            .maint-title {
                font-size: 1.2rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        function togglePassword(fieldId, btn) {
            var input = document.getElementById(fieldId);
            var isPassword = input.type === 'password';
            input.type = isPassword ? 'text' : 'password';
            btn.querySelector('.eye-icon').innerHTML = isPassword
                ? '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>'
                : '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
        }

        document.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('.js-auth-form');
            if (!form) return;
            form.addEventListener('submit', function() {
                var btn = form.querySelector('button[type="submit"]');
                if (btn && !btn.disabled && !btn.classList.contains('btn-loading')) {
                    btn.disabled = true;
                    btn.classList.add('btn-loading');
                    btn.dataset.originalHtml = btn.innerHTML;
                    btn.innerHTML = '<span class="btn-spinner"></span> ' + (btn.dataset.loadingText ||
                        'Please wait...');
                }
            });
        });
    </script>
@endpush