  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <!-- orders section -->
      <div class="d-flex justify-content-between flex-wrap mb-3">
      <div>
        <h3>Time Clock</h3>
        <div class="d-flex  gap-2">
            <button type="button" class="btn btnFilter"><i class="fa-solid fa-filter"></i> Filter</button>
            <div class="dropdown">
                <button class="btn btnFilter dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                  2/15 To 3/15
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </div>
        </div>
      </div>
        <ul class="nav nav-tabs">
          <li class="nav-item my-1">
            <a class="nav-link active" id="newRequest-tab" data-bs-toggle="tab" href="#newRequest" role="tab">
             Today</a>
          </li>
          <li class="nav-item my-1">
            <a class="nav-link" id="guardianReport-tab" data-bs-toggle="tab" href="#guardianReport" role="tab">Time Sheets</a>
          </li>
          <li class="nav-item my-1">
            <a class="nav-link" id="sendInvoice-tab" data-bs-toggle="tab" href="#finishedRequest" role="tab">Edit Request</a>
          </li>
        
        </ul>
      </div>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="newRequest" role="tabpanel">
            <div class="table-responsive  card px-2 my-2  ">
                <table id="example" class="table tableStriped">
                  <thead>
                    <tr>
                      <th scope="col ">
                        <p class=" mb-0 thfont">User Name</p>
                      </th>
                      <th scope="col ">
                        <p class=" mb-0 thfont">Total Hrs</p>
                      </th>
                      <th scope="col ">
                        <p class=" mb-0 thfont">Regular Hrs</p>
                      </th>
  
                      <th scope="col ">
                        <p class=" mb-0 thfont">Over Time</p>
                      </th>
  
                      <th scope="col ">
                        <p class=" mb-0 thfont">Clock In</p>
                      </th>
                      <th scope="col ">
                        <p class=" mb-0 thfont">Clock Out</p>
                      </th>
                      <th scope="col ">
                        <p class=" mb-0 thfont">Date </p>
                      </th>
                      <th scope="col ">
                        <p class=" mb-0 thfont">Actions</p>
                      </th>
                    </tr>
                  </thead>
                  <div class="">
                    <tbody class=" ">
                      <!-- Add table rows with data here -->
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <a href="./viewnote.html" class="btn btnNote py-0">View Note</a>
  
                        </td>
                      </tr>
                      <tr>
                        <td>Whiskers</td>
                        <td>55 Hours</td>
                        <td>40 Hours</td>
                        <td>15 Hours</td>
  
  
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                            09:00 AM
                            <br>
                            <div>
                                <i class="fa-solid fa-location-dot" style="font-size:12px"></i> Nibor Way, 939,New York
                            </div>
                        </td>
                        <td>
                          1/03/24
                        </td>
                        </td>
                        <td>
                       <button type="button" class="btn btnNote">View Note</button>
  
                        </td>
                      </tr>
                      <!-- Add more rows as needed -->
  
                    </tbody>
                  </div>
                </table>
              </div>
             
          </div>
          <div class="tab-pane fade" id="guardianReport" role="tabpanel">
            <h1>Nothing To Show</h1>
             </div>
             <div class="tab-pane fade" id="finishedRequest" role="tabpanel">
                <div class="table-responsive  card px-2 my-2  py-2 ">
                    <table id="example" class="table tableStriped">

                      <div class="">
                        <tbody class=" ">
                          <!-- Add table rows with data here -->
                          <tr>
                            <td class="pt-5" width="20%">Austin Ellis</td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Original Shift</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Edit Request</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <p class="fw-bold">Location</p> <br>
                                <p>Nibor Way, 939,
                                    New York</p>
                            </td>
      
      
                          
                          
                          
                            </td>
                            <td width="20%">
                       <div class="d-flex pt-5 gap-2 justify-content-end">
                        <button type="button" class="btn btnNote py-0">Decline</button>
                        <button type="button" class="btn btnNote py-0">Approve</button>
                       </div>

      
                            </td>
                          </tr>
                          <tr>
                            <td class="pt-5" width="20%">Austin Ellis</td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Original Shift</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Edit Request</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <p class="fw-bold">Location</p> <br>
                                <p>Nibor Way, 939,
                                    New York</p>
                            </td>
      
      
                          
                          
                          
                            </td>
                            <td width="20%">
                       <div class="d-flex pt-5 gap-2 justify-content-end">
                        <button type="button" class="btn btnNote py-0">Decline</button>
                        <button type="button" class="btn btnNote py-0">Approve</button>
                       </div>

      
                            </td>
                          </tr>
                          <tr>
                            <td class="pt-5" width="20%">Austin Ellis</td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Original Shift</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Edit Request</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <p class="fw-bold">Location</p> <br>
                                <p>Nibor Way, 939,
                                    New York</p>
                            </td>
      
      
                          
                          
                          
                            </td>
                            <td width="20%">
                       <div class="d-flex pt-5 gap-2 justify-content-end">
                        <button type="button" class="btn btnNote py-0">Decline</button>
                        <button type="button" class="btn btnNote py-0">Approve</button>
                       </div>

      
                            </td>
                          </tr>
                          <tr>
                            <td class="pt-5" width="20%">Austin Ellis</td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Original Shift</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Edit Request</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <p class="fw-bold">Location</p> <br>
                                <p>Nibor Way, 939,
                                    New York</p>
                            </td>
      
      
                          
                          
                          
                            </td>
                            <td width="20%">
                       <div class="d-flex pt-5 gap-2 justify-content-end">
                        <button type="button" class="btn btnNote py-0">Decline</button>
                        <button type="button" class="btn btnNote py-0">Approve</button>
                       </div>

      
                            </td>
                          </tr>
                          <tr>
                            <td class="pt-5" width="20%">Austin Ellis</td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Original Shift</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Edit Request</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <p class="fw-bold">Location</p> <br>
                                <p>Nibor Way, 939,
                                    New York</p>
                            </td>
      
      
                          
                          
                          
                            </td>
                            <td width="20%">
                       <div class="d-flex pt-5 gap-2 justify-content-end">
                        <button type="button" class="btn btnNote py-0">Decline</button>
                        <button type="button" class="btn btnNote py-0">Approve</button>
                       </div>

      
                            </td>
                          </tr>
                          <tr>
                            <td class="pt-5" width="20%">Austin Ellis</td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Original Shift</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <div class="mx-3">
                                  <p class="fw-bold">  Edit Request</p>
                                  <div class="d-flex justify-content-between ">
                                    <p>03/02</p>
                                    <p>03/02</p>    
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>07:55AM</p>
                                    <p>09:10AM</p>  
                                  </div>
                                  <div class="d-flex justify-content-between">
                                    <p>(01:15AM)</p>
                                    <p>300B </p>  
                                  </div>
                                </div>
                            </td>
                            <td width="20%">
                                <p class="fw-bold">Location</p> <br>
                                <p>Nibor Way, 939,
                                    New York</p>
                            </td>
      
      
                          
                          
                          
                            </td>
                            <td width="20%">
                       <div class="d-flex pt-5 gap-2 justify-content-end">
                        <button type="button" class="btn btnNote py-0">Decline</button>
                        <button type="button" class="btn btnNote py-0">Approve</button>
                       </div>

      
                            </td>
                          </tr>
                          <!-- Add more rows as needed -->
      
                        </tbody>
                      </div>
                    </table>
                  </div>
            </div>
        </div>
       
       
        
      </div>


      <div>
        <!-- assign Modal -->
        <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
          tabindex="-1">
          <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content ">

              <div class="modal-body pt-0">

                <div class="my-2 row">
                  <div class="col-md-12">
                    <div class="d-flex w-100">
                      <img src="<?php echo base_url(); ?>/assets/images/avatars/000.png" alt="" width="70px" />
                      <div class="ms-2 w-100">
                        <p class="fmon fs5 mb-0 mt-2">Taking care of grandpa</p>
                        <div class="d-flex justify-content-between items-center mt-2">
                          <p class="text-muted fs6 fmon  mb-0">23 January, 2024 17:00</p>
                          <p class="d-block ms-auto mb-0 fmon fn1 fw-bold ms-1">New</p>
                        </div>

                      </div>

                    </div>
                    <div class="my-2 d-flex flex-wrap justify-content-between align-items-center">
                      <p class="fmon fs7 m-0 ps-2">Florida</p>
                      <p class="mb-0 fmon fn1 ms-1">17:00</p>

                    </div>
                    <p class="fmon mt-2 fn2 mb-0">It is a long established fact that a reader will be distracted by the
                      readable.</p>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Nutrition</p>
                      <p class="fmon mt-2 fn5 mb-0">Food in refrigerator</p>
                    </div>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Household</p>
                      <p class="fmon mt-2 fn5 mb-0">In need of housekeeoing</p>
                    </div>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Health and Wellness</p>
                      <p class="fmon mt-2 fn5 mb-0">Overall mental state</p>
                    </div>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Medication</p>
                      <p class="fmon mt-2 fn5 mb-0">Is client taking medication</p>
                    </div>
                  </div>
                  <div class=" my-2">
                    <label class="fmon fn4 mb-1" for="fname"> Guardian</label>
                    <div class="oCard2 fselect w-100 d-flex align-items-center p-2" style="width: 100% !important;">
                      <!-- <select class="form-select fInp bg-transparent">
                        <option value="">select</option>
                      </select> -->
                      <p class="m-0">Walker</p>
                    </div>

                  </div>

                  <div class="col-md-12  ">
                  <div class="row">
                    <div class="col-md-6 my-2">
                      <button class="btn changeBtn px-4 py-2 w-100" data-bs-target="#ModalTogglechnage" data-bs-toggle="modal">
                        Change Guardian
                      </button>
                    </div>
                    <div class="col-md-6 my-2">
                      <button class="btn crBtn px-4 py-2 w-100">
                        Approve Guardian
                      </button>
                    </div>
                  </div>
                
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
<!-- change guardion -->
<div class="modal fade" id="ModalTogglechnage" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered ">
  <div class="modal-content ">

    <div class="modal-body pt-0">

      <div class="my-2 row">
        <div class="col-md-12">
          <div class="d-flex w-100">
            <img src="<?php echo base_url(); ?>/assets/images/avatars/000.png" alt="" width="70px" />
            <div class="ms-2 w-100">
              <p class="fmon fs5 mb-0 mt-2">Taking care of grandpa</p>
              <div class="d-flex justify-content-between items-center mt-2">
                <p class="text-muted fs6 fmon  mb-0">23 January, 2024 17:00</p>
                <p class="d-block ms-auto mb-0 fmon fn1 fw-bold ms-1">New</p>
              </div>

            </div>

          </div>
          <div class="my-2 d-flex flex-wrap justify-content-between align-items-center">
            <p class="fmon fs7 m-0 ps-2">Florida</p>
            <p class="mb-0 fmon fn1 ms-1">17:00</p>

          </div>
          <p class="fmon mt-2 fn2 mb-0">It is a long established fact that a reader will be distracted by the
            readable.</p>
          <div class="my-2">
            <p class="fmon mt-2 fn2 mb-0">Nutrition</p>
            <p class="fmon mt-2 fn5 mb-0">Food in refrigerator</p>
          </div>
          <div class="my-2">
            <p class="fmon mt-2 fn2 mb-0">Household</p>
            <p class="fmon mt-2 fn5 mb-0">In need of housekeeoing</p>
          </div>
          <div class="my-2">
            <p class="fmon mt-2 fn2 mb-0">Health and Wellness</p>
            <p class="fmon mt-2 fn5 mb-0">Overall mental state</p>
          </div>
          <div class="my-2">
            <p class="fmon mt-2 fn2 mb-0">Medication</p>
            <p class="fmon mt-2 fn5 mb-0">Is client taking medication</p>
          </div>
        </div>
        <div class=" my-2">
          <label class="fmon fn4 mb-1" for="fname"> Guardian</label>
          <div class="oCard2 fselect w-100 d-flex align-items-center p-2" style="width: 100% !important;">
            <select class="form-select fInp bg-transparent">
              <option value="">select</option>
            </select>
           
          </div>

        </div>

        <div class="col-md-12  ">
        <div class="row justify-content-center">
         
          <div class="col-md-6 my-2">
            <button class="btn changeBtn px-4 py-2 w-100">
              Save
            </button>
          </div>
        </div>
      
        </div>
      </div>
    </div>
  </div>
