@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 completed">
                                    <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 completed">
                                    <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 active">
                                    <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">Product Information</h2>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Top Products & Categories</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Types of Categories That You’re Dealing
                                            In</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Type and select your chemicals types...">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Top Products You Sell</label>
                                        <input type="text" class="form-control onboarding-input"
                                            placeholder="Type and select your most selling chemicals...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Safety Information and Guides</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <label class="form-check-label onboarding-label">
                                            Do you have safety information or guides available for the chemicals you offer?
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Are there any specific safety protocols
                                            or guidelines customers should be aware of when using your products?</label>
                                        <textarea name="" id="" cols="30" rows="5" class="form-control">Strat writing from here...</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Product Specifications</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">
                                            What are the typical specifications for
                                            the chemicals you offer, such as purity levels or concentration?
                                        </label>
                                        <textarea name="" id="" cols="30" rows="5" class="form-control">Strat writing from here...</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Applications and Uses</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">
                                            Provide information on the various applications or industries where your
                                            chemicals are commonly used?
                                        </label>
                                        <textarea name="" id="" cols="30" rows="5" class="form-control">Strat writing from here...</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Handling and Storage Recommendations:</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <label class="form-check-label onboarding-label">
                                            Do you have recommendations for the proper handling and storage of your chemical
                                            products?
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Regulatory Compliance</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <label class="form-check-label onboarding-label">
                                            Are your products compliant with relevant regulatory standards and requirements?
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <label class="form-check-label onboarding-label">
                                            Do you provide Safety Data Sheets (SDS) or other regulatory documentation for
                                            your products?
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Custom Formulations or Specialized Products</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <label class="form-check-label onboarding-label">
                                            Do you offer custom formulations or specialized products tailored to specific
                                            customer needs?
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Technical Support and Assistance</h5>
                        </div>
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="">
                                        <label class="form-check-label onboarding-label">
                                            Do you offer technical support or assistance to customers regarding the use of
                                            your products?
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-body px-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="d-flex justify-content-end">
                                        <a href="/registration/invite" class="d-inline-block btn-clear me-2"> <i
                                                class="bi bi-arrow-left me-1"></i>
                                            Back </a>
                                        <a href="/registration/documents-certifications"
                                            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