@extends('frontEnd.layouts.master')
@section('title','Amazon Registration')
@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 15px; letter-spacing: -0.5px; }
    
    .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">Create account</h1>

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

                <div class="input-group-custom">
                    <label class="input-label">Mobile number</label>
                    <div style="display:flex; align-items:center; border:1px solid #888C8C; border-radius:4px; margin-bottom:15px; overflow:hidden; box-shadow: 0 1px 2px rgba(15,17,17,.15) inset;">
                        <div style="background:#f0f2f2; padding:0 10px; border-right:1px solid #ddd; height:32px; display:flex; align-items:center; font-size:13px; font-weight:700; color:#555;">+88</div>
                        <input type="number" name="phone" value="{{ old('phone') }}" placeholder="01XXXXXXXXX" required style="flex:1; border:none; outline:none; height:32px; padding:0 10px; font-size:14px;">
                    </div>
                    @error('phone') <p style="color:var(--amz-price); font-size:12px; margin-top:-10px; margin-bottom:10px;">{{ $message }}</p> @enderror
                </div>

                <div class="input-group-custom">
                    <label class="input-label">Password</label>
                    <input type="password" name="password" class="a-input" placeholder="At least 6 characters" required minlength="6">
                    <p style="font-size:12px; margin-top:-10px; margin-bottom:15px; color:#111;"><i class="fa-solid fa-circle-info" style="color:var(--amz-blue);"></i> Passwords must be at least 6 characters.</p>
                    @error('password') <p style="color:var(--amz-price); font-size:12px; margin-top:-10px; margin-bottom:10px;">{{ $message }}</p> @enderror
                </div>

                <button type="submit" class="a-btn">Continue</button>
            </form>

        </div>
    </div>
</section>
@endsection
