<?php include 'header.php'; ?>
        <!-- Start::app-content -->
       <div class="main-content app-content">
            <div class="container-fluid page-container main-body-container">

                <!-- Start::page-header -->
                <div class="page-header-breadcrumb mb-3">
                    <div class="d-flex align-center justify-content-between flex-wrap">
                        <h1 class="page-title fw-medium fs-18 mb-0">Add Role</h1>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Admin User Role</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Add Role</li>
                        </ol>
                    </div>
                </div>
                <!-- End::page-header -->

                <!-- Start::row-1 -->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card custom-card">
                            <div class="card-header justify-content-between">
                                <div class="card-title">
                                    Add Role
                                </div>
                                <div class="d-flex flex-wrap gap-2">
                                    <button class="btn btn-primary btn-wave" data-bs-toggle="modal" data-bs-target="#create-contact"><i class="ri-add-line me-1 fw-medium align-middle"></i>Add Company</button>
                                    <button class="btn btn-success btn-wave">Export As CSV</button>
                                    <div class="dropdown">
                                        <a href="javascript:void(0);" class="btn btn-light btn-wave" data-bs-toggle="dropdown" aria-expanded="false">
                                            Sort By<i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a class="dropdown-item" href="javascript:void(0);">Newest</a></li>
                                            <li><a class="dropdown-item" href="javascript:void(0);">Date Added</a></li>
                                            <li><a class="dropdown-item" href="javascript:void(0);">A - Z</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table text-nowrap">
                                        <thead>
                                            <tr>
                                                <th scope="col">
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
                                                </th>
                                                <th scope="col">Company Name</th>
                                                <th scope="col">Email</th>
                                                <th scope="col">Phone</th>
                                                <th scope="col">Company Size</th>
                                                <th scope="col">Industry</th>
                                                <th scope="col">Key Contact</th>
                                                <th scope="col">Total Deals</th>
                                                <th scope="col">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel1" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/1.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Tech Innovations</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>contact@techinnovations.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(123) 456-7890</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-primary-transparent">200+ employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Technology
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/14.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">John Doe</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    150
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel2" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/3.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Creative Solutions</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>info@creativesolutions.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(987) 654-3210</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-danger-transparent">50-100 employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Marketing
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/2.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Jane Smith</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    75
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel33" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/4.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Future Enterprises</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>sales@futureenterprises.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(555) 123-4567</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-success-transparent">(555) 123-4567</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    E-Commerce
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/4.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Emily Johnson</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    120
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel3" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/5.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Innovate Global</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>hello@innovateglobal.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(333) 777-8888</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-light text-default">500+ employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Manufacturing
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/11.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Michael Brown</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    200
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel4" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/6.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">DesignWorks</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>contact@designworks.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(222) 333-4444</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-pink-transparent">20-50 employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Design
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/8.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Sara White</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    35
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel5" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/7.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">GreenTech</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>support@greentech.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(444) 666-8888</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-danger-transparent">50-100 employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Renewable Energy
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/13.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">David Lee</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    80
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel6" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/8.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Tech Pros</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>info@techpros.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(888) 999-0000</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-primary-transparent">100-500 employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    IT Services
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/5.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Olivia Green</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    65
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel7" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/9.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Innovators Inc</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>contact@innovatorsinc.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(777) 888-9999</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-warning-transparent">200+ employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Consulting
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/9.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Liam Turner</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    110
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel8" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/10.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Future Vision</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>info@futurevision.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(555) 111-2222</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-success-transparent">10-20 employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Media
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/1.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Mia Martinez</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    50
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="crm-contact">
                                                <td>
                                                    <input class="form-check-input" type="checkbox" id="checkboxNoLabel9" value="" aria-label="...">
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-md bg-light avatar-rounded">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/2.png" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <a  data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                            role="button" aria-controls="offcanvasExample">Green Future</a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block mb-1"><i class="ri-mail-line me-2 align-middle fs-14 text-muted d-inline-block"></i>support@greenfuture.com</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="d-block"><i class="ri-phone-line me-2 align-middle fs-14 text-muted d-inline-block"></i>(444) 222-3333</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                        <span class="badge bg-light text-default">100-500 employees</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    Sustainable Tech
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="lh-1">
                                                            <span class="avatar avatar-rounded avatar-sm">
                                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/faces/10.jpg" alt="">
                                                            </span>
                                                        </div>
                                                        <div>
                                                            <span class="d-block fw-medium">Noah Harris</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    130
                                                </td>
                                                <td>
                                                    <div class="btn-list">
                                                        <a data-bs-toggle="offcanvas" href="#offcanvasExample"
                                                        role="button" aria-controls="offcanvasExample" class="btn btn-sm btn-warning-light btn-icon"><i class="ri-eye-line"></i></a>
                                                        <button class="btn btn-sm btn-info-light btn-icon"><i class="ri-pencil-line"></i></button>
                                                        <button class="btn btn-sm btn-danger-light btn-icon contact-delete"><i class="ri-delete-bin-line"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer border-top-0">
                                <div class="d-flex align-items-center">
                                    <div>
                                        Showing 10 Entries <i class="bi bi-arrow-right ms-2 fw-medium"></i>
                                    </div>
                                    <div class="ms-auto">
                                        <nav aria-label="Page navigation" class="pagination-style-4">
                                            <ul class="pagination mb-0">
                                                <li class="page-item disabled">
                                                    <a class="page-link" href="javascript:void(0);">
                                                        Prev
                                                    </a>
                                                </li>
                                                <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
                                                <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                                                <li class="page-item">
                                                    <a class="page-link text-primary" href="javascript:void(0);">
                                                        next
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End::row-1 -->

                <!-- Start:: Company Details Offcanvas -->
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample"
                aria-labelledby="offcanvasExample">
                    <div class="offcanvas-body p-0">
                        <div class="d-sm-flex align-items-top p-4 border-bottom border-block-end-dashed main-profile-cover">
                            <div>
                                <span class="avatar avatar-xxl avatar-rounded me-3 bg-light p-2">
                                    <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/1.png" alt="">
                                </span>
                            </div>
                            <div class="flex-fill main-profile-info">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h6 class="fw-medium mb-1">Spruko Technologies</h6>
                                    <button type="button" class="btn-close invert-1" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                </div>
                                <p class="mb-1 text-muted op-7">Telecommunications</p>
                                <p class="fs-12 mb-4 op-5">  
                                    <span class="me-3"><i class="ri-building-line me-1 align-middle"></i>Georgia</span> 
                                    <span class="d-inline-flex align-items-center"><i class="ri-map-pin-line me-1 align-middle"></i>Washington D.C</span> 
                                </p>
                                <div class="d-flex mb-0">
                                    <div class="me-4">
                                        <p class="fw-medium fs-20 text-shadow mb-0">113</p>
                                        <p class="mb-0 fs-11 op-5">Deals</p>
                                    </div>
                                    <div class="me-4">
                                        <p class="fw-medium fs-20 text-shadow mb-0">$12.2k</p>
                                        <p class="mb-0 fs-11 op-5">Contributions</p>
                                    </div>
                                    <div class="me-4">
                                        <p class="fw-medium fs-20 text-shadow mb-0">$10.67k</p>
                                        <p class="mb-0 fs-11 op-5">Comitted</p>
                                    </div>
                                </div>
                            </div>
                        </div>  
                        <div class="p-4 border-bottom border-block-end-dashed">
                            <div class="mb-0">
                                <p class="fs-15 mb-2 fw-medium">Professional Bio :</p>
                                <p class="text-muted op-8 mb-0">
                                    <b class="text-default">Spruko</b> Technologies is a leading technology company specializing in innovative software solutions for businesses worldwide. With a strong focus on cutting-edge technologies and a team of skilled professionals.
                                </p>
                            </div>   
                        </div>  
                        <div class="p-4 border-bottom border-block-end-dashed">
                            <p class="fs-14 mb-2 me-4 fw-medium">Contact Information :</p>
                            <div class="">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="me-2">
                                        <span class="avatar avatar-sm avatar-rounded bg-light text-muted">
                                            <i class="ri-mail-line align-middle fs-14"></i>
                                        </span>
                                    </div>
                                    <div>
                                        spruko2981@gmail.com
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-2">
                                    <div class="me-2">
                                        <span class="avatar avatar-sm avatar-rounded bg-light text-muted">
                                            <i class="ri-phone-line align-middle fs-14"></i>
                                        </span>
                                    </div>
                                    <div>
                                        1678-28993-223
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-0">
                                    <div class="me-2">
                                        <span class="avatar avatar-sm avatar-rounded bg-light text-muted">
                                            <i class="ri-map-pin-line align-middle fs-14"></i>
                                        </span>
                                    </div>
                                    <div>
                                        MIG-1-11, Monroe Street, Georgetown, Washington D.C, USA,20071
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center flex-wrap gap-4">
                            <p class="fs-14 mb-0 fw-medium">Social Networks :</p>
                            <div class="btn-list mb-0">
                                <button class="btn btn-sm btn-icon btn-primary-light btn-wave waves-effect waves-light mb-0">
                                    <i class="ri-facebook-line fw-medium"></i>
                                </button>
                                <button class="btn btn-sm btn-icon btn-secondary-light btn-wave waves-effect waves-light mb-0">
                                    <i class="ri-twitter-x-line fw-medium"></i>
                                </button>
                                <button class="btn btn-sm btn-icon btn-warning-light btn-wave waves-effect waves-light mb-0">
                                    <i class="ri-instagram-line fw-medium"></i>
                                </button>
                                <button class="btn btn-sm btn-icon btn-success-light btn-wave waves-effect waves-light mb-0">
                                    <i class="ri-github-line fw-medium"></i>
                                </button>
                                <button class="btn btn-sm btn-icon btn-danger-light btn-wave waves-effect waves-light mb-0">
                                    <i class="ri-youtube-line fw-medium"></i>
                                </button>
                            </div>
                        </div>
                       
                    </div>
                </div>
                <!-- End:: Company Details Offcanvas -->

                <!-- Start:: Add Company -->
                <div class="modal fade" id="create-contact" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title">Add Role</h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body px-4">
                                <div class="row gy-3">
                                    <div class="col-xl-12">
                                        <div class="mb-0 text-center">
                                            <span class="avatar avatar-xxl avatar-rounded p-2 bg-light">
                                                <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/company-logos/11.png" alt="" id="profile-img">
                                                <span class="badge rounded-pill bg-primary avatar-badge">
                                                    <input type="file" name="photo" class="position-absolute w-100 h-100 op-0" id="profile-change">
                                                    <i class="fe fe-camera"></i>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <label for="company-name" class="form-label">Add Role Name</label>
                                        <input type="text" class="form-control" id="company-name" placeholder="Contact Name">
                                    </div>
                                    <div class="col-xl-6">
                                        <label for="company-lead-score" class="form-label">Total Rights</label>
                                        <input type="number" class="form-control" id="company-lead-score" placeholder="Total Deals">
                                    </div>
                                    <div class="col-xl-12">
                                        <label for="company-mail" class="form-label">Email</label>
                                        <input type="email" class="form-control" id="company-mail" placeholder="Enter Email">
                                    </div>
                            
                                    <div class="col-xl-12">
                                        <label class="form-label">Select Role Name</label>
                                        <select class="form-control" data-trigger id="choices-single-default1"  name="choices-multiple-remove-button2">
                                            <option value="">Select Insustry</option>
                                            <option value="Choice 1">Information Technology</option>
                                            <option value="Choice 2">Telecommunications</option>
                                            <option value="Choice 3">Logistics</option>
                                            <option value="Choice 4">Professional Services</option>
                                            <option value="Choice 5">Education</option>
                                            <option value="Choice 6">Education</option>
                                            <option value="Choice 7">Manufacturing</option>
                                            <option value="Choice 8">Healthcare</option>
                                        </select>
                                    </div>
                           
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light"
                                    data-bs-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-primary">Create Contact</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End:: Add Company -->

            </div>
        </div>
        <!-- End::app-content -->
<?php include 'footer.php'; ?>