@include('host.header', ['hostUser' => $hostUser, 'host' => $host])
 

 <div class="page-body">
           <div class="container-fluid">
             <div class="page-title">
               <div class="row">
                 <div class="col-6">
                   <h4>Dashboard</h4>
                 </div>
                 <div class="col-6"> 
                   <ol class="breadcrumb">
                     <li class="breadcrumb-item"><a href="#">                                       
                        
                       <svg xmlns="http://www.w3.org/2000/svg" id="stroke-home" viewBox="0 0 18 15" fill="none">
                         <path d="M9.00771 0.500013L9.00772 0.500012L9.00818 0.500003C9.01487 0.499853 9.04121 0.499261 9.09973 0.539787L17.4284 7.34735L17.4283 7.34749L17.4389 7.35568C17.4468 7.36185 17.4845 7.40423 17.4967 7.50045C17.5022 7.54334 17.5003 7.58379 17.4939 7.61597C17.4874 7.64922 17.4785 7.66175 17.4799 7.65976L17.4798 7.66003C17.4737 7.66867 17.4495 7.69219 17.3929 7.69683C17.335 7.70157 17.2925 7.68172 17.274 7.66471L17.2632 7.65477L17.2518 7.64548L9.31503 1.16099L8.99868 0.902524L8.68233 1.16099L0.745525 7.64548L0.734221 7.65471L0.723475 7.66459C0.706153 7.68052 0.667477 7.69907 0.611153 7.69413C0.556187 7.6893 0.522676 7.66552 0.508269 7.64716C0.507765 7.64592 0.489798 7.6134 0.50752 7.52553C0.524894 7.43939 0.56562 7.36407 0.598067 7.32357L8.89008 0.545958C8.95425 0.505697 8.99325 0.500274 9.00771 0.500013ZM2.9133 7.97121L3.23034 7.71133V13.6364V14.1364H3.73034H6.58403H7.08403V13.6364V11.591C7.08403 10.4775 7.96478 9.59101 8.99868 9.59101C10.0326 9.59101 10.9133 10.4775 10.9133 11.591V13.6364V14.1364H11.4133H14.267H14.767V13.6364V7.71114L15.0841 7.97102V14.3179C15.084 14.4353 14.9966 14.5 14.9255 14.5H10.7548C10.6834 14.5 10.5963 14.4352 10.5963 14.3182V11.591C10.5963 10.69 9.91043 9.95457 8.99868 9.95457C8.08684 9.95457 7.40106 10.6901 7.40106 11.591V14.3182C7.40106 14.4351 7.31383 14.5 7.24255 14.5H3.07182C3.00027 14.5 2.9133 14.4352 2.9133 14.3184V7.97121Z"></path>
                     </svg></a></li>
                     <li class="breadcrumb-item">Visitors Dubai</li>
                     <li class="breadcrumb-item active">Dashboard</li>
                   </ol>
                 </div>
               </div>
             </div>
           </div>
           <!-- Container-fluid starts-->
           <div class="container-fluid"> 
             <div class="row size-column">
               <div class="col-xl-8 col-md-12 box-col-12">
                 <div class="card">
                 <div class="card-header sales-chart card-no-border">
                    <h3>Welcome, {{ $hostUser->name }}!</h3>
                    <p><b> Host Dashboard - {{ $hostUser->company_name }} </b></p>
                </div>
                
                        <div class="card">
                            <div class="card-header sales-chart card-no-border">
                                <h5>Account Information</h5>
                            </div>
                            <div class="card-body">
                                <p><strong>Name:</strong> {{ $hostUser->name }}</p>
                                <p><strong>Email:</strong> {{ $hostUser->email }}</p>
                                <p><strong>Phone:</strong> {{ $hostUser->phone }}</p>
                                <p><strong>Company:</strong> {{ $hostUser->company_name }}</p>
                                <p><strong>Address:</strong> {{ $hostUser->address }}</p>
                                <p><strong>Role:</strong> <span class="badge badge-success">{{ ucfirst($hostUser->role) }}</span></p>
                            </div>
                        </div>

        

                 </div>
               </div>



               <div class="col-xl-4 col-md-6 box-col-none">
                 <div class="row"> 
                   <div class="col-md-12 col-sm-6"> 
                     <div class="card boost-up-card overflow-hidden">
                       <div class="p-4">
                         <div class="boostup-name row">
                           <h6 class="text-white f-28 f-w-700 mb-2 z-1 ">Boost up your sale</h6>
                           <p class="text-white f-14 f-w-500 col-9 line-clamp">
                             by upgrading your account you can increase your sale by 30% more.</p>
                         </div>
                         <div class="img-boostup"><img class="img-boostup-img-1" src="{{ asset('assets/images/boostup1.png') }}" alt="boostup">
                           <img class="img-boostup-img-2" src="{{ asset('assets/images/boostup2.png') }}" alt="boostup"></div>
                         <div class="btn-showcase text-start"> <a href="#">
                             <button class="btn btn-pill btn-outline-light-2x b-r-8" type="button">Upgrade Now</button></a></div>
                       </div>
                     </div>
                   </div>
                   <div class="col-md-12 col-sm-6">
                     <div class="card"> 
                       <div class="card-header card-no-border total-revenue pb-0">
                         <h4>Deliveries</h4>
                         <div class="icon-menu-header">
                           <svg xmlns="http://www.w3.org/2000/svg" id="more-horizontal" viewBox="0 0 24 24" fill="none">
                             <path d="M4 13C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13Z" stroke="#051A1A" stroke-width="2"></path>
                             <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#051A1A" stroke-width="2"></path>
                             <path d="M20 13C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13Z" stroke="#051A1A" stroke-width="2"></path>
                         </svg>                        
                         </div>
                       </div>
                       <div class="card-body pt-0">
                         <div class="table-responsive custom-scrollbar deliveries-percentage">
                           <table class="percentage-data w-100">
                             <thead> 
                               <tr> 
                                 <th class="f-light f-12 f-w-500" scope="col">Particular</th>
                                 <th class="f-light f-12 f-w-500" scope="col">Percentage</th>
                                 <th class="f-light f-12 f-w-500 text-end" scope="col">Total Amount</th>
                               </tr>
                             </thead>
                             <tbody> 
                               <tr>
                                 <td class="f-w-400 f-10"> <a class="line-clamp" href="#">On Time Delivery</a></td>
                                 <td> 
                                   <div class="progress-value d-flex gap-2 align-items-center">
                                     <div class="progress">
                                       <div class="progress-bar bg-primary" role="progressbar" style="width: 75%  " aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                     </div><span>80%</span>
                                   </div>
                                 </td>
                                 <td class="f-w-500 f-10 text-end">$45,452.23</td>
                               </tr>
                               <tr>
                                 <td class="f-w-400 f-10"> <a class="line-clamp" href="#">Delayed Delivery</a></td>
                                 <td>
                                   <div class="progress-value d-flex gap-2 align-items-center">
                                     <div class="progress">
                                       <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                     </div><span>15% </span>
                                   </div>
                                 </td>
                                 <td class="f-w-500 f-10 text-end">$15,256.23</td>
                               </tr>
                             </tbody>
                           </table>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
               
               <div class="col-xxl-4 col-xl-6 box-col-6"> 
                 <div class="card"> 
                   <div class="card-header card-no-border total-revenue pb-0">
                     <h4>User Visits by Day </h4>
                     <div class="sales-chart-dropdown">
                       <ul class="balance-data"> 
                         <li> <span class="circle bg-primary"></span><span class="f-light ms-1">Chrome </span></li>
                         <li><span class="circle bg-primary-1"> </span><span class="f-light ms-1">Firefox </span></li>
                         <li> <span class="circle bg-primary-2"> </span><span class="f-light ms-1">Safari</span></li>
                       </ul>
                     </div>
                   </div>
                   <div class="card-body pt-0 pb-0">
                     <div class="user-visitsCharts"> 
                       <div id="visitsCharts"> </div>
                     </div>
                   </div>
                   <div class="card-footer"> 
                     <div class="common-space"> 
                       <div><a class="f-w-600 f-14 " href="#">Most Visited Day</a><span class="f-light f-w-500 f-14 d-block">Total 59.6k visits on Sunday </span></div>
                       <div class="visited-dropdown"> 
                        
 
                         <svg class="mb-0" xmlns="http://www.w3.org/2000/svg" id="arrow-down" viewBox="0 0 28 28" fill="none">
                           <path d="M10.4416 4.75999L18.0483 12.3667C18.9467 13.265 18.9467 14.735 18.0483 15.6333L10.4417 23.24" stroke="#051A1A" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                       </svg>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="col-xxl-5 col-xl-6 box-col-6">
                 <div class="card">
                   <div class="card-header card-no-border total-revenue"> 
                     <h4>Latest Transaction</h4><a href="#">View All</a>
                   </div>
                   <div class="card-body pt-0"> 
                     <div class="table-order table-responsive custom-scrollbar">
                       <table class=" w-100 tranaction-table">
                         <thead> 
                           <tr> 
                             <th>Name</th>
                             <th>Date</th>
                             <th>Amount</th>
                             <th>Status</th>
                           </tr>
                         </thead>
                         <tbody>
                           <tr>
                             <td> 
                               <div class="product-name"><a class=" f-14 f-w-500" href="#">Darrell Steward</a></div>
                             </td>
                             <td class="f-14 f-w-500">16 Nov, 2024</td>
                             <td class="f-14 f-w-500">$456.23</td>
                             <td>
                               <div class="txt-primary"><span class="f-w-500 f-13">Complete</span></div>
                             </td>
                           </tr>
                           <tr>
                             <td> 
                               <div class="product-name"><a class=" f-14 f-w-500" href="#">Floyd Miles</a></div>
                             </td>
                             <td class="f-14 f-w-500">22 Jan, 2024</td>
                             <td class="f-14 f-w-500">$550.73</td>
                             <td>
                               <div class="txt-secondary"><span class="f-w-500 f-13">Failed</span></div>
                             </td>
                           </tr>
                           <tr>
                             <td> 
                               <div class="product-name"><a class=" f-14 f-w-500" href="#">Ralph Edwards</a></div>
                             </td>
                             <td class="f-14 f-w-500">31 Dec, 2024</td>
                             <td class="f-14 f-w-500">$785.26</td>
                             <td>
                               <div class="txt-primary"><span class="f-w-500 f-13">Complete</span></div>
                             </td>
                           </tr>
                           <tr>
                             <td> 
                               <div class="product-name"><a class=" f-14 f-w-500" href="#">Jerome Bell</a></div>
                             </td>
                             <td class="f-14 f-w-500">16 Nov, 2024</td>
                             <td class="f-14 f-w-500">$458.14</td>
                             <td>
                               <div class="txt-secondary"><span class="f-w-500 f-13">Failed</span></div>
                             </td>
                           </tr>
                           <tr>
                             <td> 
                               <div class="product-name"><a class=" f-14 f-w-500" href="#">Theresa Webb</a></div>
                             </td>
                             <td class="f-14 f-w-500">16 Feb, 2024</td>
                             <td class="f-14 f-w-500">$263.24</td>
                             <td>
                               <div class="txt-primary"><span class="f-w-500 f-13">Complete</span></div>
                             </td>
                           </tr>
                           <tr>
                             <td> 
                               <div class="product-name"><a class=" f-14 f-w-500" href="#">Courtney Henry</a></div>
                             </td>
                             <td class="f-14 f-w-500">01 Nov, 2024</td>
                             <td class="f-14 f-w-500">$785.14</td>
                             <td>
                               <div class="txt-primary"><span class="f-w-500 f-13">Complete</span></div>
                             </td>
                           </tr>
                         </tbody>
                       </table>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="col-xxl-3 col-xl-6 box-col-6">
                 <div class="card">
                   <div class="card-header card-no-border total-revenue"> 
                     <h4>Best Selling Product   </h4>
                   </div>
                   <div class="card-body pt-0">
                     <div class="selling-product">
                       <div class="apache-cotainer" id="echart-polar"> </div>
                       <div class="sales-chart-dropdown">
                         <ul class="balance-data"> 
                           <li> <span class="circle bg-primary"></span><span class="f-light ms-1">Digital</span></li>
                           <li><span class="circle bg-warning"></span><span class="f-light ms-1">Clothes</span></li>
                           <li> <span class="circle bg-secondary"></span><span class="f-light ms-1">Electric</span></li>
                           <li> <span class="circle bg-light"> </span><span class="f-light ms-1">Footwear</span></li>
                         </ul>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- Container-fluid Ends-->
         </div>
     
         @include('host.footer')