@extends('website.layouts.app')
@section('content')


<section id="myaccount">
    <div class="container-fluid my-lg-5 my-md-4 my-3 fixedwidth">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-lg-10 col-md-11">
                <div class="row justify-content-center ">
                    <div class="col-lg-6 col-md-10 col-12">
                        <form method="POST" action="{{ route('otp.verifyAndRegister') }}">
                            @csrf

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

                            <div class="top-title text-center">
                                <h4 class="mt-lg-2 mt-md-3 {{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}">
                                    @if (session('app_language', 'en') == 'en')
                                    Verify OTP And Set Password
                                    @else
                                    التحقق من OTP وتعيين كلمة المرور
                                    @endif
                                </h4>
                            </div>

                            <!-- OTP -->
                            <div class="mb-3">
                                <label class="form-label">
                                    @if (session('app_language', 'en') == 'en')
                                    OTP Code
                                    @else
                                    رمز مكتب المدعي العام
                                    @endif
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="otp" class="form-control" value="{{ old('otp') }}" placeholder="Enter 6-digit code" required>
                                @error('otp')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                            </div>

                            <!-- Password -->
                            <div class="mb-3">
                                <label class="form-label" for="password">
                                    @if (session('app_language', 'en') == 'en')
                                    Set Password
                                    @else
                                    تعيين كلمة المرور
                                    @endif
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="password" name="password" class="form-control" placeholder="Password" required>
                                @error('password')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                            </div>

                            <!-- Confirm Password -->
                            <div class="mb-3">
                                <label class="form-label" for="password_confirmation">
                                    @if (session('app_language', 'en') == 'en')
                                    Confirm Password
                                    @else
                                    تأكيد كلمة المرور
                                    @endif
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="password" name="password_confirmation" class="form-control" placeholder="Repeat Password" required>
                                @error('password_confirmation')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                            </div>

                            <button type="submit" class="btn btn-primary">Verify & Register</button>

                        </form>
                    </div>
                </div>


            </div>
        </div>
    </div>
</section>


@endsection