@extends('layouts.main')

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

@section('content')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}?v={{ filemtime(public_path('css/jquery-ui.css')) }}">
<style>
  .modalTitle {font-size: 18px;font-weight: bold;}
  span input {margin: 0 5px;}
  span.inputText{margin: 10px 10px 0 5px;font-size: 16px;}
  marquee{font-size: 25px; color: {{ $marqueeColor }};}
  .gpioName {margin: 12px 0; font-weight: bold;}
  a.btn-danger, button.btn-danger {margin-bottom: 5px;}
</style>
{!! $marqueeData !!}
<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 class="unsortable">運作</th>
                <th class="unsortable">設備名稱(編號)</th>
                <th class="unsortable">設備類型</th>
                <th class="unsortable">IP 位址</th>
                <th class="unsortable">狀態</th>
                <th class="unsortable">印表機狀態</th>
                <th class="unsortable">金流狀態</th>
                @if(auth()->user()->can('device.pause'))
                  <th class="unsortable">啟用/停用</th>
                @endif
                @if(auth()->user()->can('device.edit'))
                  <th class="unsortable">修改</th>
                @endif
                @if(auth()->user()->can('device.destroy'))
                  <th class="unsortable">刪除</th>
                @endif
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.col -->
  </div>
  @can('device.create')
    <a class="btn btn-danger" href="{{ route('device.create') }}">新增設備</a>
  @endcan
  @can('device.cashFlowDetail')
    <a class="btn btn-danger" href="{{ route('device.cashFlowDetail') }}">金流詳細資訊</a>
  @endcan
  @can('device.systemVersion')
    <a class="btn btn-danger" href="{{ route('device.systemVersion') }}">系統版本</a>
  @endcan
  @can('device.remoteOpenDoor')
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#openGateModal" id="openGate">遠端開關門</button>
  @endcan
  @can('schedule.index')
    <a class="btn btn-danger" href="{{ route('schedule.index') }}">設備排程</a>
  @endcan
  @can('device.cashStock')
    <a class="btn btn-danger" href="{{ route('device.cashStock') }}">現金存量</a>
  @endcan
  @if(auth()->user()->account == 'admin')
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#gpioTestModal" id="gpioTest">GPIO 測試</button>
  @endif
  @can('device.screenshot')
    <a class="btn btn-danger" href="{{ route('device.screenshot') }}">攝影機畫面擷取</a>
  @endcan
  @can('device.generateInvoice')
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#generateInvoiceModal" id="generateInvoice">開立發票(自訂)</button>
  @endcan
  @can('device.switchPrinter')
    <a class="btn btn-danger" href="{{ route('device.switchPrinter') }}">印表機設定及測試</a>
  @endcan
  {{-- @can('device.controlWashMachine')
    @if($globalVariable['params']['sell_wash_mode_enable'] == '1')
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#controlWashMachineModal" id="controlWashMachineBtn">遠端控制洗車機</button>
    @endif
  @endcan --}}
</div>

