@extends('layouts.main')

@section('pageTitle', '發票補開查詢')

@section('content')
<div class="col-12 col-sm-12">
    <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-12 col-md-12 col-lg-12 col-xl-3 searchConditionString">
                <div class="input-group-prepend">
                    <span class="input-group-text">開始時間</span>
                </div>
                <input type="text" class="form-control" placeholder="開始時間" id="startDate" value="{{ date('Y-m-01 00:00:00') }}" readonly>
            </div>
            <div class="input-group col-12 col-sm-12 col-md-12 col-lg-12 col-xl-3 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 23:59:59') }}" 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>
                <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>

        <button type='button' class='btn btn-danger' style="margin-bottom: 10px;" id="makeUpInvoiceSearch">查詢紀錄</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>
                                <th>設備編號</th>
                                <th>車種</th>
                                <th>車號</th>
                                <th>繳費時間</th>
                                <th>收費方式</th>
                                <th>付費卡號</th>
                                <th>實際支付</th>
                                <th><span class='hint--top-left infoDetail' aria-label='第三方支付點數折抵的金額'>點數折抵金額(註)</span></th>
                                <th><span class='hint--top-left infoDetail' aria-label='總金額為實際支付加上點數折抵金額'>總金額(註)</span></th>
                                <th class="unsortable">補開</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="10" id="detailTableFoot"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        </div>
        {{-- 補開modal --}}
        <div class="modal fade" id="makeUpModal" 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>
                        <input type="hidden" value="" id="entrySerialNo">
                        <input type="hidden" value="" id="printerId">
                        <input type="hidden" value="" id="invoiceId">
                    </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>
    </div>
</div>
@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    var url = "{{ route('makeUpInvoice.datatableList') }}";
    var normalUrl = "{{ route('makeUpInvoice.tableFootData') }}";
    var columns = [
        {data: 'device_number', name: 'device_number'},
        {data: 'vehicle_type', name: 'vehicle_type'},
        {data: 'token', name: 'token'},
        {data: 'pay_time', name: 'pay_time'},
        {data: 'paymentShow', name: 'paymentShow'},
        {data: 'pay_card_number', name: 'pay_card_number'},
        {data: 'paidAmount', name: 'paidAmount'},
        {data: 'epay_point', name: 'epay_point'},
        {data: 'total_amount', name: 'total_amount'},
        {data: 'make_up', name: 'make_up'},
    ];
    var fieldArr = [
        'token',
        'startDate',
        'endDate',
        'vehicleType',
        'payType',
    ];
    var datatable = createDatatable('datatableList', url, columns, fieldArr, 0);
    normalAjax(normalUrl, fieldArr, afterDatatable, true);
    dataTablePluginPagejump(datatable);

    datePickerSetting.timePicker = true;
    datePickerSetting.timePickerSeconds = true;
    datePickerSetting.timePickerIncrement = 1;
    datePickerSetting.locale.format = 'YYYY-MM-DD HH:mm:ss';
    $('#startDate, #endDate').daterangepicker(datePickerSetting);

    $('#makeUpInvoiceSearch').click(function (e) {
        normalAjax(normalUrl, fieldArr, afterDatatable, true);
        dataTableReload(datatable);
    });

    function afterDatatable (retVal) {
        $('#detailTableFoot').html(retVal.tfootMsg);
    }

    // 補開
    $(document).on('click', 'button[behavior=makeUp]', function(e) {
        const row = $(this).closest('tr'); // 獲取點擊按鈕所在行
        const data = datatable.row(row).data(); // 獲取dataTable當前列的資料
        const token = data.token; // 車號
        const amount = data.amount; // 金額
        const entryTime = data.entry_time; // 進場時間
        const transactionId = data.transactionId; // 交易流水號
        let modalItems = '';

        // 進場紀錄
        if (transactionId != 0) {
            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' id="transactionToken">${token}</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'}}">${entryTime}</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'>${amount}</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>
                </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>
                </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>
                </div>
            `;
        }

        let buttonArea = `
            <button type='button' class='btn btn-danger cashCheckout' style='margin: 0 auto' id='makeUpInvoiceBtn'>補開發票</button>
            <button type='button' class='btn btn-danger' style='margin: 0 auto' data-dismiss='modal' id='cancel'>取消</button>
        `;

        $('#modalItems').html(modalItems);
        $('#buttonArea').html(buttonArea);

        // 列印發票的參數
        $('#entrySerialNo').val(transactionId);
    });
});
</script>
@include('recordSearch.makeUpInvoice.makeUpPrintInvoice')
@endsection