<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@yield('title')</title>
  <!-- Google Font: Source Sans Pro -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
   <link rel="stylesheet" href="{{asset('style/assets/css/style.css')}}">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{asset('style/plugins/fontawesome-free/css/all.min.css')}}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="{{asset('style/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">
  <!-- iCheck -->
  <link rel="stylesheet" href="{{asset('style/plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">
  <!-- JQVMap -->
  <link rel="stylesheet" href="{{asset('style/plugins/jqvmap/jqvmap.min.css')}}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{asset('style/assets/css/adminlte.min.css')}}">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="{{asset('style/plugins/overlayScrollbars/css/OverlayScrollbars.min.css')}}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{{asset('style/plugins/daterangepicker/daterangepicker.css')}}">
  <!-- summernote -->
  <link rel="stylesheet" href="{{asset('style/plugins/summernote/summernote-bs4.min.css')}}">
  <!-- Line icons -->
  <link rel="stylesheet" href="{{asset('style/assets/css/line-awesome.css')}}">
  <link rel="stylesheet" href="{{asset('style/assets/css/line-awesome.min.css')}}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{asset('style/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{asset('style/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{asset('style/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Select2 -->
  <link rel="stylesheet" href="{{asset('style/plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('style/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
<style>
    .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top {
    top: 49% !important;
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css'>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
  <div class="wrapper">



    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <!-- Left navbar links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="las la-bars"></i></a>
        </li>
      </ul>

      <!-- Right navbar links -->
      <ul class="navbar-nav ml-auto">
        <!-- Navbar Search -->


        <!-- Messages Dropdown Menu -->

        <!-- Notifications Dropdown Menu -->

        <li class="nav-item">
          <a class="nav-link" data-widget="fullscreen" href="#" role="button">
            <i class="las la-expand-arrows-alt"></i>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" data-toggle="dropdown" href="#">
            <i class="las la-user-tie"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <div class="dropdown-divider"></div>
            <a href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();" class="dropdown-item"><i class="las la-power-off"></i> Log Out</a>
                                                      <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
            <a href="{{url('change-password')}}" class="dropdown-item"><i class="las la-lock"></i> Change Password</a>
          </div>
        </li>
      </ul>
    </nav>
    <!-- /.navbar -->

    <aside class="main-sidebar sidebar-light">

      <!-- Sidebar -->
      <div class="sidebar">
        <!-- Sidebar user panel (optional) -->
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
          <div class="image">
            <img src="{{asset('style/assets/img/8.jpeg')}}" class="w-100 " style="    width: 100%;
    height: 61px;
    object-fit: cover;
" alt="User Image">
            <!-- <h1>Dashboard</h1> -->
          </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
            <li class="nav-item menu-open">
              <a href="{{route('admin.index')}}" class="nav-link active">
                <i class="nav-icon las la-align-left"></i>
                <p>
                  Dashboard
                </p>
              </a>
            </li>



    
            
             <li class="nav-item" id="sale">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-address-card"></i>
              <p>
              Sale
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
               @if (auth()->user()->role == 'admin' || auth()->user()->role == 'users' || auth()->user()->role == 'driver')
              <li class="nav-item" >
                <a href="{{url('add-register')}}" class="nav-link" id="add-sale">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Add Sale</p>
                </a>
              </li>
                @endif

              <li class="nav-item">
                <a href="{{url('manage-register')}}" class="nav-link" id="manage-sale">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Manage Sale</p>
                </a>
              </li>
         
            </ul>
          </li>
          
           
             <!--<li class="nav-item">-->
            <!--<a href="#" class="nav-link">-->
            <!--<i class="nav-icon las la-address-card"></i>-->
            <!--  <p>-->
            <!--  Pre Booking-->
            <!--    <i class="nav-icon las la-angle-left right"></i>-->
            <!--  </p>-->
            <!--</a>-->
            <!--<ul class="nav nav-treeview">-->
            <!--   @if (auth()->user()->role == 'admin' || auth()->user()->role == 'users')-->
         
            <!--  <li class="nav-item">-->
            <!--    <a href="{{url('manage-pre-booking')}}" class="nav-link">-->
            <!--      <i class="las la-grip-lines nav-icon"></i>-->
            <!--      <p>Manage Booking</p>-->
            <!--    </a>-->
            <!--  </li>-->
            <!--    @endif-->

         
            <!--</ul>-->
          <!--</li>
          
        1.STATEMENTS 
        2.TAX STATEMENT 
        3.TAX INVOICE 
        4.CASH PAID DETAILS (CHEQUE/CASH/ONLINE PAYMENTS)
        5.DUE PAYMENT DETAILS 
        6.PAYMENT GATEWAY 
        7.ALL DOCUMENTS NEED TO DOWNLOAD OPTION(PDF FORMAT)
          
          -->
 
            @if (auth()->user()->role == 'admin' || auth()->user()->role == 'users' ) 
           <li class="nav-item" id="customer">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-user-tie"></i>
              <p>
              Customer
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="{{url('add-customer')}}" class="nav-link" id="add-customer">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Add Customer</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('view-customer')}}" class="nav-link" id="manage-customer">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Manage Customer</p>
                </a>
              </li>
            </ul>
          </li>
            <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-shopping-bag"></i>
              <p>
              Purchase
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="{{route('purchase.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Add Purchase</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('manage-purchase')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Manage Purchase</p>
                </a>
              </li>
            </ul>
          </li>
                      <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-money-bill-wave"></i>
              <p>
              Expense
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
                 <li class="nav-item">
                <a href="{{route('expense.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Add Expense</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{route('expense_category.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Add Expense Category</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('manage-expense')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Manage Expense</p>
                </a>
              </li>
            </ul>
          </li>
            <li class="nav-item" id="tax">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-address-card"></i>
              <p>
              Tax
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
                 <li class="nav-item">
                <a href="{{route('tax.index')}}" class="nav-link" id="add-tax">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>generate Tax Report</p>
                </a>
              </li>
         
              <li class="nav-item">
                <a href="{{url('manage-invoice')}}" class="nav-link" id="manage-tax">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Manage tax Report</p>
                </a>
              </li>
            </ul>
          </li>
                  <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-address-card"></i>
              <p>
              Transactions
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
                 <li class="nav-item">
                <a href="{{route('transaction-statement.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Transactions </p>
                </a>
              </li>
         
            </ul>
          </li>
       <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-address-card"></i>
              <p>
              Income 
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
                 <li class="nav-item">
                <a href="{{route('income.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Add Income </p>
                </a>
              </li>
                         <li class="nav-item">
                <a href="{{url('manage_addition_income')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> manage Income </p>
                </a>
              </li>
         
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-address-card"></i>
              <p>
              Payments 
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
                 <li class="nav-item">
                <a href="{{route('payment.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Add Payment </p>
                </a>
              </li>
               <li class="nav-item">
                <a href="{{url('viewPaymentSlip')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Payment Slip </p>
                </a>
              </li>
                         <li class="nav-item">
                <a href="{{url('duePaymentBills')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Due Payment Bills </p>
                </a>
              </li>
                                <li class="nav-item">
                <a href="{{url('payment-voucher')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>  Payment Voucher </p>
                </a>
              </li>
             
            </ul>
          </li>
    
 @endif 
  @if (auth()->user()->role == 'client')  
   <li class="nav-item" id="tax">
            <a href="#" class="nav-link">
        <i class="nav-icon las la-address-card"></i>
          <p>
          Tax
            <i class="nav-icon las la-angle-left right"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
             
     
          <li class="nav-item">
            <a href="{{url('manage-invoice')}}" class="nav-link" id="manage-tax">
              <i class="las la-grip-lines nav-icon"></i>
              <p>Manage tax Report</p>
            </a>
          </li>
        </ul>
      </li>
  <li class="nav-item">
            <a href="#" class="nav-link">
    <i class="nav-icon las la-address-card"></i>
      <p>
      Transactions
        <i class="nav-icon las la-angle-left right"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
         <li class="nav-item">
        <a href="{{route('transaction-statement.index')}}" class="nav-link">
          <i class="las la-grip-lines nav-icon"></i>
          <p> Transactions </p>
        </a>
      </li>
 
    </ul>
  </li>
  <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-address-card"></i>
              <p>
              Payments 
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
               
               <li class="nav-item">
                <a href="{{url('viewPaymentSlip')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Payment Slip </p>
                </a>
              </li>
			   
                         <li class="nav-item">
                <a href="{{url('duePaymentBills')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p> Due Payment Bills </p>
                </a>
              </li>
               @if (auth()->user()->role == 'admin'  ) 
			  <li class="nav-item">
                <a href="{{url('payment-voucher')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>  Payment Voucher </p>
                </a>
              </li>  
              @endif
            </ul>
          </li>
           
  
  @endif

    @if (auth()->user()->role == 'admin'  ) 
     <!--<li class="nav-item">-->
     <!--       <a href="#" class="nav-link">-->
     <!--       <i class="nav-icon las la-chart-pie"></i>-->
     <!--         <p>-->
     <!--         Details -->
     <!--           <i class="nav-icon las la-angle-left right"></i>-->
     <!--         </p>-->
     <!--       </a>-->
     <!--       <ul class="nav nav-treeview">-->
     <!--                <li class="nav-item">-->
     <!--           <a href="{{route('all.index')}}" class="nav-link">-->
     <!--             <i class="las la-grip-lines nav-icon"></i>-->
     <!--             <p>All Transaction</p>-->
     <!--           </a>-->
     <!--         </li>-->
              
     <!--                     <li class="nav-item">-->
     <!--           <a href="{{route('all_tax.index')}}" class="nav-link">-->
     <!--             <i class="las la-grip-lines nav-icon"></i>-->
     <!--             <p>All Tax</p>-->
     <!--           </a>-->
     <!--         </li>-->
              
           
     <!--       </ul>-->
     <!--     </li>-->
             <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-chart-pie"></i>
              <p>
              Reports
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
                     <li class="nav-item">
                <a href="{{url('stock-report')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Stock Reports</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('income-report')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Income Reports</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('purchase-report')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Purchase Reports</p>
                </a>
              </li>
                <li class="nav-item">
                <a href="{{url('expense-report')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Expense Reports</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('ledger')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Ledger reports</p>
                </a>
              </li>
                <li class="nav-item">
                <a href="{{url('overall_reports')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Overall reports</p>
                </a>
              </li>
                               <li class="nav-item">
                <a href="{{route('all.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Transaction reports</p>
                </a>
              </li>
                <li class="nav-item">
                <a href="{{route('all_tax.index')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Tax reports</p>
                </a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
            <i class="nav-icon las la-users"></i>
              <p>
              Users
                <i class="nav-icon las la-angle-left right"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="{{url('add-users')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Add Users</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{{url('manage-users')}}" class="nav-link">
                  <i class="las la-grip-lines nav-icon"></i>
                  <p>Manage Users</p>
                </a>
              </li>
           
            </ul>
          </li>
             @endif  
          </ul>
        </nav>
        <!-- /.sidebar-menu -->
      </div>
      <!-- /.sidebar -->
    </aside>


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

      <!-- Main content -->
     @yield('content')
      <!-- /.content -->

    <!-- /.content-wrapper -->
    <footer class="main-footer">
      <strong>Copyright &copy; 2021-2022 <a href="">Dashboard</a>.</strong>
      All rights reserved.
      <div class="float-right d-none d-sm-inline-block">
        <b>Developed by</b> -
      </div>
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
  </div>
  <!-- ./wrapper -->

  <!-- jQuery -->
  <script src="{{asset('style/plugins/jquery/jquery.min.js')}}"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="{{asset('style/plugins/jquery-ui/jquery-ui.min.js')}}"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
    $.widget.bridge('uibutton', $.ui.button)
  </script>
  <!-- Bootstrap 4 -->
  <script src="{{asset('style/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
  <!-- ChartJS -->
  <script src="{{asset('style/plugins/chart.js/Chart.min.js')}}"></script>
  <!-- Sparkline -->
  <script src="{{asset('style/plugins/sparklines/sparkline.js')}}"></script>
  <!-- JQVMap -->
  <script src="{{asset('style/plugins/jqvmap/jquery.vmap.min.js')}}"></script>
  <script src="{{asset('style/plugins/jqvmap/maps/jquery.vmap.usa.js')}}"></script>
  <!-- jQuery Knob Chart -->
  <script src="{{asset('style/plugins/jquery-knob/jquery.knob.min.js')}}"></script>
  <!-- daterangepicker -->
  <script src="{{asset('style/plugins/moment/moment.min.js')}}"></script>
  <script src="{{asset('style/plugins/daterangepicker/daterangepicker.js')}}"></script>
  <!-- Tempusdominus Bootstrap 4 -->
  <script src="{{asset('style/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
  <!-- Summernote -->
  <script src="{{asset('style/plugins/summernote/summernote-bs4.min.js')}}"></script>
  <!-- overlayScrollbars -->
  <script src="{{asset('style/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js')}}"></script>
  <!-- AdminLTE App -->
  <script src="{{asset('style/assets/js/adminlte.js')}}"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="{{asset('style/assets/js/demo.js')}}"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="{{asset('style/assets/js/pages/dashboard.js')}}"></script>
  <script src="{{asset('style/assets/js/pages/dashboard3.js')}}"></script>
  <script src="{{asset('style/plugins/datatables/jquery.dataTables.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
  <script src="{{asset('style/plugins/jszip/jszip.min.js')}}"></script>
  <script src="{{asset('style/plugins/pdfmake/pdfmake.min.js')}}"></script>
  <script src="{{asset('style/plugins/pdfmake/vfs_fonts.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
  <script src="{{asset('style/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>

  <!-- Select2 -->
  <script src="{{asset('style/plugins/select2/js/select2.full.min.js')}}"></script>
  <!-- Bootstrap4 Duallistbox -->
  <script src="{{asset('style/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js')}}"></script>

  <!-- Tempusdominus Bootstrap 4 -->

  <!-- Bootstrap Switch -->
  <script src="{{asset('style/plugins/bootstrap-switch/js/bootstrap-switch.min.js')}}"></script>
  <!-- BS-Stepper -->
  <script src="{{asset('style/plugins/bs-stepper/js/bs-stepper.min.js')}}"></script>
  <!-- dropzonejs -->
  <script src="{{asset('style/plugins/dropzone/min/dropzone.min.js')}}"></script>