<div class="modal fade" id="openGateModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="justify-content-center align-items-center" id="openGateWaitBody">
        <i class="fas fa-2x fa-sync fa-spin hide" id="openGateWaitIcon"></i>
       </div>
       <div class="modal-header">
         <h4 class="modal-title" style="width: 100%; text-align: center;">遠端開關門</h4>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
         </button>
        </div>
          <div class="modal-body">
            <div class="container-fluid">
              <div class="row">
                <div class="modalTitle col-sm-12" style="text-align:center;">單次開關門</div>
                <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
                  <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                    <input type="radio" name="openType" value="1" id="openDoor1"> <label for="openDoor1">單次開門</label>
                  </div>
                  <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                    <input type="radio" name="openType" value="4" id="closeDoor4"> <label for="closeDoor4">單次關門</label>
                  </div>
                  {{-- <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <input type="radio" name="openType" value="3" id="openDoor3"> <label for="openDoor3">結束開門</label>
                  </div> --}}
                </div>
              </div>
              <div class="row">
                <div class="modalTitle col-sm-12" style="text-align:center;">長期開關門</div>
                <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
                  <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <input type="radio" name="openType" value="2" id="openDoor2"> <label for="openDoor2">長期開門</label>
                  </div>
                  <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <input type="radio" name="openType" value="5" id="closeDoor5"> <label for="closeDoor5">長期關門</label>
                  </div>
                  <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <input type="radio" name="openType" value="7" id="closeDoor7"> <label for="closeDoor7">取消長期開關門</label>
                  </div>
                  {{-- <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <input type="radio" name="openType" value="6" id="closeDoor6"> <label for="closeDoor6">結束關門</label>
                  </div> --}}
                </div>
              </div>
              <hr>
              <div class="row" style="text-align:center;margin-top:10px;">
                <div class="col-sm-12" style="text-align:center;">
                    <span class="modalTitle">設備</span>
                </div>
                <div style="text-align:left;">
                  @inject('devicesRepository', 'App\Repositories\DevicesRepository')
                  @foreach ($devicesRepository->getByWhereIn('mode', [1,2,6]) as $device)
                    <div class="col-sm-12">
                        <label>
                            <input type="radio" name="device" value="{{ $device->id }}">
                            <span class="inputText">
                                {{ $device->name }} ({{ $device->number }}) - {{ $device->vehicle->name }} - {{ config('webCommonData.laneModes')[$device->mode] }}
                            </span>
                        </label>
                    </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer justify-content-between" style="text-align:center;margin-top:10px;">
              <button type="button" class="btn btn-danger" id="openGateSubmit">確定</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal">返回</button>
          </div>
      </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="gpioTestModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="justify-content-center align-items-center" id="gpioTestWaitBody">
        <i class="fas fa-2x fa-sync fa-spin hide" id="gpioTestWaitIcon"></i>
      </div>
      <div class="modal-header">
        <h4 class="modal-title" style="width: 100%; text-align: center;">GPIO 測試</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="col-sm-12" style="margin-top:10px;">
        <select class="form-control col-sm-12" name="device_id" id="testDeviceId" style="width:100%;">
          <option value=""><b>請選擇設備</b></option>
          @foreach($devicesRepository->getByWhereIn('mode', [1,2,6]) as $device)
            <option value="{{ $device->id }}">{{ $device->name }} ({{ $device->number }}) - {{ $device->vehicle->name }} - {{ config('webCommonData.laneModes')[$device->mode] }}</option>
          @endforeach
        </select>
      </div>
      <br>

      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 0 {{ config('webCommonData.GPIONameDropdown')[5] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span class="btn btn-success gpo" id="gpo0" pin="0">測試訊號</span>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpo0Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 1 {{ config('webCommonData.GPIONameDropdown')[6] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span class="btn btn-success gpo" id="gpo1" pin="1">測試訊號</span>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpo1Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 2 {{ config('webCommonData.GPIONameDropdown')[9] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span class="btn btn-success gpo" id="gpo2" pin="2">測試訊號</span>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpo2Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 3 {{ config('webCommonData.GPIONameDropdown')[8] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span class="btn btn-success gpo" id="gpo3" pin="3">測試訊號</span>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpo3Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 18 {{ config('webCommonData.GPIONameDropdown')[3] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpi18Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 19 {{ config('webCommonData.GPIONameDropdown')[4] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpi19Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 20 {{ config('webCommonData.GPIONameDropdown')[1] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpi20Result"></span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="row col-sm-12" style="margin:0 auto;text-align:center;">
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="gpioName">GPO 21 {{ config('webCommonData.GPIONameDropdown')[2] }}</div>
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
              </div>
              <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <span id="gpi21Result"></span>
              </div>
            </div>
          </div>

          <div class="" style="text-align: center;">
            <span class="btn btn-primary col-3" id="gpiTest">測試 DI</span>
            <button type="button" class="btn btn-secondary col-3" data-dismiss="modal">返回</button>
          </div>

        </div>
      </div>

        {{-- <div class="col-12 gpioItem" style="padding: 0 150px; margin-bottom:5px;">
          <table class="col-12">
            <tr>
              <td width="15%" class="modalTitle">GPO 0</td>
              <td width="30%" class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[5] }}</div></td>
              <td width="20%" ><span class="btn btn-success gpo" id="gpo0" pin="0">測試訊號</span></td>
              <td id="gpo0Result"></td>
            </tr>
            <tr>
              <td class="modalTitle">GPO 1</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[6] }}</div></td>
              <td><span class="btn btn-success gpo" id="gpo1" pin="1">測試訊號</span></td>
              <td id="gpo1Result"></td>
            </tr>
            <tr>
              <td class="modalTitle">GPO 2</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[7] }}</div></td>
              <td><span class="btn btn-success gpo" id="gpo2" pin="2">測試訊號</span></td>
              <td id="gpo2Result"></td>
            </tr>
            <tr>
              <td class="modalTitle">GPO 3</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[8] }}</div></td>
              <td><span class="btn btn-success gpo" id="gpo3" pin="3">測試訊號</span></td>
              <td id="gpo3Result"></td>
            </tr>
            <tr>
              <td class="modalTitle">GPI 18</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[3] }}</div></td>
              <td id="gpi18Result"></td>
              <td></td>
            </tr>
            <tr>
              <td class="modalTitle">GPI 19</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[4] }}</div></td>
              <td id="gpi19Result"></td>
              <td></td>
            </tr>
            <tr>
              <td class="modalTitle">GPI 20</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[1] }}</div></td>
              <td id="gpi20Result"></td>
              <td></td>
            </tr>
            <tr>
              <td class="modalTitle">GPI 21</td>
              <td class="modalTitle"><div class="gpioName">{{ config('webCommonData.GPIONameDropdown')[2] }}</div></td>
              <td id="gpi21Result"></td>
              <td></td>
            </tr>
          </table>
          <div class="" style="text-align: center;">
            <span class="btn btn-primary col-3" id="gpiTest">測試 DI</span>
            <button type="button" class="btn btn-secondary col-3" data-dismiss="modal">返回</button>
          </div>
        </div> --}}
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

