@extends('layouts.main')

@section('title', 'Positions Management')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Positions</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">Positions</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>

@endsection

@section('content')

  <div class="clearfix"></div>
  @include('flash::message')
  <div class="clearfix"></div>

  <div style="margin: 17px;">
    <div class="row">
      <div class="col-md-8">
        <div class="box-body" style="">
          {!! Form::open(['route' => ['positions.index'], 'method' => 'get']) !!}
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <select name="parent_id" class="form-control">
                  <option value=''>Reports To</option>
                  @foreach(\App\Models\GmpAdministration\PositionLevel::getReportToPositions() as $parent)
                    <option
                      value="{{ $parent->id }}"
                      @if (isset($_REQUEST['parent_id']) AND $_REQUEST['parent_id']  == $parent->id)) )
                      selected="selected"
                      @endif >
                      {{ $parent->name }}
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-sm-4" style="margin-bottom: 0px;margin-top: 0px;">
              <div class="form-group">
                {!! Form::submit('Filter', ['class' => 'btn btn-success']) !!}
                <a href="{{ route('positions.index') }}" class="btn btn-danger waves-effect">Reset</a>
              </div>
            </div>
          </div>
          {!! Form::close() !!}
        </div>
      </div>
      <div class="col-md-4">
        <div class="btn btn-primary pull-right" id="chart_show">Structure Chart</div>
      </div>
    </div>
  </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 Positions</h4>
            <div class="rt_sd" style="float: right;">
              <h5 style="    float: left;   padding-right: 15px;    padding-top: 10px;">Total
                Positions: {{ count($positions) }} </h5>
              @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::MANAGE_POSITIONS))
                {{-- todo roles here --}}
                <a class="btn btn-success waves-effect waves-light" href="{{ route('positions.create') }}">
                  Add New
                </a>
              @endif
            </div>
          </div>
          <div class="card-body ">
            <div class="table-responsive">
              <table class="table table-chrome table-striped not-wrapped-results" id="positions-table">
                <thead>
                <tr>
                  <th>#</th>
                  <th>Title</th>
                  <th>Reports To</th>
                  <th>Division</th>
                  <th>Status</th>
                  @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::MANAGE_POSITIONS))
                    <th>Action</th>
                  @endif
                </tr>
                </thead>
                <tbody>

                @forelse ($positions as $position)
                  <tr>
                    <th scope="row"></th>
                    <td>{{ $position->name }}</td>
                    <td>{{ $position->parent?$position->parent->name:'' }}</td>
                    <td>{{ $position->division?$position->division->name:'' }}</td>
                    <td>{!! $position->status?'Active':'<span style="color:gray">Inactive<span>' !!}</td>
                    @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::MANAGE_POSITIONS))
                      <td>
                        <div class="btn-group">
                          <a data-userid="{{ $position->id }}" style="height: 30px; padding-top: 2px;
{!! $position->status?
'color: #ff5151 !important; background: url(/theme/assets/images/image-background/small-red-btn.png) no-repeat top/100% 100% !important;'
:'color: #2F9A7F !important; background: url(/theme/assets/images/image-background/small-green-btn.png) no-repeat top/100% 100% !important;' !!}"
                             href="{{ route('positions.toggle', ['position'=>$position,'line'=>$loop->index+1]) }}"
                             title="{!! $position->status?'Deactivate':'Activate' !!}"
                             class="btn btn-default btn-xs btn-toggle-suspend-status">
                            {!! $position->status?
'<i class="fa fa-pause-circle-o"></i>':
'<i class="fa fa-play-circle-o"></i>' !!}
                          </a>
                          <a data-userid="{{ $position->id }}"
                             href="{{ route('positions.edit', ['position'=>$position]) }}" class=" ion-edit">
                            <i class="icon-pencil2"></i>
                          </a>
                          <form action="{{ route('positions.destroy', ['position'=>$position]) }}" 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-{{ $position->id }}').submit()
                                 }"
                               class="ion-close-circled">
                              <i class="icon-remove"></i>
                            </a>
                          </form>
                          <form action="{{ route('positions.destroy', ['position'=>$position]) }}"
                                method="POST"
                                id="delete-{{ $position->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>
  @include('settings.positions.chart_modal')
@endsection

@section('scripts')
  <script type="text/javascript">
    var dataTable = new DataTable(document.querySelector('#positions-table'), {
      perPageSelect: [5, 15, 25, 50, 100],
      perPage: 15,
    });

    dataTable.page({{floor(($line+15)/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 = $('#positions-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