@extends('layouts.public.app')

@section('content')
    <div class="greybg on-boarding">
        <div class="container py-4">
            <div class="row">
                <div class="col-lg-4">
                    <div class="sticky-lg-top">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title">Hello 👋, Mohammad Hamzeh</h5>
                                <p class="card-subtitle pt-2">Thanks for choosing us as your chemicals distribution partner.
                                    Complete the steps below to continue onboarding.</p>
                            </div>
                            <div class="card-body pb-0">
                                <div class="onboarding-item-container active">
                                    <div class="onboarding-item">
                                        <h5 class="onboarding-title">Business Details</h5>
                                        <p class="onboarding-subtitle">Provide details about you business and location.</p>
                                    </div>
                                    <div class="onboarding-step">
                                        <div class="onboarding-step-num">1</div>
                                    </div>
                                </div>
                                <div class="onboarding-item-container">
                                    <div class="onboarding-item">
                                        <h5 class="onboarding-title">Invite Team Members</h5>
                                        <p class="onboarding-subtitle">Invite your team to help you manage your chemical
                                            wholesale
                                            account.</p>
                                    </div>
                                    <div class="onboarding-step">
                                        <div class="onboarding-step-num">2</div>
                                    </div>
                                </div>
                                <div class="onboarding-item-container">
                                    <div class="onboarding-item">
                                        <h5 class="onboarding-title">Product Information</h5>
                                        <p class="onboarding-subtitle">Give us information about your products.</p>
                                    </div>
                                    <div class="onboarding-step">
                                        <div class="onboarding-step-num">3</div>
                                    </div>
                                </div>
                                <div class="onboarding-item-container">
                                    <div class="onboarding-item">
                                        <h5 class="onboarding-title">Supporting Documents & Certifications</h5>
                                        <p class="onboarding-subtitle">Describe us about your product, guidelines and safety
                                            features
                                            that help to reach more product visibility.</p>
                                    </div>
                                    <div class="onboarding-step">
                                        <div class="onboarding-step-num">4</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <h2 class="onboarding-section-title">Business Details</h2>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Company Details</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Company Name</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Your company name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Business Registration Number</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Your registration number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Legal Structure</label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Select your Legal structure</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Industry Sector</label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Select industry sector</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Year Founded</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Year Founded">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Annual Revenue
                                            <span>(Optionial)</span></label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Select annual revenue</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Number of Employees
                                            <span>(Optionial)</span></label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Select number of employees</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Headquarters & Facilities</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3 class="onboarding-formsec-title">Headquarters Address</h3>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Street Address</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Street Address">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Address #2</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Address #2">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">City</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter City">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">State</label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Select state</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">ZIP Code / Postal Code</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter ZIP/Postal code">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Country</label>
                                        <select name="" class="form-control  onboarding-input form-select">
                                            <option value="">Select country</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <h3 class="onboarding-formsec-title mt-3">Facility Details #1</h3>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Facility Name</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter facility name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Facility Address</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter facility address">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Facility Certifications</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter Facility Certifications">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Facility Size</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter facility size">
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="" class="add-facility-btn"><i class="bi bi-plus"></i> Add Facility</a>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Business Owner Details</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Full Name</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Owner full name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Position</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Select position">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Email</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Phone Number</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Enter phone number">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Company Contact Information</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Company Email</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Owner full name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Company Phone Number</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Company phone number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">FAX Number</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="FAX Number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Website</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Website">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <p class="small bg-light p-2">
                                        <span class="text-danger">* </span>
                                        You can add multiple businesses once your
                                        account is approve with the primary business.
                                    </p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="d-flex justify-content-end mt-3">
                                        <a href="" class="d-inline-block btn-clear me-2"> <i class="bi bi-x"></i>
                                            Clear All Fields</a>
                                        <a href="/registration/invite" class="d-inline-block btn-nextstep">Next Step <i
                                                class="bi bi-arrow-right ms-2"></i></a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
@endpush