@yield('script')
  <script>
    $(function() {
      //Initialize Select2 Elements
      $('.select2').select2()

      //Initialize Select2 Elements
      $('.select2bs4').select2({
        theme: 'bootstrap4'
      })

      //Datemask dd/mm/yyyy
      $('#datemask').inputmask('dd/mm/yyyy', {
        'placeholder': 'dd/mm/yyyy'
      })
      //Datemask2 mm/dd/yyyy
      $('#datemask2').inputmask('mm/dd/yyyy', {
        'placeholder': 'mm/dd/yyyy'
      })
      //Money Euro
      $('[data-mask]').inputmask()

      //Date picker
      $('#reservationdate').datetimepicker({
        format: 'L'
      });

      //Date and time picker
      $('#reservationdatetime').datetimepicker({
        icons: {
          time: 'far fa-clock'
        }
      });

      //Date range picker
      $('#reservation').daterangepicker()
      //Date range picker with time picker
      $('#reservationtime').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
          format: 'MM/DD/YYYY hh:mm A'
        }
      })
      //Date range as a button
      $('#daterange-btn').daterangepicker({
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          startDate: moment().subtract(29, 'days'),
          endDate: moment()
        },
        function(start, end) {
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
        }
      )

      //Timepicker
      $('#timepicker').datetimepicker({
        format: 'LT'
      })

      //Bootstrap Duallistbox
      $('.duallistbox').bootstrapDualListbox()

      //Colorpicker
      $('.my-colorpicker1').colorpicker()
      //color picker with addon
      $('.my-colorpicker2').colorpicker()

      $('.my-colorpicker2').on('colorpickerChange', function(event) {
        $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
      })

      $("input[data-bootstrap-switch]").each(function() {
        $(this).bootstrapSwitch('state', $(this).prop('checked'));
      })

    })
    // BS-Stepper Init
    document.addEventListener('DOMContentLoaded', function() {
      window.stepper = new Stepper(document.querySelector('.bs-stepper'))
    })

    // DropzoneJS Demo Code Start
    Dropzone.autoDiscover = false

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
    var previewNode = document.querySelector("#template")
    previewNode.id = ""
    var previewTemplate = previewNode.parentNode.innerHTML
    previewNode.parentNode.removeChild(previewNode)

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
      url: "/target-url", // Set the url
      thumbnailWidth: 80,
      thumbnailHeight: 80,
      parallelUploads: 20,
      previewTemplate: previewTemplate,
      autoQueue: false, // Make sure the files aren't queued until manually added
      previewsContainer: "#previews", // Define the container to display the previews
      clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    })

    myDropzone.on("addedfile", function(file) {
      // Hookup the start button
      file.previewElement.querySelector(".start").onclick = function() {
        myDropzone.enqueueFile(file)
      }
    })

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function(progress) {
      document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
    })

    myDropzone.on("sending", function(file) {
      // Show the total progress bar when upload starts
      document.querySelector("#total-progress").style.opacity = "1"
      // And disable the start button
      file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
    })

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function(progress) {
      document.querySelector("#total-progress").style.opacity = "0"
    })

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function() {
      myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
    }
    document.querySelector("#actions .cancel").onclick = function() {
      myDropzone.removeAllFiles(true)
    }
    // DropzoneJS Demo Code End
  </script>



  <script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function() {
      modal.style.display = "block";
      modalImg.src = this.src;
      modalImg.alt = this.alt;
      captionText.innerHTML = this.alt;
    }


    // When the user clicks on <span> (x), close the modal
    modal.onclick = function() {
      img01.className += " out";
      setTimeout(function() {
        modal.style.display = "none";
        img01.className = "modal-content";
      }, 400);

    }
  </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js'></script>

<script>
    $(function(){
  $('.datepicker').datepicker();
});

</script>


</body>

</html>
