{{--
  OTP Verification Page
  File: resources/views/auth/otp-verify.blade.php
--}}

<x-layouts::auth :title="__('Verify OTP')">
    <div class="flex flex-col gap-6">

        {{-- Header --}}
        <div class="text-center">
            <div style="width:56px;height:56px;background:#dcfce7;border-radius:50%;
                        display:flex;align-items:center;justify-content:center;
                        margin:0 auto 12px;font-size:24px">
                🔐
            </div>
            <h2 style="font-size:20px;font-weight:700;color:#111;margin:0 0 4px">
                Verify Your Device
            </h2>
            <p style="font-size:13px;color:#6b7280;margin:0">
                An OTP has been sent to admin's mobile and email.
                <br>Ask admin to share the OTP.
            </p>
        </div>

        {{-- Device info --}}
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;
                    padding:10px 14px;font-size:12.5px;color:#15803d;
                    display:flex;align-items:center;gap:6px">
            <span>💻</span>
            <span>Device: <strong>{{ $deviceName }}</strong></span>
        </div>

        {{-- Resent flash --}}
        @if(session('resent'))
            <div style="background:#dcfce7;border:1px solid #86efac;border-radius:8px;
                        padding:10px 14px;font-size:12.5px;color:#15803d">
                ✓ OTP resent successfully.
            </div>
        @endif

        {{-- Error --}}
        @if($errors->any())
            <div style="background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;
                        padding:10px 14px;font-size:12.5px;color:#dc2626">
                {{ $errors->first() }}
            </div>
        @endif

        {{-- OTP Form --}}
        <form method="POST" action="{{ route('otp.verify.submit') }}">
            @csrf

            <div style="margin-bottom:16px">
                <label style="display:block;font-size:13px;font-weight:600;
                              color:#374151;margin-bottom:6px">
                    Enter OTP
                </label>
                <input type="text"
                       name="otp"
                       maxlength="6"
                       placeholder="6-digit OTP"
                       autofocus
                       autocomplete="one-time-code"
                       style="width:100%;padding:12px;border:2px solid #d1d5db;
                              border-radius:8px;font-size:22px;text-align:center;
                              letter-spacing:10px;font-family:monospace;outline:none;
                              transition:border-color .15s"
                       onfocus="this.style.borderColor='#16a34a'"
                       onblur="this.style.borderColor='#d1d5db'"
                       value="{{ old('otp') }}">
                <p style="font-size:11.5px;color:#9ca3af;text-align:center;margin:6px 0 0">
                    OTP valid for {{ config('otp.expiry_minutes', 60) }} minutes
                </p>
            </div>

            <button type="submit"
                    style="width:100%;padding:12px;background:#16a34a;color:#fff;
                           border:none;border-radius:8px;font-size:14px;
                           font-weight:600;cursor:pointer;transition:background .15s"
                    onmouseover="this.style.background='#15803d'"
                    onmouseout="this.style.background='#16a34a'">
                Verify & Login
            </button>
        </form>

        {{-- Resend --}}
        <div style="text-align:center">
            <p style="font-size:12.5px;color:#6b7280;margin:0 0 6px">
                Didn't receive OTP?
            </p>
            <form method="POST" action="{{ route('otp.resend') }}" style="display:inline">
                @csrf
                <button type="submit"
                        style="background:none;border:none;color:#16a34a;
                               font-size:13px;font-weight:600;cursor:pointer;
                               text-decoration:underline">
                    Resend OTP
                </button>
            </form>
        </div>

        {{-- Back to login --}}
        <div style="text-align:center">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                        style="background:none;border:none;color:#9ca3af;
                               font-size:12px;cursor:pointer">
                    ← Back to Login
                </button>
            </form>
        </div>

    </div>
</x-layouts::auth>