@extends('layouts.app', ['class' => 'main-content-has-bg'])

@section('content')
@include('layouts.headers.guest')

<div class="container-fluid py-4" id="pageTop">
    <div class="row justify-content-center">

        {{-- LEFT (hidden on <md) ------------------------------------------------}}
        <div class="col-12 col-md-5 col-lg-4 mb-4 mb-md-0 d-none d-md-flex align-items-center">
            <div class="text-center text-md-start w-100">
                {{-- Optional illustration / heading / marketing copy --}}
                <img src="https://wapschat.ng/assets/img/hero/mamawhatsapp.png" class="img-fluid mb-4" alt="Register as vendor">
                <h2 class="fw-bold text-dark">{{ __tr('Become a Vendor') }}</h2>
                <p class="text-muted">
                    {{ __tr('WhatsApp Customer Engagement Evolved With WapsChat Innovation, Tap into customer engagement power with WapsChat your comprehensive WhatsApp Marketing Platform..') }}
                </p>
            </div>
        </div>

        {{-- RIGHT (form) --------------------------------------------------------}}
        <div class="col-12 col-md-7 col-lg-5">

            @if(getAppSettings('enable_vendor_registration'))

            <div class="card shadow border-0">
                <div class="card-header border-0 bg-transparent text-center pt-4">
                    <i class="fa fa-store fa-2x text-success mb-2"></i>
                    <h1 class="h4 text-dark fw-bold">{{ __tr('Register as Vendor / Company') }}</h1>
                </div>

                <div class="card-body px-4 px-sm-5">
                    @php
                        $formSignUpRoute = route('auth.register.process');
                        if (getAppSettings('activation_required_for_new_user')) {
                            $formSignUpRoute = route('activation_required.auth.register.process');
                        }
                    @endphp

                    <x-lw.form :action="$formSignUpRoute" data-secured="true">

                        {{-- Vendor / Company Name --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __tr('Vendor / Company Name') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-user-alt"></i></span>
                                <input type="text" name="vendor_title" class="form-control"
                                       placeholder="{{ __tr('Vendor/Company Name') }}"
                                       value="{{ old('vendor_title') }}" required autofocus>
                            </div>
                        </div>

                        {{-- Admin User Details sub-heading --}}
                        <h6 class="text-muted my-3">{{ __tr('Admin User Details') }}</h6>

                        {{-- Username --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __tr('Username') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-id-card"></i></span>
                                <input type="text" name="username" class="form-control"
                                       placeholder="{{ __tr('Username') }}"
                                       value="{{ old('username') }}" required autofocus>
                            </div>
                        </div>

                        {{-- First & Last Name --}}
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-semibold">{{ __tr('First Name') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                    <input type="text" name="first_name" class="form-control"
                                           placeholder="{{ __tr('First Name') }}"
                                           value="{{ old('first_name') }}" required>
                                </div>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-semibold">{{ __tr('Last Name') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                    <input type="text" name="last_name" class="form-control"
                                           placeholder="{{ __tr('Last Name') }}"
                                           value="{{ old('last_name') }}" required>
                                </div>
                            </div>
                        </div>

                        {{-- Mobile --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __tr('Mobile Number') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-mobile-alt"></i></span>
                                <input type="text" name="mobile_number" class="form-control"
                                       placeholder="{{ __tr('Mobile Number with country code') }}"
                                       value="{{ old('mobile_number') }}" required>
                            </div>
                            <small class="form-text text-muted">
                                {{ __tr('Include country code without 0 or +') }}
                            </small>
                        </div>

                        {{-- Email --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __tr('Email') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-at"></i></span>
                                <input type="email" name="email" class="form-control"
                                       placeholder="{{ __tr('Email address') }}"
                                       value="{{ old('email') }}" required>
                            </div>
                        </div>

                        {{-- Password & Confirm --}}
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-semibold">{{ __tr('Password') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-key"></i></span>
                                    <input type="password" name="password" class="form-control"
                                           placeholder="{{ __tr('Password') }}" required>
                                </div>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-semibold">{{ __tr('Confirm Password') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fa fa-key"></i>
                                        <i class="fa fa-check fa-xs ms-1"></i>
                                    </span>
                                    <input type="password" name="password_confirmation" class="form-control"
                                           placeholder="{{ __tr('Confirm Password') }}" required>
                                </div>
                            </div>
                        </div>

                        {{-- Terms & Privacy --}}
                        @if(getAppSettings('user_terms') || getAppSettings('vendor_terms') || getAppSettings('privacy_policy'))
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="itemsAccept" name="terms_and_conditions" required>
                                <label class="form-check-label" for="itemsAccept">
                                    {{ __tr('I agree with the') }}
                                    @if(getAppSettings('user_terms'))
                                        <a href="https://wapschat.ng/terms" class="link-success">{{ __tr('User Terms') }}</a> l
                                    @endif
                                    @if(getAppSettings('vendor_terms'))
                                        <a href="{{ route('app.terms_and_policies', ['contentName' => 'vendor_terms']) }}" class="link-success">{{ __tr('Vendor Terms') }}</a> l
                                    @endif
                                    @if(getAppSettings('privacy_policy'))
                                        <a href="https://wapschat.ng/privacy-policy" class="link-success">{{ __tr('Privacy Policy') }}</a> l
                                    @endif
                                     @if(getAppSettings('privacy_policy'))
                                        <a href="https://wapschat.ng/refund-policy" class="link-success">{{ __tr('Refund Policy') }}</a> 
                                    @endif
                                </label>
                            </div>
                        </div>
                        @endif

                        {{-- Submit --}}
                        <button type="submit" class="btn btn-success w-100 btn-lg mb-3">
                            {{ __tr('Create Account') }}
                        </button>

                    </x-lw.form>

                </div> {{-- /.card-body --}}

                <div class="card-footer bg-transparent border-0 text-center pb-4">
                    {{-- Social logins --}}
                    @if(getAppSettings('allow_google_login'))
                        <a href="{{ route('login.google') }}" class="btn btn-outline-danger w-100 mb-2">
                            <i class="fab fa-google"></i> {{ __tr('Continue with Google') }}
                        </a>
                    @endif
                    @if(getAppSettings('allow_facebook_login'))
                        <a href="{{ route('login.facebook') }}" class="btn btn-outline-primary w-100">
                            <i class="fab fa-facebook-f"></i> {{ __tr('Continue with Facebook') }}
                        </a>
                    @endif

                    <div class="mt-4">
                        {{ __tr('Already have an account?') }}
                        <a href="{{ route('auth.login') }}" class="fw-bold link-warning">
                            {{ __tr('Login here') }}
                        </a>
                    </div>
                </div>

            </div> {{-- /.card --}}

            @else
                {{-- Registration disabled --}}
                <div class="card shadow border-0">
                    <div class="card-body text-center py-5">
                        @if(getAppSettings('message_for_disabled_registration'))
                            {!! getAppSettings('message_for_disabled_registration') !!}
                        @else
                            <h5>{{ __tr('Vendor Registrations are closed now.') }}</h5>
                        @endif
                    </div>
                </div>
            @endif

        </div> {{-- /.col-12.col-md-7.col-lg-5 --}}
    </div> {{-- /.row --}}
</div> {{-- /.container-fluid --}}
@endsection