@extends('layouts.layout-mypage')

@section("class", "first")
@section('mypage-content')
    <div class="input-wrap">
        <div class="inputArea">
            <strong class="customLine">결제/배송</strong>

            <p class="infoTxt">*결제내역은 최대 5년까지 조회하실 수 있습니다.</p>

            <div class="input">
                @if( count($payments) == 0)
                    <!-- 글이 없을 경우 -->
                    <div id="noData">
                        <div class="flex"><p>결제/배송내역이 없습니다.</p></div>
                    </div>
                @else
                    @foreach ($payments as $item)
                        @php
                            $actualPrice = $item->getActualPrice();
                        @endphp
                        <ul class="user-paymentList">
                            <li class="orderNumber">
                                <p class="title">주문번호</p>
                                <div class="textWrap">
                                    <p>{{ $item->payment_no }}</p>
                                    <a href="{{ route("mypage.payment.orderview", $item->id) }}" class="detail">주문 상세</a>
                                </div>
                            </li>
                            <li class="service">
                                <p class="title">서비스</p>
                                <div class="textWrap">
                                    @if ( $item->service != null )
                                        <p><x-service-name service="{{ $item->service }}"/></p>
                                    @endif
                                </div>
                            </li>
                            <li class="orderDetails">
                                <p class="title">주문내역</p>
                                <div class="textWrap">

                                    <p @class(["orderDetail-btn" => $item->enrollsCnt > 1])>{{ $item->productName }}</p>
                                    @if ($item->enrollsCnt > 1)
                                    <div class="toggle" style="display: none;">
                                        @foreach ($item->enrolls as $enroll)
                                            <p>{{ $enroll->fullProductName }}</p>
                                        @endforeach
                                    </div>
                                    @endif
                                </div>
                            </li>
                            <li class="state">
                                <p class="title">상태</p>
                                <div class="textWrap">
                                    @if ( $status != 'CANCELED' && $item->total_price != $actualPrice)
                                        부분취소
                                    @else
                                        {{ $status[$item->status] }}
                                    @endif
                                </div>
                            </li>
                            <li class="price">
                                <p class="title">결제액</p>
                                <div class="textWrap">{{ number_format($actualPrice) }}원</div>
                            </li>
                            <li class="date">
                                <p class="title">결제일</p>
                                <div class="textWrap">{{ date("y.m.d", strtotime($item->paid_at)) }}</div>
                            </li>
                            <li class="shipping">
                                <p class="title">교재배송</p>
                                <div class="textWrap">

                                    @php
                                        $delivery = $item->getDelivery();
                                    @endphp
                                    @if ( $delivery )
                                        @if ( $delivery->company != null && $delivery->reference_id != null )
                                            @php
                                                $url = $delivery->company == 'DOM' ? 'https://trace.cjlogistics.com/web/detail.jsp?slipno=' . $delivery->reference_id : "";
                                            @endphp
                                            <a href="{{ $url }}" target="_blank" class="detail">배송조회</a>
                                        @else
                                        <a href="javascript:void(0)" class="detail">배송전</a>
                                        @endif
                                    @else
                                    -
                                    @endif
                                </div>
                            </li>
                            <li class="receipt">
                                <p class="title">영수증</p>
                                <div class="textWrap">
                                    <button type="button" class="detail popupOn" onclick="getPaymentReceipt({{ $item->id }})">영수증</button>
                                </div>
                            </li>
                        </ul>
                    @endforeach
                @endif

            </div>
            <div class="input message">
                <div class="messageBox">
                    <div class="message-title"><figure></figure><em>환불신청 방법 및 규정</em></div>
                    <ul class="dotList">
                        <li>
                            <p>인강 환불/ 결제취소는 1:1 게시판에서 신청해 주시길 바랍니다.</p>
                            <a href="{{ route("qna.index", ['service' => 'ielts']) }}">인강 환불 가이드 바로가기</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="popupArea" id="receipt-popup">
    </div>
    <!-- 영수증 팝업 -->

@endsection
@section("mypage-script")
    <script>
        $(function(){
            $('.orderDetail-btn').each(function(index,item){
                $(this).on('click',function(){
                    $(this).closest('.user-paymentList').toggleClass('line');
                    $(this).toggleClass('active').next('.toggle').stop().slideToggle(300);
                });
            });
        });
    </script>
@endsection