@props(['bodyClass'])
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  >

  <link
    href="//kit.fontawesome.com"
    rel="preconnect"
  />
  <link
    href="//fonts.googleapis.com"
    rel="preconnect"
  />
  <link
    href="//cdnjs.cloudflare.com"
    rel="preconnect"
  />
  <link
    href="//ajax.googleapis.com"
    rel="preconnect"
  />
  <link
    href="//cdn.jsdelivr.net"
    rel="preconnect"
  />

  <link
    href="{{ asset('assets') }}/img/apple-icon.png"
    rel="apple-touch-icon"
    sizes="76x76"
  >
  <link
    type="image/png"
    href="{{ asset('assets') }}/img/favicon.png"
    rel="icon"
  >

  <title>Student and Teacher management system</title>

  <!--     Fonts and icons     -->
  <link
    type="text/css"
    href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700"
    rel="stylesheet"
  />

  <!-- Nucleo Icons -->
  <link
    href="{{ asset('assets') }}/css/nucleo-icons.css"
    rel="stylesheet"
  />
  <link
    href="{{ asset('assets') }}/css/nucleo-svg.css"
    rel="stylesheet"
  />

  <!-- Font Awesome Icons -->
  <script
    src="//kit.fontawesome.com/42d5adcbca.js"
    crossorigin="anonymous"
  ></script>

  <!-- Material Icons -->
  <link
    href="//fonts.googleapis.com/icon?family=Material+Icons+Round"
    rel="stylesheet"
  >

  <!-- CSS Files -->
  <link
    id="pagestyle"
    href="{{ asset('assets') }}/css/material-dashboard.css?v=3.0.0"
    rel="stylesheet"
  />

  <!-- bootstrap datepicker -->
  <link
    href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
    rel="stylesheet"
  >
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
  </script>
  <script
    src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
  ></script>
  <!-- bootstrap datepicker -->

  <!-- select2 -->
  <link
    href="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
    rel="stylesheet"
  />
  <!-- <blade ___scripts_3___/> -->
  <script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">
  </script>
  <!-- select2 -->

  <link
    href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.css"
    rel="stylesheet"
  />
  <script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>

  <link
    href="{{ asset('assets') }}/css/customize.css"
    rel="stylesheet"
  />

  <script src="//cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

  <script src="/js/index.js"></script>

  <style>
    #users-table_filter {
      display: none;
    }
  </style>

</head>

<body class="{{ $bodyClass }}">

  {{ $slot }}

  <script src="{{ asset('assets') }}/js/core/popper.min.js"></script>
  <script src="{{ asset('assets') }}/js/core/bootstrap.min.js"></script>
  <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js">
  </script>
  <script src="{{ asset('assets') }}/js/plugins/smooth-scrollbar.min.js">
  </script>

  @stack('js')
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>

  <!-- Github buttons -->
  <script
    async
    defer
    src="//buttons.github.io/buttons.js"
  ></script>

  <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="{{ asset('assets') }}/js/material-dashboard.min.js?v=3.0.0">
  </script>

</body>

</html>
