  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <style>
  .flatpickr-calendar{
    top: 183px !important;
      left: auto !important;
      right: 64px !important;
  }
  </style>
 <!--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-8 my-2">
        <div class="d-flex align-items-center gap-2 mb-2">
         <img src="<?= base_url('assets/images/megaIcons/CHECKIVON.svg') ?>" alt="" height="40px">
         <h3 class="fmon m-0 fw-bolder">Issues Reported</h3>
        </div>
        </div>
        <div class="col-md-4 my-2 d-flex justify-content-end">
          <a   data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn">Create Issue</a>
        </div>
        <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">Create Issue</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-6 my-2">
                    <p class="foss5  m-0">Subject</p>
                    <input type="text" class="form-control" placeholder="Provide Title">
                  </div>
                  <!-- <div class="col-md-6 my-2">
                    <label for="" class="foss5 ">Status</label>
                    <select name="" id="" class="form-control">
                      <option value="#" selected>
                      select
                      </option>
                      <option value="#" >
                        In Progress
                        </option>
                        <option value="#" >
                          Pause
                          </option>
                        <option value="#" >
                          Completed
                          </option>
                     </select>
                  </div> -->
                  <div class="col-md-6 my-2">
                    <label for="" class="foss5 ">Category</label>
                    <select name="" id="" class="form-select">
                      <option value="#" selected>
                      select
                      </option>
                      <option value="#" >
                        In Progress
                        </option>
                        <option value="#" >
                          Pause
                          </option>
                        <option value="#" >
                          Completed
                          </option>
                     </select>
                  </div>
                  <div class="col-md-6 my-2">
                    <label for="" class="foss5 ">House No</label>
                    <select name="" id="" class="form-select">
                      <option value="#" selected>
                      select
                      </option>
                      <option value="#" >
                        In Progress
                        </option>
                        <option value="#" >
                          Pause
                          </option>
                        <option value="#" >
                          Completed
                          </option>
                     </select>
                  </div>
                  <div class="col-md-6 my-2">
                    <label for="" class="foss5 ">Zone</label>
                    <select name="" id="" class="form-select">
                      <option value="#" selected>
                      select
                      </option>
                      <option value="#" >
                        In Progress
                        </option>
                        <option value="#" >
                          Pause
                          </option>
                        <option value="#" >
                          Completed
                          </option>
                     </select>
                  </div>
                  <!-- Report details section -->
                  <div class="col-md-12 my-2">
                    <p class="foss5 m-0">Description</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 class="row">
      <div class="col-md-12">
          
            <div class="input-group">
              <span class="input-group-text"><img src="<?= base_url('assets/images/serIcon.png') ?>" alt="" width="25px"></span>
              <input type="text" name="" id="" class="form-control form-Search" placeholder="search">

              <div class="dropdown">
                <button class="btn px-3 border-0 outline-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                   <img src="<?= base_url('assets/images/filter-solid.svg') ?>" alt="" width="25px">
                </button>
                <ul class="dropdown-menu">
                  <li class="dropdown-item"> <label class="w-100" for="date" >
                   Date
                </label>
                <input class="d-none" type="date" id="date" name="date"></li>
                  <li class="dropdown-item">
                    <select name="status" id="status" class="border-0 outline-0 form-control" style="box-shadow: none; background: transparent; padding: 0;">
                      <option value=""selected>Status</option>
                      <option value="open">Open Tickets</option>
                      <option value="">Close Tickets</option>
                    </select>
                  </li>

                </ul>
              </div>
             
            </div>
          
            </div>
            <!-- <div class="row">
                <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
                  <a href="./issueview.html" class="card custCard p-3 ">
                    <div class="d-flex align-items-center gap-2">
                    <img src="./assets/images/pool.png" alt="">
                      <div class="my-1">
                        <p class="fos1 m-0">Pool Is Not Clean</p>
                     
                      </div>
                    </div>
                    <div>
                        <p class="mb-1 fos2">Report Date <span>June 6,2024,12:11pm
                        </span></p>
                        
                        <p class="mb-1 fos2">Status: <span>In process
                        </span></p>
                      
                     
                    </div>
                  </a>
                </div>
               
           
              </div> -->
              <div class="table-responsive mt-3 ">
                <table class="table table-striped table-hover">
                  <thead>
                    <tr>
                      <th scope="col">Case No.</th>
                      <th scope="col">House/Security</th>
                     
                      <th scope="col">Category</th>
                      <th scope="col">Created By</th>
                     
                      <th scope="col">Status</th>
                      <th scope="col">Created at</th>
                    </tr>
                  </thead>
                <div class="" >
                  <tbody class="">
                    <tr>
                      <td><a href="<?= base_url('site/case') ?>" class="hNum">1</a></td>
                      <td><div class="d-flex gap-2 align-items-center">
                           <div class="numBox">
                            93
                           </div>
                           Zone
                      </div></td>
                     
                      <td>Incident</td>
                      <td>John Doe</td>
                    
                      <td ><div class="hNum">New</div></td>
                      <td>2024-07-24</td>
                    </tr>
                    <tr>
                      <td><a href="<?= base_url('site/case') ?>" class="hNum">1</a></td>
                      <td><div class="d-flex gap-2 align-items-center">
                           <div class="numBox">
                            93
                           </div>
                           Zone
                      </div></td>
                     
                      <td>Incident</td>
                      <td>John Doe</td>
                     
                      <td ><div class="hNum">New</div></td>
                      <td>2024-07-24</td>
                    </tr>
                    <tr>
                      <td><a href="<?= base_url('site/case') ?>" class="hNum">1</a></td>
                      <td><div class="d-flex gap-2 align-items-center">
                           <div class="numBox">
                            93
                           </div>
                           Zone
                      </div></td>
                     
                      <td>Incident</td>
                      <td>John Doe</td>
                     
                      <td ><div class="hNum">New</div></td>
                      <td>2024-07-24</td>
                    </tr>
                    <tr>
                      <td><a href="<?= base_url('site/case') ?>" class="hNum">1</a></td>
                      <td><div class="d-flex gap-2 align-items-center">
                           <div class="numBox">
                            93
                           </div>
                           Zone
                      </div></td>
                     
                      <td>Incident</td>
                      <td>John Doe</td>
                      
                      <td ><div class="hNum">New</div></td>
                      <td>2024-07-24</td>
                    </tr>
                
                    <!-- Add more rows as needed -->
                  </tbody>
                </div>
                </table>
              </div>
          </div>
      </div>
  </div>
    
  </main>
  <!--end main wrapper-->

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

  <script>
      // Initialize Flatpickr on the input field
      flatpickr("#date", {
          dateFormat: "Y-m-d", // Date format
      });
  
      // Optionally, trigger the input when the label is clicked
      document.querySelector('label[for="date"]').addEventListener('click', function() {
          document.getElementById('date').click();
      });
  </script>
  <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>