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

@section('content')
@include('layouts.headers.guest')
<style>
    .gradient-icon-1 {
        background: linear-gradient(135deg, #339699, #78c48f);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
        display: inline-block; 
    }
    .form-container{
        background: rgba(255, 255, 255, 0.95);
        font-family: 'Nunito', sans-serif;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .form-container .form-icon{
        font-size: 55px;
        text-align: center;
        line-height: 100px;
        width: 80px;
        height:80px;
        margin: 0 auto 10px;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .form-container .title{
        color:rgb(0, 0, 0);
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
        margin: 0 0 15px;
    }
    .form-container .form-horizontal .form-group{
         margin: 0 0 15px 0; 
        }
    .form-container .form-horizontal .form-group label{
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    .form-container .form-horizontal .form-group input{
        width: 100%;
        font-size: 1rem;
        padding: 15px 20px;
        background-color: #f5f5f5;
        color: #333;
        border-radius: 10px;
        outline: none;
        transition: all 0.3s ease;
        border: 2px solid #ddd;
}
    .form-container .form-horizontal .form-control{
        color: #333;
        background: #ecf0f3;
        font-size: 15px;
        height: 45px;
        padding: 10px 15px;
        letter-spacing: 1px;
        border: none;
        border-radius: 12px;
        display: inline-block;
        transition: all 0.3s ease 0s;
    }
    .form-container .form-horizontal .form-control:focus{
        border-color: #58bc82;
        box-shadow: 0 0 10px rgba(88, 188, 130, 0.4);s  
    }
    .form-container .form-horizontal .form-control::placeholder{
        color: #808080;
        font-size: 14px;
    }
    .form-container .form-horizontal .btn{
        color: #000;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        width: 100%;
        padding: 10px 15px;
        border-radius: 10px;
        box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px #fff;
        border: none;
        transition: all 0.5s ease 0s;
    }
    .form-container .form-horizontal .btn:hover,
    .form-container .form-horizontal .btn:focus{
        color: #fff;
        letter-spacing: 3px;
        box-shadow: none;
        outline: none;
    }
    .btn{
        color: #000;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        width: 100%;
        padding: 10px 15px;
        border-radius: 10px;
        box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px #fff;
        border: none;
        transition: all 0.5s ease 0s;
    }
    .form-bg{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(to bottom right, #339699, #297386);
 
    }
    canvas {
      display: block;
      width: 100%;
      height: auto;
    }
    .btn-google, .btn-facebook {
        margin-top: 10px;
    }
    .mb-3.mt-5 {
        margin-top: 20px !important;
    }
    .my-4 {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    .row {
        margin-bottom: 10px;
    }
</style>
<div class="form-bg py-5" > <canvas id="networkCanvas" class="position-absolute"></canvas>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-md-offset-6">
                <div class="form-container">
                    <div class="form-icon"><i class="fas fa-briefcase gradient-icon-1"></i></div>
                    <h3 class="title">Register</h3>
                    <div class="form-horizontal">
                    @if(getAppSettings('enable_vendor_registration'))
                    @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">
                        <div class="form-horizontal">
                        <!-- Vendor Name -->
                        <div class="form-group">
                            <label>Vendor/Company Name</label>
                            <input class="form-control" placeholder="{{ __tr('Vendor/Company Name') }}" type="text"
                                    name="vendor_title" value="{{ old('vendor_title') }}" required autofocus>
                        </div>
                        <!-- Username -->
                        
                        <label style="font-size: 15px; font-weight: 600; text-transform: uppercase;">Name</label>
                        <div class="row">
                            <div class="col-md-6">
                                <!-- First Name -->
                                <div class="form-group">
                                    <input class="form-control" placeholder="{{ __tr('First Name') }}" type="text"
                                        name="first_name" value="{{ old('first_name') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- Last Name -->
                                <div class="form-group">
                                    <input class="form-control" placeholder="{{ __tr('Last Name') }}" type="text"
                                            name="last_name" value="{{ old('last_name') }}" required>
                                </div>
                            </div>
                        </div>
                        <!-- mobile no -->
                        <div class="form-group">
                            <label>Mobile Number</label>
                            <input class="form-control" placeholder="{{ __tr('Mobile Number') }}" type="text"
                                    name="mobile_number" value="{{ old('mobile_number') }}" required autofocus>
                            <h5><span>{{__tr("Mobile number should be with country code without 0 or +")}}</span></h5>
                        </div>
                        <!-- /mobile no -->
                        <!-- Email address -->
                        <div class="form-group">
                            <label>email</label>
                            <input class="form-control" placeholder="{{ __tr('Email') }}" type="email" name="email"
                                    value="{{ old('email') }}" required>
                        </div>
                        <!-- Password -->
                        <div class="form-group">
                            <label>password</label>
                            <input class="form-control" placeholder="{{ __tr('Password') }}" type="password"
                                    name="password" required>
                        </div>
                        <!-- Confirm Password -->
                        <div class="form-group">
                            <label>confirm password</label>
                            <input class="form-control" placeholder="{{ __tr('Confirm Password') }}" type="password"
                                    name="password_confirmation" required>
                        </div>
                        <!-- privacy policy -->
                        @if (getAppSettings('user_terms') or getAppSettings('vendor_terms') or getAppSettings('privacy_policy'))
                        <div class="row my-4">
                            <div class="col-12">
                                <div class="custom-control custom-control-alternative custom-checkbox">
                                    <input class="custom-control-input" name="terms_and_conditions" id="itemsAccept"
                                        type="checkbox">
                                    <label class="custom-control-label" for="itemsAccept">
                                        <span class="text-primary">{{ __tr('I agree with the') }}
                                            @if (getAppSettings('user_terms'))
                                            <a class="text-success" href="{{ route('app.terms_and_policies', [
                                                'contentName' => 'user_terms'
                                            ]) }}">{{ __tr('User Terms And Conditions') }}</a>,
                                            @endif
                                            @if (getAppSettings('vendor_terms'))
                                            <a class="text-success" href="{{ route('app.terms_and_policies', [
                                                'contentName' => 'vendor_terms'
                                            ]) }}">{{ __tr('Vendor Terms And Conditions') }}</a>,
                                            @endif
                                            @if (getAppSettings('privacy_policy'))
                                            <a class="text-success" href="{{ route('app.terms_and_policies', [
                                                'contentName' => 'privacy_policy'
                                            ]) }}">{{
                                                __tr('Privacy Policy')
                                                }}</a>
                                            @endif
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        @endif
                        <!-- create account action -->
                        <div class="text-center">
                            <center>
                                <button  type="submit" class="btn btn-success btn-lg btn-block mt-6  mb-5" style="background: linear-gradient(135deg, #41C6B5, #1771E6);"><strong>{{ __tr('Create Account') }}</strong></button>
                            </center>
                        </div>
                    </x-lw.form>
                </div>
                <!-- social login links -->
                @if(getAppSettings('allow_google_login'))
                <a href="