@extends('layouts.main')

@section('title', 'Escalation Profiles')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Escalation Profiles</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">Escalation Profiles</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' => ['escalations.index'], 'method' => 'get']) !!}
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                {!! Form::select('case_type_id', \App\Models\SubTypeOfCase::listSelect(\App\Models\TypeOfCase::getAll()),
               null, ['class' => 'form-control', 'placeholder'=>'Type of Case']) !!}
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                {!! Form::select('queue_id', \App\Models\Queue::getSkywatchList(),
       null, ['class' => 'form-control', 'placeholder'=>'Queue']) !!}
              </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('escalations.index') }}" class="btn btn-danger waves-effect">Reset</a>
              </div>
            </div>
          </div>
          {!! Form::close() !!}
        </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 Escalation Profiles</h4>
            <div class="rt_sd" style="float: right;">
              <h5 style="    float: left;   padding-right: 15px;    padding-top: 10px;">Total Escalation
                Profiles: {{ count($escalations) }} </h5>
              {{--<a class="btn btn-success waves-effect waves-light" href="{{ route('escalations.create') }}">
              Add New
              </a>--}}
            </div>
          </div>
          <div class="card-body ">
            <div class="table-responsive">
              <table class="table table-chrome table-striped not-wrapped-results" id="escalations-table">
                <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Queue</th>
                  <th>Type of Case</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>

                @forelse ($escalations as $escalation)
                  <tr>
                    <th scope="row"></th>
                    <td>{{ $escalation->name }}</td>
                    <td>{{ isset($escalation->queue_id) ? $escalation->queue->name : '-' }}</td>
                    <td>{{ isset($escalation->case_type_id) ? $escalation->caseType->name : '-' }}</td>
                    <td>{!! $escalation->status?'Active':'<span style="color:gray">Inactive<span>' !!}</td>

                    <td>
                      <div class="btn-group">
                        {{-- <a data-userid="{{ $escalation->id }}" style="height: 30px; padding-top: 2px;
                      {!! $escalation->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('escalations.toggle', ['escalation'=>$escalation,'line'=>$loop->index+1]) }}"
                        title="{!! $escalation->status?'Deactivate':'Activate' !!}"
                        class="btn btn-default btn-xs btn-toggle-suspend-status">
                      {!! $escalation->status?
'<i class="fa fa-pause-circle-o"></i>':
'<i class="fa fa-play-circle-o"></i>' !!}
                              </a> --}}
                        <a href="{{ route('escalations.show', ['escalation'=>$escalation]) }}"
                           class="btn btn-default btn-xs"
                           style="height: 30px; padding-top: 2px;"><i class="fa fa-file-text-o"></i></a>
                        <a data-userid="{{ $escalation->id }}"
                           href="{{ route('escalations.edit', ['escalation'=>$escalation]) }}" class=" ion-edit">
                          <i class="icon-pencil2"></i>
                        </a>
                          {{--<a href="#"
                              onclick="
                                  var result = confirm('Are you sure?');
                                  if(result) {
                                  event.preventDefault();
                                  document.getElementById('delete-{{ $escalation->id }}').submit()
                          }"
                          class="ion-close-circled">
                          <i class="icon-remove"></i>
                          </a>
                          <form action="{{ route('escalations.destroy', ['escalation'=>$escalation]) }}"
                                method="POST"
                                id="delete-{{ $escalation->id }}" style="display: none;">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                          </form>
                          --}}
                      </div>
                    </td>

                  </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('#escalations-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 = $('#escalations-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