@extends('layouts.main')

@section('pageTitle', '場內車輛')

@section('content')
<style>
    a:hover, a:focus{color: blue;}
    a.showPic, a.showPic:hover, a.showPic:focus {text-decoration: underline; color:#0000FF;}
    button.fancybox-button--share{display:none;}
    #disabledDiscountModal table {border:1px solid #b3adad; border-collapse:collapse;padding:5px;}
    #disabledDiscountModal table th {border:1px solid #b3adad; padding:5px; background: #969696; color: #313030;}
    #disabledDiscountModal table td {border:1px solid #b3adad; text-align:center; padding:5px; background: #ffffff; color: #313030;}
    #disabledDiscountModal div.modal-body div.row{margin-bottom: 20px;}
    input[type=checkbox].disabledCheckbox{
        /* Double-sized Checkboxes */
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        transform: scale(2);
        padding: 10px;
    }
</style>
<link rel="stylesheet" href="{{ asset('css/jquery.fancybox.min.css') }}?v={{ filemtime(public_path('css/jquery.fancybox.min.css')) }}">
<!-- Main -->
<div class="col-12 col-sm-12">
    <div class="card card-primary card-outline card-outline-tabs">
        <div class="card-header p-0 border-bottom-0">
        {!! $thirdLevelHtml !!}
        </div>
        <div class="card-body">
            <div class="tab-content" id="thirdLevel-tabContent">
                <div class="tab-pane fade show active" id="" role="tabpanel">
                    <div class="container-fluid">

                        <div class="row">
                            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">車號</span>
                                </div>
                                <input type="text" class="form-control" placeholder="車號" id="token">
                            </div>
                            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">卡別</span>
                                </div>
                                <select class="form-control" id="tokenType">
                                    <option value="">請選擇</option>
                                    @foreach(config('webCommonData.tokenTypeDropdown') as $value => $name)
                                        <option value="{{ $value }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">車種</span>
                                </div>
                                <select class="form-control" id="vehicleType">
                                    <option value="">請選擇</option>
                                    @inject('vehicleTypesRepository', 'App\Repositories\VehicleTypesRepository')
                                    @foreach($vehicleTypesRepository->getListByPluck('id', 'name', [['id', '<', 3]]) as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">收費方式</span>
                                </div>
                                <select class="form-control" id="payType">
                                    <option value="">請選擇</option>
                                    @foreach(config('webCommonData.payTypeDropdown') as $value => $name)
                                        @if (in_array($value, [8,9,11,12]))
                                            @continue
                                        @endif
                                        <option value="{{ $value }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">開始日期</span>
                                </div>
                                <input type="text" class="form-control" placeholder="開始日期" id="startDate" value="{{ $startDate }}" readonly>
                            </div>
                            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">結束日期</span>
                                </div>
                                <input type="text" class="form-control" placeholder="結束日期" id="endDate" value="{{ date('Y-m-d') }}" readonly>
                            </div>
                        </div>

                        <button type='button' class='btn btn-danger' style="margin-bottom: 10px;" id="insideVehiclesSearch">查詢紀錄</button>

                        <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>
                                                @can('insideVehicles.destroyBatch')
                                                    <th><input type="checkbox" id="checkAll"></th>
                                                @endcan
                                                <th>設備編號</th>
                                                <th>卡號/車號</th>
                                                <th>進場時間</th>
                                                <th>車種</th>
                                                <th>身份別</th>
                                                @can('insideVehicles.checkout')
                                                    <th class="unsortable">結帳</th>
                                                @endcan
                                                @can('insideVehicles.edit')
                                                    <th class="unsortable">修改</th>
                                                @endcan
                                                @can('insideVehicles.disabledDiscount')
                                                    <th class="unsortable">優惠設定</th>
                                                @endcan
                                                @can('insideVehicles.destroy')
                                                    <th class="unsortable">刪除</th>
                                                @endcan
                                                @can('insideVehicles.checkout')
                                                    <th class="unsortable">人工放行</th>
                                                @endcan
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                            <!-- /.card -->
                            </div>
                            <!-- /.col -->
                        </div>
                        @if (auth()->user()->can('insideVehicles.create') && $hasEntrance)
                            <a class="btn btn-danger" href="{{ route('insideVehicles.create') }}">新增紀錄</a>
                        @endif
                        @if (auth()->user()->can('insideVehicles.createUnfenced') && $hasCamera)
                            <a class="btn btn-danger" href="{{ route('insideVehicles.createUnfenced') }}">新增無柵欄紀錄</a>
                        @endif
                        @can('insideVehicles.destroyBatch')
                            <span class="btn btn-danger" id="insideVehicleDestroyBatch">批次刪除</span>
                        @endcan
                    <!-- /.row -->
                    </div>
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>
<!-- Modal -->
<!-- 現金結帳 -->
@can('insideVehicles.checkout')
<div class="modal fade" id="cashCheckoutModal" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <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 position-absolute" id="closeModalBtn" data-dismiss="modal" aria-label="Close" style="top: 18px; right: 15px;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid" id="modalImage">
                </div>
                <div class="container-fluid" id="modalItems">
                </div>
                @if($eBikeEntryEnable)
                    <div style='text-align:center; color:red;'>
                        <div>※[電動自行車]車牌屬於特殊車牌，無法使用人工結帳功能。</div>
                        <div>請改成自定義英數字組成車牌，並人工放行離場。</div>
                    </div>
                @endif
                <input type="hidden" value="" id="entrySerialNo">
                <input type="hidden" value="" id="price">
                <input type="hidden" value="" id="printerID">
            </div>

            <div class="modal-footer justify-content-between" style="text-align:center;margin-top:10px;" id="buttonArea">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endcan
<!-- 現金結帳結束 -->
<!-- 人工放行 -->
@can('insideVehicles.checkout')
<div class="modal fade" id="manualExitModal">
    <div class="modal-dialog">
        <div class="modal-content card">
            <div class="modal-header">
                <h4 class="modal-title text-center" style="width: 100%;">人工放行</h4>
                <button type="button" class="close position-absolute" data-dismiss="modal" aria-label="Close" style="top: 18px; right: 15px;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="overlayArea">
                <div class="flex-column" id="manualExitOverlayBody">
                    <i class="fas fa-2x fa-sync fa-spin" id="manualExitOverlayIcon"></i>
                    <div class="mt-2" id="manualExitOverlayMessage"></div>
                </div>
                <div class="modal-body">
                    <div class="p-5" id="manualExitModalEmptyBlock"></div>
                    <div id="manualExitModalContent">
                        <section>
                            <div class="text-center"><h5>出口車道</h5></div>
                            @inject('devicesRepository', 'App\Repositories\DevicesRepository')
                            @foreach ($devicesRepository->getByWhereIn('mode', [2, 6]) as $device)
                            <div class="ml-2">
                                <input type="radio" name="gateDevice" id="{{ $device->id }}" value="{{ $device->id }}">
                                <label for="{{ $device->id }}">
                                    {{ $device->name }} ({{ $device->number }}) - {{ $device->vehicle->name }} - {{ config('webCommonData.laneModes')[$device->mode] }}
                                </label>
                            </div>
                            @endforeach
                            <input type="hidden" value="" id="transactionId">
                        </section>
                        <div id="reminder" class="text-center"></div>
                        <div class="text-center">按下確定後，紀錄出場並開啟車道閘門</div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between text-center">
                    <button type="button" class="btn btn-danger" id="manualExitSubmit">確定</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">返回</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endcan
<!-- 人工放行結束 -->
<!-- 業者優惠/身障優惠 -->
@can('insideVehicles.disabledDiscount')
<div class="modal fade" id="disabledDiscountModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-between align-items-center">
                <h4 class="modal-title flex-grow-1 text-center mb-0">優惠設定<span id="discountTitle"></span></h4>
                    <button type="button" class="btn btn-primary position-absolute" id="discountChangeBtn" style="right: 60px; top: 15px;">
                        <span class="discountModalPage1">自訂優惠</span>
                        <span class="discountModalPage2 hide">快捷優惠</span>
                    </button>
                    <button type="button" class="close position-absolute" data-dismiss="modal" aria-label="Close" id="closeCheckoutModal" style="top: 18px; right: 15px;">
                    <span aria-hidden="true">&times;</span>
            </div>
            <div class="modal-body" style="text-align:center;font-size: 18px;" align="center">
                {{-- 快捷優惠顯示畫面 --}}
                <div class="row discountModalPage1">
                    @inject('quickDiscountRepository', 'App\Repositories\QuickDiscountRepository')
                    @if ($quickDiscountRepository->countAll()==0)
                    <p class="col-12">尚未定義快捷優惠項目<br>請至場務管理/快捷優惠設定界面定義快捷優惠項目<br>或是按右上方[自訂優惠]</p>
                    @endif
                    <div id="discountDescription" class="col-12"></div>
                    <div class='row row-cols-4 col-12' style="justify-content: space-evenly">
                        @foreach($quickDiscountRepository->getAll() as $d)
                            <button class="btn btn-outline-secondary col discountBtn m-2" data-bs-toggle="button" autocomplete="off"
                                discount_id="{{$d->id}}"
                                discount_name="{{$d->discount_name}}"
                                discount_type="{{$d->discount_type}}"
                                discount_amount="{{$d->discount_amount}}"
                                discount_hour="{{$d->discount_hour}}"
                                discount_rate_before="{{$d->discount_rate_before}}"
                                discount_rate_after="{{$d->discount_rate_after}}"
                                discount_remark="{{$d->remark}}"
                                handicapped="{{$d->is_disabled}}"
                                >
                                @if ($d->is_disabled)
                                    <i class="fas fa-wheelchair"></i>
                                @endif
                                {{$d->discount_name}}
                            </button>
                        @endforeach
                    </div>
                </div>
                {{-- 自訂優惠顯示畫面 --}}
                <div class="discountModalPage2 hide">
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠模式：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <select id="amountType">
                                @foreach(config('webCommonData.disabledDiscountTypeDropdown') as $value => $name)
                                    @if ($value == 1)
                                        <option value="{{ $value }}" selected>{{ $name }}</option>
                                    @else
                                        <option value="{{ $value }}">{{ $name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class='row col-sm-8 amountType1' style="margin: 30px auto;">
                        <div class="col-sm-12" style="line-height: 40px;">
                            <input type="text" id="discountHour" size="5" style="height:30px;"> 小時前免費，
                            之後 <input type="text" id="discountRateAfter" size="5" style="height:30px;" placeholder="0~99"> 折扣百分比
                        </div>
                        <div class="col-sm-12" style="font-size: 15px; margin: 10px 0 10px 23px; text-align: left;">
                            範例： <br>
                            輸入20，等同8折優惠。<br>
                            輸入80，等同2折優惠。<br>
                            輸入25，等同75折優惠。<br>
                            輸入0，等同無折扣。
                        </div>
                    </div>
                    <div class='row amountType2'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠金額：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'><input type="text" id="disabledDiscountAmount"></div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>備註：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'><input type="text"  id="discountRemark"></div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>
                            <input type="checkbox" id="disabled" class="disabledCheckbox">
                        </div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <label for="disabled" style="font-weight: normal;">身障優惠註記</label>
                        </div>
                    </div>
                    <input type="hidden" id="discountTransactionId">
                    <input type="hidden" id="discountName">
                    @if($eBikeEntryEnable)
                        <div style='text-align:center; color:red;'>
                            <div>※[電動自行車]車牌屬於特殊車牌，無法使用優惠設定功能。</div>
                            <div>請改成自定義英數字組成車牌，並人工放行離場。</div>
                        </div>
                    @endif
                </div>
                <div class="modal-footer justify-content-between" style="text-align:center;">
                    <button type="button" class="btn btn-primary" style="margin: 0 auto;" id="discountSave">確定</button>
                    <button type="button" class="btn btn-primary" style="margin: 0 auto;" data-dismiss="modal" id="discountCancel">取消</button>
                    <button type="button" class="btn btn-danger" style="margin: 0 auto;" id="discountAnnul">取消優惠設定</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endcan
<!-- 業者優惠/身障優惠結束 -->
@endsection

@section('js')
@include('include.datePickerAndMask')
@include('include.fancybox')
<script>
$(document).ready(function () {
  var url = "{{ route('insideVehicles.datatableList') }}";
  var columns = [
    @can('insideVehicles.destroyBatch')
        {data: 'destroyBatch', name: 'destroyBatch'},
    @endcan
    {data: 'device_number_in', name: 'device_number_in'},
    {data: 'token', name: 'token'},
    {data: 'entry_time', name: 'entry_time'},
    {data: 'vehicle_type', name: 'vehicle_type'},
    {data: 'token_type', name: 'token_type'},
    @can('insideVehicles.checkout')
      {data: 'checkout', name: 'checkout'},
    @endcan
    @can('insideVehicles.edit')
      {data: 'edit', name: 'edit'},
    @endcan
    @can('insideVehicles.disabledDiscount')
      {data: 'disabledDiscount', name: 'disabledDiscount'},
    @endcan
    @can('insideVehicles.destroy')
      {data: 'delete', name: 'delete'},
    @endcan
    @can('insideVehicles.checkout')
      {data: 'manualExit', name: 'manualExit'},
    @endcan
  ];

  var fieldArr = ['token', 'tokenType', 'vehicleType', 'payType', 'startDate', 'endDate'];

  var datatable = createDatatable('datatableList', url, columns, fieldArr, 1);

  dataTablePluginPagejump(datatable);

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

  $('#startDate, #endDate').daterangepicker(datePickerSetting);

  $('#insideVehiclesSearch').click(function (e) {
    dataTableReload(datatable);
  });

  $('#insideVehicleDestroyBatch').click(function (e) {
    datatableDeleteBatchAjax(datatable, "{{ route('insideVehicles.destroyBatch') }}");
  });

  // 因為這兩個有打出場合法性，當超出緩衝時間時，流水號會不同，避免其他操作上的問題(e.g. 點擊modal的"x"關閉)，直接重整頁面
  $('#cashCheckoutModal, #manualExitModal').on('hidden.bs.modal', function () {
        location.reload();
    });
});
</script>
@include('stationManagement.insideVehicles.sections.cashCheckoutSection')
@include('stationManagement.insideVehicles.sections.disabledDiscountSection')
@include('stationManagement.insideVehicles.sections.manualExitSection')
@endsection