@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 active">
                                    <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">Invite Team Members</h2>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Team Access</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="Enter full name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Position</label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Select position</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Team Member Email</label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Enter mail</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Access Type</label>
                                        <select name="" class="form-control form-select onboarding-input">
                                            <option value="">Enter mail</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 mt-4">
                                    <div class="mb-3 mt-1">
                                        <a href="" class="btn-nextstep d-block">Invite Now</a>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3 class="onboarding-formsec-title mt-3 mb-0 border-0">Invited Team Members</h3>
                                    <div class="table-responsive">
                                        <table class="table table-type3 border">
                                            <thead class="bg-white">
                                                <tr>
                                                    <td>Members Email</td>
                                                    <td>Access Type</td>
                                                    <td>Invited On</td>
                                                    <td>status</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>hooman@developingnow.com</td>
                                                    <td>Full Access</td>
                                                    <td>May 10, 2024 at 11:00 PM</td>
                                                    <td>Pending</td>
                                                </tr>
                                                <tr>
                                                    <td>bal@developingnow.com</td>
                                                    <td>Viewer</td>
                                                    <td>May 10, 2024 at 11:02 PM</td>
                                                    <td>Accepted</td>
                                                </tr>
                                                <tr>
                                                    <td>jashpal@developingnow.com</td>
                                                    <td>Viewer</td>
                                                    <td>May 10, 2024 at 11:04 PM</td>
                                                    <td>Accepted</td>
                                                </tr>
                                                <tr>
                                                    <td>harish@developingnow.com</td>
                                                    <td>Viewer</td>
                                                    <td>May 10, 2024 at 11:06 PM</td>
                                                    <td>Accepted</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </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="/registration" class="d-inline-block btn-clear me-2"> <i
                                                class="bi bi-arrow-left me-1"></i>
                                            Back </a>
                                        <a href="/registration/product" 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