<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    @if(App::isLocale('ar'))
     <link rel="stylesheet" href="/css/app_ar.css">
    @else
     <link rel="stylesheet" href="/css/app.css">
    @endif
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8101078072267816"
     crossorigin="anonymous"></script>
    
    {{ $after_style??'' }}
    <script src="/js/app.js"></script>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app" style="position: relative">
  @include('layouts.inc.navbar')
  @include('layouts.inc.sidebar')

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="position: relative;">
    <div id="voyager-loader" v-if="load" >
        <img src="/img/voyager-assets.png" alt="Voyager Loader">
    </div>
    <!-- Content Header (Page header) -->
    @isset($header)
      <div class="content-header">
        <div class="container-fluid sticky-wrapper">
          {{ $header }}
        </div><!-- /.container-fluid -->
      </div>
    @endisset

    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">
          
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif  
        {{ $slot }}
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <h5>Title</h5>
      <p>Sidebar content</p>
    </div>
  </aside>
</div>
<script src="/bower_components/admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
<script src="/bower_components/admin-lte/plugins/toastr/toastr.min.js"></script>
<script src="{{ asset('bower_components/admin-lte/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('bower_components/admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="/bower_components/admin-lte/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/bower_components/admin-lte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
<script src="/bower_components/admin-lte/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script>
  Vue.mixin({
    data: function () {
        return {
            auth: @json(Auth::user()),
            cota: @json(Auth::user()->office?Auth::user()->office->account:null),
            load: true
        }
      }
  });
  @if(App::isLocale('ar'))
  toastr.options = {
    positionClass: 'toast-top-left',
    rtl: true,
    progressBar: true,
  };
  @endif
  $(function(){
    var btn = $('.link-submit');
    btn.prepend('<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span> ');
    btn.on('click', function(e) {
        $this = $(this);
        var form = $this.closest('form')[0];
        if (form.checkValidity()) {
            $this.find('.spinner-border').removeClass('d-none');
            setTimeout(() => {
              $this.attr("disabled", true);
            }, 10);
            if($(form).attr('action')){
              form.submit();
            }
        }
    });
});
</script>
@isset($after_script)
{{$after_script}}
@else
  <script>

                var app = new Vue({
                    el: '#app',
                    mounted:function(){
                       this.$root.load = false;
                    }
                })
  </script>
@endisset($after_script)

</body>
</html>