@extends('frontEnd.layouts.master')
@section('title','Amazon Verification')
@php
    $generalsetting = \App\Models\GeneralSetting::first();
    $navLogo = $generalsetting?->white_logo;
    if ($navLogo && !Str::startsWith($navLogo, ['http', 'https'])) {
        $navLogo = ltrim(str_ireplace(['/public/', 'public/'], '', $navLogo), '/');
    }
@endphp
@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    :root {
        --amz-blue: #007185;
        --amz-text: #0F1111;
        --amz-price: #B12704;
    }
    body { background-color: #fff; }
    .auth-wrap { background: #fff; min-height:85vh; display:flex; flex-direction:column; align-items:center; padding:30px 15px; font-family:'Inter',sans-serif; }
    .auth-box { width:100%; max-width:350px; }
    .logo-wrap { margin-bottom: 18px; display: flex; justify-content: center; }
    .auth-logo { max-height: 40px; object-fit: contain; }
    
    .auth-card { background:#fff; padding:20px 26px; border-radius:8px; border:1px solid #ddd; text-align:left; }
    .auth-title { font-size:28px; font-weight:400; color: #111; margin:0 0 10px; letter-spacing: -0.5px; }
    
    .instruction { font-size:13px; line-height:1.5; margin-bottom:20px; color: #111; }
    .input-label { display:block; font-size:13px; font-weight:700; margin-bottom:4px; color: #111; }
    
    .a-input { width:100%; height:34px; padding:0 10px; border:1px solid #888C8C; border-radius:4px; font-size:14px; outline:none; transition:0.2s; margin-bottom:15px; box-sizing:border-box; box-shadow: 0 1px 2px rgba(15,17,17,.15) inset; }
    .a-input:focus { border-color: #e77600; box-shadow: 0 0 3px 2px rgba(228, 121, 17, .5); }
    
    .a-btn { width:100%; padding:8px; background: #FFD814; border: 1px solid #FCD200; border-radius:8px; font-weight:400; font-size:13px; color:#111; cursor:pointer; transition:0.1s; margin-top:5px; display:block; box-shadow: 0 2px 5px 0 rgba(213,217,217,.5); }
    .a-btn:hover { background: #f7ca00; border-color: #f2c200; }
    
</style>

<section class="auth-wrap">
    <div class="auth-box">
        <div class="auth-card">
            <div class="logo-wrap">
                <a href="{{ url('/') }}">
                    <img src="{{ asset($navLogo ?? 'public/logo.png') }}" alt="Logo" class="auth-logo">
                </a>
            </div>
            <h1 class="auth-title">Verification required</h1>
            <p class="instruction">To continue, please enter the verification code we sent you.</p>

            <form action="{{route('customer.account.verify')}}" method="POST" data-parsley-validate="">
                @csrf
                
                <div class="input-group-custom">
                    <label class="input-label">Enter code</label>
                    <input type="number" name="otp" class="a-input" placeholder="Enter OTP" value="{{ old('otp') }}" required>
                    @error('otp') <p style="color:var(--amz-price); font-size:12px; margin-top:-10px; margin-bottom:10px;">{{ $message }}</p> @enderror
                    @error('phone') <p style="color:var(--amz-price); font-size:12px; margin-top:-10px; margin-bottom:10px;">{{ $message }}</p> @enderror
                </div>

                <button class="a-btn">Verify</button>
            </form>

            <div style="margin-top:25px; border-top:1px solid #eee; padding-top:15px; text-align:center;">
                <form action="{{route('customer.resendotp')}}" method="POST">
                    @csrf
                    <button style="background:none; border:none; color:var(--amz-blue); font-size:13px; cursor:pointer;">Resend code</button>
                </form>
            </div>
        </div>
    </div>

    </div>
</section>
@endsection
