@extends('layout.user')
@section('page-title', __('robot.OrderList'))
@section('nav-title', __('robot.OrderList'))
@section('page-js-script')
    <script>
        $(function() {
            $('.order_type').click(function() {
                var type = $(this).data('key');
                window.location.href = '{{ route('orderlist') }}' + '?type=' + type;
            })
            $('.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: $(this).attr('data-sid'),
                    },
                    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
                });


            });
            //scroll to active tab
            let activeTab = $('.div_nav .nav-tabs .active');
            if (activeTab.length) {
                let scrollPos = activeTab.offset().left - $('.nav-tabs').offset().left;
                $('.div_nav').animate({
                    scrollLeft: scrollPos
                }, 500);
            }
        });
    </script>
@endsection
@section('container')

    <div class="div_nav card d-md-none d-block px-0 pb-1">
        <ul class="nav nav-tabs d-block border-0">
            @foreach ($order_type_list as $os)
                <li class="nav-item">
                    <button class="nav-link w-100 order_type {{ $order_type == $os['id'] ? 'active' : '' }}" data-key="{{ $os['id'] }}" type="button">
                        {{ $os['name'] }}
                    </button>
                </li>
            @endforeach
        </ul>
    </div>

    <ul class="nav nav-tabs card d-md-flex d-none justify-content-between flex-row px-0 pb-0">
        @foreach ($order_type_list as $os)
            <li class="nav-item flex-fill" style="display: inline-block;">
                <button class="nav-link w-100 order_type {{ $order_type == $os['id'] ? 'active' : '' }}" data-key="{{ $os['id'] }}" type="button">
                    {{ $os['name'] }}
                </button>
            </li>
        @endforeach
    </ul>

    <div class="tab-content mb-10" id="pills-tabContent">
        @foreach ($order_list as $ol)
            <a href="{{ route('order', ['id' => $ol['id']]) }}">


                <div class="card">
                    {{-- Order History Card Title --}}
                    <div class="d-flex justify-content-between ps-4 py-2">
                        <div class="text-base-b">
                            <div>
                                <span>{{ __('basic.OrderNo') }}: </span>
                                <span>{{ $ol['sale_code'] }}</span>
                            </div>
                        </div>
                        <div class="flex-shrink-0">
                            {{-- <span class="text-primary me-2">{{ $ol['state_desc'] }}</span> --}}
                            <span class="badge text-primary border-primary fs-7 border">{{ $ol['state'] }}</span>

                            @if (in_array($ol['sale_status_id'], $status_permission['finish']))
                                <button class="btn_sale_finish btn btn-primary btn-sm btn-md-md" data-sid="{{ $ol['id'] }}" type="button">{{ __('robot.Finish') }}</button>
                            @endif
                        </div>
                    </div>
                    {{-- Order History Card --}}
                    @php
                        $count = count($ol['detail']);
                        $detail = $ol['detail'][0];
                    @endphp


                    <div class="d-flex flex-column border-bottom">
                        <div class="d-flex align-items-start flex-row gap-3 pt-4">
                            <img class="col-3 col-md-2" src="{{ $detail['stock_thumbnail'] ?? asset('image/product_07.png') }}" alt="">
                            <div class="flex-grow-1">
                                <p class="text-base-m">{{ $detail['stock_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 class="text-sm-r">${{ $detail['subtotal'] }}</div>
                                </div>

                            </div>
                        </div>
                        <div class="d-flex pb-4">
                            @if ($detail['rating'] != null)
                                <span class="me-1">{{ __('robot.YourRating') }}:</span>
                                <x-star-rating :rating="$detail['rating']" showsold="0"></x-star-rating>
                            @endif
                        </div>
                    </div>

                    <a class="d-flex justify-content-end border-bottom py-1" href="{{ route('order', ['id' => $ol['id']]) }}">
                        {{ __('robot.ViewAllItemsInTheOrder') }}&nbsp; →
                    </a>
                    <div class="d-flex align-items-center gap-1 py-2">
                        @if ($ol['sale_status_id'] == 'unpaid')
                            @if ($ol['payment_id'] == 'cvs' && !$ol['is_payment'])
                                <div class="">
                                    <span class="text-base-r">{{ __('basic.ExpiryTime') }}: </span>
                                    <span class="">{{ $ol['pay_url_expiry_time'] ?? '--' }}</span>
                                </div>
                            @endif
                        @endif

                        <div class="ms-auto">
                            <span class="text-base-r">{{ trans_choice('robot.TotalItemCount', $count) }} / {{ __('basic.Total') }}: </span>
                            <span class="text-danger h6">${{ number_format($ol['total_amount']) }}</span>
                        </div>
                    </div>
                    {{-- 按鈕區 --}}
                    @if ($ol['sale_type_id'] != 'free_virtual' && $ol['sale_type_id'] != 'free_mobile')
                        <div class="d-flex justify-content-end align-items-center gap-1 py-2">
                            {{-- <a class="btn btn-primary" href="{{ route('order', ['id' => $ol['id']]) }}">{{ __('robot.OrderDetails') }}</a> --}}
                            @if (in_array($ol['sale_status_id'], $status_permission['cancel']))
                                <button class="btn_sale_cancel btn btn-outline-primary" data-sid="{{ $ol['id'] }}" type="button">{{ __('robot.CancelOrder') }}</button>
                            @endif
                            @if (in_array($ol['sale_status_id'], $status_permission['comment']) && $detail['rating'] == null)
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalComment_{{ $ol['id'] }}" type="button">{{ __('basic.Rating') }}</button>
                            @endif

                            @if (in_array($ol['sale_status_id'], $status_permission['buy_again']))
                                <button class="btn_sale_buy_again btn btn-primary" data-sid="{{ $ol['id'] }}" type="button">{{ __('robot.BuyAgain') }}</button>
                            @endif
                            {{-- 
                        @if ($ol['payment_id'] == 'credit_card' && !$ol['is_payment'])
                            <button class="btn_pay_again btn btn-primary" data-sid="{{ $ol['id'] }}" type="button">{{ __('robot.PayNow') }}</button>
                        @endif --}}
                            @if ($ol['sale_status_id'] == 'unpaid')
                                @if ($ol['payment_id'] == 'bank_transfer' && !$ol['is_payment'])
                                    <button class="btn btn-primary" 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>{{ $ol['pay_bank_code'] ?? '--' }}</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-b">{{ __('basic.BankName') }}</span>
                                                        <span>{{ $ol['pay_bank_name'] ?? '--' }}</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-b">{{ __('basic.AccountNo') }}</span>
                                                        <span>{{ $ol['pay_bank_account_no'] ?? '--' }}</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-b">{{ __('basic.ExpiryTime') }}</span>
                                                        <span>{{ $ol['pay_bank_expiry_time'] ?? '--' }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($ol['payment_id'] == 'credit_card' && !$ol['is_payment'])
                                    <button class="btn_pay_again btn btn-primary" data-sid="{{ $ol['id'] }}" type="button">{{ __('robot.PayNow') }}</button>
                                @elseif ($ol['payment_id'] == 'cvs' && !$ol['is_payment'])
                                    <a class="btn btn-primary" href="{{ $ol['pay_url'] ?? '#' }}">{{ __('robot.PayNow') }}</a>
                                @endif
                            @endif
                        </div>
                    @endif
                </div>
            </a>
            @if (in_array($ol['sale_status_id'], $status_permission['comment']) && $detail['rating'] == null)
                <div class="modal fade" id="modalComment_{{ $ol['id'] }}" aria-labelledby="modalCommentLabel_{{ $ol['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_{{ $ol['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="{{ $ol['id'] }}">
                                    <input id="" name="member_id" type="hidden" value="{{ session('user_id') }}">
                                    <input id="" name="sale_id" type="hidden" value="{{ $ol['id'] }}">
                                    @foreach ($ol['detail'] as $kd => $detail)
                                        <div class="d-flex flex-column border-bottom">
                                            <div class="d-flex align-items-start flex-row gap-3 pt-4">
                                                <img class="col-3 col-md-2 w-25" src="{{ $detail['stock_thumbnail'] ?? asset('image/product_07.png') }}" alt="">
                                                <div class="flex-grow-1">
                                                    <p class="text-base-m">{{ $detail['stock_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>
                                                    @include('partial.modal._rating', ['id' => $detail['id']])
                                                </div>
                                            </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">
                                <button class="btn_save btn btn-primary" data-oid="{{ $ol['id'] }}" type="button">{{ __('basic.Save') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
    @include('partial._pagination', $paginate)

@endsection