 <!--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 justify-content-center">
        <div class="col-md-10">
          <div class="row">
            <div class="col-md-6 my-2">
              <div class="h-100">
                <img class=" imgamen " src="<?= base_url('assets/images/pool2.png') ?>" alt="">
              </div>
            </div>
            <div class="col-md-4 my-2">
              <p class="fh3">Pool Party</p>
              <p class="fored text-success">Approved by Admin</p>
              <p class="foss1 mb-0">No of People: <span>5</span></p>
              <p class="foss1 mb-0">Price: <span>$25000</span></p>
              <p class="foss1 mb-0">Reservation date: <span> Tuesday 16 April,2024</span></p>
              <p class="foss1 mb-0">Time Frame:
                <span>One reservation per day </span>
              </p>
              <p class="foss1 mb-0">Slot Time
                :
                <span> 8:00 PM </span>
              </p>
            </div>
            <div class="col-md-2 my-2 ">
              <div class="w-100 d-flex justify-content-end">
                <button class="btn d-flex flex-column justify-content-center align-items-center gap-2"
                  data-bs-toggle="modal" data-bs-target="#exampleModal"><img src="<?= base_url('assets/images/rpo.png') ?>"
                    alt="">Report</button>
              </div>

              <!-- report modal -->


           <!-- 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">Amenity 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 fw-bold">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 fw-bold">Report Details</p>
                      <textarea name="" id="note2" class="form-control textarea" placeholder="Description about issue" rows="6" oninput="countWords2()"></textarea>
                      <div class="d-flex justify-content-end">
                        <small class="fw-bolder" id="wordCount2">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 bg-secondary">
                          <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>
          <div class="row my-2">
            <div class="col-md-12">
              <p class="fos3">Details</p>
              <p class="fos5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
                with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
          <div class="row my-2">
            <div class="col-md-12 mt-2">

              <p class="fos3 mb-0 fw-bolder">Additional Comments</p>
              <p class="mt-2 fos5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
                the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <p class="fos3 mb-0 fw-bolder"> Security Comments</p>
              <textarea class="form-control textarea mt-2" name=" Security Comments" id="note" placeholder="Security Comments" rows="5" oninput="countWords()"></textarea>
              <div class="d-flex justify-content-end">
                <small class="fw-bolder" id="wordCount">0/2000</small>
               </div>
              <div class="d-flex justify-content-center">
                <button class="btn autBtn px-4 py-2 my-3 d-b ">Finish</button>
              </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")
       }
   }
   

   function countWords2() {
       const textarea = document.getElementById('note2');
       const wordCount = document.getElementById('wordCount2');
       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-->