@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 completed">
                                    <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 active">
                                    <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 Documents & Certifications</h2>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title px-2 py-2">Business License or Registration Certificate</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="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Tax Identification Number</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Operating Agreement or Bylaws</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">ISO Certifications</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">GMP (Good Manufacturing Practices)
                                            Certification</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">REACH Compliance</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">OSHA (Occupational Safety and Health
                                            Administration) Compliance</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Hazardous Materials Handling
                                            Certifications</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">HACCP (Hazard Analysis and Critical
                                            Control Points) Certification</label>
                                        <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">Owner Documents</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">Government-issued ID
                                            <span class="text-muted">(Driving License or Passport)</span>
                                        </label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Social Security Number (SSN)</label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">Proof of Address</label>
                                        <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">Documents of Hooman Hamzeh </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">
                                            Employment Agreements or Contracts
                                        </label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">
                                            Government-issued ID
                                        </label>
                                        <input type="file" class="form-control onboarding-input">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label onboarding-label">
                                            Taxpayer Identification Numbers (TINs)
                                        </label>
                                        <input type="file" class="form-control onboarding-input">
                                    </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/product" class="d-inline-block btn-clear me-2"> <i
                                                class="bi bi-arrow-left me-1"></i>
                                            Back </a>
                                        <a data-bs-toggle="modal" data-bs-target="#success"
                                            class="d-inline-block btn-nextstep">Submit for Review <i
                                                class="bi bi-arrow-right ms-2"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="success" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="">
                        <div class="d-flex justify-content-center pt-4">
                            <img src="/assets/img/icons/onboarding-final.png" alt="img" style="width: 120px">
                        </div>
                        <div class="success-modal-body">
                            <h5 class="success-title">Your Application is in Review</h5>
                            <p class="success-subp">Thanks for choosing us. Our expert will review your application and
                                once you approve
                                we’ll notify you via Email or Phone Number.</p>
                        </div>
                        <div class="success-modal-footer">
                            <a class="btn-nextstep d-block">
                                Add your Products <i class="bi bi-arrow-right ms-2"></i>
                            </a>
                            <a href="" class="btn-link d-block text-center pt-3 text-decoration-none">Do it
                                Later</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
@endpush