{{-- 開立發票modal --}}
<div class="modal fade" id="generateInvoiceModal" data-backdrop="static">
    <div class="modal-dialog"> {{-- modal-lg modal-dialog-centered --}}
        <div class="justify-content-center align-items-center" id="checkoutOverlayBody">
            <i class="fas fa-2x fa-sync fa-spin hide" id="checkoutOverlayIcon"></i>
        </div>
        <div class="modal-content">
            <div class="justify-content-center align-items-center" id="cashCheckoutWaitBody">
                <i class="fas fa-2x fa-sync fa-spin hide" id="openGateWaitIcon"></i>
            </div>
            <div class="modal-header">
                <h4 class="modal-title" style="width: 100%; text-align: center;">開立發票(自訂)</h4>
                <button type="button" class="close" id="closeModalBtn" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid" id="modalItems">
                    <div class="row mb-2">
                        <div class='col-5 text-right align-content-center'>品項名稱：</div>
                        <div class='col-5 text-left align-content-center'>
                            <input id="itemName" class="form-control" placeholder="品項名稱" required>
                            <div class="invalid-feedback">請填寫品項名稱</div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class='col-5 text-right align-content-center'>金額：</div>
                        <div class='col-5 text-left align-content-center'>
                            <input type="number" min="1" id="amount" class="form-control" placeholder="金額" required>
                            <div class="invalid-feedback">請填寫金額</div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class='col-5 text-right align-content-center'>備註：</div>
                        <div class='col-5 text-left align-content-center'>
                            <input id="memo" class="form-control" placeholder="備註">
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class='col-5 text-right align-content-center'>統一編號：</div>
                        <div class='col-5 text-left align-content-center'>
                            <input id="taxNumber" class="form-control" placeholder="統一編號">
                            <div class="invalid-feedback">請填寫統一編號</div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class='col-5 text-right align-content-center'>手機載具：</div>
                        <div class='col-5 text-left align-content-center'>
                            <input id="carrier" class="form-control" placeholder="手機載具" value="/">
                            <div class="invalid-feedback">請填寫手機載具</div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class='col-5 text-right align-content-center'>請選擇印表機：</div>
                        <div class='col-5 text-left align-content-center'>
                            <select id="printer" class="form-control">
                                {!! $webPrinterOption !!}
                            </select>
                            <div class="invalid-feedback">請選擇印表機</div>
                        </div>
                    </div>
                </div>
                <input type="hidden" value="" id="printerId">
                <input type="hidden" value="" id="invoiceId">
            </div>
            <div class="modal-footer justify-content-between" style="text-align:center;" id="buttonArea">
                <button type='button' class='btn btn-danger cashCheckout' style='margin: 0 auto' id='generateInvoiceBtn'>開立發票</button>
                <button type='button' class='btn btn-danger' style='margin: 0 auto' data-dismiss='modal' id='cancel'>取消</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

