@extends('layouts.main')

@section('pageTitle', '電子發票查詢-明細')

@section('content')
<style>
    span.makeupInvoice {text-decoration:underline;color:#0000FF;font-weight:bold}
    span.makeupInvoice:hover {cursor:pointer;}
</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'], 'invoiceDetail.index') !!}
        </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>
                                <input type="text" class="form-control" placeholder="發票號碼" id="invoiceNumber">
                            </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="isNullify">
                                    <option value="">請選擇</option>
                                    @foreach(config('webCommonData.nullifyTypeDropdown') 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="isUpload">
                                    <option value="">請選擇</option>
                                    @foreach(config('webCommonData.uploadTypeDropdown') 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,18]))
                                            @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>
                                <select class="form-control" id="amountComponent">
                                    <option value="">請選擇</option>
                                    @foreach(config('webCommonData.amountComponentDropdown') 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>
                                <input type="text" class="form-control" placeholder="備註" id="memo">
                            </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="buyerTaxNumber">
                            </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="property">
                                    <option value="">請選擇</option>
                                    @foreach(config('webCommonData.propertyTypeDropdown') as $value => $propertyName)
                                    <option value="{{ $value }}">{{ $propertyName }}</option>
                                    @endforeach
                                </select>
                            </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') }}" 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>

                        <button type='button' class='btn btn-danger' style="margin-bottom: 10px;" id="invoiceDetailSearch">查詢紀錄</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>交易時間</th>
                                                <th>付款方式</th>
                                                <th>金額排序用</th>
                                                <th>金額</th>
                                                <th class="unsortable">進出資料</th>
                                                <th>是否作廢</th>
                                                <th>車種</th>
                                                <th>歸戶</th>
                                                @can('invoiceDetail.nullify')
                                                    <th class="unsortable">作廢</th>
                                                @endcan
                                                @can('invoiceDetail.reissue')
                                                    <th class="unsortable">重開</th>
                                                @endcan
                                                @can('invoiceDetail.reprint')
                                                    <th class="unsortable">副本補印</th>
                                                @endcan
                                                <th>備註</th>
                                                <th>結帳人員</th>
                                                <th>原始交易日</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="14" id="detailTableFoot"></th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                            <!-- /.card -->
                            </div>
                            <!-- /.col -->
                        </div>
                        @can('invoiceDetail.export')
                            <button type='button' class='btn btn-danger' id="invoiceDetailExport">匯出紀錄</button>
                            <br>※ 匯出限制 30000 筆資料，
                        @endcan
                        <!-- /.row -->
                    </div>

                    {{-- 重開modal --}}
                    <div class="modal fade" id="reissueModal" 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>
        </div>
        <!-- /.card -->
    </div>
</div>
@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    var url = "{{ route('invoiceDetail.datatableList') }}";
    var normalUrl = "{{ route('invoiceDetail.tableFootData') }}";
    var columns = [
        {data: 'number', name: 'number'},
        {data: 'token', name: 'token'},
        {data: 'invoice_number', name: 'invoice_number'},
        {data: 'is_upload', name: 'is_upload'},
        {data: 'seller_tax_number', name: 'seller_tax_number'},
        {data: 'buyer_tax_number', name: 'buyer_tax_number'},
        {data: 'buyer_tax_number_email', name: 'buyer_tax_number_email'},
        {data: 'transaction_time', name: 'transaction_time'},
        {data: 'pay_type', name: 'pay_type'},
        {data: 'amount', visible: false},
        {data: 'amount_show', name: 'amount'},
        {data: 'parking_data', name: 'parking_data'},
        {data: 'is_nullify', name: 'is_nullify'},
        {data: 'vehicle_type', name: 'vehicle_type'},
        {data: 'property_show', name: 'property_show'},
        @if(auth()->user()->can('invoiceDetail.nullify'))
            {data: 'nullify', name: 'nullify'},
        @endif
        @if(auth()->user()->can('invoiceDetail.reissue'))
            {data: 'reissue', name: 'reissue'},
        @endif
        @if(auth()->user()->can('invoiceDetail.reprint'))
            {data: 'reprint', name: 'reprint'},
        @endif
        {data: 'memo', name: 'memo'},
        {data: 'checkout_account', name: 'checkout_account'},
        {data: 'original_pay_time', name: 'original_pay_time'},
    ];

    var fieldArr = [
        'token',
        'invoiceNumber',
        'isNullify',
        'isUpload',
        'vehicleType',
        'payType',
        'memo',
        'buyerTaxNumber',
        'property',
        'startDate',
        'endDate',
        'amountComponent'
    ];

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

    dataTablePluginPagejump(datatable);

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

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

    normalAjax(normalUrl, fieldArr, afterDatatable);

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

    $('#invoiceDetailExport').click(function (e) {
        var exportUrl = "{{ route('invoiceDetail.export') }}";
        var getParameter = $.param(createObjectData(fieldArr));
        location.href = exportUrl + '?' + getParameter;
    });

    $(document).on('click', 'span.makeupInvoice', function(event){
        var active = false;
        var invoiceId = $(this).attr('sn');
        setToken();
        $.ajax({
            type: 'POST',
            url: "{{ route('invoiceDetail.checkMakeupInvoiceField') }}",
            async: false,
            data: {
            },
            dataType: "json"
        }).done(function (data, textStatus, jqXHR) {
            // ajax 呼叫成功後執行
            if (data.retCode == '0') {
                active = true;
            } else {
                errorMessage(data.retMsg);
                return;
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            // ajax 呼叫失敗後執行
            errorMessage(`錯誤：${jqXHR.status} ${errorThrown}`);
        }).then(function (data, textStatus, jqXHR) {
            // ajax 執行完之後執行
        });

        if(active){
            // var invoiceId = $(this).attr('sn');
            var url = "{{ route('invoiceDetail.invoiceInformation', ':invoiceId') }}";
            url = url.replace(':invoiceId', 'invoiceId=' + $(this).attr('sn'));
            var title = '發票';
            var width = window.screen.width * 0.9;
            var height = window.screen.height * 0.9;
            popupwindow(url, title, width, height);
        }
    });

    // 作廢按鈕
    $(document).on('click', 'button[behavior=nullify]', function(e) {
        const row = $(this).closest('tr'); // 獲取點擊按鈕所在行
        const rowData = datatable.row(row).data(); // 獲取dataTable當前列的資料
        const token = rowData.token; // 車號
        const invoiceNumber = rowData.invoice_number; // 發票號碼
        const buyerTaxNumber = rowData.buyer_tax_number || ''; // 買方統編
        const payTime = rowData.transaction_time; // 交易時間
        const payType = rowData.pay_type; // 付款方式
        const amount = rowData.amount; // 金額
        const property = rowData.property; // 歸戶
        const carrier = rowData.carrier_type_1; // 手機載具條碼
        const transactionId = rowData.transaction_id; // 交易流水號
        const memo = rowData.memo; // 備註(品項名稱)
        const note = rowData.note; // 純備註
        const itemName = rowData.itemName; // 品項名稱
        const invoiceId = $(this).attr('targetId'); // 發票編號

        let nullifyDetail = '';
        let nullifyUrl = "{{ route('invoiceDetail.nullify') }}";
        let data = {
            invoiceId: invoiceId
        };

        // 作廢明細
        if (transactionId != 0) {
            nullifyDetail += createDetailModal('車號', token);
            nullifyDetail += createDetailModal('發票號碼', invoiceNumber);
            nullifyDetail += createDetailModal('買方統編', buyerTaxNumber);
            nullifyDetail += createDetailModal('交易時間', payTime);
            nullifyDetail += createDetailModal('付款方式', payType);
            nullifyDetail += createDetailModal('金額', amount);
            nullifyDetail += createDetailModal('歸戶', property);
        } else {
            nullifyDetail += createDetailModal('品項名稱', itemName);
            nullifyDetail += createDetailModal('金額', amount);
            nullifyDetail += createDetailModal('備註', note);
            nullifyDetail += createDetailModal('統一編號', buyerTaxNumber);
            nullifyDetail += createDetailModal('手機載具', carrier);
        }

        Swal.fire({
            title: '<div>作廢發票<br><span style="color: red">發票作廢後，重開的發票只開立當期發票！</span></div>',
            html: nullifyDetail,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '確認作廢',
            cancelButtonText: '取消',
        }).then((result) => {
            if (result.value) {
                sweetAlertLoading('處理請求中...');

                $.ajax({
                    type: 'POST',
                    url: nullifyUrl,
                    data: data,
                    dataType: "json"
                }).done(function (data, textStatus, jqXHR) {
                    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, false);
                });
            }
        });
    });

    // 重開按鈕
    $(document).on('click', 'button[behavior=reissue]', 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.transaction_id; // 交易流水號
        const memo = data.memo; // 備註(品項名稱)
        const note = data.note; // 純備註
        const itemName = data.itemName; // 品項名稱
        const invoiceId = $(this).attr('targetId'); // 發票編號
        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>
            `;
        } else {
            // 自訂開立發票
            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'>${itemName}</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'>${note}</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='reissueInvoiceBtn'>重開發票</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);
        $('#invoiceId').val(invoiceId);
    });

    // 副本補印按鈕
    $(document).on('click', 'button[behavior=reprint]', function(e) {
        const row = $(this).closest('tr'); // 獲取點擊按鈕所在行
        const rowData = datatable.row(row).data(); // 獲取dataTable當前列的資料
        const invoiceNumber = rowData.invoice_number; // 發票號碼
        const buyerTaxNumber = rowData.buyer_tax_number || ''; // 買方統編
        const payTime = rowData.transaction_time; // 交易時間
        const amount = rowData.amount; // 金額
        const invoiceId = $(this).attr('targetId'); // 發票編號

        let reprintDetail = '';
        reprintDetail += createDetailModal('發票號碼', invoiceNumber);
        reprintDetail += createDetailModal('買方統編', buyerTaxNumber);
        reprintDetail += createDetailModal('交易時間', payTime);
        reprintDetail += createDetailModal('金額', amount);
        reprintDetail += createDetailModal('請選擇印表機', `
            <select id="printer" class="form-control">
                {!! $webPrinterOption !!}
            </select>
        `);

        Swal.fire({
            title: '副本補印',
            html: reprintDetail,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '補印',
            cancelButtonText: '取消',
            preConfirm: () => {
                return {
                    printerId: $('#printer').val()
                };
            }
        }).then((result) => {
            if (result.value) {
                sweetAlertLoading('處理請求中...');

                let reprintUrl = "{{ route('invoiceDetail.reprint') }}";
                let data = {
                    invoiceId: invoiceId,
                    printerId: result.value.printerId
                };

                $.ajax({
                    type: 'POST',
                    url: reprintUrl,
                    data: data,
                    dataType: "json"
                }).done(function (data, textStatus, jqXHR) {
                    if (data.retCode == 0) {
                        // 本地端列印才會回傳發票網址
                        if (data.retVal.invoiceUrl) {
                            let printWindow = window.open(data.retVal.invoiceUrl, '_blank');
                        }

                        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, false);
                });
            }
        });
    });
});
</script>
@include('recordSearch.invoiceSearch.invoiceDetailPrintInvoice')
@endsection