<!doctype html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale()==='ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Owner Portal — {{ config('app.name') }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-light">
<div class="container" style="max-width:440px; margin-top:40px;">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white"><h4 class="mb-0">Vehicle Owner Portal</h4></div>
        <div class="card-body">
            @if(session('vrc_portal_msg'))<div class="alert alert-info">{{ session('vrc_portal_msg') }}</div>@endif
            @if(session('vrc_portal_error'))<div class="alert alert-danger">{{ session('vrc_portal_error') }}</div>@endif
            @if(session('vrc_portal_demo_code'))
                <div class="alert alert-warning">Demo code: <strong>{{ session('vrc_portal_demo_code') }}</strong></div>
            @endif

            @if(session('vrc_portal_phone'))
                <p class="text-muted">Enter the one-time code sent to {{ session('vrc_portal_phone') }}.</p>
                <form method="POST" action="{{ route('vrc.portal.account.verify-otp') }}">
                    @csrf
                    <input type="hidden" name="phone" value="{{ session('vrc_portal_phone') }}">
                    <div class="form-group"><label>One-time code</label>
                        <input name="otp" class="form-control" autocomplete="off" required></div>
                    <button class="btn btn-primary btn-block">Sign in</button>
                </form>
                <a href="{{ route('vrc.portal.account.login') }}" class="btn btn-link btn-block">Use a different number</a>
            @else
                <form method="POST" action="{{ route('vrc.portal.account.request-otp') }}">
                    @csrf
                    <div class="form-group"><label>Mobile number</label>
                        <input name="phone" class="form-control" placeholder="e.g. 010xxxxxxxx" required></div>
                    <button class="btn btn-primary btn-block">Send code</button>
                </form>
            @endif
        </div>
    </div>
    <p class="text-center text-muted mt-3" style="font-size:12px;">{{ config('app.name') }}</p>
</div>
</body>
</html>
