@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
@endsection

@section('page-content-wrapper')
    <div class="page-content-wrapper" id="main">
        <div class="page-content">
             <!-- BEGIN PAGE HEADER-->
             <h3 class="page-title">
                @inject('setting','anlutro\LaravelSettings\Facade')
                {{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
            </h3>
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('manage::index')}}">@lang('messages.homepage')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:;">汽機車充電系統</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:;">累計度數查詢</a>
                    </li>
                </ul>
            </div>
            <form method="get" style="margin: 20px;">
                <div class="row">
                    <div class="col-md-1">
                        <label>車位號碼</label>
                        <select class="form-control" id="device-select" name="device-select">
                        <option  value="">請選擇</option>
                        @foreach($all_sensors as $sensor)
                        <option data-per-price-unit="{{ $sensor->price_per_unit }}" value="{{ $sensor->id }}" {{(request()->query('device-select') == $sensor->id)?"selected":""}} data-deviceid="{{$sensor->name}}">{{ config('charge.deviceIdAliases')[$sensor->name] }}</option>
                        @endforeach
                        </select>
                        <input class="form-control hidden" id="device-id" name="device-id" type="text">
                    </div>
                    <div class="col-md-1">
                        <label>每度金額</label>
                        <input class="form-control" id="kwh-price" name="kwh-price" type="number" step="0.1" readonly >
                    </div>
                    <div class="col-md-3">
                        <label for="start-time">開始時間</label>
                        <input class="form-control" id="start-time" name="start-time" type="datetime-local">
                    </div>
                    <div class="col-md-3">
                        <label for="end-time">結束時間</label>
                        <input class="form-control" id="end-time" name="end-time" type="datetime-local">
                    </div>
                    {{-- 累計度數只能在第一頁顯示，其他頁不顯示該欄位以防呆 --}}
                    @if (isset($_GET['page']) && $_GET['page'] != 1)
                    <div class="col-md-2" style="margin-top: 5px;">
                    @else                    
                    <div class="col-md-1">
                        <label>累計度數</label>
                        <input class="form-control" type="text" id="kwh-subvalue" value="{{$kwh_subvalue}}" readonly>
                    </div>
                    <div class="col-md-1">
                        <label>總額</label>
                        <input class="form-control" type="text" id="total" value="{{$total_price}}"  readonly>
                    </div>
                    
                    <div class="col-md-1" style="margin-top: 5px;">
                        @endif
                        <button class="btn btn-info btn-lg" onclick="checkDeviceId()">查詢</button>
                        <a href="{{ action('ChargeController@charge_record_count') }}" style="margin-left: 15px;">清除條件</a>
                    </div>
                    <div class="col-md-1" style="margin-top: 5px;">
                        <button class="btn btn-info btn-lg" onclick="PrintInvoice()">列印</button>
                    </div>
                </div>
            </form>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-2" style="margin-top: 15px;">
                        <h4>(總筆數：{{$charge_records->total()}})</h4>
                    </div>
                    <div class="portlet light bordered">
                        <div class="portlet-body">
                            <table class="table table-striped table-bordered table-hover" id="table_data">
                                <thead>
                                    <tr>
                                        <th width="10%">
                                            車位號碼
                                        </th>
                                        <th width="10%">
                                            設備狀態
                                        </th>
                                        <th width="10%">
                                            電流
                                        </th>
                                        <th width="10%">
                                            累計電度/單次
                                        </th>
                                        <th width="10%">
                                            電壓
                                        </th>
                                        <th width="25%">
                                            發送時間
                                        </th>
                                        <th width="25%">
                                            備註
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($charge_records as $one)
                                    <tr>
                                        <td>
                                            {{ config('charge.deviceIdAliases')[$one->deviceId] }}
                                        </td>
                                        <td>
                                            @if($one->alive == 1)
                                            <span class="label label-sm label-info">啟用中</span>
                                            @else
                                            <span class="label label-sm label-danger">停用中</span>
                                            @endif
                                        </td>
                                        <td>
                                            {{$one->current}}A
                                        </td>
                                        <td>
                                            {{$one->energy}}kWh
                                        </td>
                                        <td>
                                            {{$one->voltage}}V
                                        </td>
                                        <td>
                                            {{$one->triggerTime}}
                                        </td>
                                        <td>
                                            {{$one->remark}}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {!! $charge_records->render() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
    const urlParams = new URLSearchParams(window.location.search);
    $('#device-id').val(urlParams.get('device-id'));
    $('#kwh-price').val(urlParams.get('kwh-price'));
    $('#start-time').val(urlParams.get('start-time'));
    $('#end-time').val(urlParams.get('end-time'));
    //$('#total').val(urlParams.get('total'));
    
    function checkDeviceId() {
        const deviceId = document.querySelector('#device-id').value;
        if (deviceId === '請選擇') {
            confirm("請先選取設備編號才能查詢！");
        }

    }
    
    $(document).ready(function () {
        let origin_price = $("#kwh-price").val();
        let device_id = $("#device-id").val();
        let new_price;

        // 当选择框的值发生变化时
        $("#device-select").change(function () {
            // 获取选中选项的 data-per-price-unit 属性值
            var perPriceUnit = $("option:selected", this).data("per-price-unit");
            var selected_device = $("option:selected", this).data("deviceid");
            $("#device-id").val(selected_device); 
            // 将获取到的值设置到 kwh-price 元素中
            $("#kwh-price").val(perPriceUnit);
            origin_price = perPriceUnit;
            device_id = selected_device;
            // 清空累計度數與總額
            $("#total").val(""); 
            $("#kwh-subvalue").val("");
            if (device_id == "") {
                ("#device-id").val(""); 
                $("#kwh-price").val("");
            }
        });

        // 點擊 input 時移除 readonly 屬性
        $('#kwh-price').on('click', function () {

            if (device_id != "") {
                $(this).prop('readonly', false);
            }
            
        });

        // 離開 input 時加上 readonly 屬性
        $('#kwh-price').on('blur', function () {
            new_price = $('#kwh-price').val();
            
            if (origin_price != new_price) {
                $.ajax({
				    url  : '{{ route('manage::charge::setting::update_price') }}',
				    type : 'POST',
				    data : {
                        name : device_id,
				    	price_per_unit : new_price,
				    	_token : '{{csrf_token()}}'
				    },
                    success: function(res){
                        $('#kwh-price').val(res);
				    }
			    });
            }
            $(this).prop('readonly', true);
        });
    });

    // 在表單提交之前觸發的事件
    // $('form').submit(function() {
    //     // 將選擇框和輸入框的值存儲在 sessionStorage 中
    //     sessionStorage.setItem('selectedDevice', $('#device-select').val());
    //     sessionStorage.setItem('kwhPrice', $('#kwh-price').val());
    // });

// 在頁面載入時，檢查 sessionStorage 並恢復值
$(document).ready(function() {
    var selectedDevice = sessionStorage.getItem('selectedDevice');
    var kwhPrice = sessionStorage.getItem('kwhPrice');

    if($('#kwh-subvalue').val()!=""){
    // 將累計度數存在Storage
    sessionStorage.setItem('KwhSubvalue', $('#kwh-subvalue').val());
    }

    if (selectedDevice) {
        $('#device-select').val(selectedDevice);
    }

    if (kwhPrice) {
        $('#kwh-price').val(kwhPrice);
    }
});

function  PrintInvoice() {
        //取得設備
       var deviceSelect=$('#device-select option:selected').text();
       //取得設備每度金額
        var kwhPrice=$('#kwh-price').val();
       //取得時間
        var StartTime=$('#start-time').val().replace("T", " ");

        var EndTime=$('#end-time').val().replace("T", " ");
        // 取得累計度數
        var KwhSubvalue=$('#kwh-subvalue').val();

        // 計算總金額
       var total= Math.round(kwhPrice * KwhSubvalue);

        // 準備要列印的內容
    var printContent = `
        <p>設備: ${deviceSelect}</p>
        <p>每度金額: ${kwhPrice}</p>
        <p>開始時間: ${StartTime}</p>
        <p>結束時間: ${EndTime}</p>
        <p>累計度數: ${KwhSubvalue}</p>
        <p>總金額: ${total}元</p>
        <p>簽名: ____________</p>
    `;

    // 創建新的窗口並載入列印內容
    var printWindow = window.open('', '_blank');
    printWindow.document.open();
    printWindow.document.write(`
        <html>
        <head>
            <title>Invoice</title>
        </head>
        <body>
            ${printContent}
        </body>
        </html>
    `);
    printWindow.document.close();

    // 呼叫列印對話框
    printWindow.print();
}

</script>
@endsection