{{-- @if($globalVariable['params']['sell_wash_mode_enable'] == '1')
<div class="modal fade" id="controlWashMachineModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">遠端控制洗車機</h5>
      </div>
      <div class="justify-content-center align-items-center" id="controlWashMachineWaitBody">
        <i class="fas fa-2x fa-sync fa-spin hide" id="controlWashMachineWaitIcon"></i>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 my-2">
                    <select class="form-control" name="device_id" id="washMachineDeviceId">
                    <option value="" data-has-machine="0"><b>請選擇設備</b></option>
                    @foreach($devicesRepository->getWashPayDevices() as $device)
                        <option value="{{ $device->id }}" data-has-machine="{{ empty($device->washMachine->machine_ip) ? '0' : '1' }}">{{ $device->name }} ({{ $device->number }}) - 洗車機設定: {{ empty($device->washMachine->machine_ip) ? '未設定' : $device->washMachine->machine_ip }}</option>
                    @endforeach
                    </select>
                </div>
                <div class="col-12 my-2 text-center">
                    <span id="washMachineControlResult"></span>
                </div>
                <div class="col-12 my-2 text-center">
                    <button type="button" class="btn btn-success" id="washMachineEnable">啟用</button>
                    <button type="button" class="btn btn-danger mb-0" id="washMachineDisable">停用</button>
                    <button type="button" class="btn btn-primary" id="washMachineRestart">重啟</button>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
    </div>
  </div>
</div>
@endif --}}
@endsection

