@extends('admin.main')
@inject('dataPresenter', 'App\Presenters\DataPresenter')
@inject('formPresenter', 'App\Presenters\FormPresenter')
@include('widgets.datatables')
@section('breadcrumb')
    {{ Breadcrumbs::render('admin.order.show', $data) }}
@endsection
@section('content')
    <form class="formValidation" method="post" data-is-update="{{ !empty($data) }}" data-redirect="reload">
        <section class="invoice-view-wrapper">
            <div class="row style-order-detail">
                <!-- invoice view page -->
                <div class="col-xl-9 col-md-8 col-12">
                    <div class="card invoice-print-area">
                        <div class="card-body pb-0 mx-25">
                            <!-- header section -->
                            <div class="row">
                                <div class="col-lg-4 col-md-12">
                                    <span class="invoice-number mr-50">訂單編號:</span>
                                    <span>{{ $data->id }}</span>
                                </div>
                                <div class="col-lg-8 col-md-12">
                                    <div class="d-flex align-items-center justify-content-lg-end flex-wrap">
                                        <div>
                                            <small class="text-muted">訂單日期:</small>
                                            <span>{{ $data->created_at }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- logo and title -->
                            <div class="row mt-2">
                                <div class="col-sm-6 col-12 text-center text-sm-left order-2 order-sm-1">
                                    <h4 class="text-primary">訂單明細</h4>
                                </div>
                            </div>
                            <hr>
                            <!-- invoice address and contact -->
                            <div class="row invoice-info">
                                <div class="col-sm-6 col-12 mt-1">
                                    <h6 class="invoice-from">訂單基本資訊</h6>
                                    <dl class="row">
                                        <dt class="col-sm-2">型態</dt>
                                        <dd class="col-sm-9">{{ trans_choice('order.type', $data->type) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">來源</dt>
                                        <dd class="col-sm-9">{{ trans_choice('enum.source', $data->source) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">分潤</dt>
                                        <dd class="col-sm-9">{{ to_amount($data->share_profit) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">溫層</dt>
                                        <dd class="col-sm-9">{{ trans_choice('order.layer', $data->logistic->temperature_layer) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">滿額加購</dt>
                                        <dd class="col-sm-9">{{ $data->with_add_purchase ? '符合' : '不符合' }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">滿額贈品</dt>
                                        <dd class="col-sm-9">{{ $data->with_giveaway ? '符合' : '不符合' }}</dd>
                                    </dl>
                                    @if ($data->user)
                                        <h6 class="invoice-from">訂購人資訊</h6>
                                        <dl class="row">
                                            <dt class="col-sm-2">姓名</dt>
                                            <dd class="col-sm-9">{{ $data->user->name }}</dd>
                                        </dl>
                                        <dl class="row">
                                            <dt class="col-sm-2">帳號</dt>
                                            <dd class="col-sm-9">{{ $data->user->account }}</dd>
                                        </dl>
                                        <dl class="row">
                                            <dt class="col-sm-2">信箱</dt>
                                            <dd class="col-sm-9">{{ $data->user->email }}</dd>
                                        </dl>
                                        <dl class="row">
                                            <dt class="col-sm-2">電話</dt>
                                            <dd class="col-sm-9">{{ $data->user->mobile }}</dd>
                                        </dl>
                                    @endif

                                </div>
                                <div class="col-sm-6 col-12 mt-1">
                                    <h6 class="invoice-from">收件人資訊</h6>
                                    <dl class="row">
                                        <dt class="col-sm-2">姓名</dt>
                                        <dd class="col-sm-9">
                                            <input class="form-control col-6" name="shipping_name" value="{{ $data->logistic->shipping_name }}" placeholder="收件人姓名">
                                        </dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">地址</dt>
                                        <dd class="col-sm-12 form-inline">
                                            <input class="form-control col-2" name="shipping_zipcode" value="{{ $data->logistic->shipping_zipcode }}">
                                            <select class="form-control" name="shipping_county"></select>
                                            <select class="form-control" name="shipping_district"></select>
                                            <input class="form-control col-12" name="shipping_address" value="{{ $data->logistic->shipping_address }}">
                                        </dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">email</dt>
                                        <dd class="col-sm-9">
                                            <input class="form-control col-6" name="shipping_email" value="{{ $data->logistic->shipping_email }}"
                                                  type="email" placeholder="收件人email">
                                        </dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">電話</dt>
                                        <dd class="col-sm-9">
                                            <input class="form-control col-6" name="shipping_phone" value="{{ $data->logistic->shipping_phone }}" placeholder="收件人電話">
                                        </dd>
                                    </dl>
                                    <h6 class="invoice-from">訂單狀態</h6>
                                    <dl class="row">
                                        <dt class="col-sm-2">訂單狀態</dt>
                                        <dd class="col-sm-9">{{ trans_choice('order.order_status', $data->status) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">付款狀態</dt>
                                        <dd class="col-sm-9">{{ trans_choice('order.pay_status', $data->pay_status) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">出貨狀態</dt>
                                        <dd class="col-sm-9">{{ trans_choice('order.shipping_status', $data->shipping_status) }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">付款方式</dt>
                                        <dd class="col-sm-9">{{ $data->pay_type ? trans_choice('order.pay_type', $data->pay_type) : '' }}</dd>
                                    </dl>
                                    <dl class="row">
                                        <dt class="col-sm-2">貨運方式</dt>
                                        <dd class="col-sm-9">{{ $data->logistic->shipping_type ? trans_choice('enum.shipping_types', $data->logistic->shipping_type) : '' }}</dd>
                                    </dl>
                                </div>
                            </div>
                            <hr>
                        </div>
                        <!-- product details table-->
                        <div class="invoice-product-details table-responsive">
                            <table id="productList" class="table table-borderless mb-0">
                                <thead>
                                <tr class="border-0">
                                    <th scope="col">商品編號</th>
                                    <th scope="col">商品名稱</th>
                                    <th scope="col">規格</th>
                                    <th scope="col" class="text-center">單價</th>
                                    <th scope="col" class="text-center" width="100">數量</th>
                                    <th scope="col" class="text-right">小計</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($orderProductsWithNormal as $k => $product)
                                    <tr class="productsTr">
                                        <td>{{ $product->pid }}</td>
                                        <td>{{ $product->info->name }}</td>
                                        <td>{{ $product->rule ? $dataPresenter->getProductRuleAttributeTypesString($product->rule) : '' }}</td>
                                        <td class="text-primary text-right font-weight-bold">{{ to_amount($product->amount) }}</td>
                                        <td class="text-right">
                                            @if ($data->can_edit_product)
                                                <input type="hidden" class="pid" name="products[{{ $k }}][pid]" value="{{ $product->pid }}">
                                                <input type="hidden" class="prid" name="products[{{ $k }}][prid]" value="{{ $product->prid }}">
                                                <input type="hidden" class="ptype" name="products[{{ $k }}][type]" value="{{ \App\Enum\OrderProductType::NORMAL }}">
                                                <input type="number" class="form-control productCount" name="products[{{ $k }}][count]" min="1"
                                                       data-amount="{{ $product->amount }}" value="{{ $product->count }}">
                                            @else
                                                {{ $product->count }}
                                            @endif
                                        </td>
                                        <td class="text-primary text-right font-weight-bold productTotal">{{ to_amount($product->total) }}</td>
                                        <th>
                                            @if ($data->can_edit_product)
                                                <button type="button" class="btn btn-danger deleteProduct" data-amount="">x</button>
                                            @endif
                                        </th>
                                    </tr>
                                @endforeach
                                <tr class="group"><td colspan="7">加購商品</td></tr>
                                @if (!empty($orderProductsWithAdditional))
                                    @foreach($orderProductsWithAdditional as $product)
                                        <tr class="additionalTr">
                                            <td>{{ $product->pid }}</td>
                                            <td>{{ $product->info->name }}</td>
                                            <td>{{ $product->rule ? $dataPresenter->getProductRuleAttributeTypesString($product->rule) : '' }}</td>
                                            <td class="text-primary text-right font-weight-bold">{{ to_amount($product->amount) }}</td>
                                            <td class="text-right">
                                                @if ($data->can_edit_product)
                                                    <input type="hidden" class="id" name="additional[{{ $k }}][id]" value="{{ $product->pipid }}">
                                                    <input type="number" class="form-control productCount" name="additional[{{ $k }}][count]"
                                                           data-amount="{{ $product->amount }}" value="{{ $product->count }}"
                                                           max="{{ $product->purchaseIntervalProductInfo->count ?: 999 }}" min="1">
                                                @else
                                                    {{ $product->count }}
                                                @endif
                                            </td>
                                            <td class="text-primary text-right font-weight-bold productTotal">{{ to_amount($product->total) }}</td>
                                            <th>
                                                @if ($data->can_edit_product)
                                                    <button type="button" class="btn btn-danger deleteProduct" data-amount="">x</button>
                                                @endif
                                            </th>
                                        </tr>
                                    @endforeach
                                @endif
                                <tr class="group"><td colspan="7">加贈商品</td></tr>
                                @if (!empty($orderProductsWithGift))
                                    @foreach($orderProductsWithGift as $product)
                                        <tr class="giftTr">
                                            <td>{{ $product->pid }}</td>
                                            <td>{{ $product->info->name }}</td>
                                            <td>{{ $product->rule ? $dataPresenter->getProductRuleAttributeTypesString($product->rule) : '' }}</td>
                                            <td class="text-primary text-right font-weight-bold">0</td>
                                            <td class="text-right">
                                                <input type="hidden" class="id" name="gift" value="{{ $product->pipid }}">
                                                {{ $product->count }}</td>
                                            <td class="text-primary text-right font-weight-bold">0</td>
                                            <th>
                                                @if ($data->can_edit_product)
                                                    <button type="button" class="btn btn-danger deleteProduct" data-amount="">x</button>
                                                @endif
                                            </th>
                                        </tr>
                                    @endforeach
                                @endif
                                @if ($data->can_edit_product)
                                    <tr>
                                        <td colspan="7" class="text-right">
                                            <button type="button" class="btn btn-info remoteModal showProductModalBtn" data-link="{{ route('admin.order.products.modal', $data) }}"
                                                    data-ori-link="{{ route('admin.order.products.modal', $data) }}"
                                                    data-size="full">編輯商品</button>
                                            <button type="button" class="btn btn-info remoteModal showAdditionalModalBtn" data-link="{{ route('admin.order.additional.modal', $data) }}"
                                                    data-ori-link="{{ route('admin.order.additional.modal', $data) }}">編輯加購商品</button>
                                            <button type="button" class="btn btn-info remoteModal showGiftModalBtn" data-link="{{ route('admin.order.gift.modal', $data) }}"
                                                    data-ori-link="{{ route('admin.order.gift.modal', $data) }}">編輯加贈商品</button>
                                        </td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>

                        <!-- invoice subtotal -->
                        <div class="card-body pt-0 mx-25">
                            <hr>
                            <div class="row">
                                <div class="col-4 col-sm-6 col-12 mt-75">
                                </div>
                                <div class="col-8 col-sm-6 col-12 d-flex justify-content-end mt-75">
                                    <div class="invoice-subtotal">
                                        <div class="invoice-calc d-flex justify-content-between">
                                            <span class="invoice-title">小計金額</span>
                                            <span id="totalAmount" class="invoice-value" data-amount="{{ $data->total_amount }}">
                                                ${{ to_amount($data->total_amount) }}
                                            </span>
                                        </div>
                                        <div class="invoice-calc d-flex justify-content-between">
                                            <span class="invoice-title">活動折扣</span>
                                            <span id="eventDiscount" class="invoice-value" data-amount="{{ $data->event_discount }}">
                                                $-{{ to_amount($data->event_discount) }}
                                            </span>
                                        </div>
                                        <div class="invoice-calc d-flex justify-content-between">
                                            <span class="invoice-title">優惠卷折扣</span>
                                            <span id="couponDiscount" class="invoice-value" data-amount="0">
                                                $-{{ to_amount(0) }}
                                            </span>
                                        </div>
                                        <div class="invoice-calc d-flex justify-content-between">
                                            <span class="invoice-title">紅利抵扣</span>
                                            <span id="bonusDiscount" class="invoice-value" data-amount="{{ $data->bonus }}">
                                                $-{{ to_amount($data->bonus) }}
                                            </span>
                                        </div>
                                        <div class="invoice-calc d-flex justify-content-between">
                                            <span class="invoice-title">運費</span>
                                            <span id="shippingFee" class="invoice-value" data-amount="{{ $data->shipping_fee }}">
                                                ${{ to_amount($data->shipping_fee) }}
                                            </span>
                                        </div>
                                        <div class="invoice-calc d-flex justify-content-between">
                                            <span class="invoice-title">總計金額</span>
                                            <span id="finalAmount" class="invoice-value" data-amount="{{ $data->final_amount }}">
                                                ${{ to_amount($data->final_amount) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- invoice action  -->
                <div class="col-xl-3 col-md-4 col-12">
                    <div class="card invoice-action-wrapper shadow-none border">
                        <div class="card-body">
                            @if ($data->status != \App\Enum\Order\OrderStatusEnum::CANCEL && $data->status != \App\Enum\Order\OrderStatusEnum::RETURN)

                                @if ($data->pay_status == \App\Enum\Order\OrderPayStatusEnum::NEEDCHECK)
                                    <div class="invoice-action-btn">
                                        <button type="button" class="btn btn-success btn-block invoice-send-btn remoteBtn"
                                                data-link="{{ route('admin.order.action', ['order' => $data, 'type' => 'pay']) }}">
                                            <span>確認已付款</span>
                                        </button>
                                    </div>
                                @endif
                                @if ($data->pay_status == \App\Enum\Order\OrderPayStatusEnum::SUCCESS)
                                    <div class="invoice-action-btn">
                                        <a class="btn btn-light-primary btn-block invoice-print reload" href="{{ route('admin.order.print.picking', $data ) }}" target="_blank">
                                            <span>列印揀貨單</span>
                                        </a>
                                    </div>
                                @endif
                                @if (in_array($data->shipping_status, [
                                    \App\Enum\Order\ShippingStatusEnum::PICKING,
                                    \App\Enum\Order\ShippingStatusEnum::PICKING_DONE,
                                    \App\Enum\Order\ShippingStatusEnum::SHIPPED,
                                    \App\Enum\Order\ShippingStatusEnum::PICK_UP,
                                ]))
                                    <div class="invoice-action-btn">
                                        <a class="btn btn-light-primary btn-block reload" href="{{ route('admin.order.delivery.picking', $data) }}" target="_blank">
                                            <span>列印出貨單</span>
                                        </a>
                                    </div>
                                @endif
                                @if ($data->shipping_status == \App\Enum\Order\ShippingStatusEnum::PICKING_DONE)
                                        <div class="invoice-action-btn">
                                            <button type="button" class="btn btn-success btn-block invoice-send-btn remoteBtn"
                                                    data-link="{{ route('admin.order.action', ['order' => $data, 'type' => 'shipping']) }}">
                                                <span>確認出貨</span>
                                            </button>
                                        </div>
                                @endif
                            @endif
                            @if ($data->can_cancel_order)
                                <div class="invoice-action-btn">
                                    <button type="button" class="btn btn-danger btn-block invoice-send-btn remoteBtn"
                                            data-link="{{ route('admin.order.action', ['order' => $data, 'type' => 'cancel']) }}">
                                        <span>取消訂單</span>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @checkPerm(ORDER_EDIT)
                <div class="buy-now">
                    <button class="btn btn-primary mt-1" type="submit">{{ $data ? '更新訂單' : '新增訂單' }}</button>
                </div>
            @endcheckPerm
        </section>
    </form>
    <table id="templateTable" class="hidden ">
        <tr class="additionalTr">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="text-right">
                <input type="hidden" class="id" name="additional[0][id]" value="">
                <input type="number" class="form-control productCount" name="additional[0][count]">
            </td>
            <td class="text-primary text-right font-weight-bold productTotal"></td>
            <th>
                <button type="button" class="btn btn-danger deleteProduct" data-amount="">x</button>
            </th>
        </tr>
        <tr class="giftTr">
            <td></td>
            <td></td>
            <td></td>
            <td>0</td>
            <td class="text-right">
                <input type="hidden" class="id" name="gift" value="">
                1
            </td>
            <td class="text-primary text-right font-weight-bold productTotal">0</td>
            <th>
                <button type="button" class="btn btn-danger deleteProduct" data-amount="">x</button>
            </th>
        </tr>
    </table>
@endsection
@push('css')
<link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-invoice.min.css') }}">
@endpush
@push('js')
    <script src="{{ asset('js/city.js') }}"></script>
    <script>
        selected = [];
        additional_selected = [];
        additional_setting = @json($intervalAdditional);
        gift_setting = @json($intervalGift);
        caculate_total = function(returnTotalWithNoFee) {
            let sub_total = 0;
            $('#productList .productsTr,#productList .additionalTr').each(function () {
                let count = parseInt($(this).find('.productCount').val());
                let amount = parseInt($(this).find('.productCount').data('amount'));
                sub_total += (count * amount);
            });
            let event_discount = parseInt($('#eventDiscount').data('amount'));
            let coupon_discount = parseInt($('#couponDiscount').data('amount'));
            let bonus = parseInt($('#bonusDiscount').data('amount'));
            let fee = parseInt($('#shippingFee').data('amount'));
            let final = sub_total - event_discount - coupon_discount - bonus + fee;
            if (returnTotalWithNoFee) {
                return final - fee;
            }
            $('#totalAmount').data('amount', sub_total).text('$' + sub_total.format(0));
            $('#finalAmount').data('amount', final).text('$' + final.format(0));
        };
        show_product_modal_btn_url_reset = function() {
            $('.showProductModalBtn').attr('data-link', $('.showProductModalBtn').data('oriLink')
                + '?selected=' + selected.join(',')
            );
            show_additional_modal_btn_url_reset();
        };
        show_additional_modal_btn_url_reset = function() {
            let sub_total = 0;
            let event_discount = parseInt($('#eventDiscount').data('amount'));
            let coupon_discount = parseInt($('#couponDiscount').data('amount'));
            let bonus = parseInt($('#bonusDiscount').data('amount'));
            $('.productsTr').each(function () {
                let count = parseInt($(this).find('.productCount').val());
                let amount = parseInt($(this).find('.productCount').data('amount'));
                sub_total += (count * amount);
            });
            let total_without_additional = sub_total - event_discount - coupon_discount - bonus;

            $('.showAdditionalModalBtn').attr('data-link', $('.showAdditionalModalBtn').data('oriLink')
                + '?selected=' + additional_selected.join(',')
                + '&amount=' + total_without_additional
            );
            $('.showGiftModalBtn').attr('data-link', $('.showGiftModalBtn').data('oriLink')
                + '?amount=' + total_without_additional
            );
        };
        $(function () {
            $(document).on('change', '.productCount', function () {
                let amount =$(this).data('amount');
                let count = $(this).val();
                $(this).parents('tr').find('.productTotal').text(amount * count);
                show_additional_modal_btn_url_reset();
                caculate_total();

            });
            $(document).on('click', '.deleteProduct', function () {
                let $tr = $(this).parents('tr:eq(0)');
                let tr_class = $tr.attr('class');
                if (tr_class == 'productsTr' && $('.productsTr').length <= 1) {
                    alert('訂單必需至少有一件商品!');
                    return ;
                }
                let count = parseInt($tr.find('.productCount').val());
                let amount = parseInt($tr.find('.productCount').data('amount'));
                let real_amount = count * amount;
                if (tr_class == 'productsTr') {
                    let total = caculate_total(true);
                    let additional_valid = additional_setting.id && (total - real_amount) < additional_setting.interval_price;
                    let gift_valid = gift_setting.id && (total - real_amount) < gift_setting.interval_price;
                    if (
                        additional_valid || gift_valid
                    ) {
                        if (!confirm('刪除此商品會導致未達滿額加贈條件，是否確定刪除?')) {
                            return;
                        }
                        if (additional_valid) {
                            additional_selected = [];
                            additional_setting = {};
                            $('#productList .additionalTr').remove();
                        }
                        if (gift_valid) {
                            gift_setting = {};
                            $('#productList .giftTr').remove();
                        }
                    }
                }

                $tr.remove();
                caculate_total();
                switch (tr_class) {
                    case 'productsTr':

                        let pid = $tr.find('.pid').val();
                        let prid = $tr.find('.prid').val();
                        selected.remove(pid + '-' + prid);
                        show_product_modal_btn_url_reset();
                        show_additional_modal_btn_url_reset();
                        break;
                    case 'additionalTr':
                        let id = $tr.find('.id').val();
                        additional_selected.remove(parseInt(id));
                        show_additional_modal_btn_url_reset();
                        break;
                }
            });

            //初始化-------------------------
            $('.productsTr').each(function () {
                let pid = $(this).find('.pid').val();
                let prid = $(this).find('.prid').val();
                selected.push(pid + '-' + (prid > 0 ? prid : ''));
            });
            $('.additionalTr').each(function () {
                let id = $(this).find('.id').val();
                additional_selected.push(parseInt(id));
            });
            show_product_modal_btn_url_reset();
            show_additional_modal_btn_url_reset();

            $('select[name=shipping_county]').cityInit({
                target: $('select[name=shipping_district]'),
                county: '{{ $data->logistic->shipping_county }}',
                district: '{{ $data->logistic->shipping_district }}',
            });
            $('a.reload').click(() => {
                setTimeout(function () {
                    window.location.reload();
                }, 2000);
            });
        });
    </script>
@endpush