 <!--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">
            <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">Review of common areas</p>
                 
                  </div>
                </div>
                <div>
                    <p class="mb-1 fos2">Hours: <span>Everyday
                    </span></p>
                    <p class="mb-1 fos2">Status: <span>In process
                    </span></p>
                    <div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                    </div>
                    <p class="mb-1 fos2">Start Date <span>June 6,2024,12:11pm
                    </span></p>
                </div>
              </div>
            </div>
            <div class="col-md-8">
              <div class="card custCard2">
                <div class="card-body  my-2">
                  <p class="fos3 fw-bolder">Security</p>
                  <div class=" mt-2 ">
                     <div class="d-flex gap-2 align-items-center my-3">
  
                      <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">
                      <p class="foss3 mb-0">Is the alarm armed?</p>
                     </div>
                     <div class="d-flex gap-2 align-items-center my-3">
  
                      <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">
                      <p class="foss3 mb-0">Does the alarm sound when a Zora is activated?</p>
                     </div>
                     <div class="d-flex gap-2 align-items-center my-3">
  
                      <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">
                      <p class="foss3 mb-0">Is there any vegetation obstruction that could activate the alarm?</p>
                     </div>
                  </div>
                  <!-- common areas -->
                  <p class="fos3 fw-bolder">Common areas</p>
                  <div class=" mt-2 ">
                     <div class="d-flex gap-2 align-items-center my-3 justify-content-between">
  
                     <div class="d-flex gap-2 align-items-center">
                      <img src="<?= base_url('assets/images/cross.png') ?>" alt="" width="20px">
                      <p class="foss3 mb-0">Is the gym clean?</p>
                     </div>
                      <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>
                  
                     </div>
                     <div class="d-flex gap-2 align-items-center my-3">
  
                      <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">
                      <p class="foss3 mb-0">Does the pool water have a good color?</p>
                     </div>
                     <div class="d-flex gap-2 align-items-center my-3">
  
                      <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">
                      <p class="foss3 mb-0">Are the playground equipment in the parks in good condition?</p>
                     </div>
                     <button class="btn autBtn px-5 py-2 ">Save Progress</button>
                  </div>
              </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">
                        <!-- Report title section -->
                        <div class="col-md-12 my-2">
                          <p class="foss5 m-0">Report title</p>
                          <input type="text" class="form-control" placeholder="Design a task manager app">
                        </div>
              
                        <!-- Report details section -->
                        <div class="col-md-12 my-2">
                          <p class="foss5 m-0">Report Details</p>
                          <textarea name="" id="note" class="form-control textarea" placeholder="Description about issue" rows="6" oninput="countWords()"></textarea>
                          <div class="d-flex justify-content-end">
                            <small class="fw-bolder" id="wordCount">0/2000</small>
                           </div>
                        </div>
              
                        <!-- Attach files section -->
                        <div class="col-md-12 my-2 d-flex align-items-center">
                          <i class="fas fa-paperclip me-2"></i><span class="text-success">Attach files</span><span>(10MB max each)</span>
                      </div>
                        <!-- File upload section -->
                        <div class="col-md-12">
                          <div class="d-flex align-items-center gap-3">
                            <div class="card bgSe">
                              <div class="card-body">
                                <img src="<?= base_url('assets/images/attachp.png') ?>" alt="" width="20px">
                                <label for="doc" class="btn btnClose">Click To Replace</label>
                                <input type="file" name="" id="doc" class="d-none">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
              
                      <!-- Submit button section -->
                      <div class="row d-flex justify-content-end pe-3">
                        <div class="modal-footer col-md-12 my-2 d-flex justify-content-center">
                          <button class="btn autBtn py-2 px-3">Submit To Admin</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
  </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")
       }
   }
   
    </script>
  <!--end main wrapper-->