@extends('layouts.main')

@section('pageTitle', '車牌辨識')

@section('content')
<style>
    #datatableList {
        text-align: center;
    }
</style>
<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">
        @inject('thidLevel','App\Presenters\ThirdLevelPresenter')
        {!! $thidLevel->createThirdLevel($globalVariable['pathMain'], $globalVariable['pathSub'], 'cameraScreen.index') !!}
        </div>
        <div class="card-body">
            <div class="tab-content" id="thirdLevel-tabContent">
                <div class="tab-pane fade show active" id="" role="tabpanel">
                    <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>設備名稱</th>
                                <th>畫面擷取網址</th>
                                @can('cameraScreen.edit')
                                    <th>修改</th>
                                @endcan
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cameraDeviceList as $device)
                                <tr>
                                    <td>
                                        {{ $device->name }}
                                    </td>
                                    <td>
                                        <input type='text' placeholder='畫面擷取網址' class='form-control deviceid_{{ $device->id }}' value='{{ $device->camera_screenshot }}'>
                                    </td>
                                    @can('cameraScreen.edit')
                                        <td>
                                            <span type="" class="btn btn-info modify" device="{{ $device->id }}">修改</span>
                                        </td>
                                    @endcan
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
    $('span.modify').click(function (e) {
        if(!confirm('確定要修改？')) {
            return false;
        }

        var deviceId = $(this).attr('device');
        var cameraScreenshot = $('input.deviceid_' + deviceId).val();

        setToken();
        $.ajax({
            type: 'PUT',
            url: "{{ route('cameraScreen.update') }}",
            async: false,
            data: {
                id: deviceId,
                cameraScreenshot: cameraScreenshot
            },
            dataType: "json"
        }).done(function (data, textStatus, jqXHR) {
            // ajax 呼叫成功後執行
            if (data.retCode == '0') {
                successMessage(data.retMsg);
                modifyCurrentShowParkingSpace(data.retVal);
            } else {
                errorMessage(data.retMsg);
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            // ajax 呼叫失敗後執行
            errorMessage(`修改錯誤：${jqXHR.status} ${errorThrown}`);
        }).then(function (data, textStatus, jqXHR) {
            // ajax 執行完之後執行
        });
    });
});
</script>
@endsection