@extends("admin.template")

@section("content")
  <div class="row">
    <div class="col-xs-6">
      <h1 class="page-title">Requesters</h1>
    </div>
    <div class="col-xs-6 text-right">
      <button type="button" class="btn blue" onclick="location.href='{{url('admin/requester/save')}}'">Create</button>
    </div>
  </div>

  <div class="portlet light bordered">
    <div class="portlet-body">
      <form action="" method="post" id="filter">
        {!! csrf_field() !!}
          <div class="table-responsive">
            <table class="table table-bordered">
            <thead>
            <tr>
              <th class="search-th-stat">Status</th>
              <th class="search-th-txt">Name</th>
              <th class="search-th-dropdown">Company</th>
              <th class="search-th-dropdown">Office</th>
              <th>Show top</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                {!! Form::select('stat', RequesterStat::$values, '', ['class'=>'form-control search-stat', 'placeholder'=>'']) !!}
              </td>
              <td>{!! Form::text('name', '', ['class'=>'form-control', 'id'=>'name']) !!}</td>
              <td>{!! Form::select('company_id', $companies, '', ['id'=>'company_id', 'class'=>'form-control search-dropdown', 'placeholder'=>'']) !!}</td>
              <td>{!! Form::select('office_id', [], '', ['id'=>'office_id', 'class'=>'form-control search-dropdown', 'placeholder'=>'']) !!}</td>
              <td>{!! Form::text('limit', 100, ['class'=>'form-control search-txt']) !!}</td>
            </tr>
            </tbody>
          </table>
        </div>

        <div class="row">
          <div class="col-md-12 text-center">
            <button type="submit" name="submit" class="btn blue" value="Search">Search</button>
            <button onclick="  $(':input').not(':button, :submit, :reset,:hidden').val('');document.getElementById('filter').submit();" class="btn green">Clear</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="portlet light bordered">
    <div class="portlet-body">
      <div class="table-responsive">
        <table class="table table-bordered table-hover" id="table-requester">
          <thead>
          <tr>
            <th width="70px">Status</th>
            <th>Name</th>
            <th>Action</th>
          </tr>
          </thead>
          <tbody>
          @foreach($requesters as $requester)
            <tr>
              <td>{{RequesterStat::$values[$requester->stat]}}</td>
              <td><a href="{{url("admin/requester/save/".$requester->requester_id)}}">{{ $requester->fullname }}</a></td>
              <td>
                  <a class="btn btn-sm btn-default" href="{{url("admin/requester/".$requester->requester_id.'/offices')}}">Manage office</a>
              </td>
            </tr>
          @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection
@section('css')
  <style>
    .dt-buttons{
      margin-top: 0 !important;
      margin-bottom: 4px;
    }
  </style>
@endsection
@section('script')
  <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>

  <script type="text/javascript">

      $(document).ready(function() {
          $('#table-requester').DataTable({
              searching:false,
              lengthChange: false,
              paging:false,
              dom: 'Blfrtip',
              buttons: [
                  {
                      extend: 'excel',
                      text: 'Export excel',
                      className: 'exportExcel',
                      filename: 'Export excel',
                      exportOptions: {
                          modifier: {
                              page: 'all'
                          }
                      }
                  },
              ]
          });
      } );
  </script>
@endsection