welcome.blade.php (before) welcome.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--numeric {    .Polaris-DataTable__Cell--numeric {
       text-align: left;        text-align: left;
   }    }
   
   .linkDiv {    .linkDiv {
       text-align: center;        text-align: center;
   }    }
   .linkDiv li {    .linkDiv li {
     display: inline;      display: inline;
   }    }
   
   .Polaris-TextContainer .pagination li{    .Polaris-TextContainer .pagination li{
     display:inline-block;      display:inline-block;
   }    }
   .Polaris-TextContainer .pagination li a{    .Polaris-TextContainer .pagination li a{
     background: #fff;      background: #fff;
     border: 1px solid #ddd;      border: 1px solid #ddd;
     padding: 5px;      padding: 5px;
     border-radius: 5px;      border-radius: 5px;
     color: #232062;      color: #232062;
   }    }
   .Polaris-TextContainer .pagination li a:hover{    .Polaris-TextContainer .pagination li a:hover{
     text-decoration:none;      text-decoration:none;
     color:#000;      color:#000;
     background: #e0dfdf;      background: #e0dfdf;
   }    }
   
     .Polaris-DataTable__Cell--verticalAlignTop {  
         vertical-align: middle !important;  
     }  
     
     .progress-circle{  
       top: 0 !important;  
     }  
   
         
   
 </style>  </style>
</head> </head>
   
