customerQuiz.blade.php (Before) customerQuiz.blade.php (After)
<html> <html>
   
<head> <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="viewport" content="width=device-width, initial-scale=1">
   
 <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css" />  <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css" />
   <link rel="stylesheet" href="{{ URL::asset('css/custom.css') }}" />  
   
 <style>  <style>
   .Polaris-DataTable__Cell{    .Polaris-DataTable__Cell{
     white-space: normal;      white-space: normal;
   }    }
   
   .Polaris-DataTable__Table {    .Polaris-DataTable__Table {
     table-layout: fixed;      table-layout: fixed;
   }    }
   
   .Polaris-DataTable__Cell--numeric {    .Polaris-DataTable__Cell--numeric {
     text-align: left;      text-align: left;
   }    }
   
   .td {    .td {
     word-break: break-word      word-break: break-word
   }    }
   
   .mainDiv {    .mainDiv {
       max-width: 159.8rem;        max-width: 159.8rem;
   }    }
   
     .Polaris-DataTable__Cell--verticalAlignTop {  
         vertical-align: middle !important;  
     }  
   
     .progress-circle {  
       top: 0;  
     }  
   
 </style>  </style>
</head> </head>
   
<body> <body>
   
 <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">  <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
   <div class="Polaris-Page mainDiv">    <div class="Polaris-Page mainDiv">
     <div class="Polaris-Page-Header">      <div class="Polaris-Page-Header">
       <div class="Polaris-Page-Header__MainContent">        <div class="Polaris-Page-Header__MainContent">
         <div class="Polaris-Page-Header__TitleActionMenuWrapper">          <div class="Polaris-Page-Header__TitleActionMenuWrapper">
           <div>            <div>
             <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">              <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
               <div class="Polaris-Header-Title">                <div class="Polaris-Header-Title">
                 <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Quiz Details</h1>                  <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Quiz Details</h1>
               </div>                </div>
             </div>              </div>
           </div>            </div>
         </div>          </div>
       </div>        </div>
     </div>      </div>
     <div class="Polaris-Page__Content">      <div class="Polaris-Page__Content">
       <div class="Polaris-Card">        <div class="Polaris-Card">
         <div class="">          <div class="">
   
           <div class="Polaris-DataTable__Navigation">            <div class="Polaris-DataTable__Navigation">
             <button type="button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly" disabled="" aria-label="Scroll table left one column">              <button type="button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly" disabled="" aria-label="Scroll table left one column">
               <span class="Polaris-Button__Content">                <span class="Polaris-Button__Content">
                 <span class="Polaris-Button__Icon">                  <span class="Polaris-Button__Icon">
                   <span class="Polaris-Icon">                    <span class="Polaris-Icon">
                     <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">                      <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                       <path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16"                         <path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" 
                         fill-rule="evenodd">                          fill-rule="evenodd">
                       </path>                        </path>
                     </svg>                      </svg>
                   </span>                    </span>
                 </span>                  </span>
               </span>                </span>
             </button>              </button>
             <button type="button" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table right one column">              <button type="button" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table right one column">
               <span class="Polaris-Button__Content">                <span class="Polaris-Button__Content">
                 <span class="Polaris-Button__Icon">                  <span class="Polaris-Button__Icon">
                   <span class="Polaris-Icon">                    <span class="Polaris-Icon">
                     <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">                      <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                       <path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16"                         <path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16" 
                         fill-rule="evenodd">                          fill-rule="evenodd">
                       </path>                        </path>
                     </svg>                      </svg>
                   </span>                    </span>
                 </span>                  </span>
               </span>                </span>
             </button>              </button>
           </div>            </div>
   
           <div class="Polaris-DataTable">            <div class="Polaris-DataTable">
             <div class="Polaris-DataTable__ScrollContainer">              <div class="Polaris-DataTable__ScrollContainer">
               <table class="Polaris-DataTable__Table">                <table class="Polaris-DataTable__Table">
                 <thead>                  <thead>
                   <tr>                    <tr>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" 
                       scope="col"><b>Customer Name</b></th>                        scope="col"><b>Customer Name</b></th>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" 
                       scope="col"><b>Email</b></th>                        scope="col"><b>Email</b></th>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" 
                       scope="col"><b>Quizzes Taken</b></th>                        scope="col"><b>Quizzes Taken</b></th>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" 
                       scope="col"><b>Quiz Date</b></th>                        scope="col"><b>Quiz Date</b></th>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" 
                       scope="col"><b>Status</b></th>                        scope="col"><b>Status</b></th>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" 
                         scope="col"><b>Complete (%)</b></th>  
                       <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"  
                       scope="col"><b></b></th>                        scope="col"><b></b></th>
                   </tr>                    </tr>
                 </thead>                  </thead>
                 <tbody>                  <tbody>
                   <?php                    <?php
                 if($quizCount == 1) { ?>                   if($quizCount == 1) { ?> 
                   <tr class="Polaris-DataTable__TableRow">                    <tr class="Polaris-DataTable__TableRow">
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo $customerName ?>                         <?php echo $customerName ?> 
                       </td>                        </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">
                       <?php echo $email ?>                         <?php echo $email ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo $quizCount ?>                         <?php echo $quizCount ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo date("Y-m-d", strtotime($quizDetails[key($quizDetails)][0]->created_at)) ?>                         <?php echo date("Y-m-d", strtotime($quizDetails[key($quizDetails)][0]->created_at)) ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo ($quizDetails[key($quizDetails)][0]->isrecommendation) == 'Yes' ? "Complete" : "Incomplete"  ?>                         <?php echo ($quizDetails[key($quizDetails)][0]->isrecommendation) == 'Yes' ? "Complete" : "Incomplete"  ?> 
                     </td>                      </td>
                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"  
                         scope="row">  
   
                         <?php if($quizDetails[key($quizDetails)][0]->isrecommendation == 'Yes') { ?>  
                           <!-- <p class="p-completion green"> <?php // echo "100"; ?> </p> -->  
                           <div class="progress-circle over50 green p100">  
                                 <span> 100% </span>  
                                 <div class="left-half-clipper">  
                                   <div class="first50-bar"></div>  
                                   <div class="value-bar"></div>  
                                 </div>  
                               </div>  
                         <?php } else {    
   
                               if( (count($quizDetails[key($quizDetails)])/50)*100  <= 49) { ?>  
                                     <!-- <p class="p-completion red"> <?php echo (count($quizDetails[key($quizDetails)])/50)*100 ?> </p> -->  
                                     <div class="progress-circle red p{{(count($quizDetails[key($quizDetails)])/50)*100}}">  
                                       <span> <?php echo (count($quizDetails[key($quizDetails)])/50)*100 ?>% </span>  
                                       <div class="left-half-clipper">  
                                         <div class="first50-bar"></div>  
                                         <div class="value-bar"></div>  
                                       </div>  
                                     </div>  
                           <?php }  
   
                               if( (count($quizDetails[key($quizDetails)])/50)*100  >= 50 && (count($quizDetails[key($quizDetails)])/50)*100 <= 89) { ?>  
   
                                   <!-- <p class="p-completion orange"> <?php echo (count($quizDetails[key($quizDetails)])/50)*100 ?> </p> -->  
                                   <div class="progress-circle over50 orange p{{(count($quizDetails[key($quizDetails)])/50)*100}}">  
                                     <span> <?php echo (count($quizDetails[key($quizDetails)])/50)*100 ?>% </span>  
                                     <div class="left-half-clipper">  
                                       <div class="first50-bar"></div>  
                                       <div class="value-bar"></div>  
                                     </div>  
                                   </div>  
                          <?php }  
   
                               if( (count($quizDetails[key($quizDetails)])/50)*100  >= 90 ) { ?>  
   
                                 <!-- <p class="p-completion green"> <?php echo (count($quizDetails[key($quizDetails)])/50)*100 ?> </p> -->  
                                 <div class="progress-circle over50 green p{{(count($quizDetails[key($quizDetails)])/50)*100}}">  
                                   <span> <?php echo (count($quizDetails[key($quizDetails)])/50)*100 ?>% </span>  
                                   <div class="left-half-clipper">  
                                     <div class="first50-bar"></div>  
                                     <div class="value-bar"></div>  
                                   </div>  
                                 </div>  
                     
                               <?php } }?>  
   
                       </td>  
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">
                       <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
                           <a class="Polaris-Link btn-quizView" href="quizData?email={{$email}}&sessionId={{key($quizDetails)}}" data-polaris-unstyled="true" data-sessionId="{{key($quizDetails)}}" data-email="{{$email}}" >                            <a class="Polaris-Link btn-quizView" href="quizData?email={{$email}}&sessionId={{key($quizDetails)}}" data-polaris-unstyled="true" data-sessionId="{{key($quizDetails)}}" data-email="{{$email}}" >
                               View Details                                View Details
                           </a>                            </a>
                         </div>                          </div>
                     </td>                      </td>
                   </tr>                    </tr>
                   <?php }                    <?php }
                 elseif ($quizCount > 1) {                  elseif ($quizCount > 1) {
                   $i = 0;                    $i = 0;
                   foreach ($quizDetails as $sessionID => $quizContent) {                    foreach ($quizDetails as $sessionID => $quizContent) {
                     if ($i == 0) { ?>                       if ($i == 0) { ?> 
                   <tr class="Polaris-DataTable__TableRow">                    <tr class="Polaris-DataTable__TableRow">
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo $customerName ?>                         <?php echo $customerName ?> 
                       </td>                        </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">
                       <?php echo $email ?>                         <?php echo $email ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo $quizCount ?>                         <?php echo $quizCount ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo date("Y-m-d", strtotime($quizContent[0]->created_at)) ?>                         <?php echo date("Y-m-d", strtotime($quizContent[0]->created_at)) ?> 
                     </td>                      </td>
   
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo ($quizContent[0]->isrecommendation) == 'Yes' ? "Complete" : "Incomplete"   ?>                          <?php echo ($quizContent[0]->isrecommendation) == 'Yes' ? "Complete" : "Incomplete"   ?>  
                       </td>  
   
                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"  
                         scope="row">  
   
                         <?php if($quizContent[0]->isrecommendation == 'Yes') { ?>  
                           <!-- <p class="p-completion green"> <?php echo "100"; ?> </p> -->  
                           <div class="progress-circle over50 green p100">  
                             <span> 100% </span>  
                             <div class="left-half-clipper">  
                               <div class="first50-bar"></div>  
                               <div class="value-bar"></div>  
                             </div>  
                           </div>  
                           
                         <?php } else {    
   
                           if( (count($quizContent)/50)*100  <= 49) { ?>  
                                 <!-- <p class="p-completion red"> <?php echo (count($quizContent)/50)*100 ?> </p> -->  
                                 <div class="progress-circle red p{{(count($quizContent)/50)*100}}">  
                                   <span> <?php echo (count($quizContent)/50)*100 ?>% </span>  
                                   <div class="left-half-clipper">  
                                     <div class="first50-bar"></div>  
                                     <div class="value-bar"></div>  
                                   </div>  
                                 </div>  
                           <?php }  
   
                           if( (count($quizContent)/50)*100 >= 50 && (count($quizContent)/50)*100 <= 89) { ?>  
   
                               <!-- <p class="p-completion orange"> <?php echo (count($quizContent)/50)*100 ?> </p> -->  
                               <div class="progress-circle over50 orange p{{(count($quizContent)/50)*100}}">  
                                 <span> <?php echo (count($quizContent)/50)*100 ?>% </span>  
                                 <div class="left-half-clipper">  
                                   <div class="first50-bar"></div>  
                                   <div class="value-bar"></div>  
                                 </div>  
                               </div>  
   
                           <?php }  
   
                           if( (count($quizContent)/50)*100  >= 90 ) { ?>  
   
                             <!-- <p class="p-completion green"> <?php echo (count($quizContent)/50)*100 ?> </p> -->  
                             <div class="progress-circle over50 green p{{(count($quizContent)/50)*100}}">  
                               <span> <?php echo (count($quizContent)/50)*100 ?>% </span>  
                               <div class="left-half-clipper">  
                                 <div class="first50-bar"></div>  
                                 <div class="value-bar"></div>  
                               </div>  
                             </div>  
   
                           <?php } }?>  
                           
                     </td>                      </td>
   
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">
                       <!-- <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">    
                         <button type="button" class="Polaris-Button btn-quizView" data-sessionId=<?php echo $sessionID?> data-email=<?php echo $email?> >    
                           <span class="Polaris-Button__Content">    
                             <span class="Polaris-Button__Text">ViewDetails</span>    
                           </span>    
                         </button>    
                       </div> -->    
   
                       <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
                           <a class="Polaris-Link btn-quizView" href="quizData?email={{$email}}&sessionId={{$sessionID}}" data-polaris-unstyled="true" data-sessionId="{{key($quizDetails)}}" data-email="{{$email}}" >                            <a class="Polaris-Link btn-quizView" href="quizData?email={{$email}}&sessionId={{$sessionID}}" data-polaris-unstyled="true" data-sessionId="{{key($quizDetails)}}" data-email="{{$email}}" >
                               View Details                                View Details
                           </a>                            </a>
                         </div>                          </div>
                     </td>                      </td>
                   </tr>                    </tr>
                   <?php } else { ?>                     <?php } else { ?> 
                   <tr class="Polaris-DataTable__TableRow">                    <tr class="Polaris-DataTable__TableRow">
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       </th>                        </th>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo date("Y-m-d", strtotime($quizContent[0]->created_at)) ?>                         <?php echo date("Y-m-d", strtotime($quizContent[0]->created_at)) ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">                        scope="row">
                       <?php echo ($quizContent[0]->isrecommendation) == 'Yes' ? "Complete" : "Incomplete"   ?>                         <?php echo ($quizContent[0]->isrecommendation) == 'Yes' ? "Complete" : "Incomplete"   ?> 
                     </td>                      </td>
                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"  
                         scope="row">  
                         <?php if($quizContent[0]->isrecommendation == 'Yes') { ?>  
                           <!-- <p class="p-completion green"> <?php echo "100"; ?> </p>   -->  
                           <div class="progress-circle over50 green p100">  
                             <span> 100% </span>  
                             <div class="left-half-clipper">  
                               <div class="first50-bar"></div>  
                               <div class="value-bar"></div>  
                             </div>  
                           </div>  
                             
                           <?php } else {    
   
                                 if( (count($quizContent)/50)*100 <= 49) { ?>  
                                       <!-- <p class="p-completion red"> <?php echo (count($quizContent)/50)*100 ?> </p> -->  
                                       <div class="progress-circle red p{{(count($quizContent)/50)*100}}">  
                                         <span> <?php echo (count($quizContent)/50)*100 ?>% </span>  
                                         <div class="left-half-clipper">  
                                           <div class="first50-bar"></div>  
                                           <div class="value-bar"></div>  
                                         </div>  
                                       </div>  
                                 <?php }  
                                                                             
                                 if( (count($quizContent)/50)*100 >= 50 && (count($quizContent)/50)*100 <= 89) { ?>  
   
                                     <!-- <p class="p-completion orange"> <?php echo (count($quizContent)/50)*100 ?> </p> -->  
                                     <div class="progress-circle over50 orange p{{(count($quizContent)/50)*100}}">  
                                       <span> <?php echo (count($quizContent)/50)*100 ?>% </span>  
                                       <div class="left-half-clipper">  
                                         <div class="first50-bar"></div>  
                                         <div class="value-bar"></div>  
                                       </div>  
                                     </div>  
   
                                 <?php }  
   
                                 if( (count($quizContent)/50)*100  >= 90 ) { ?>  
   
                                   <!-- <p class="p-completion green"> <?php echo (count($quizContent)/50)*100 ?> </p> -->  
                                   <div class="progress-circle over50 green p{{(count($quizContent)/50)*100}}">  
                                     <span> <?php echo (count($quizContent)/50)*100 ?>% </span>  
                                     <div class="left-half-clipper">  
                                       <div class="first50-bar"></div>  
                                       <div class="value-bar"></div>  
                                     </div>  
                                   </div>  
   
                                 <?php } }?>  
                       </td>  
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">
                         <!-- <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">                              
                         <button type="button" class="Polaris-Button Polaris-Button--plain btn-quizView" data-sessionId=<?php echo $sessionID?> data-email=<?php echo $email?> >    
                           <span class="Polaris-Button__Content">    
                             <span class="Polaris-Button__Text">ViewDetails</span>    
                           </span>    
                         </button>    
                       </div> -->    
                       <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
                           <a class="Polaris-Link btn-quizView" href="quizData?email={{$email}}&sessionId={{$sessionID}}" data-polaris-unstyled="true" data-sessionId="{{key($quizDetails)}}" data-email="{{$email}}" >                            <a class="Polaris-Link btn-quizView" href="quizData?email={{$email}}&sessionId={{$sessionID}}" data-polaris-unstyled="true" data-sessionId="{{key($quizDetails)}}" data-email="{{$email}}" >
                               View Details                                View Details
                           </a>                            </a>
                         </div>                          </div>
                     </td>                      </td>
                   </tr>                    </tr>
                   <?php }                    <?php }
                     $i++;                      $i++;
                   }                    }
   
                 } else { ?>                   } else { ?> 
   
                   <tr class="Polaris-DataTable__TableRow">                    <tr class="Polaris-DataTable__TableRow">
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row">  <?php echo $customerName ?>                         scope="row">  <?php echo $customerName ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">
                     <?php echo $email ?>                       <?php echo $email ?> 
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row"> -                        scope="row"> -
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row"> -                          scope="row"> -  
                                                 
                       </td>  
                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"  
                         scope="row"> -  
                         
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td"                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn td" 
                       scope="row"> -                        scope="row"> -
                                             
                     </td>                      </td>
                     <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">
                                           
                       <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
                                                         
                       </div>                        </div>
                     </td>                      </td>
                   </tr>                    </tr>
                 <?php }                  <?php }
               ?>                 ?> 
   
                 </tbody>                  </tbody>
               </table>                </table>
             </div>              </div>
           </div>            </div>
         </div>          </div>
       </div>        </div>
     </div>      </div>
   </div>    </div>
 </div>  </div>
   
</body> </body>
   
</html> </html>
   
   
<script src="{{ URL::asset('js/jquery-3.1.1.min.js') }}"></script> <script src="{{ URL::asset('js/jquery-3.1.1.min.js') }}"></script>
<script src="{{ URL::asset('js/custom.js') }}"></script> <script src="{{ URL::asset('js/custom.js') }}"></script>