@extends('layouts.webphone')

@push('style')
<style>
    .webphone-login-page {
        --vc-card-bg: rgba(7, 22, 45, 0.88);
        --vc-card-bg-light: rgba(18, 39, 72, 0.72);
        --vc-border: rgba(148, 163, 184, 0.18);
        --vc-purple: #635bff;
        --vc-purple-dark: #4f46e5;
        --vc-text: #f8fafc;
        --vc-text-soft: #cbd5e1;
        --vc-text-muted: #94a3b8;
        --vc-input-bg: rgba(4, 17, 38, 0.72);
        --vc-input-border: rgba(148, 163, 184, 0.24);
        --vc-input-focus: rgba(99, 91, 255, 0.65);
        --vc-shadow: rgba(0, 0, 0, 0.42);

        min-height: 100vh;
        width: 100%;
        padding: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--vc-text);
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 50% 18%, rgba(99, 91, 255, 0.14), transparent 28%),
            radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.12), transparent 26%),
            radial-gradient(circle at 85% 50%, rgba(59, 130, 246, 0.10), transparent 28%),
            linear-gradient(180deg, #071524 0%, #061a3d 100%);
    }
    body { background: #061a3d !important; }

    .webphone-login-page::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, rgba(59, 130, 246, 0.55) 0 2px, transparent 2px);
        background-size: 160px 160px;
        background-position: center;
        opacity: 0.10;
    }

    .webphone-card {
        position: relative;
        z-index: 2;
        width: 430px;
        max-width: calc(100vw - 32px);
        padding: 52px 48px 40px;
        border-radius: 28px;
        background:
            radial-gradient(circle at 50% 0%, rgba(99, 91, 255, 0.13), transparent 38%),
            linear-gradient(180deg, var(--vc-card-bg-light) 0%, var(--vc-card-bg) 44%, rgba(4, 15, 35, 0.94) 100%);
        border: 1px solid var(--vc-border);
        box-shadow: 0 30px 90px var(--vc-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .webphone-card .webphone-icon {
        width: 88px;
        height: 88px;
        margin: 0 auto 24px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.15), transparent 30%),
            linear-gradient(135deg, rgba(99, 91, 255, 0.22), rgba(4, 15, 35, 0.88));
        border: 2px solid var(--vc-purple);
        box-shadow: 0 0 38px rgba(99, 91, 255, 0.32), inset 0 0 28px rgba(99, 91, 255, 0.12);
    }
    .webphone-card .webphone-icon svg {
        width: 40px; height: 40px;
        fill: none; stroke: #dbe4ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    }

    .webphone-card h1 {
        margin: 0;
        text-align: center;
        color: var(--vc-text);
        font-size: 32px;
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.02em;
    }
    .webphone-subtitle {
        margin: 12px 0 40px;
        text-align: center;
        color: var(--vc-text-muted);
        font-size: 16px;
        line-height: 1.4;
    }

    .webphone-form .form-group { margin-bottom: 24px; }
    .webphone-form label {
        display: block;
        margin-bottom: 10px;
        color: var(--vc-text-soft);
        font-size: 14px;
        font-weight: 500;
    }
    .webphone-form .input-wrapper { position: relative; display: flex; align-items: center; }
    .webphone-form .input-wrapper input {
        width: 100%;
        height: 56px;
        border-radius: 12px;
        border: 1px solid var(--vc-input-border);
        background: var(--vc-input-bg);
        color: var(--vc-text);
        font-size: 15px;
        outline: none;
        padding: 0 22px;
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }
    .webphone-form .input-wrapper input::placeholder { color: rgba(203, 213, 225, 0.55); }
    .webphone-form .input-wrapper input:focus {
        border-color: var(--vc-input-focus);
        box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18), 0 0 28px rgba(99, 91, 255, 0.16);
        background: rgba(7, 23, 50, 0.88);
    }
    .webphone-form .input-wrapper.has-icon input { padding-left: 54px; }
    .webphone-form .input-wrapper.has-toggle input { padding-right: 54px; }
    .webphone-form .input-icon {
        position: absolute; left: 20px; z-index: 2; display: flex;
        color: var(--vc-text-muted);
    }
    .webphone-form .input-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .webphone-form .password-toggle {
        position: absolute; right: 18px; width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        border: none; background: transparent; color: var(--vc-text-muted); cursor: pointer; padding: 0;
    }
    .webphone-form .password-toggle:hover { color: var(--vc-text-soft); }
    .webphone-form .password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .webphone-signin-btn {
        width: 100%;
        height: 60px;
        margin-top: 12px;
        border: none;
        border-radius: 13px;
        background: linear-gradient(135deg, #6d6aff 0%, var(--vc-purple) 42%, var(--vc-purple-dark) 100%);
        color: #fff;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 18px 42px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    }
    .webphone-signin-btn:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow: 0 24px 50px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    .webphone-signin-btn:active { transform: translateY(0); }

    .webphone-install-btn {
        width: 100%;
        margin-top: 14px;
        height: 50px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--vc-text-soft);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        transition: all 160ms ease;
    }
    .webphone-install-btn:hover {
        background: rgba(99, 91, 255, 0.12);
        border-color: rgba(99, 91, 255, 0.45);
        color: #fff;
    }
    .webphone-install-btn svg { width: 16px; height: 16px; }

    .webphone-footer {
        margin-top: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: rgba(203, 213, 225, 0.62);
        font-size: 14px;
    }
    .webphone-footer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .webphone-alert {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #fca5a5;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        margin-bottom: 22px;
        text-align: center;
    }

    @media (max-width: 560px) {
        .webphone-login-page { padding: 20px; }
        .webphone-card { width: 100%; padding: 40px 26px 32px; border-radius: 24px; }
        .webphone-card .webphone-icon { width: 76px; height: 76px; }
        .webphone-card .webphone-icon svg { width: 34px; height: 34px; }
        .webphone-card h1 { font-size: 28px; }
        .webphone-subtitle { font-size: 15px; margin-bottom: 32px; }
    }
</style>
@endpush

@section('content')
<div class="webphone-login-page">
    <div class="webphone-card">
        <div class="webphone-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 11.19 19a19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.61a2 2 0 0 1-.45 2.11L8 9.67a16 16 0 0 0 6.33 6.33l1.23-1.23a2 2 0 0 1 2.11-.45c.84.3 1.71.51 2.61.63A2 2 0 0 1 22 16.92z"/>
            </svg>
        </div>

        <h1>Webphone</h1>
        <p class="webphone-subtitle">Sign in with your extension credentials</p>

        @if($errors->has('login'))
            <div class="webphone-alert">{{ $errors->first('login') }}</div>
        @endif

        <form class="webphone-form" method="POST" action="{{ route('webphone.authenticate') }}" id="wpLoginForm">
            @csrf

            <div class="form-group">
                <label for="extension">Extension</label>
                <div class="input-wrapper has-icon">
                    <span class="input-icon">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M20 21a8 8 0 0 0-16 0"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                    </span>
                    <input id="extension" name="extension" type="text" value="{{ old('extension') }}"
                           placeholder="Enter extension or email" autocomplete="username" autofocus required>
                </div>
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <div class="input-wrapper has-toggle">
                    <input id="password" name="password" type="password"
                           placeholder="Enter your password" autocomplete="current-password" required>
                    <button type="button" class="password-toggle" id="wpTogglePassword" aria-label="Show password">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                    </button>
                </div>
            </div>

            <button type="submit" class="webphone-signin-btn">Sign In</button>

            <button type="button" class="webphone-install-btn d-none" data-webphone-install>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 3v12"></path>
                    <path d="m7 10 5 5 5-5"></path>
                    <path d="M5 21h14"></path>
                </svg>
                Install Webphone App
            </button>
        </form>

        <div class="webphone-footer">
            <svg viewBox="0 0 24 24" aria-hidden="true">
                <rect x="5" y="11" width="14" height="10" rx="2"/>
                <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
            </svg>
            <span>Secure browser calling · V-Connect</span>
        </div>
    </div>
</div>

<script>
    document.getElementById('wpTogglePassword').addEventListener('click', function () {
        const input = document.getElementById('password');
        const icon = this.querySelector('svg');
        if (input.type === 'password') {
            input.type = 'text';
            icon.innerHTML = '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 11 7 11 7a13.16 13.16 0 0 1-1.67 2.68"></path><path d="M6.61 6.61A13.526 13.526 0 0 0 1 12s4 7 11 7a9.74 9.74 0 0 0 5.39-1.61"></path><line x1="1" y1="1" x2="23" y2="23"></line>';
        } else {
            input.type = 'password';
            icon.innerHTML = '<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"></path><circle cx="12" cy="12" r="3"></circle>';
        }
    });
</script>
@endsection