@extends('layout.user')
@section('page-title', __('robot.OrderDetails'))
@section('nav-title', __('robot.OrderDetails'))
@section('page-js-script')
    <script>
        const sale_id = '{{ $sale['id'] }}';
        $(function() {
            $('#copy_sale_code').click(function() {
                copyToClipboard('sale_code');
            });
            //copy delivery code
            $('#copy_delivery_code').click(function() {
                console.log('copy_delivery_code');
                copyToClipboard('delivery_no');
            });

            $('.copy_virtual_password').click(function() {
                copyToClipboard($(this).data('sn'));
            });
            $('.copy_virtual_code').click(function() {
                copyToClipboard($(this).data('sn'));
            });

            $('.btn_save').click(function() {
                $('.loading').show();
                $(this).attr('disabled', 'disabled');
                let form = $('#' + $(this).attr('data-oid'))[0];
                let formData = new FormData(form);
                // console.log(formData);
                formData.append('sale_id', $(this).attr('data-oid'));

                $.ajax({
                    url: '{{ url('ajax/sale_add_rating') }}',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {
                            Swal.fire({
                                title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                                // text: ,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            }).then((function() {
                                location.reload();
                            }))
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });

            });
            $('.btn_sale_cancel').click(function(e) {
                // console.log($(this).attr('data-sid'));
                $('.loading').show();
                $.ajax({
                    url: '{{ url('ajax/sale_cancel') }}',
                    data: {
                        sale_id: $(this).attr('data-sid'),
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        if (resp.status) {
                            $('.loading').hide();
                            Swal.fire({
                                title: (resp.msg != '') ? resp.msg : '{{ __('robot.SuccessfullyCanceled') }}',
                                // text: ,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            }).then((function() {
                                location.reload();
                            }))
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });

            });
            $('.btn_sale_finish').click(function(e) {
                // console.log($(this).attr('data-sid'));
                $('.loading').show();
                $.ajax({
                    url: '{{ url('ajax/sale_update_status') }}',
                    data: {
                        sale_id: $(this).attr('data-sid'),
                        sale_status_id: 'finish',
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {
                            Swal.fire({
                                title: (resp.msg != '') ? resp.msg : '{{ __('robot.Completed') }}',
                                // text: ,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            }).then((function() {
                                location.reload();
                            }))
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });

            });
            $('.btn_sale_buy_again').click(function(e) {
                // console.log($(this).attr('data-sid'));
                $('.loading').show();
                $.ajax({
                    url: '{{ url('ajax/add_cart_from_sale') }}',
                    data: {
                        sale_id: $(this).attr('data-sid'),
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {
                            Swal.fire({
                                title: (resp.msg != '') ? resp.msg : '{{ __('robot.Completed') }}',
                                // text: ,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            }).then((function() {
                                location.reload();
                            }))
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });

            });
            $('.btn_pay_again').click(function(e) {
                // console.log($(this).attr('data-sid'));
                $('.loading').show();
                $.ajax({
                    url: '{{ url('ajax/sale_pay_again') }}',
                    data: {
                        sale_id: sale_id,
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        $('.loading').hide();
                        if (resp.status) {
                            if (!empty(resp.data)) {
                                window.location.href = resp.data.url;
                            }
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });


            });
        });

        function copyToClipboard(elementId) {
            var aux = document.createElement("input");
            // console.log(document.getElementById(elementId).innerHTML);
            aux.setAttribute("value", document.getElementById(elementId).innerHTML);
            document.body.appendChild(aux);
            aux.select();
            aux.focus();

            document.execCommand("copy");
            document.body.removeChild(aux);
        }
    </script>
@endsection
@section('container')
    <style>
        #modal_show_rating .icon-star-fill,
        #modal_show_rating .icon-star-half {
            font-size: 1.75rem !important;
        }
    </style>

    {{-- 訂單資訊 --}}
    <div class="card gap-3">
        <div class="d-flex justify-content-between">
            <span class="text-b">{{ __('robot.OrderStatus') }}</span>
            <span class="badge text-primary border-primary fs-7 border">{{ $sale['state'] }}</span>

        </div>
        <div class="d-flex justify-content-between text-black-50 text-sm-r">
            <span>{{ __('robot.OrderDate') }}</span>
            <span class="">{{ $sale['sale_date'] }}</span>
        </div>
        <div class="d-flex">
            <span>{{ __('robot.OrderNumber') }}</span>
            <span class="ms-auto" id="sale_code">{{ $sale['code'] }}</span>
            <span id="copy_sale_code" class="ms-1 text-primary" style="cursor: pointer;">{{ __('robot.Copy') }}</span>

        </div>
    </div>

    {{-- 運送資訊 --}}
    <div class="card">
        <span class="h6 text-b">{{ __('robot.WayOfTransportation') }}</span>
        <span class="text-black-50 text-sm-r">{{ $sale['detail_delivery']['name'] }}</span>
        @if (!empty($sale['detail_delivery']['code']) && !empty($sale['detail_delivery']['logistics_url']))
            <div class="d-flex text-black-50 text-sm-r">
                <span id="" class="me-auto">{{ __('robot.ShipmentNumber') }}：</span>
                <span id="delivery_no">{{ $sale['detail_delivery']['code'] }}</span>
                <span id="copy_delivery_code" class="ms-1 text-primary" style="cursor: pointer;">{{ __('robot.Copy') }}</span>
            </div>
            <div class="d-flex text-black-50 text-sm-r">
                <span class="me-auto">{{ __('robot.LogisticsTracking') }}：</span>
                <a href="{{ $sale['detail_delivery']['logistics_url'] }}" class="text-primary" target="_blank">{{ __('robot.Link') }}</a>
            </div>
        @endif
    </div>

    {{-- 收件資訊 --}}
    <div class="card">
        <span class="h6 text-b">{{ __('robot.RecipientAddress') }}</span>

        <div class="d-flex flex-column text-black-50 text-sm-r">
            <span>{{ $sale['detail_delivery']['receiver_name'] }}</span>
            <span>{{ $sale['detail_delivery']['receiver_phone'] }}</span>
            <span>{{ $sale['detail_delivery']['receiver_address'] }}</span>
            <span>{{ $sale['detail_delivery']['store_name'] }}</span>

        </div>
    </div>

    <div class="card">
        <span class="h6 text-b">{{ __('robot.ProductDetails') }}</span>
        {{-- Order History Card Title --}}
        @foreach ($sale['detail'] as $v)
            {{-- Order History Card --}}
            <div class="d-flex align-items-start border-bottom flex-row gap-3 py-4">
                <img class="col-3 col-md-2" src="{{ $v['thumbnail'] }}" alt="">
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between">
                        <p class="text-base-m">{{ $v['stock']['lang_name'][0]['name'] }}</p>
                        @if ($v['stock']['point_stock'] == 1 && !empty($v['point_card_sn']))
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modal_show_detail_{{ $v['id'] }}" type="button">{{ __('robot.Check') }}</button>
                            <div class="modal fade" tabindex="-1" id="modal_show_detail_{{ $v['id'] }}">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel_{{ $sale['id'] }}">{{ __('robot.ProductDetails') }}</h1>
                                            <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">

                                            <div class="d-flex flex-column border-bottom pb-3">
                                                <div class="d-flex align-items-start border-bottom flex-row gap-3 py-3">
                                                    <img class="col-3 col-md-2 w-25" src="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" alt="">
                                                    <div class="flex-grow-1">
                                                        <p class="text-base-m">{{ $v['stock']['lang_name'][0]['name'] }}</p>
                                                        <p class="text-base-m">x{{ $v['qty'] }}</p>
                                                        @if (!empty($v['spec']))
                                                            <div class="text-sm-r text-secondary">{{ __('basic.Specification') }}：{{ $v['spec'] }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                                @foreach ($v['point_card_sn'] as $sn)
                                                    <div class="d-flex flex-column justify-content-center p-3">
                                                        <span class="text-black-50">{{ __('robot.CommoditySerialNumber') }}</span>
                                                        <div class="d-flex justify-content-between">
                                                            <span class="virtual_code" id="code_{{ $sn['id'] }}">{{ $sn['serial_number'] }}</span>
                                                            <span class="copy_virtual_code btn btn-outline-primary btn-sm" data-sn="code_{{ $sn['id'] }}">{{ __('robot.Copy') }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex flex-column justify-content-center p-3">
                                                        <span class="text-black-50">{{ __('robot.PasswordToEnable') }}</span>
                                                        <div class="d-flex justify-content-between">
                                                            <span class="virtual_password" id="password_{{ $sn['id'] }}">{{ $sn['password'] }}</span>
                                                            <span class="copy_virtual_password btn btn-outline-primary btn-sm" data-sn="password_{{ $sn['id'] }}">{{ __('robot.Copy') }}</span>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                @endforeach
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif


                    </div>

                    @if (!empty($v['stock_spec_id']))
                        <div class="text-sm-r text-secondary"> {{ __('basic.Specification') }}：{{ $v['stock_spec_id'] }}</div>
                    @endif
                    <div class="d-flex justify-content-between">
                        <div class="text-sm-r">x{{ $v['qty'] }}</div>
                        <div class="text-sm-r">${{ number_format($v['price']) }}</div>
                    </div>
                </div>
            </div>
        @endforeach
        <div class="d-flex flex-column gap-1 pt-2">
            <div class="d-flex justify-content-between text-black-50 text-sm-r">
                <span>{{ __('basic.Subtotal') }}</span>
                <span class="">${{ number_format($sale['total_non_tax_amount'] + $sale['total_tax']) }}</span>
            </div>
            <div class="d-flex justify-content-between text-black-50 text-sm-r">
                <span>{{ __('basic.ShippingFee') }}</span>
                <span class="">${{ number_format($sale['delivery_amount']) }}</span>
            </div>
            <div class="d-flex justify-content-between text-black-50 text-sm-r">
                <span>{{ __('basic.DiscountUsedCLCCoin') }}</span>
                <span class="">-${{ number_format($sale['discount_amount']) }}</span>
            </div>
            <div class="d-flex justify-content-between text-sm-r text-b">
                <span>{{ __('basic.Total') }}</span>
                <span class="">${{ number_format($sale['total_tax_amount']) }}</span>
            </div>
            @if ($sale['payment']['invoice_id'])
                <div class="d-flex justify-content-between text-sm-r text-b pt-2">
                    <span>{{ __('basic.InvoiceNo') }}</span>
                    <span class="">{{ $sale['payment']['invoice_id'] }}</span>
                </div>
            @endif
        </div>


    </div>
    {{-- 付款資訊 --}}
    <div class="card">
        <div class="d-flex justify-content-between">
            <span class="text-b">{{ __('basic.Payment') }}</span>
            <span class="">{{ $sale['payment']['name'] }}</span>
        </div>
        {{-- @if ($sale['payment']['payment_id'] == 'bank_transfer' && !$sale['is_payment'])
            <hr>
            <div class="d-flex justify-content-between">
                <span class="text-b">{{ __('basic.BankCode') }}</span>
                <span>{{ $sale['payment']['pay_bank_code'] ?? '--' }}</span>
            </div>
            <div class="d-flex justify-content-between">
                <span class="text-b">{{ __('basic.BankName') }}</span>
                <span>{{ $sale['payment']['pay_bank_name'] ?? '--' }}</span>
            </div>
            <div class="d-flex justify-content-between">
                <span class="text-b">{{ __('basic.AccountNo') }}</span>
                <span>{{ $sale['payment']['pay_bank_account_no'] ?? '--' }}</span>
            </div>
        @endif --}}
    </div>
    <div class="card">
        <div class="d-flex justify-content-between">
            <span>{{ __('basic.EarnCLCCoin') }}</span>
            <span class="text-danger">{{ number_format($sale['total_coin']) }}&nbsp;{{ __('basic.Coin') }}</span>
        </div>
    </div>
    @if ($sale['sale_type_id'] != 'free_virtual' && $sale['sale_type_id'] != 'free_mobile')
        <div class="row py-2">

            <div class="col-md-6 col-12 mb-2">
                @if ($sale['sale_status_id'] == 'unpaid')
                    @if ($sale['payment']['payment_id'] == 'bank_transfer' && !$sale['is_payment'])
                        <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#modalPaynow" type="button">{{ __('robot.PayNow') }}</button>
                        <div class="modal fade" tabindex="-1" id="modalPaynow">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="d-flex justify-content-between">
                                            <span class="text-b">{{ __('basic.BankCode') }}</span>
                                            <span>{{ $sale['payment']['pay_bank_code'] ?? '--' }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span class="text-b">{{ __('basic.BankName') }}</span>
                                            <span>{{ $sale['payment']['pay_bank_name'] ?? '--' }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span class="text-b">{{ __('basic.AccountNo') }}</span>
                                            <span>{{ $sale['payment']['pay_bank_account_no'] ?? '--' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @elseif ($sale['payment']['payment_id'] == 'credit_card' && !$sale['is_payment'])
                        <button class="btn_pay_again btn btn-primary w-100" type="button">{{ __('robot.PayNow') }}</button>
                    @elseif ($sale['payment']['payment_id'] == 'cvs' && !$sale['is_payment'])
                        <a class="btn btn-primary w-100" href="{{ $sale['payment']['pay_url'] }}">{{ __('robot.PayNow') }}</a>
                    @endif
                @endif
                @if (in_array($sale['sale_status_id'], $status_permission['finish']))
                    <button class="btn_sale_finish btn btn-primary w-100" data-sid="{{ $sale['id'] }}" type="button">{{ __('robot.Finish') }}</button>
                @endif
                @if (in_array($sale['sale_status_id'], $status_permission['comment']) && $sale['can_rating'])
                    <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#modalComment_{{ $sale['id'] }}" type="button">{{ __('basic.Rating') }}</button>
                @endif
                @if (in_array($sale['sale_status_id'], $status_permission['comment']) && !$sale['can_rating'])
                    <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#modal_show_rating" type="button">{{ __('robot.ViewRating') }}</button>
                @endif
            </div>
            <div class="col-md-6 col-12">
                @if (in_array($sale['sale_status_id'], $status_permission['cancel']))
                    <button class="btn_sale_cancel btn btn-outline-secondary w-100" data-sid="{{ $sale['id'] }}" type="button">{{ __('robot.CancelOrder') }}</button>
                @endif
                @if (in_array($sale['sale_status_id'], $status_permission['buy_again']))
                    <button class="btn_sale_buy_again btn btn-primary w-100" data-sid="{{ $sale['id'] }}" type="button">{{ __('robot.BuyAgain') }}</button>
                @endif
            </div>
        </div>
    @endif
    {{-- 新增評價 --}}
    @if (in_array($sale['sale_status_id'], $status_permission['comment']) && $sale['can_rating'])
        <div class="modal fade" id="modalComment_{{ $sale['id'] }}" aria-labelledby="modalCommentLabel_{{ $sale['id'] }}" aria-hidden="true" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel_{{ $sale['id'] }}">{{ __('robot.YourRating') }}</h1>
                        <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="{{ $sale['id'] }}">
                            <input id="" name="member_id" type="hidden" value="{{ session('user_id') }}">
                            <input id="" name="sale_id" type="hidden" value="{{ $sale['id'] }}">
                            @foreach ($sale['detail'] as $kd => $detail)
                                <div class="d-flex flex-column">
                                    <div class="d-flex align-items-start flex-row gap-3 pt-4">
                                        <img class="col-3 col-md-2 w-25" src="{{ $detail['thumbnail'] ?? asset('image/product_07.png') }}" alt="">
                                        <div class="flex-grow-1">
                                            <a href="" class="text-base-m">{{ $detail['stock']['lang_name'][0]['name'] }}</a>
                                            @if (!empty($detail['spec']))
                                                <div class="text-sm-r text-secondary">{{ __('basic.Specification') }}：{{ $detail['spec'] }}</div>
                                            @endif
                                            <div class="d-flex justify-content-between">
                                                <div class="text-sm-r">x{{ $detail['qty'] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center border-top border-bottom mb-2 py-1 px-3">
                                        <span class="text-b me-auto">{{ __('robot.YourRating') }}:</span>

                                        @include('partial.modal._rating', ['id' => $detail['id']])
                                    </div>
                                </div>
                                <input id="" name="sale_detail_id[]" type="hidden" value="{{ $detail['id'] }}">
                                <input id="stock_id_{{ $detail['id'] }}" name="stock_id[{{ $detail['id'] }}]" type="hidden" value="{{ $detail['stock_id'] }}">
                            @endforeach
                        </form>
                    </div>
                    <div class="modal-footer border-0">
                        <button class="btn_save btn btn-primary" data-oid="{{ $sale['id'] }}" type="button">{{ __('basic.Save') }}</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
    {{-- 查看評價 --}}
    @if (in_array($sale['sale_status_id'], $status_permission['comment']) && !$sale['can_rating'])

        <div class="modal fade" tabindex="-1" id="modal_show_rating">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel_{{ $sale['id'] }}">{{ __('robot.YourRating') }}</h1>
                        <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @foreach ($sale['detail'] as $kd => $detail)
                            <div class="d-flex flex-column border-bottom pb-3">
                                <div class="d-flex align-items-start flex-row gap-3 pt-4">
                                    <img class="col-3 col-md-2 w-25" src="{{ $detail['thumbnail'] ?? asset('image/product_07.png') }}" alt="">
                                    <div class="flex-grow-1">
                                        <p class="text-base-m">{{ $detail['stock']['lang_name'][0]['name'] }}</p>
                                        @if (!empty($detail['spec']))
                                            <div class="text-sm-r text-secondary">{{ __('basic.Specification') }}：{{ $detail['spec'] }}</div>
                                        @endif
                                        <div class="d-flex justify-content-between">
                                            <div class="text-sm-r">x{{ $detail['qty'] }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center p-3">
                                <span class="text-b me-auto">{{ __('robot.YourRating') }}:</span>

                                <x-star-rating :rating="$detail['rating']['rating']" showsold="0"></x-star-rating>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif


    <div class="py-9"></div>
@endsection