@extends('layouts.auth')

@section('main-content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-xl-12 col-lg-12 col-md-10">
            <div class="card o-hidden border-0 shadow-lg my-5">
                <div class="card-body p-0">
                    <div class="row">
                        <!-- Left Image -->
                        <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>

                        <!-- Right Form -->
                        <div class="col-lg-7">
                            <div class="p-5">
                                <div class="text-center mb-4">
                                    <h1 class="h4 text-gray-900">{{ __('Create Your Account') }}</h1>
                                    <p class="small text-muted">Please fill in your personal and company details.</p>
                                </div>

                                @if ($errors->any())
                                    <div class="alert alert-danger border-left-danger">
                                        <ul class="pl-4 my-2">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <form method="POST" action="{{ route('register') }}" class="user">
                                    @csrf

                                    {{-- PERSONAL INFO --}}
                                    <h6 class="font-weight-bold text-primary mb-3">Personal Information</h6>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <input type="text" class="form-control form-control-user"
                                                name="name" placeholder="First Name" value="{{ old('name') }}" required>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <input type="text" class="form-control form-control-user"
                                                name="last_name" placeholder="Last Name" value="{{ old('last_name') }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <input type="email" class="form-control form-control-user"
                                            name="email" placeholder="Email Address" value="{{ old('email') }}" required>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <input type="password" class="form-control form-control-user"
                                                name="password" placeholder="Password" required>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <input type="password" class="form-control form-control-user"
                                                name="password_confirmation" placeholder="Confirm Password" required>
                                        </div>
                                    </div>

                                    <hr>

                                    {{-- COMPANY INFO --}}
                                    <h6 class="font-weight-bold text-primary mb-3">Company Information</h6>
                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user"
                                            name="company_name" placeholder="Company Name" value="{{ old('company_name') }}" required>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <input type="text" class="form-control form-control-user"
                                                name="registration_no" placeholder="Registration No." value="{{ old('registration_no') }}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <input type="text" class="form-control form-control-user"
                                                name="company_email" placeholder="Company Email" value="{{ old('company_email') }}">
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <input type="text" class="form-control form-control-user"
                                                name="phone" placeholder="Phone Number" value="{{ old('phone') }}">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <input type="text" class="form-control form-control-user"
                                                name="website" placeholder="Website" value="{{ old('website') }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user"
                                            name="address" placeholder="Address" value="{{ old('address') }}">
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <input type="text" class="form-control form-control-user"
                                                name="city" placeholder="City" value="{{ old('city') }}">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <input type="text" class="form-control form-control-user"
                                                name="state" placeholder="State" value="{{ old('state') }}">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <input type="text" class="form-control form-control-user"
                                                name="postcode" placeholder="Postcode" value="{{ old('postcode') }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user"
                                            name="country" placeholder="Country" value="{{ old('country') }}">
                                    </div>

                                    <hr>

                                    <button type="submit" class="btn btn-primary btn-user btn-block">
                                        {{ __('Register Account') }}
                                    </button>
                                </form>

                                <div class="text-center mt-3">
                                    <a class="small" href="{{ route('login') }}">
                                        {{ __('Already have an account? Login!') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div> <!-- row -->
                </div> <!-- card-body -->
            </div> <!-- card -->
        </div>
    </div>
</div>
@endsection