@extends('layouts.main')

@section('pageTitle', '結帳條紀錄')

@section('content')
<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>
            <select class="form-control" id="type">
                <option value="">請選擇</option>
                @foreach(config('webCommonData.checkoutListTypeDropdown') 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="checkoutAccount">
        </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="{{ date('Y-m-01 00:00:00') }}" 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 23:59:59') }}"
                readonly>
        </div>
    </div>

    <button type='button' class='btn btn-danger' style="margin-bottom:10px;" id="checkoutListRecordSearch">查詢紀錄</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>收費總計筆數</th>
                                <th>收費總計金額</th>
                                <th>已開立發票總計筆數</th>
                                <th>已開立發票總計金額</th>
                                @can('checkoutListRecord.print')
                                    <th class="unsortable">列印</th>
                                @endcan
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    @can('checkoutListRecord.create')
        <button type='button' class='btn btn-danger createCheckoutListRecord' value="1">新增單次結帳條</button>
        <button type='button' class='btn btn-danger createCheckoutListRecord' value="2">新增總結帳條</button>
    @endcan
    @can('checkoutListRecord.export')
        <button type='button' class='btn btn-danger' id="checkoutListRecordExport">匯出</button>
        <br>※ 匯出限制 {{ $globalVariable['exportLimit'] }} 筆資料
    @endcan
    <!-- /.row -->
</div>

{{-- 重開modal --}}
<div class="modal fade" id="printModal" data-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="justify-content-center align-items-center">
            <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">
                <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="checkoutListId">
                <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>
@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    var url = "{{ route('checkoutListRecord.datatableList') }}";
    var columns = [
        {data: 'type', name: 'type'},
        {data: 'checkout_account', name: 'checkout_account'},
        {data: 'checkout_at', name: 'checkout_at'},
        {data: 'car_count', name: 'car_count'},
        {data: 'car_amount', name: 'car_amount'},
        {data: 'scooter_count', name: 'scooter_count'},
        {data: 'scooter_amount', name: 'scooter_amount'},
        {data: 'truck_count', name: 'truck_count'},
        {data: 'truck_amount', name: 'truck_amount'},
        {data: 'invoice_count', name: 'invoice_count'},
        {data: 'invoice_amount', name: 'invoice_amount'},
        {data: 'total_parking_count', name: 'total_parking_count'},
        {data: 'total_parking_amount', name: 'total_parking_amount'},
        {data: 'total_count', name: 'total_count'},
        {data: 'total_amount', name: 'total_amount'},
        @can('checkoutListRecord.print')
            {data: 'print', name: 'print'},
        @endcan
    ];

    var fieldArr = ['type', 'checkoutAccount', 'startDate', 'endDate'];
    var datatable = createDatatable('datatableList', url, columns, fieldArr, 0);

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

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

    // 新增結帳條紀錄
    $('.createCheckoutListRecord').on('click', function() {
        let type = $(this).val(); // 結帳條類型
        let title = '';
        let createUrl = "{{ route('checkoutListRecord.store') }}";

        if (type === '1') {
            title = '單次結帳條';
        } else {
            title = '總結帳條';
        }

        let data = {
            type: type
        };

        setToken();
        Swal.fire({
            title: title,
            html: '',
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: '新增',
            confirmButtonColor: '#7066e0',
            cancelButtonText: '取消',
        }).then((result) => {
            if (result.value) {
                sweetAlertLoading('處理請求中...');

                $.ajax({
                    type: 'POST',
                    url: createUrl,
                    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);
                });
            }
        });
    });

    // 匯出
    $('#checkoutListRecordExport').click(function (e) {
        var exportUrl = "{{ route('checkoutListRecord.export') }}";
        var getParameter = $.param(createObjectData(fieldArr));
        location.href = exportUrl + '?' + getParameter;
    });

    // 列印modal
    $(document).on('click', 'button[behavior=print]', function(e) {
        const row = $(this).closest('tr'); // 獲取點擊按鈕所在行
        const data = datatable.row(row).data(); // 獲取dataTable當前列的資料
        const checkoutListId = data.id;
        const type = data.type; // 類別
        const checkoutAccount = data.checkout_account; // 收費員
        const lastCheckoutAt = data.last_checkout_at; // 上次結帳時間
        const checkoutAt = data.checkout_at; // 結帳時間
        const totalParkingCount = data.total_parking_count; // 收費總計筆數
        const totalParkingAmount = data.total_parking_amount; // 收費總計金額

        // modal內容
        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'>${type}</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'>${checkoutAccount}</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'>${lastCheckoutAt}</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'>${checkoutAt}</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'>${totalParkingCount}</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'>${totalParkingAmount}</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' style='margin: 0 auto' id='printBtn'>列印</button>
            <button type='button' class='btn btn-danger' style='margin: 0 auto' data-dismiss='modal' id='cancel'>取消</button>
        `;

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

        $('#checkoutListId').val(checkoutListId);
        setPrinterId();
    });

    // 切換印表機
    $(document).on('change', '#printer', function() {
        setPrinterId();
    });

    // 設定隱藏的印表機編號
    function setPrinterId() {
        let printerId = $('#printer').val();
        $('#printerId').val(printerId);
    }
});
</script>
@include('recordSearch.checkoutListRecord.checkoutListRecordPrint')
@endsection