@section('js')
<script src="{{ asset('js/jquery-ui.min.js') }}?v={{ filemtime(public_path('js/jquery-ui.min.js')) }}"></script>
<script>
$(document).ready(function () {
  var url = "{{ route('device.datatableList') }}";
  var columns = [
    {data: 'status', name: 'status'},
    {data: 'name', name: 'name'},
    {data: 'mode', name: 'mode'},
    {data: 'ip', name: 'ip'},
    {data: 'heartbeat_time', name: 'heartbeat_time'},
    {data: 'printer_status', name: 'printer_status'},
    {data: 'cashFlowStatus', name: 'status'},
    @if(auth()->user()->can('device.pause'))
      {data: 'pause', name: 'pause'},
    @endif
    @if(auth()->user()->can('device.edit'))
      {data: 'edit', name: 'edit'},
    @endif
    @if(auth()->user()->can('device.destroy'))
      {data: 'delete', name: 'delete'},
    @endif
  ];

  var datatable = createDatatable('datatableList', url, columns, [], 0);
  //設備排序按鈕
  var deviceSort = 0;
  var sort = {};
  datatable.on('draw',function(){
    var dataLength = $('.dataTables_length');
    if($('#dragSort').length === 0){
      const dragButton = '<button class="btn btn-sm btn-danger my-auto mx-2" type="button" id="dragSort">設備排序</button> ';
      dataLength.append(dragButton);

      $('#dragSort').on('click',function(){
        //deviceSort 偶數=>設備排序
        if(deviceSort%2 == 0){
          clearTimeout(timeoutID);
          $(this).text('設備排序儲存');
          $('.drag').show();
          $('#datatableList tbody').sortable('enable');
          deviceSort += 1;
        }

        //deviceSort 奇數=>設備排序"儲存"
        else{
          $(this).text('設備排序');
          $('.drag').hide();
          $('#datatableList tbody').sortable('disable');

          // 發送設備排序請求
          if(Object.keys(sort).length > 0){
            setToken();
            $.ajax({
              url:"{{ route('device.deviceSort') }}",
              method:'POST',
              data:sort,
              success:function(response){
                location.reload()
              },
              error:function(error){
                console.log('Error Message',error);
              }
            });
          }

          deviceSort = 0;
          sort = {}; // 清空排序
          timeoutID = setTimeout("location = location", 30000);
        }
      });

      // 按跳轉dataTable不儲存 並關掉編輯排序
      $(document).on('click', '#datatableList_paginate', function() {
        $('.drag').hide();
        $('#datatableList tbody').sortable('disable');
        $('#dragSort').text('設備排序');
        deviceSort = 0;
        timeoutID = setTimeout("location = location", 30000);
        sort = {};
      })
    }
  });

  $('#datatableList tbody').sortable({
    // handle:'.drag', // 只可點擊icon拖曳
    axis:"y",
    disabled:true,
    helper: function (e, ui) {
      var $originals = ui.children();
      var $helper = ui.clone();

      $helper.children().each(function (index) {
          $(this).width($originals.eq(index).width());
      });
      return $helper;
    },
    start: function (e, ui) {
        ui.placeholder.height(ui.item.height());
        // 拖曳開始時禁用反白
        $('#datatableList tbody').disableSelection();
    },
    stop:function(e,ui){
      $('#datatableList tbody tr').each(function(index){
        var deviceID = $(this).find('i').attr('data-target-id');//設備本身的ID
        var pageInfo = datatable.page.info();

        var sortNum = pageInfo.page*pageInfo.length+index;
        sort[deviceID]=sortNum;
      });
      // 拖曳結束時恢復反白
      $('#datatableList tbody').enableSelection();
    }
  });

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

  var timeoutID = setTimeout("location = location", 30000);
  $(window).on('shown.bs.modal', function() {
    clearTimeout(timeoutID)
  });
  $(window).on('hidden.bs.modal', function() {
    timeoutID = setTimeout("location = location", 30000);
  });
  // 遠端開門
  $('#openGate').click(function (e) {
    $("input[name=openType][value='1']").prop('checked', true);
  });

  $('#openGateSubmit').click(function (e) {
    var type = $('input[name=openType]:checked').val();
    var device = $("input[name='device']:checked").val();

    if(!device){
        alert('請選擇設備！');
        return;
    }

    let typeText = $("input[name='openType']:checked").siblings('label').text();
    let deviceText = $("input[name='device']:checked").siblings('span').text();

    Swal.fire({
        title: deviceText + ' 設定即將變更為 ' + typeText,
        showCancelButton: true,
        confirmButtonText: '確定',
        cancelButtonText: '取消',
    }).then((result) => {
        if (result.value) {
            $('#openGateSubmit').prop('disabled', true);
            addOverlay('openGateWaitBody', 'openGateWaitIcon');

            setTimeout(function () {
                remoteOpenDoor(type, device);
            }, 50);
        }
    })
  });

  // GPIO 測試
  $('#gpioTest').click(function (e) {
    $('#testDeviceId').val('');
    cleanGpioResult();
  });

  $('#testDeviceId').change(function (e) {
    cleanGpioResult();
  });

  // 設備啟用/停用
  $(document).on('click', 'button.deviceoperation', function(event){
    setToken();
    $.ajax({
        type: 'POST',
        url: "{{ route('device.pause') }}",
        async: false,
        data: {
          behavior: $(this).attr('behavior'),
          deviceId: $(this).attr('targetId')
        },
        dataType: "json"
    }).done(function (data, textStatus, jqXHR) {
        // ajax 呼叫成功後執行
        if (data.retCode == '0') {
          successMessage(data.retMsg);
        } else {
          errorMessage(data.retMsg);
        }
    }).fail(function (jqXHR, textStatus, errorThrown) {
        // ajax 呼叫失敗後執行
        errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
    }).then(function (data, textStatus, jqXHR) {
        // ajax 執行完之後執行
        dataTableReload(datatable);
    });
	});

  // 設備遠端開門
  function remoteOpenDoor(type, device)
  {
    setToken();
    $.ajax({
        type: 'POST',
        url: "{{ route('device.remoteOpenDoor') }}",
        async: false,
        data: {
          type: type,
          device: device
        },
        dataType: "json"
    }).done(function (data, textStatus, jqXHR) {
        // ajax 呼叫成功後執行
        $('#openGateModal').click();
        alert(data.retMsg);

    }).fail(function (jqXHR, textStatus, errorThrown) {
        // ajax 呼叫失敗後執行
        errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
    }).then(function (data, textStatus, jqXHR) {
        // ajax 執行完之後執行
        $('#openGateSubmit').prop('disabled', false);
        removeOverlay('openGateWaitBody', 'openGateWaitIcon');
        dataTableReload(datatable);
    });
  }

  $('.gpo').click(function (e) {
    var deviceId = $('#testDeviceId').val();
    var pin = $(this).attr('pin');
    var id = $(this).attr('id');

    if (deviceId == '') {
      alert('請選擇設備！');
			return;
    }

    $('#' + id + 'Result').html('');
    addOverlay('gpioTestWaitBody', 'gpioTestWaitIcon');

    setTimeout(function () {
      gpoTest(deviceId, pin, id);
    }, 50);
  });

  $('#gpiTest').click(function (e) {
    var deviceId = $('#testDeviceId').val();
    var gpiStatus = ['Off', 'On', '未初始化'];

    if (deviceId == '') {
      alert('請選擇設備！');
			return;
    }

    $('#gpi18Result').html('');
    $('#gpi19Result').html('');
    $('#gpi20Result').html('');
    $('#gpi21Result').html('');

    addOverlay('gpioTestWaitBody', 'gpioTestWaitIcon');

    setTimeout(function () {
      gpiTest(deviceId, gpiStatus);
    }, 50);
  });

  function gpoTest(deviceId, pin, id)
  {
    setToken();
    $.ajax({
        type: 'POST',
        url: "{{ route('device.gpoTest') }}",
        async: false,
        data: {
          deviceId: deviceId,
          pin: pin
        },
        dataType: "json"
    }).done(function (data, textStatus, jqXHR) {
        // ajax 呼叫成功後執行
        $('#' + id + 'Result').html(data.retMsg);

    }).fail(function (jqXHR, textStatus, errorThrown) {
        // ajax 呼叫失敗後執行
        errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
    }).then(function (data, textStatus, jqXHR) {
        // ajax 執行完之後執行
        removeOverlay('gpioTestWaitBody', 'gpioTestWaitIcon');
    });
  }

  function gpiTest(deviceId, gpiStatus)
  {
    setToken();
    $.ajax({
        type: 'POST',
        url: "{{ route('device.gpiTest') }}",
        async: false,
        data: {
          deviceId: deviceId
        },
        dataType: "json"
    }).done(function (data, textStatus, jqXHR) {
        // ajax 呼叫成功後執行
        if (data.retCode == '0') {
          $('#gpi18Result').html(gpiStatus[data.retVal.gpi18]);
          $('#gpi19Result').html(gpiStatus[data.retVal.gpi19]);
          $('#gpi20Result').html(gpiStatus[data.retVal.gpi20]);
          $('#gpi21Result').html(gpiStatus[data.retVal.gpi21]);
        } else {
          alert(data.retMsg);
        }

    }).fail(function (jqXHR, textStatus, errorThrown) {
        // ajax 呼叫失敗後執行
        errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
    }).then(function (data, textStatus, jqXHR) {
        // ajax 執行完之後執行
        removeOverlay('gpioTestWaitBody', 'gpioTestWaitIcon');
    });
  }

  function cleanGpioResult()
  {
    $('#gpo0Result').html('');
    $('#gpo1Result').html('');
    $('#gpo2Result').html('');
    $('#gpo3Result').html('');
    $('#gpi18Result').html('');
    $('#gpi19Result').html('');
    $('#gpi20Result').html('');
    $('#gpi21Result').html('');
  }

//   $('#washMachineDeviceId').change(function (e) {
//     var hasMachine = $(this).find('option:selected').data('has-machine');
//     if (hasMachine == '1') {
//       $('#washMachineEnable').prop('disabled', false);
//       $('#washMachineDisable').prop('disabled', false);
//       $('#washMachineRestart').prop('disabled', false);
//       cleanControlWashMachineResult()
//       return
//     }
//     $('#washMachineEnable').prop('disabled', true);
//     $('#washMachineDisable').prop('disabled', true);
//     $('#washMachineRestart').prop('disabled', true);
//     $('#washMachineControlResult').html('請先設定洗車機！').addClass('text-danger');
//   });
//   $('#controlWashMachineBtn').click(function (e) {
//     $('#washMachineDeviceId').change();
//   });

//   $('#washMachineEnable').click(function (e) {
//     addOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
//     cleanControlWashMachineResult()

//     setTimeout(function () {
//         controlWashMachine('on');
//     }, 50);
//   });

//   $('#washMachineDisable').click(function (e) {
//     addOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
//     cleanControlWashMachineResult()

//     setTimeout(function () {
//         controlWashMachine('off');
//     }, 50);
//   });

//   $('#washMachineRestart').click(function (e) {
//     addOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
//     cleanControlWashMachineResult()

//     setTimeout(function () {
//         controlWashMachine('restart');
//     }, 50);
//   });

//   function cleanControlWashMachineResult() {
//     $('#washMachineControlResult').html('').removeClass('text-success text-danger');
//   }

//   function controlWashMachine(status) {
//     setToken();
//     $.ajax({
//         type: 'POST',
//         url: "{{ route('device.controlWashMachine') }}",
//         async: false,
//         data: {
//           deviceId: $('#washMachineDeviceId').val(),
//           status: status
//         },
//         dataType: "json"
//     }).done(function (data, textStatus, jqXHR) {
//         // ajax 呼叫成功後執行
//         if (data.retCode == '0') {
//             $('#washMachineControlResult').addClass('text-success');
//         } else {
//             $('#washMachineControlResult').addClass('text-danger');
//         }
//         $('#washMachineControlResult').html(data.retMsg);
//     }).fail(function (jqXHR, textStatus, errorThrown) {
//         // ajax 呼叫失敗後執行
//         errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
//     }).then(function (data, textStatus, jqXHR) {
//         // ajax 執行完之後執行
//         removeOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
//     });
//   }
});
</script>
@include('systemSetting.deviceManagement.devicePrintInvoice')
@endsection