<!doctype html>
<html>

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{trans('admin.StudyPool')}}</title>
   <script type="text/javascript" src="{{ asset('assets/theme/js/jquery.js') }}"></script>
   <script type="text/javascript" src="{{ asset('assets/plugins/jquery-3.5.1.min.js') }}"></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
   <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
   <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
   <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
   <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/nadel.css') }}">
   @yield('custom-styles')

   @if(Session::get('locale') == "ar")
      <!-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/bootstrap-rtl.min.css') }}"> -->
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/bootstrap.rtl.min_latist_version.css') }}">
      <!-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/select2-bootstrap4-rtl.css') }}"> -->
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/responsive-rtl.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/custom-rtl.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/nadel_rtl.css') }}">
   @else
      <!-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/bootstrap.min.css') }}"> -->
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/bootstrap.min_latist_version.css') }}">
      <!-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/select2-bootstrap4.css') }}"> -->
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/responsive.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/custom.css') }}">
   @endif
   @if(Auth::user()->theme != "default")
   <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/'.Auth::user()->theme.'.css') }}">
   @endif
   <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme/css/bootstrap-icons.css') }}">
  
   <script type="text/javascript" src="{{ asset('assets/theme/js/bootstrap.min.js') }}"></script>
   <script src="{{ asset('assets/plugins/mousetrap.min.js') }}"></script>
   <script src="{{ asset('assets/plugins/ckeditor/ckeditor.js') }}"></script>
   <script src="{{ asset('assets/plugins/printer/jQuery.print.js') }}"></script>
   {{-- bootbox --}}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
   <!-- Select 2 -->
   <link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
   <script src="assets/plugins/select2/js/select2.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
</head>

<body>
   <script src="{{ asset('assets/theme/js/lottie-player.js') }}"></script>
   <div class="loading">
      <lottie-player src="{{ asset('assets/theme/img/loading.json') }}" background="transparent" speed="2.5" style="width: 100px; height: 100vh; margin:auto; z-index: ;" loop autoplay></lottie-player>
   </div>
   <div class="wrapper">
      @include('admin.layout.side_bar')
      @include('admin.layout.topbar')
      <div id="page-holder">
         @yield('content')
      </div>
      </main>
   </div>
   </div>
   <!-- Modal theme changer -->
   <div class="state"></div>
   <div id="state"></div>
   <div class="modal fade rounded" id="theme_changer_mod" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="p-2 bg-white rounded">
                <div class='cross'>
                    <button type="button" class="border-0  cancel_icon" data-bs-dismiss="modal">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
                <div class='p-4'>
                    <form id="myForm">
                     <div class="modal-header bg-light pl-lg-4">
                        <h5 class="modal-title" id="staticBackdropLabel">Select New Theme</h5>
                     </div>
                     <div class="modal-body">
                        <div class="container">
                           <p class="mb-3">Click a theme to Apply</p>
                           <div class="row row-cols-2 row-cols-lg-4 row-cols-3 g-2 g-lg-3" id="themechanger">
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/default')}}" role="button">
                                    <img src="images/theme-preview/default.svg" class="img-fluid mb-2 border" alt="Default theme">
                                    <p class="text-center bg-transparent" style="background-color: #eee">Whisper (Default)</p>
                                 </a>
                              </div>
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/theme-baltic-sea')}}" role="button">
                                    <img src="images/theme-preview/baltic-sea.svg" class="img-fluid mb-2 border" alt="Baltic Sea">
                                    <p class="text-center bg-transparent" style="background-color: #333b44">Baltic Sea</p>
                                 </a>
                              </div>
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/theme-deep-opal')}}" role="button">
                                    <img src="images/theme-preview/deep-opal.svg" class="img-fluid mb-2 border" alt="Deep Opal">
                                    <p class="text-center bg-transparent">Deep Opal</p>
                                 </a>
                              </div>
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/theme-mariner')}}" role="button">
                                    <img src="images/theme-preview/mariner.svg" class="img-fluid mb-2 border" alt="Mariner">
                                    <p class="text-center bg-transparent" style="background-color: #4270b2">Mariner</p>
                                 </a>
                              </div>
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/theme-cyan-blue')}}" role="button">
                                    <img src="images/theme-preview/cyan-blue.svg" class="img-fluid mb-2 border" alt="Cyan Blue">
                                    <p class="text-center bg-transparent" style="background-color: #1da1f2">Cyan Blue</p>
                                 </a>
                              </div>
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/theme-dark-azure')}}" role="button">
                                    <img src="images/theme-preview/dark-azure.svg" class="img-fluid mb-2 border" alt="Dark Azure">
                                    <p class="text-center bg-transparent" style="background-color: #0e2439">Dark Azure</p>
                                 </a>
                              </div>
                              <div class="col">
                                 <a href="{{ url('/ChangeTheme/theme-dark-mode')}}" role="button">
                                    <img src="images/theme-preview/dark-mode.svg" class="img-fluid mb-2 border" alt="Dark Mode">
                                    <p class="text-center bg-transparent">Dark Mode</p>
                                 </a>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-sm btn-outline-secondary px-3" data-dismiss="modal"></button>
                     </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
</div>
   <style type="text/css">
      .select2-container .select2-selection--single {
         height: 31px;
      }
   </style>
   <script src="{{ asset('assets/theme/js/index.js?'.rand()) }}"></script>
   <div class="msg"> </div>
   <div class="toast_div"> </div>
   </div>
   <div id="print_invoices" class="small print"></div>
   <style>
      .select2-container--default .select2-results__option--disabled {
         background-color: blue;
         color: white;
      }

      span.select2-dropdown.select2-dropdown--below {
         min-width: max-content !important;
      }

      .tablesorter-header {
         background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==) !important;
         background-repeat: no-repeat !important;
         background-position: center right !important;
         padding: 4px 18px 4px 4px;
         white-space: normal;
         cursor: pointer;
      }

      .bg-dark .tablesorter-header {
         background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==) !important;
      }

      .tablesorter-headerAsc {
         background-color: #9fbfdf;
         background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) !important;
      }

      .tablesorter-headerDesc {
         background-color: #8cb3d9;
         background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) !important;
      }

      .loading {
         left: 0 !important;
         opacity: 0.8;
         top: 50%;
         background: #ffffff66;
         width: 100%;
         height: 100vh;
         position: fixed;
         z-index: 999;
         display: none;
      }

      @media print {
         .tablesorter-headerUnSorted {
            background-image: none !important;
         }
         .table-responsive {
            overflow: hidden !important;
         }
         .no-print{
            display: none !important;
         }
      }
   </style>
   <script>
      $(document).ready(function() {
         $('.dropbtn').click(function() {
            // $('.dropdown-content').css({"display":"block"});
            $('.dropdown-content').toggle();

         });
         $('.selectpicker').selectpicker();
         $('select').select2();
      });
   </script>
   <script>
      /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
      var dropdown = document.getElementsByClassName("dropdown-btn");
      var i;

      for (i = 0; i < dropdown.length; i++) {
         dropdown[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
               dropdownContent.style.display = "none";
            } else {
               dropdownContent.style.display = "block";
            }
         });
      }      
   </script>
   <script>
      function printDiv(id){
          $('#'+id).print();
      }
  </script>
   @yield('custom-js')
</body>

</html>
