@extends('layouts.auth')

@section('content')
    <!-- Sing Up Area Start -->
    <section class="sign-up-page p-0">
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-md-5">
                    <div class="sign-up-left-content">
                        <div class="sign-up-top-logo">
                            <a href="{{ route('main.index') }}"><img src="{{ getImageFile(get_option('app_logo')) }}"
                                    alt="logo"></a>
                        </div>
                        {{-- <p>{{ __(get_option('sign_up_left_text')) }}</p> --}}
                        @if (get_option('sign_up_left_image'))
                            <div class="sign-up-bottom-img">
                                <img src="{{ getImageFile(get_option('sign_up_left_image')) }}" alt="hero"
                                    class="img-fluid">
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="sign-up-right-content bg-white">
                        <form method="POST" action="{{ route('store.sign-up') }}">
                            @csrf
                            <h5 class="mb-1 mt-2">{{ __('Create an Account') }}</h5>
                            <p class="font-14 mb-20">{{ __('Already have an account?') }} <a href="{{ route('login') }}"
                                    class="color-hover text-decoration-underline font-medium">{{ __('Sign In') }}</a></p>

                            {{-- checker --}}
                            <div class="row mb-20">
                                <div class="col-md-12 d-flex">
                                    <label class="label-text-title color-heading font-medium font-16 mb-3">
                                        {{ __('Email/Phone') }}
                                    </label>
                                    <div class="form-check mx-5">
                                        <input class="form-check-input" type="radio" name="contact_method"
                                            id="email_radio" value="email" checked>
                                        <label class="form-check-label" for="email_radio">
                                            {{ __('Email') }}
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="contact_method"
                                            id="phone_radio" value="phone">
                                        <label class="form-check-label" for="phone_radio">
                                            {{ __('Phone') }}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-20 " id="email_div">
                                <div class="col-md-12">
                                    <label class="label-text-title color-heading font-medium font-16 mb-3"
                                        for="email">{{ __('Email') }}</label>
                                    <input type="email" name="email" id="email" value="{{ old('email') }}"
                                        class="form-control" placeholder="Type your email">
                                    @if ($errors->has('email'))
                                        <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                            {{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-20" class="d-none" id="phone_div">
                                <div class="col-md-12">
                                    <label class="label-text-title color-heading font-medium font-16 mb-3"
                                        for="phone_number">{{ __('Phone') }}</label>

                                    <div class="form-group mb-0 position-relative">
                                        <input type="number" name="phone_number" id="phone_number"
                                            value="{{ old('phone_number') }}" class="form-control phone_number"
                                            placeholder="+88">
                                    </div>

                                    @if ($errors->has('phone_number'))
                                        <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                            {{ $errors->first('phone_number') }}</span>
                                    @endif

                                </div>

                            </div>
                            <div class="row mb-20">
                                <div class="col-md-6">
                                    <label class="label-text-title color-heading font-medium font-16 mb-3"
                                        for="first_name">{{ __('First Name') }}</label>
                                    <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}"
                                        class="form-control" placeholder="{{ __('First Name') }}">
                                    @if ($errors->has('first_name'))
                                        <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                            {{ $errors->first('first_name') }}</span>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <label class="label-text-title color-heading font-medium font-16 mb-3"
                                        for="last_name">{{ __('Last Name') }}</label>
                                    <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}"
                                        class="form-control" placeholder="{{ __('Last Name') }}">
                                    @if ($errors->has('last_name'))
                                        <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                            {{ $errors->first('last_name') }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row mb-20">
                                <div class="col-md-12">
                                    <label class="label-text-title color-heading font-medium font-16 mb-3"
                                        for="password">{{ __('Password') }}</label>

                                    <div class="form-group mb-0 position-relative">
                                        <input type="password" name="password" id="password" value="{{ old('password') }}"
                                            class="form-control password" placeholder="*********">
                                        <span class="toggle cursor fas fa-eye pass-icon"></span>
                                    </div>

                                    @if ($errors->has('password'))
                                        <span class="text-danger"><i class="fas fa-exclamation-triangle"></i>
                                            {{ $errors->first('password') }}</span>
                                    @endif

                                </div>

                            </div>


                            <div class="row mb-30">
                                <div class="col-md-12">
                                    <div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                id="flexCheckChecked" checked>
                                            <label class="form-check-label mb-0" for="flexCheckChecked">
                                                By clicking Create account, I agree that I have read and accepted the <a
                                                    href="{{ route('terms-conditions') }}"
                                                    class="color-hover text-decoration-underline">Terms of Use</a> and <a
                                                    href="{{ route('privacy-policy') }}"
                                                    class="color-hover text-decoration-underline">Privacy Policy.</a>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-12">
                                    <button type="submit"
                                        class="theme-btn theme-button1 theme-button3 font-15 fw-bold w-100">{{ __('Sign Up') }}</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Sing Up Area End -->
@endsection
<script src="{{ asset('frontend') }}/assets/vendor/jquery/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Show/hide input fields based on radio button selection
        $('#email_radio').click(function() {
            $('#email_div').removeClass('d-none');
            $('#phone_div').addClass('d-none');
            $('#phone_number').val('');
        });

        $('#phone_radio').click(function() {
            $('#phone_div').removeClass('d-none');
            $('#email_div').addClass('d-none');
            $('#email').val('');
        });


        // Check the appropriate radio button and show/hide input field on page load or after validation error
        @if ($errors->has('phone_number'))
            $('#phone_radio').prop('checked', true);
            $('#phone_div').removeClass('d-none');
            $('#email_div').addClass('d-none');
        @elseif ($errors->has('email'))
            $('#email_radio').prop('checked', true);
            $('#email_div').removeClass('d-none');
            $('#phone_div').addClass('d-none');
        @else
            $('#email_radio').prop('checked', true);
            $('#email_div').removeClass('d-none');
            $('#phone_div').addClass('d-none');
        @endif
    });
</script>