 <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img src="<?= base_url('assets/images/arowleft.svg') ?>" alt="" width="15px"> Back</button>
   
		<div class="row">
       <?php
           // echo "<pre>";
           // print_r($sreported);
           // echo "</pre>";
                  $percentage=0;
              $checked=0;
              $unchecked=0;

              foreach($checklist['areaToCheck'] as $area=>$areaData){ 
                 foreach($areaData['areaToCheck'] as $key=>$data){
                 if($data==true){
                  $checked++;
                 }else{
                  $unchecked++;
                 }
                 }
              //     echo "<pre>";
              //     print_r($areaData);
              //     echo "</pre>";
               }
               $total=$checked+$unchecked;
               $percentage=round(($checked/$total)*100);
              ?>
            <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
              <div  class="card custCard p-3 ">
                <div class="d-flex align-items-center gap-2">
                <img src="<?= base_url('assets/images/pool.png') ?>" alt="">
                  <div class="my-1">
                    <p class="fos1 m-0 fw-bolder"><?php echo $checklist['title']; ?></p>
                 
                  </div>
                </div>
                <div>
                    <p class="mb-1 fos2">Hours: <span><?php echo $checklist['frequency']; ?>
                    </span></p>
                    <p class="mb-1 fos2">Status: <span>
                      <?php if($percentage==100){ ?>
                        Completed
                      <?php }else{ ?>
                        In process
                      <?php } ?>
                    </span></p>
                    <div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: <?php echo $percentage; ?>%;" aria-valuenow="<?php echo $percentage; ?>" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                    </div>
                    <p class="mb-1 fos2">Start Date <span><?php echo date('d M Y h:i A', $checklist['startDate']); ?>
                    </span></p>
                </div>
              </div>
            </div>
            <div class="col-md-8">
              <div class="card custCard2">
                <div class="card-body  my-2">
                  <?php foreach($checklist['areaToCheck'] as $area=>$areaData){ 
                  $reported=array();
                  
                  foreach($areaData['areaToCheck'] as $key=>$data){
                    array_push($reported,$data);
                  }
                      
                    ?>
                 <div class="d-flex justify-content-between algin-items-center">
                 <p class="fos3 fw-bolder"><?php echo $areaData['areaName']; ?></p>
                 <?php if (in_array(false, $reported, true)) { ?>
                 <button class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal"><small class="m-0">report</small> <img src="<?= base_url('assets/images/rpo.png') ?>" alt="" width="15px"></button>
               <?php } ?>
                </div>
                  <div class=" mt-2 ">
                  <?php 
                  
                  foreach($areaData['areaToCheck'] as $key=>$data){
                    ?>
                     <div class="d-flex gap-2 align-items-center my-3">
                      <?php if($data==true){ ?>
                        <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">
                         <p class="foss3 mb-0"><?php echo $key; ?></p>
                      <?php }else{ ?>
                        <img src="<?= base_url('assets/images/cross.png') ?>" alt="" width="20px">
                         <p class="foss3 mb-0"><?php echo $key; ?></p>
                      <?php } ?>
                      
                    </div>

                  <?php } ?>
                  </div>
                  
                  <?php  } ?>
           
                  <!-- common areas -->
                
              </div>
              </div>
            </div>
           
       
          </div>
               <!-- Modal -->
               <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="p-2 d-flex justify-content-between" style="background: linear-gradient(135deg, #22c783 0.00%, #1aa98f 100.00%);">
                      <h1 class="modal-title fs-4 fw-bold text-white" id="exampleModalLabel">Checklist Report</h1>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                      <div class="row">
                        <!-- Reports Table -->
                        <div class="col-md-12 my-2">
                          <h5 class="mb-3">Security Reports</h5>
                          <?php if (!empty($sreported)): ?>
                            
                            <div class="table-responsive">
                              <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                  <tr>
                                    <th>Report ID</th>
                                    <th>Title</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <?php foreach ($sreported as $reportId => $report): ?>
                                    <tr>
                                      <td>
                                        <small class="text-muted"><?= substr($reportId, 0, 8) ?>...</small>
                                      </td>
                                      <td>
                                        <strong><?= htmlspecialchars($report['title'] ?? 'N/A') ?></strong>
                                      </td>
                                      <td>
                                        <span class="badge bg-primary"><?= htmlspecialchars($report['category'] ?? 'N/A') ?></span>
                                      </td>
                                      <td>
                                        <div class="text-truncate" style="max-width: 200px;" title="<?= htmlspecialchars($report['description'] ?? 'N/A') ?>">
                                          <?= htmlspecialchars($report['description'] ?? 'N/A') ?>
                                        </div>
                                      </td>
                                      <td>
                                        <small><?= date('M d, Y H:i', $report['createdAt'] / 1000) ?></small>
                                      </td>
                                      <td>
                                        <div class="btn-group" role="group">
                                          <?php if (!empty($report['imageUrl'])): ?>
                                            <a href="<?= $report['imageUrl'] ?>" target="_blank" class="btn btn-sm btn-outline-primary" title="View Image">
                                              <i class="fas fa-image"></i>
                                            </a>
                                          <?php endif; ?>
                                          <?php if (!empty($report['pdfUrl'])): ?>
                                            <a href="<?= $report['pdfUrl'] ?>" target="_blank" class="btn btn-sm btn-outline-success" title="View PDF">
                                              <i class="fas fa-file-pdf"></i>
                                            </a>
                                          <?php endif; ?>
                                        </div>
                                      </td>
                                    </tr>
                                  <?php endforeach; ?>
                                </tbody>
                              </table>
                            </div>
                          <?php else: ?>
                            <div class="text-center py-4">
                              <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                              <h5 class="text-muted">No Reports Found</h5>
                              <p class="text-muted">No security reports have been submitted for this checklist yet.</p>
                            </div>
                          <?php endif; ?>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- Detailed Report Modal -->
              
              
  </div>
    
  </main>
    <script>
    function countWords() {
       const textarea = document.getElementById('note');
       const wordCount = document.getElementById('wordCount');
       const maxWords = 2000;
       
       // Get the value of the textarea, including spaces
       let text = textarea.value;
       
       // Count the number of "words" (characters including spaces)
       let currentWordCount = text.length;
       
       // Update the word count display
       wordCount.textContent = `${currentWordCount}/${maxWords}`;
       
       // Limit the number of characters (including spaces) in the textarea
       if(currentWordCount<=2){
       
         wordCount.classList.remove("text-success")
           wordCount.classList.remove("text-danger")
       }
   
      else if (currentWordCount >= maxWords) {
           textarea.value = text.slice(0, maxWords);
           wordCount.textContent = `${maxWords}/${maxWords}`;
           wordCount.classList.add("text-danger")
       }
       else if (currentWordCount < maxWords) {
         console.log('in less than if')
           wordCount.classList.add("text-success")
           wordCount.classList.remove("text-danger")
       }
   
       else{
         wordCount.classList.add("text-success")
       }
   }
   
   function viewReportDetails(reportId) {
       // Get the report data from PHP
       const reports = <?= json_encode($reported) ?>;
       const report = reports[reportId];
       
       if (report) {
           // Populate the detailed modal
           document.getElementById('detail-reportId').textContent = reportId;
           document.getElementById('detail-title').textContent = report.title || 'N/A';
           document.getElementById('detail-category').textContent = report.category || 'N/A';
           document.getElementById('detail-type').textContent = report.type || 'N/A';
           document.getElementById('detail-description').textContent = report.description || 'N/A';
           document.getElementById('detail-createdAt').textContent = new Date(report.createdAt).toLocaleString();
           document.getElementById('detail-userId').textContent = report.userId || 'N/A';
           
           // Handle image
           if (report.imageUrl) {
               document.getElementById('detail-image').innerHTML = `
                   <a href="${report.imageUrl}" target="_blank" class="btn btn-sm btn-outline-primary">
                       <i class="fas fa-image"></i> View Image (${report.imageName || 'Unknown'})
                   </a>
               `;
           } else {
               document.getElementById('detail-image').textContent = 'No image';
           }
           
           // Handle PDF
           if (report.pdfUrl) {
               document.getElementById('detail-pdf').innerHTML = `
                   <a href="${report.pdfUrl}" target="_blank" class="btn btn-sm btn-outline-success">
                       <i class="fas fa-file-pdf"></i> View PDF (${report.pdfName || 'Unknown'})
                   </a>
               `;
           } else {
               document.getElementById('detail-pdf').textContent = 'No PDF';
           }
           
           // Show the modal
           const modal = new bootstrap.Modal(document.getElementById('reportDetailsModal'));
           modal.show();
       } else {
           alert('Report not found!');
       }
   }
   
    </script>
  <!--end main wrapper-->