@extends('school_admin.layouts.app')
@push('style')
    <link rel="stylesheet" href="//cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
@endpush
{{-- @section('pagetitlesection')
    <li class="nav-item d-none d-sm-inline-block">
        <a href="" class="nav-link custom-cumb">{{ __('Dashboard') }}</a>
</li>
@endsection --}}
@section('content')
<section class="section dashboard">
    <div class="row ">
      <div class="line-hdr">
        <h4>Dashboard</h4>
      </div>
      <div class="conter-top-sec">

        <div class="c-box active">
          <h6>Total User</h6>
          <h4>230000</h4>
        </div>

        <div class="c-box">
          <h6>Total Participation Request</h6>
          <h4>3400</h4>
        </div>

        <div class="c-box">
          <h6>Total Accepted Request</h6>
          <h4>8898</h4>
        </div>


        <div class="c-box">
          <h6>Total Rejected Request</h6>
          <h4>7898</h4>
        </div>

        <div class="c-box">
          <h6>Total Expense for Approval</h6>
          <h4>909</h4>
        </div>

      </div>
    </div>

    <div class="pagetitle-row">
      <div class="row">
        <div class="col-lg-10 ">
          <div class="row">
            <div class="col-lg-3 col-sm-4 col-12">
              <input type="date" class="form-control">
            </div>

            <div class="col-lg-3 col-sm-4 col-12">
              <input type="date" class="form-control">
            </div>

            <div class="col-lg-3 col-sm-4 col-12">
              <select class="form-select" aria-label="Default select example">
                <option selected="">Status</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select>
            </div>



            <div class="col-lg-3 col-sm-4 col-12">
              <button><i class="fa-solid fa-magnifying-glass"></i> Search</button>
            </div>
          </div>
        </div>

        <div class="col-lg-2"></div>

      </div>
    </div>
    <div class="row">

      <div class="col-lg-12 col-sm-12 col-12">
        <div class="performance-statistics row">
          <div class="table-responsive">
            <table class="table table-borderless">
              <thead>
                <tr>
                  <th scope="col">User Name</th>
                  <th scope="col">Email Id</th>
                  <th scope="col">Phone Number</th>
                  <th scope="col">User Role</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>Anirpal Das</td>
                  <td>Anirpal89@gmail.com</td>
                  <td>9898989898</td>
                  <td>School Staff</td>
                  <td>
                    <div class="filter"> <a class="icon show" href="#" data-bs-toggle="dropdown"
                        aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow fade"
                        style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 29.6px, 0px);"
                        data-popper-placement="bottom-end">
                        <li class="dropdown-header text-start">
                          <h6>Filter</h6>
                        </li>
                        <li><a class="dropdown-item" href="#">Today</a></li>
                        <li><a class="dropdown-item" href="#">This Month</a></li>
                        <li><a class="dropdown-item" href="#">This Year</a></li>
                      </ul>

                      <a href="#"><i class="fa-regular fa-trash-can"></i></a>
                    </div>
                  </td>
                </tr>



              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="col-lg-12 ">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&lsaquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&rsaquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
@endsection
@push('scripts')
    {{-- <script>
            $(document).ready(function() {
                $("#addbranch-btn").click(function() {
                    $("#slide-from-right").addClass("show-side-form");
                });

                $("#close-btn").click(function() {
                    $("#slide-from-right").removeClass("show-side-form");
                });
            });
        </script> --}}
@endpush