@extends("common.layout")


@section("header")

{!! resource('js/components/multiSelect.js') !!}
{!! resource('css/components/multiSelect.css') !!}

{!! resource('js/payment/payment-common.js') !!}

@endsection


@section("content")

<div class="split">
    <h1><a href="{{ route('payment.list', $service) }}">{{ $service == "ielts" ? "인강" : "어학원" }} 결제목록</a></h1>
</div>

<section>
    <main>
        <form action="{{ route('payment.list', $service) }}" class="search-form" id="payment-form" method="GET">
            <input type="hidden" name="paginate" value="{{ Request::get('paginate') }}" />
            <input type="hidden" name="service" value="{{ $service }}" />
            @csrf

            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="start_at">조회기간</label>
                    <select class="form-select" name="due" id="due">
                        <option value="all" @selected(empty(Request::get("due")) || Request::get("due") == "all")>전체</option>
                        <option value="1" @selected(Request::get("due") == "1")>1개월</option>
                        <option value="2" @selected(Request::get("due") == "2")>2개월</option>
                        <option value="3" @selected(Request::get("due") == "3")>3개월</option>
                        <option value="monthly" @selected( Request::get("due") == "monthly")>월별조회</option>
                    </select>

                    <input class="form-control" type="date" name="start_at" id='start_at' value="{{ Request::get("start_at") }}">
                    <input class="form-control" type="date" name="end_at" id='end_at' value="{{ Request::get("end_at") }}">

                    <select class="form-select d-none" id="monthly" name="monthly">
                        @for ( $i = 1 ; $i <= date('m') ; $i ++)
                            <option value="{{ $i }}" @selected((empty(Request::get("monthly")) && date('m') == $i) || Request::get("monthly") == $i )>{{ date('Y') }}-{{ str_pad($i, 2, "0", STR_PAD_LEFT) }}</option>
                        @endfor
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="method">결제수단</label>
                    <select class="form-select" name="method" id="method">
                        <option value="all" @selected(empty(Request::get("method")))>전체</option>
                        @foreach ($method as $key => $val)
                            <option value="{{ $key }}" @selected(Request::get("method") == $key)>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="method">결제경로</label>
                    <select class="form-select" name="location" id="location">
                        <option value="all" @selected(empty(Request::get("location")))>전체</option>
                        @foreach ($location as $key => $val)
                            <option value="{{ $key }}" @selected(Request::get("location") == $key)>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="status">결제상태</label>
                    <select class="form-select" name="status" id="status">
                        <option value="all" @selected(empty(Request::get("status")))>전체</option>
                        @foreach ($status as $key => $val)
                            <option value="{{ $key }}" @selected(Request::get("status") == $key)>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="start_at">검색</label>
                    <select class="form-select" name="field" id="field">
                        <option value="name" @selected(empty(Request::get("field")) || Request::get("field") == "name")>이름</option>
                        <option value="edm_id" @selected(Request::get("field") == "edm_id")>아이디</option>
                        <option value="approval_no" @selected(Request::get("field") == "approval_no")>승인번호</option>
                        <option value="payment_no" @selected(Request::get("field") == "payment_no")>주문번호</option>
                    </select>
                    <input class="form-control" type="text" name="keyword" id='keyword' value="{{ Request::get("keyword") }}">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="method">상품</label>
                    <select name="product" id="product" multiple>
                        @foreach ($products as $product)
                            <option value="{{ $product->id }}"
                                @selected(Request::get('product') && in_array($product->id, Request::get('product')))>{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="method">옵션</label>
                    <select name="option" id="option" multiple>
                        @foreach ($options as $option)
                            <option value="{{ $option['id'] }}" parent_id="{{ $option['product_id'] }}"
                                @selected(Request::get('option') && in_array($option['id'], Request::get('option')))>{{ $option['name'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>

    </main>
</section>

<section class="my-3">
    <main>
        <div class="button-wrap align-right">
            <button onclick="onRemove()" class="btn btn-danger" type="button">삭제</button>
            <button onclick="excelDownload('.search-form', '{{ route('api.payment.excel') }}')" class="btn btn-success">
                <i class="bi bi-file-earmark-excel-fill"></i>
                엑셀다운로드
            </button>
            <button onclick="location.href='{{ route('payment.add', $service) }}'" class="btn btn-primary">결제개별등록</button>
            <button onclick="onOpenExcelForm()" class="btn btn-primary">결제일괄등록</button>
        </div>
    </main>
</section>

<section>
    <header>
        <h6> 총 <strong>{{ number_format($count) }}</strong> 건, 총 결제금액 <strong>{{ number_format($total_price) }}</strong>원 </h6>
    </header>
    <main>
        <div class="table-horizon-scroll custom-scroll">
            <table class="table table-striped table-hover">
                <colgroup>
                    <col width="2%">
                    <col width="3%">
                    <col width="5%">
                    <col width="7%">
                    <col width="5%">
                    <col width="5%">
                    <col width="7%">
                    <col width="5%">
                    <col width="3%">
                    <col width="/">
                    <col width="/">
                    <col width="5%">
                    <col width="5%">
                    <col width="5%">
                    <col width="5%">
                    <col width="4%">
                    <col width="4%">
                    <col width="3%">
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="all-check" value="" class="form-check" id='allCheck' />
                        </th>
                        <th>번호</th>
                        <th>주문번호</th>
                        <th>승인번호</th>
                        <th>결제일시</th>
                        <th>결제경로</th>
                        <th>아이디</th>
                        <th>이름</th>
                        <th>항목구분</th>
                        <th>상품</th>
                        <th>옵션</th>
                        <th>판매가</th>
                        <th>쿠폰사용액</th>
                        <th>원결제액</th>
                        <th>실결제액</th>
                        <th>결제상태</th>
                        <th>결제수단</th>
                        <th>상세</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $item)
                        <tr class="{{ ! $item->is_remove ? "disabled" : "" }}">
                            <td class="align-center">
                                @if ( $item->is_remove )
                                <input type="checkbox" name="payment_id" value="{{ $item->payment->id }}" class="form-check payment_id" />
                                @endif
                            </td>
                            <td>{{ $item->id }}</td>
                            <td>
                                @if ($item->payment->old_index > 0)
                                    <a class="btn btn-sm btn-link" href="https://www.edmclass.com/wp-admin/post.php?post={{ $item->payment->old_index }}&action=edit" target="_blank">{{ $item->payment->old_index }}</a>
                                @else
                                    {{ $item->payment->payment_no }}
                                @endif
                            </td>
                            <td>{{ $item->payment->approval_no }}</td>
                            <td>{{ date('Y-m-d H:i', strtotime($item->created_at)) }}</td>
                            <td>{{ isset($location[$item->payment->location]) ? $location[$item->payment->location] : $item->payment->location }}</td>
                            @if (empty($item->user))
                                <td colspan="2">
                                    <a class="text-primary w-100 d-block" onclick="onDetail({{ $item->payment_id }}, {{ $item->id }})">
                                        등록하기
                                    </a>
                                </td>
                            @else
                                <td>{{ $item->user?->email }} {!! $item->user?->edm_id ? "<br>(" .  $item->user?->edm_id . ")" : "" !!}</td>
                                <td>{{ $item->user?->name }}</td>
                            @endif

                            @if (empty($item->product))
                                <td></td>
                                <td colspan="2">
                                    <a class="text-primary w-100 d-block" onclick="onDetail({{ $item->payment_id }}, {{ $item->id }})">
                                        등록하기
                                    </a>
                                </td>
                            @else
                                <td>{{ $item->payment->settle_type }}</td>
                                <td class="font-sm"><a class="text-primary w-100 d-block" onclick="onDetail({{ $item->payment_id }}, {{ $item->id }})">{{ $item->product?->name }}</a></td>
                                <td class="font-sm"><a class="text-primary w-100 d-block" onclick="onDetail({{ $item->payment_id }}, {{ $item->id }})">{{ $item->option?->name }}</a></td>
                            @endif

                            <td class="align-right">{{ $item->payment->price == 0 ? "-" : number_format($item->payment->price) }}</td>
                            <td class="align-right">{{ $item->payment->discount_price == 0 ? "-" : number_format($item->payment->discount_price) }}</td>
                            <td class="align-right">{{ number_format($item->payment->total_price) }}</td>
                            <td class="align-right">
                                @if (in_array($item->status, ['CANCELED', "PART_CANCELED", "REPAYMENT"]))
                                    <span class="text-danger">{{ number_format($item->price * -1) }}</span>
                                @else
                                    <span>{{ $item->price == 0 ? "-" : number_format($item->price) }}</span>
                                @endif
                            </td>
                            <td>{{ $status[$item->status] }}</td>
                            <td>{{ isset($method[$item->payment->method]) ? $method[$item->payment->method] : $item->payment->method; }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary" onclick="onDetail({{ $item->payment_id }}, {{ $item->id }})">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </main>
    <footer>
        <div class="pagination-wrap">
            {{ $data->links() }}

            <select id='paginate-control' class='form-select form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
            </select>
        </div>
    </footer>
</section>
@endsection

@push("script")
<script>
    $(function() {
        const optionSelector = new MultiSelector("option", { isOverall : true });
        const productSelector = new MultiSelector("product", { isOverall : true });

        if ($.isEmptyObject($("#start_at").val()) && $.isEmptyObject($("#end_at").val())) {
            onLoadDue($('#due').val());
        }


        $('#field').on("change", function() {
            $('#keyword').val("");
        })

        $("#due").on("change", function() {
            onLoadDue($(this).val());
        })

        $('td').not(':has(button)').on("click", function() {
            const tr = $(this).closest("tr");
            onClickTable(tr);
        })

        $("#allCheck").on("click", function() {
            const isCheck = ! $(this).is(":checked");
            $.each($('.table tbody tr'), function() {
                onClickTable($(this) , isCheck);
            });
        })

        function onLoadDue(due) {
            if (due == "monthly") {
                $("#monthly").removeClass('d-none');
                $("#start_at, #end_at").hide();

                setDate("monthly", $("#monthly").val());
            } else {
                if (due == "all") {
                    $("#start_at, #end_at").attr("disabled", false);
                } else {
                    $("#start_at, #end_at").attr("disabled", true);
                }

                setDate("date", due == "all" ? 24 : due)
                $("#monthly").addClass('d-none');
                $("#start_at, #end_at").show();
            }
        }

        $('#monthly').on("change", function() {
            setDate("monthly", $(this).val());
        })

        function setDate(type, due) {
            const date = new Date();
            if (type == "monthly") {
                setDatepickerValue($("#start_at"), getDateOfMonth(date.getFullYear(), due-1, 1))
                setDatepickerValue($("#end_at"), getDateOfMonth(date.getFullYear(), due, 0))
            } else {
                const before = new Date(date.getFullYear(), date.getMonth() - due, date.getDate());

                // $("#start_at").val(getDateFormat(before));
                // $("#end_at").val(getDateFormat(date))

                setDatepickerValue($("#start_at"), before)
                setDatepickerValue($("#end_at"), date)
            }
        }

        function getDateOfMonth(year, month, day) {
            const date = new Date(year, month , day);

            // return getDateFormat(date);
            return date;
        }

        function getDateFormat(date) {
            return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0') + "-" + String(date.getDate()).padStart(2, '0');
        }
    });


    function onSubmit() {
        $('#start_at', "#end_at").attr("disabled", false);
        $("#payment-form").submit()
    }

    function onOpenExcelForm() {
        const href = "{{ route('payment.adds', $service) }}";
        window.open(href, "_blank", "width=900; height=1000");
    }

    function onRemove() {
        if ($('.payment_id:checked').length == 0) {
            alertify.alert("Error", "삭제할 결제건을 선택해주세요", () => {})
            return false;
        }
        const paymentIds = [];
        $.each($('.payment_id:checked'), function () {
            paymentIds.push($(this).val());
        })

        onRemovePayment(paymentIds);
    }

    function onDetail(paymentId, transactionId) {
        const href = "{{ route('payment.detail', ['paymentId' => ':paymentId', 'transactionId' => ':transactionId']) }}";

        location.href= href.replace(":paymentId", paymentId).replace(":transactionId", transactionId);
    }

</script>

@endpush