@extends('layouts.main')

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

@section('content')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}?v={{ filemtime(public_path('css/jquery-ui.css')) }}">
<x-css-asset src="css/control-wash-machine-modal.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->getGateDevice() 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])->sortBy('sort_num') 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>
    <!-- /.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" tabindex="-1" role="dialog" aria-labelledby="controlWashMachineModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered wash-machine-modal-dialog" role="document">
    <div class="modal-content wash-machine-modal-content">
      <div class="modal-header wash-machine-modal-header">
        <h5 class="modal-title d-flex align-items-center" id="controlWashMachineModalTitle">
          <i class="fas fa-satellite-dish mr-2" aria-hidden="true"></i>
          遠端控制洗車機
        </h5>
        <button type="button" class="wash-machine-modal-close" data-dismiss="modal" aria-label="關閉">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="wash-machine-modal-main position-relative">
        <div class="justify-content-center align-items-center" id="controlWashMachineWaitBody">
          <i class="fas fa-2x fa-sync fa-spin hide" id="controlWashMachineWaitIcon" aria-hidden="true"></i>
        </div>
        <div class="modal-body wash-machine-modal-body">
          <section class="mb-4">
            <div class="d-flex align-items-center justify-content-between mb-2">
              <label class="wash-machine-field-label mb-0" for="washMachineDeviceId">請選擇設備</label>
            </div>
            <div class="wash-machine-select-wrap">
              <select class="wash-machine-select" name="device_id" id="washMachineDeviceId">
                <option value="">請選擇設備</option>
                @foreach($devicesRepository->getWashPayDevices() as $device)
                  <option value="{{ $device->id }}">{{ $device->name }} ({{ $device->number }}) - {{ $device->ip}}</option>
                @endforeach
              </select>
              <span class="wash-machine-select-chevron"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
            </div>
            <div class="mt-3 d-flex justify-content-end">
              <button type="button" class="btn btn-wash-machine-restart" id="washMachineRestart" disabled>
                <i class="fas fa-redo-alt mr-1" aria-hidden="true"></i>重置洗車機
              </button>
            </div>
          </section>
          <section>
            <span class="wash-machine-field-label">選擇洗車方案</span>
            <div id="washMachinePlanList" aria-live="polite"></div>
          </section>
          <div class="text-center mt-3">
            <span id="washMachineControlResult"></span>
          </div>
        </div>
        <div class="modal-footer wash-machine-modal-footer">
          <button type="button" class="btn btn-wash-machine-cancel" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-wash-machine-submit" id="washMachineSendPlan" disabled>
            <i class="fas fa-paper-plane mr-1" aria-hidden="true"></i>送出方案
          </button>
        </div>
      </div>
    </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('');
  }

  var washMachinePlanListUrl = @json(route('sellItem.planList'));

  /**
   * 同步洗車方案卡片選取狀態（stitch 版型）
   */
  function syncWashMachinePlanUi() {
    $('#controlWashMachineModal .wash-machine-plan-item').removeClass('wash-machine-plan-item--selected');
    $('#controlWashMachineModal .wash-machine-plan-check').addClass('d-none');
    var $checked = $('#controlWashMachineModal input[name="wash_machine_plan"]:checked');
    if (!$checked.length) {
      return;
    }
    $checked.closest('.wash-machine-plan-item').addClass('wash-machine-plan-item--selected');
    $checked.siblings('.wash-machine-plan-face').find('.wash-machine-plan-check').removeClass('d-none');
  }

  /**
   * 依與 washBillingSetting 相同之 planList API 回傳列繪製方案選項（retVal: id, code, name, price）
   */
  function renderWashMachinePlanList(rows) {
    var $list = $('#washMachinePlanList');
    $list.empty();
    if (!rows || rows.length === 0) {
      $list.append(
        $('<p class="wash-machine-plan-empty mb-0"></p>').text('尚無方案，請至洗車機相關設定新增方案。')
      );
      $('#washMachineSendPlan').prop('disabled', true);
      return;
    }
    rows.forEach(function (row, idx) {
      var checked = idx === 0;
      var $item = $('<div class="wash-machine-plan-item"></div>');
      var $label = $('<label class="w-100 mb-0"></label>');
      var $radio = $('<input type="radio" name="wash_machine_plan" class="wash-machine-plan-sr-input">').attr('value', row.code);
      if (checked) {
        $radio.prop('checked', true);
      }
      var $face = $('<div class="wash-machine-plan-face"></div>');
      var $ico = $('<div class="wash-machine-plan-icon" aria-hidden="true"></div>').append(
        $('<i class="fas fa-tint"></i>')
      );
      var $mid = $('<div class="flex-grow-1"></div>').append(
        $('<div class="wash-machine-plan-title"></div>').text(row.name),
        $('<div class="wash-machine-plan-desc"></div>').text('方案代碼：' + row.code)
      );
      var $right = $('<div class="text-right"></div>').append(
        $('<div class="wash-machine-plan-price"></div>').text('NT$' + row.price),
        $('<span class="wash-machine-plan-check text-primary d-none small"></span>').append(
          $('<i class="fas fa-check-circle" aria-hidden="true"></i>')
        )
      );
      $face.append($ico, $mid, $right);
      $label.append($radio, $face);
      $item.append($label);
      $list.append($item);
    });
    syncWashMachinePlanUi();
    $('#washMachineDeviceId').trigger('change');
  }

  /**
   * 自後端載入洗車方案（與 carWashManagement/washBillingSetting 使用相同資料來源）
   */
  function reloadWashMachinePlans() {
    $.ajax({
      type: 'GET',
      url: washMachinePlanListUrl,
      dataType: 'json',
    }).done(function (data) {
      if (parseInt(data.retCode, 10) !== 0) {
        errorMessage(data.retMsg || '讀取方案列表失敗');
        $('#washMachinePlanList').empty().append(
          $('<p class="wash-machine-plan-empty mb-0"></p>').text('無法載入方案列表。')
        );
        $('#washMachineSendPlan').prop('disabled', true);
        return;
      }
      var rows = Array.isArray(data.retVal) ? data.retVal : [];
      renderWashMachinePlanList(rows);
    }).fail(function (jqXHR) {
      errorMessage('讀取方案列表錯誤：' + jqXHR.status);
      $('#washMachinePlanList').empty().append(
        $('<p class="wash-machine-plan-empty mb-0"></p>').text('無法載入方案列表。')
      );
      $('#washMachineSendPlan').prop('disabled', true);
    });
  }

  $(document).on('change', '#controlWashMachineModal input[name="wash_machine_plan"]', function () {
    syncWashMachinePlanUi();
  });

  $('#controlWashMachineModal').on('shown.bs.modal', function () {
    reloadWashMachinePlans();
  });
  // 關閉 modal 時重置設備下拉與操作區，不提示「請選擇設備」（避免 trigger change）
  $('#controlWashMachineModal').on('hidden.bs.modal', function () {
    $('#washMachineDeviceId').val('');
    cleanControlWashMachineResult();
    $('#washMachineRestart').prop('disabled', true);
    $('#washMachineSendPlan').prop('disabled', true);
  });

  $('#washMachineDeviceId').change(function (e) {
    var hasPlans = $('#washMachinePlanList .wash-machine-plan-item').length > 0;
    if ($('#washMachineDeviceId').val() == '') {
      $('#washMachineRestart').prop('disabled', true);
      $('#washMachineSendPlan').prop('disabled', true);
      $('#washMachineControlResult').html('請選擇設備！').addClass('text-danger');
      return;
    }
    $('#washMachineRestart').prop('disabled', false);
    $('#washMachineSendPlan').prop('disabled', !hasPlans);
    cleanControlWashMachineResult();
  });
  $('#controlWashMachineBtn').click(function (e) {
    $('#washMachineDeviceId').change();
  });
  /**
   * 洗車機遠端操作前安全確認（樣式對齊設計稿）
   * @param {string} title 標題
   * @param {string} warningLinesHtml 警示內容 HTML（已為安全字串）
   * @param {Function} onConfirm 使用者按「確定」後執行
   */
  function confirmWashMachineSafetyDialog(title, warningLinesHtml, onConfirm) {
    Swal.fire({
      title: title,
      html: '<div class="wash-machine-safety-warn text-center">' + warningLinesHtml + '</div>',
      showCancelButton: true,
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      // buttonsStyling: false,
      customClass: {
        popup: 'wash-machine-safety-popup',
        title: 'wash-machine-safety-title',
        actions: 'wash-machine-safety-actions',
      },
      width: '28em',
    }).then(function (result) {
      if (result.value === true) {
        onConfirm();
      }
    });
  }

  $('#washMachineRestart').click(function (e) {
    cleanControlWashMachineResult();
    confirmWashMachineSafetyDialog(
      '確定要重置洗車機？',
      '操作前請確認洗車機周圍無車輛或人員<br>，以免發生危險。',
      function () {
        addOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
        setTimeout(function () {
          resetWashMachine();
        }, 50);
      }
    );
  });
  $('#washMachineSendPlan').click(function (e) {
    cleanControlWashMachineResult();
    var $checked = $('#controlWashMachineModal input[name="wash_machine_plan"]:checked');
    var planName = $.trim($checked.closest('.wash-machine-plan-item').find('.wash-machine-plan-title').text());
    if (!planName) {
      errorMessage('請選擇洗車方案');
      return;
    }
    confirmWashMachineSafetyDialog(
      '確定要送出「' + planName + '」？',
      '送出後會立即開啟柵欄，請確認車輛已<br>於柵欄前等待。',
      function () {
        addOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
        setTimeout(function () {
          submitWashMachinePlan();
        }, 50);
      }
    );
  });
  function cleanControlWashMachineResult() {
    $('#washMachineControlResult').html('').removeClass('text-success text-danger');
  }
  function resetWashMachine() {
    setToken();
    $.ajax({
        type: 'POST',
        url: "{{ route('device.resetWashMachine') }}",
        async: false,
        data: {
          deviceId: $('#washMachineDeviceId').val(),
        },
        dataType: "json"
    }).done(function (data, textStatus, jqXHR) {
        if (data.retCode == '0') {
            Swal.fire({
              title: data.retMsg,
              icon: "success"
            });
            return
        }
        Swal.fire({
          title: data.retMsg,
          icon: "error"
        });
    }).fail(function (jqXHR, textStatus, errorThrown) {
        errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
    }).then(function (data, textStatus, jqXHR) {
        removeOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
    });
  }
  /**
   * 送出選取之洗車方案代碼至設備
   */
  function submitWashMachinePlan() {
    var planCode = $('#controlWashMachineModal input[name="wash_machine_plan"]:checked').val();
    setToken();
    $.ajax({
        type: 'POST',
        url: "{{ route('device.callPlanWashMachine') }}",
        async: false,
        data: {
          deviceId: $('#washMachineDeviceId').val(),
          planCode: planCode,
        },
        dataType: "json"
    }).done(function (data, textStatus, jqXHR) {
      if (data.retCode == '0') {
            Swal.fire({
              title: data.retMsg,
              icon: "success"
            });
            return
        }
        Swal.fire({
          title: data.retMsg,
          icon: "error"
        });
    }).fail(function (jqXHR, textStatus, errorThrown) {
        errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
    }).then(function (data, textStatus, jqXHR) {
        removeOverlay('controlWashMachineWaitBody', 'controlWashMachineWaitIcon');
    });
  }
});
</script>
@include('systemSetting.deviceManagement.devicePrintInvoice')
@endsection