@extends('layouts.main')

@section('title', 'Client Division Management')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Client Division Management</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Settings</li>
          <li class="breadcrumb-item active">Client Division Management</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>

@endsection

@section('content')

  <div class="clearfix"></div>
  @include('flash::message')
  <div class="clearfix"></div>
  <div class="content-body">
    <div class="row">
      <div class="col-md-12">
        <!--- BEHIND CARD -->
        <section id="description" class="card">
          <div class="card-header">
            <h4 class="m-t-10 header-title" style="float: left;">List Of Divisions</h4>
            <div class="rt_sd" style="float: right;">
              <h5 style="    float: left;   padding-right: 15px;    padding-top: 10px;">Total
                Divisions: {{ count($divisions) }} </h5>
              @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::MANAGE_DIVISIONS))
                {{-- todo roles here --}}
                <a class="btn btn-success waves-effect waves-light" href="{{ route('client-division.create') }}">
                  Add Division
                </a>
              @endif
            </div>
          </div>
          <div class="card-body ">
            <div class="table-responsive">
              <table class="table table-chrome table-striped not-wrapped-results" id="divisions-table">
                <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::MANAGE_DIVISIONS))
                    <th>Action</th>
                  @endif
                </tr>
                </thead>
                <tbody>

                @forelse ($divisions as $division)
                  <tr>
                    <th scope="row"></th>
                    <td>{{ $division->name }}</td>
                    @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::MANAGE_DIVISIONS))
                      <td>
                        <div class="btn-group">
                          <a data-userid="{{ $division->id }}"
                             href="{{ route('client-division.edit', ['division'=>$division]) }}" class=" ion-edit">
                            <i class="icon-pencil2"></i>
                          </a>
                          <form action="{{ route('client-division.destroy', ['division'=>$division]) }}" method="POST">
                            <input type="hidden" name="_method" value="DELETE"/>
                            <a href="#"
                               onclick="
                                 var result = confirm('Are you sure?');
                                 if(result) {
                                 event.preventDefault();
                                 document.getElementById('delete-{{ $division->id }}').submit()
                                 }"
                               class="ion-close-circled">
                              <i class="icon-remove"></i>
                            </a>
                          </form>
                          <form action="{{ route('client-division.destroy', ['division'=>$division]) }}"
                                method="POST"
                                id="delete-{{ $division->id }}" style="display: none;">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                          </form>
                        </div>
                      </td>
                    @endif
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </section><!--- END  CARD -->
      </div>
    </div>
  </div>

@endsection

@section('scripts')
  <script type="text/javascript">
    var dataTable = new DataTable(document.querySelector('#divisions-table'), {
      perPageSelect: [5, 15, 25, 50, 100],
      perPage: 15,
    });
    /* line numbers in table  */
    dataTable.on('datatable.init', lineNumber);
    dataTable.on('datatable.refresh', lineNumber);
    dataTable.on('datatable.update', lineNumber);
    dataTable.on('datatable.page', lineNumber);
    dataTable.on('datatable.sort', lineNumber);
    dataTable.on('datatable.perpage', lineNumber);

    //dataTable.on('datatable.search', lineNumber);

    function lineNumber() {
      console.log(dataTable)
      let page = dataTable.currentPage;
      let tableTrs = $('#divisions-table > tbody > tr');
      let iRow = 1;
      $.each(tableTrs, function (i, tr) {
        tr.firstChild.innerHTML = iRow + ((page - 1) * dataTable.options.perPage);
        iRow++;
      })
    }

    /* EOF line numbers in table  */
  </script>
@endsection