@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/tables/datatable/datatables.min.css')) }}">
@endsection

@section('content')

  <section class="users-list-wrapper">
    <!-- Ag Grid users list section start -->
    <div id="basic-examples">
      <div class="card">
        <div class="card-content">
          <div class="card-body">
            @include('admin.layouts.error-message')
            <div class="table-responsive">
              <table class="table zero-configuration" id="table">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Target Link</th>
                  <th>Order</th>
                  <th>Action</th>
                </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Ag Grid users list section end -->
  </section>
@endsection
@section('vendor-script')
  {{-- vendor files --}}
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.bootstrap.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
@endsection
@section('page-script')
  <script src="{{ asset(mix('admin/js/scripts/datatables/datatable.js')) }}"></script>
  <script>

      const modalForm = $('#modalform');

      var table = $('#table').DataTable({
          dom: `@include('admin.components.common.datatables.dom')`,
          buttons: [],
          serverSide: true,
          ajax: {
              url:"{{route('admin.banner.index')}}"
          },
          columns : [
              { data : 'name', orderable: true, searchable: true },
              { data : 'target_link', orderable: true, searchable: true },
              { data : 'order', orderable: true, searchable: true },
              { data : 'action', orderable: false, searchable: false },
          ]
      });

      function reloadTable() {
        table.ajax.url("{{route('admin.banner.index')}}").load();
      }

      $(document).ready( function(e) {
          var target = $("#breadComponents");
          var createAddButton_html = `
              <div class="btn-group">
                <a class="btn btn-flat btn-danger px-2 py-75 _Add" status="select" href="{{ route("admin.banner.create") }}">Add New</a>
              </div>
          `;
          target.append(createAddButton_html);
      });
  </script>

    @include('admin.menu.banner.components.support-js.crud.destroy-js')
@endsection