@extends('layout.basic.main')
@push('css')
    <style>

        .modal-title-header {
            margin-top: 15px;
            padding: 5px 15px;
            /*border-bottom: 1px solid #e5e5e5;*/
            background-color: #2ab27b;
            color: #ffffff;
            font-weight: bold;
        }

        .sub h4 {
            margin: 0;
        }

        .hasbtn a:hover {
            cursor: pointer;
        }

        .listtop_l ul li.time_now {
            margin-top: 5px;
        }

        @media screen and (max-width: 1023px) {
            .listtop_r {
                width: 40%;
            }
        }

        @media screen and (min-width: 1024px) {
            .listtop_r {
                width: 36%;
            }
        }

        @media screen and (min-width: 1280px) {
            .listtop_r {
                width: 20%;
            }
        }

        label:after {
            content: '';
        }

        .input-sm {
            line-height: 1.5 !important;
        }

        #table_order_history th {
            background: rgba(8,191,90,1) !important;
        }

        #table_order_history td {
            background: unset;
        }

        #table_order_history td .btn {
            padding: 4px !important;
            width: 90px;
        }
        .button-cancel {
            background-color: #dd4b39;
            padding: 4px;
            width: 120px !important;
            color: white;
            border-radius: 2px;
        }

        .table th {
            vertical-align: middle !important;
        }

        #table_order_history_filter{
            float: right;
        }

        #status_refund {
            color: white;
            padding: 5px;
            width: 60px;
            margin: auto;
            background: rgba(172,172,172,1);
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="order-history">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">単品商品販売履歴</h2>
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222"></p>
            <div class="listfillter">
                <div class="listtop_l">
                </div>
                <div class="listtop_r" style="text-align: right !important;margin-bottom: 15px">
                    <a href="/basic/order-history/export-csv" class="btn btn-xs btn-success" style="margin-top: 4px;;padding: 10px;background: rgba(172,172,172,1);;color: white;border: unset">
                        CSV書出し
                    </a>
                </div>
            </div>
            <table class="table table-striped" id="table_order_history">
                <thead>
                <tr>
                    <th style="width: 14%">日時</th>
                    <th style="width: 5%">注文番号</th>
                    <th style="width: 8%">本番/テスト</th>
                    <th style="width: 15%">商品名</th>
                    <th style="width: 10%">販売価格</th>
{{--                    <th style="width: 10%">購入者</th>--}}
                    <th style="width: 10%">LINE名</th>
                    <th style="width: 10%">決済結果</th>
                    <th style="width: 6%">返金</th>
                    <th style="width: 6%">注文詳細</th>
                </tr>
                </thead>
                <tbody>
                @foreach($listOrder as $order)
                    <tr>
                        <td>{{$order->payment_date}}</td>
                        <td>{{$order->id}}</td>
                        <td>
                            @if($order->flag_environment == 0) テスト @endif
                            @if($order->flag_environment == 1) 本番 @endif
                        </td>
                        <td><a href="{{route('editItem',['id' => $order->item_id])}}" target="_blank">{{$order->name_item}}</a></td>
                        <td>{{number_format($order->amount_order)}} 円</td>
{{--                        <td>{{ $order->name_friend }}</td>--}}
                        <td><a href="{{route('friendlistMypage',['id' => $order->line_user_id])}}" target="_blank">{{$order->name}}</a></td>
                        <td>
                            @if($order->status_trial == 0)
                                @if(!empty($accountPayment))
                                    @if($order->flag_environment == 0)
                                        <a href="https://dashboard.stripe.com/{{$accountPayment}}/test/customers/{{$order->o_strip_customer_id}}" target="_blank">
                                            @endif
                                            @if($order->flag_environment == 1)
                                                <a href="https://dashboard.stripe.com/{{$accountPayment}}/customers/{{$order->o_strip_customer_id}}" target="_blank">
                                                    @endif
                                @if($order->status_order == 1) 成功 @endif
{{--                                @if($order->status_order == 2) キャンセル済 @endif--}}
                                @if($order->status_order == 2) 返金済み  @endif
                                                </a>
                                @endif
                            @endif
{{--                            @if($order->status_trial == 1) 試用支払い @endif--}}
                        </td>
                        <td>
                            @if($order->status_order == 2)<div id="status_refund"> 返金済 </div> @endif
                            @if($order->status_order != 2) -  @endif
                        </td>
                        <td>
                            <div class="btn"><a href="{{ route('editOrder',['id' => $order->id]) }}" style="background-color: rgba(87,153,219,1)">詳細</a></div>
                        </td>
                    </tr>
                @endforeach

                </tbody>
            </table>
            <div class="text-center">
            </div>
        </section>
    </article>
@endsection
@push('js')
    <script>
        $(document).ready(function () {
            $('#table_order_history').DataTable({
                responsive: true,
                language: {
                    url: '/css/plugins/datatables/dt_i18n/Japanese.lang',
                },
                columnDefs: [
                    {
                        "searchable": false,
                        "targets": [0 ,2 ,5 , 6, 7, 8]
                    },
                    {
                        "sortable": false, "targets": [5,8]
                    }
                ],
                // "lengthChange": false,
                // order:  [[ 0, "desc" ]],
                iDisplayLength: 10,
                aLengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "すべて"]],
            });
        });
    </script>
@endpush