@extends('Client.layouts.layout')

@section('content')
    <style>
        .iti {
            width: 100%;
        }
    </style>

    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-sm-12 col-xl-8 col-md-12 col-12">
                    <div class="card text-center p-4">
                        <form action="{{ route('client.register-select-otp') }}" class="card-body" method="POST">
                            @csrf
                            <h5 class="card-title h1 fw-semibold text-dark">@lang('trans.register')</h5>
                            <p class="card-text text-dark text-normal mb-4">
                                @lang('trans.register_text')
                            </p>
                            <!-- End checkbox -->
                            <div class="row mb-4 placeholder-color">
                                <label for=""
                                    class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.name')</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" name="name"
                                        placeholder="@lang('trans.name')" required id="name" value="{{ old('name') }}">
                                </div>
                                <label for=""
                                    class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.email')</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" name="email"
                                        placeholder="@lang('trans.email')" required id="email" value="{{ old('email') }}">
                                </div>
                                <label for=""
                                    class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.phone')</label>
                                <input type="hidden" name="country_code" value="{{ country_code() }}">
                                <input type="hidden" name="phone_code" value="{{ phone_code() }}">
                                <input type="tel" class="form-control" id="phone" name="phone" required>
                                <label for=""
                                    class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.password')</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" name="password" required placeholder="******"
                                        id="password">
                                </div>
                                <label for=""
                                    class="text-dark d-flex justify-content-start mb-2 mt-3 fw-semibold">@lang('trans.confirmPassword')</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" name="password_confirmation" required
                                        placeholder="******" id="password_confirmation">
                                </div>
                            </div>
                            <div class="form-check col-sm-12 mb-4 d-flex">
                                <input class="form-check-input mx-2" type="checkbox" required id="terms">
                                <label class="form-check-label text-dark" for="terms">
                                    @lang('trans.By_registering__I_agree_to') <a href="{{ route('client.privacy') }}"
                                        class="text-decoration-none fw-semibold">@lang('trans.privacy')</a> @lang('trans.and')
                                    <a href="{{ route('client.terms') }}"
                                        class="text-decoration-none fw-semibold">@lang('trans.terms')</a>
                                </label>
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn main_bt rounded-0 rounded-0 col-sm-12 fw-semibold">
                                    @lang('trans.register') </button>
                            </div>
                            <span class="text-dark">@lang('trans.haveAccount') <a href="{{ route('client.login') }}"
                                    class="text-decoration-none fw-semibold"> @lang('trans.login') </a></span>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
