@extends('layouts.main')

@section('pageTitle', '設備狀態管理－設備排程列表')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body table-responsive p-3">
          <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
            <thead>
            <tr>
              <th>設備編號</th>
              <th>排程時間</th>
              <th>重覆</th>
              <th>執行動作</th>
              <th>執行結果</th>
              @if(auth()->user()->can('schedule.edit'))
                <th class="unsortable">修改</th>
              @endif
              @if(auth()->user()->can('schedule.destroy'))
                <th class="unsortable">刪除</th>
              @endif
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.col -->
  </div>
  @can('schedule.create')
    <a class="btn btn-danger" href="{{ route('schedule.create') }}">新增排程</a>
  @endcan
    <a class="btn btn-danger" href="{{ route('device.index') }}">返回</a>
  <!-- /.row -->
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
  var url = "{{ route('schedule.datatableList') }}";
  var columns = [
    {data: 'device_id', name: 'device_id'},
    {data: 'schedule_time', name: 'schedule_time'},
    {data: 'cycle', name: 'cycle'},
    {data: 'action', name: 'action'},
    {data: 'last_execute_result', name: 'last_execute_result'},
    @if(auth()->user()->can('schedule.edit'))
      {data: 'edit', name: 'edit'},
    @endif
    @if(auth()->user()->can('schedule.destroy'))
      {data: 'delete', name: 'delete'},
    @endif
  ];

  var datatable = createDatatable('datatableList', url, columns, [], 0);

  $(document).on('click', 'button[behavior=delete]', function(event){
    var url = '{{ route("schedule.destroy", ":id") }}';
    datatableDeleteAjax(datatable, url.replace(':id', $(this).attr('targetId')));
  });

  });
</script>
@endsection