</div>
</div>
        <!-- invoice modal -->
        <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
          tabindex="-1">
          <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content ">

              <div class="modal-body pt-0">

                <div class="my-2 row">
                  <div class="col-md-12">
                    <div class="d-flex w-100">
                      <img src="./assets/images/avatars/000.png" alt="" width="70px" />
                      <div class="ms-2 w-100">
                        <p class="fmon fs5 mb-0 mt-2">Taking care of grandpa</p>
                        <div class="d-flex justify-content-between items-center mt-2">
                          <p class="text-muted fs6 fmon  mb-0">23 January, 2024 17:00</p>
                          <p class="d-block ms-auto mb-0 fmon fn1 fw-bold ms-1">New</p>
                        </div>

                      </div>

                    </div>
                    <div class="my-2 d-flex flex-wrap justify-content-between align-items-center">
                      <p class="fmon fs7 m-0 ps-2">Florida</p>
                      <p class="mb-0 fmon fn1 ms-1">17:00</p>

                    </div>
                    <p class="fmon mt-2 fn2 mb-0">It is a long established fact that a reader will be distracted by the
                      readable.</p>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Nutrition</p>
                      <p class="fmon mt-2 fn5 mb-0">Food in refrigerator</p>
                    </div>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Household</p>
                      <p class="fmon mt-2 fn5 mb-0">In need of housekeeoing</p>
                    </div>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Health and Wellness</p>
                      <p class="fmon mt-2 fn5 mb-0">Overall mental state</p>
                    </div>
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Medication</p>
                      <p class="fmon mt-2 fn5 mb-0">Is client taking medication</p>
                    </div>
                  </div>
                  <div class=" my-2">
                    <div class="d-flex justify-content-between ">
                      <p class="fmon mb-0 mt-1 fn2">Total</p>
                      <p class="fmon mb-0 mt-1 fn2">£108,00 </p>
                    </div>
                    <div class="d-flex justify-content-between ">
                      <p class="fmon mb-0 mt-1 fn2">Vat</p>
                      <p class="fmon mb-0 mt-1 fn2">£21,00 </p>
                    </div>
                    <div class="d-flex justify-content-between ">
                      <p class="fmon mb-0 mt-1 fn2">Sub Total</p>
                      <p class="fmon mb-0 mt-1 fn2">£126,00 </p>
                    </div>
                  </div>

                </div>

                <div class="col-md-12 my-2 ">
                  <button class="btn crBtn px-4 py-2 w-100">
                    Send Invoice
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- guardian report modal -->

        <div class="modal fade" id="exampleModalToggle3" aria-hidden="true" aria-labelledby="exampleModalToggleLabele"
          tabindex="-1">
          <div class="modal-dialog modal-dialog-centered modal-lg ">
            <div class="modal-content  ">

              <div class="modal-body pt-0">

                <div class="my-2 row">
                  <div class="col-md-12">
                    <div class="d-flex w-100">
                      <img src="<?php echo base_url(); ?>/assets/images/avatars/000.png" alt="" width="70px" />
                      <div class="ms-2 w-100">
                        <p class="fmon fs5 mb-0 mt-2">Taking care of grandpa</p>


                      </div>

                    </div>
                    <div class="my-2 ">
                      <p class="fmon fs7 m-0 ps-2">Florida</p>


                    </div>
                    <p class="fmon mt-2 fn2 mb-0">It is a long established fact that a reader will be distracted by the
                      readable.</p>
                   <div class="d-flex justify-content-between">
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Nutrition</p>
                      <p class="fmon mt-2 fn5 mb-0">Food in refrigerator</p>
                    </div>
                   
                      <div class="my-2">
                        <p class="fmon mt-2 fn2 mb-0">Household</p>
                        <p class="fmon mt-2 fn5 mb-0">In need of housekeeoing</p>
                      </div>
                   </div>
                    <div class="d-flex justify-content-between">
                      <div class="my-2">
                        <p class="fmon mt-2 fn2 mb-0">Health and Wellness</p>
                        <p class="fmon mt-2 fn5 mb-0">Overall mental state</p>
                      </div>
                 
                    <div class="my-2">
                      <p class="fmon mt-2 fn2 mb-0">Medication</p>
                      <p class="fmon mt-2 fn5 mb-0">Is client taking medication</p>
                    </div>
                    </div>
                  </div>
                 <div class="my-2">
                  <p class="fmon  fn5">Guardian Comment</p>
                  <p class="fmon mt-2 fn2 mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                  <div class="row">
                    <div class="col-md-6 my-2">
                      <img class="img-fluid
                       imgComment" src="<?php echo base_url(); ?>assets/images/gallery/commentImg.png" alt="">
                    </div>
                  </div>
                 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    </div>
  </main>
  <!--end main wrapper-->