<body> <body>
<div id="loader" style="text-align:center; position: absolute;top: 59%;left: 49%;z-index: 99; --top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;"> <div id="loader" style="text-align:center; position: absolute;top: 59%;left: 49%;z-index: 99; --top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
       <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjU0MiAxLjQ4N0EyMS41MDcgMjEuNTA3IDAgMDAuNSAyMmMwIDExLjg3NCA5LjYyNiAyMS41IDIxLjUgMjEuNSA5Ljg0NyAwIDE4LjM2NC02LjY3NSAyMC44MDktMTYuMDcyYTEuNSAxLjUgMCAwMC0yLjkwNC0uNzU2QzM3LjgwMyAzNC43NTUgMzAuNDczIDQwLjUgMjIgNDAuNSAxMS43ODMgNDAuNSAzLjUgMzIuMjE3IDMuNSAyMmMwLTguMTM3IDUuMy0xNS4yNDcgMTIuOTQyLTE3LjY1YTEuNSAxLjUgMCAxMC0uOS0yLjg2M3oiIGZpbGw9IiM5MTlFQUIiLz48L3N2Zz4K"         <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjU0MiAxLjQ4N0EyMS41MDcgMjEuNTA3IDAgMDAuNSAyMmMwIDExLjg3NCA5LjYyNiAyMS41IDIxLjUgMjEuNSA5Ljg0NyAwIDE4LjM2NC02LjY3NSAyMC44MDktMTYuMDcyYTEuNSAxLjUgMCAwMC0yLjkwNC0uNzU2QzM3LjgwMyAzNC43NTUgMzAuNDczIDQwLjUgMjIgNDAuNSAxMS43ODMgNDAuNSAzLjUgMzIuMjE3IDMuNSAyMmMwLTguMTM3IDUuMy0xNS4yNDcgMTIuOTQyLTE3LjY1YTEuNSAxLjUgMCAxMC0uOS0yLjg2M3oiIGZpbGw9IiM5MTlFQUIiLz48L3N2Zz4K" 
           alt="" class="Polaris-Spinner Polaris-Spinner--colorTeal Polaris-Spinner--sizeLarge" draggable="false">            alt="" class="Polaris-Spinner Polaris-Spinner--colorTeal Polaris-Spinner--sizeLarge" draggable="false">
       <span role="status">        <span role="status">
           <span class="Polaris-VisuallyHidden">            <span class="Polaris-VisuallyHidden">
               Spinner example                Spinner example
           </span>            </span>
       </span>        </span>
   </div>    </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;">
   <div class="Polaris-Card">    <div class="Polaris-Card">
     <div class="Polaris-Card__Header">      <div class="Polaris-Card__Header">
       <h2 class="Polaris-Heading">View Quiz details</h2>        <h2 class="Polaris-Heading">View Quiz details</h2>
     </div>      </div>
     <div class="Polaris-Card__Section">      <div class="Polaris-Card__Section">
       <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" scope="col"><b>Name</b></th>              <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>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" 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" 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" 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" 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" scope="col"><b>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" scope="col"><b>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" 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>              <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>
           </tr>            </tr>
         </thead>          </thead>
         <tbody>          <tbody>
         <?php          <?php
           if (isset($customers) && !empty($customers)) {            if (isset($customers) && !empty($customers)) {
             foreach ($customers as $customer) {              foreach ($customers as $customer) {
               // echo"<pre>";print_r($quizDetails);die;                // echo"<pre>";print_r($quizDetails);die;
                 $query_string = 'email=' . urlencode($customer['email']) . '&name=' . urlencode($customer['name']);                  $query_string = 'email=' . urlencode($customer['email']) . '&name=' . urlencode($customer['name']);
                 $href = "customerData?" . $query_string;  //htmlentities                  $href = "customerData?" . $query_string;  //htmlentities
               ?>                 ?> 
               <tr class="Polaris-DataTable__TableRow">                <tr class="Polaris-DataTable__TableRow">
                 <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row"><?php echo $customer['name'] ?></td>                  <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row"><?php echo $customer['name'] ?></td>
                 <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"><?php echo $customer['email'] ?></td>                  <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"><?php echo $customer['email'] ?></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">
                   <?php echo isset($quizDetails[$customer['email']]) ? count($quizDetails[$customer['email']]) : 0; ?>                     <?php echo isset($quizDetails[$customer['email']]) ? count($quizDetails[$customer['email']]) : 0; ?> 
                 </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">
                   <?php if(isset($quizDetails[$customer['email']]) && count($quizDetails[$customer['email']]) > 1 ) {                    <?php if(isset($quizDetails[$customer['email']]) && count($quizDetails[$customer['email']]) > 1 ) {
                     echo date('Y-m-d', strtotime(reset($quizDetails[$customer['email']])['created_at']))." - ".                      echo date('Y-m-d', strtotime(reset($quizDetails[$customer['email']])['created_at']))." - ".
                     date('Y-m-d', strtotime(end($quizDetails[$customer['email']])['created_at'])) ;                      date('Y-m-d', strtotime(end($quizDetails[$customer['email']])['created_at'])) ;
                   } else if (isset($quizDetails[$customer['email']]) && count($quizDetails[$customer['email']]) == 1){                    } else if (isset($quizDetails[$customer['email']]) && count($quizDetails[$customer['email']]) == 1){
                     echo date('Y-m-d', strtotime(reset($quizDetails[$customer['email']])['created_at']));                      echo date('Y-m-d', strtotime(reset($quizDetails[$customer['email']])['created_at']));
                   } else {                    } else {
                     echo "";                      echo "";
                   }                    }
                     ?>                       ?> 
                 </td>                  </td>
                   <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">  
                     
                   <?php if(isset($percentDetails[$customer['email']])) {  
                       
                           if($percentDetails[$customer['email']] == '100') { ?>  
                               <!-- <p class="p-completion green"> <?php echo $percentDetails[$customer['email']]; ?> </p></td> -->  
                               <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> </td>  
   
                           <?php } else {    
   
                                 if( $percentDetails[$customer['email']] <= 49) { ?>  
                                       <!-- <p class="p-completion red"> <?php echo $percentDetails[$customer['email']] ?> </p> -->  
                                       <div class="progress-circle red p{{$percentDetails[$customer['email']]}}">  
                                         <span> <?php echo $percentDetails[$customer['email']] ?>% </span>  
                                         <div class="left-half-clipper">  
                                           <div class="first50-bar"></div>  
                                           <div class="value-bar"></div>  
                                         </div>  
                                       </div>  
                                 <?php }  
                                                                             
                                 if( $percentDetails[$customer['email']] >= 50 && $percentDetails[$customer['email']] <= 89) { ?>  
   
                                     <!-- <p class="p-completion orange"> <?php echo $percentDetails[$customer['email']] ?> </p> -->  
                                     <div class="progress-circle over50 orange p{{$percentDetails[$customer['email']]}}">  
                                       <span> <?php echo $percentDetails[$customer['email']] ?>% </span>  
                                       <div class="left-half-clipper">  
                                         <div class="first50-bar"></div>  
                                         <div class="value-bar"></div>  
                                       </div>  
                                     </div>  
   
                                 <?php }  
   
                                 if( $percentDetails[$customer['email']]  >= 90 ) { ?>  
   
                                   <!-- <p class="p-completion green"> <?php echo $percentDetails[$customer['email']] ?> </p> -->  
                                   <div class="progress-circle over50 green p{{$percentDetails[$customer['email']]}}">  
                                     <span> <?php echo $percentDetails[$customer['email']] ?>% </span>  
                                     <div class="left-half-clipper">  
                                       <div class="first50-bar"></div>  
                                       <div class="value-bar"></div>  
                                     </div>  
                                   </div>  
   
                                 <?php } }?>  
   
   
                   </td>  
                   <?php } else { ?>  
                     <!-- <p class="p-completion red"> <?php //echo "0"; ?></p></td> -->  
                     <div class="progress-circle red p0">  
                       <span> 0% </span>  
                       <div class="left-half-clipper">  
                         <div class="first50-bar"></div>  
                         <div class="value-bar"></div>  
                       </div>  
                     </div> </td>  
                   <?php } ?>  
                     
                 <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="{{$href}}" data-polaris-unstyled="true" data-sessionId="" data-email="{{$customer['email']}}" >                          <a class="Polaris-Link btn-quizView" href="{{$href}}" data-polaris-unstyled="true" data-sessionId="" data-email="{{$customer['email']}}" >
                             View Details                              View Details
                         </a>                          </a>
                   </div>                    </div>
   
                 </td>                  </td>
               </tr>                </tr>
             <?php }              <?php }
           }            }
         ?>           ?> 
         </tbody>          </tbody>
       </table>        </table>
     </div>      </div>
   </div>    </div>
   <div class="Polaris-TextContainer linkDiv">    <div class="Polaris-TextContainer linkDiv">
   
     <p>      <p>
     <ul style="list-style:none" class='pagination text-center' id="pagination">      <ul style="list-style:none" class='pagination text-center' id="pagination">
   
   <?php    <?php
