@extends('fronted.layout.main')
@section('adcontent')
<style>
   .table>tbody {
    vertical-align: 1;
}
  .roomSeatTable tr {
     border-bottom:0px;
   }
   table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
   text-align: center;
   }
</style>
<div class="container-fluid mt-4">
 
   <div class="container-fluid me-0 ms-0  bg-white shadow-sm">

   </div>
</div>
<div class="container-fluid mt-3">
   <div class="container py-2">
     <div class="container d-flex justify-content-around align-items-center fs-6 g-3" style="margin-left: 59px;" >
        <div class="container my-1">
            <p class="text-info p-text">Total Complaint :-<span class="text-warning">12</span>
                <i class="bi bi-person-circle"></i>
            </p>
        </div>
        <div class="container my-1">
            <p class="text-info  p-text  text-left ">Active Complaint :-<span class="text-warning">12</span></p>
        </div>
        <div class="container my-1">
            <p class="text-info  p-text ">Closed Complaint :- <span class="text-warning">12</span></p>
        </div>
        <div class="container my-1">
            <p class="text-info  p-text ">Unseen Complaint:- <span class="text-warning">12</span></p>
        </div>
    </div>
        <div class="container my-1">
         <form >
                <div class="row g-3 align-items-right">
                    <div class="col-auto expensesfilter">
                        <label  class="col-form-label">From&nbsp;:</label>
                    </div>
                    <div class="col-auto expensesfilter">
                        <input type="date" value="" class="form-control" name="startDate" id="startDate" required>
                    </div>
                    <div class="col-auto expensesfilter">
                        <label  class="col-form-label">To &nbsp;:</label>
                    </div>
                    <div class="col-auto expensesfilter">
                        <input type="date" value=""  class="form-control" name="endDate" id="endDate" required>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-warning btn-sm" type="submit">Filter</button>
                    </div>
                  
                </div>
          </form>
        </div>
   
   <div class="table-responsive dataTable mt-3">
      <table  class="table table-bordered  roomSeatTable" >
         <thead >
            <th>S.No.</th>
             <th>Date </th>
            <th>Candidate Name</th>
            <th>Mobile</th>
            <th>Room No</th>
            <th>Seat No.</th>
            <th>Complaint Type</th>
            <th>Complaint Message</th>
            
            <th>View</th>
            <th>Response</th>
            <th>Remark</th>
         </thead>
         <tbody class="align-middle">
           
            <tr>
               <td>1.</td>
               <td>22 jan 2023</td>
               <td>Sakshi Verma</td>
               <td>9905798</td>
               <td>101</td>
               <td>B</td>
               <td>Cleaning</td>
               <td>Room Cleaning</td>
              
               <td><i class="fa fa-eye text-primary" aria-hidden="true"></i></td>
               <td><i class="fa fa-reply text-success" aria-hidden="true"></i></td>
               <td> <select>
                      <option>Not Done</option>
                      <option>Done</option>
                   </select>
               </td>
              
            </tr>
         
         </tbody>
      </table>
   </div>
</div>

</div>

<script>
   $(document).ready(() => {
      $("#complaintboard").css('color', "#ffa500");
      $("#complaintboard i").css('color', "#ffa500")
   });
</script>
@endsection