@extends('layouts/layoutMaster')

@section('title', 'Analytics')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/apex-charts/apex-charts.scss',
  'resources/assets/vendor/libs/swiper/swiper.scss',
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
  'resources/assets/vendor/libs/datatables-rowgroup-bs5/rowgroup.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/tagify/tagify.scss',
  'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.scss',
  'resources/assets/vendor/libs/typeahead-js/typeahead.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

@section('page-style')
<link href="{{ asset('resources/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ asset('resources/assets/css/t_dataTables.dataTables.css') }}" rel="stylesheet">
<link href="{{ asset('resources/assets/vendor/scss/pages/cards-advance.scss') }}" rel="stylesheet">
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/apex-charts/apexcharts.js',
  'resources/assets/vendor/libs/swiper/swiper.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/tagify/tagify.js',
  'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.js',
  'resources/assets/vendor/libs/typeahead-js/typeahead.js',
  'resources/assets/vendor/libs/bloodhound/bloodhound.js'
  ])
@endsection

@section('page-script')
<script src="{{ asset('resources/assets/js/dashboards-analytics.js') }}"></script>
    <script src="{{ asset('resources/assets/js/tables-datatables-basic.js') }}"></script>
    <script src="{{ asset('resources/assets/js/t_dataTables.js') }}"></script>
    <script src="{{ asset('resources/assets/js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ asset('resources/assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('resources/assets/js/forms-selects.js') }}"></script>
    <script src="{{ asset('resources/assets/js/forms-tagify.js') }}"></script>
    <script src="{{ asset('resources/assets/js/forms-typeahead.js') }}"></script>
    <script src="{{ asset('resources/js/typeahead.bundle.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    new DataTable('#foner', {
      order: [[0, 'asc']],
      paging: true,        // Activer la pagination
      pageLength: 10,      // Nombre d'éléments par page
      lengthMenu: [5, 10, 25, 50, 100],  // Options de sélection du nombre d'éléments par page
    });
  });
</script>
@endsection

<div class="row">
@section('content')
@endsection
</div>