if (!empty($previousLink)) {?>  if (!empty($previousLink)) {?> 
     <li id="PrevLink" class="active" ><a class="Polaris-Link" ata-polaris-unstyled="true"       <li id="PrevLink" class="active" ><a class="Polaris-Link" ata-polaris-unstyled="true" 
     href='{{env("APP_URL",true)}}?page=<?=$previousLink;?>'>&nbsp;<?='< Previous';?>&nbsp;</a></li>      href='{{env("APP_URL",true)}}?page=<?=$previousLink;?>'>&nbsp;<?='< Previous';?>&nbsp;</a></li>
     <?php }      <?php }
if (!empty($nextLink)) {?>  if (!empty($nextLink)) {?> 
     <li id="NextLink" class="active" ><a class="Polaris-Link" ata-polaris-unstyled="true"       <li id="NextLink" class="active" ><a class="Polaris-Link" ata-polaris-unstyled="true" 
     href='{{env("APP_URL",true)}}?page=<?=$nextLink;?>'>&nbsp;<?='Next >';?>&nbsp;</a></li>      href='{{env("APP_URL",true)}}?page=<?=$nextLink;?>'>&nbsp;<?='Next >';?>&nbsp;</a></li>
     <?php }?>       <?php }?> 
     </ul></p>      </ul></p>
   </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>