@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.calc-list', $service) }}">어학원(수강기준) 결제목록</a></h1>
    </div>

    <section>
        <main>
            <form action="{{ route('payment.calc-list', $service) }}" class="search-form" id="payment-form" method="GET">
                <input type="hidden" name="paginate" value="{{ Request::get('paginate') }}" />
                @csrf
                <div class="search-input-wrap">
                    <div class="input-group input-group-sm">
                        <label class="input-group-text">정산 등록일</label>
                        <input class="form-control" type="date" name="created_start_at" id="created_start_at" value="{{ $createdStartAt }}" max="{{ $createdEndAt }}" style="width: 150px;">

                        <input class="form-control" type="date" name="created_end_at" id="created_end_at" value="{{ $createdEndAt }}" min="{{ $createdStartAt }}" style="width: 150px;">
                    </div>
                    <div class="input-group input-group-sm">
                        <select class="form-select" name="range_type" id="range_type" style="width : 100px;">
                            <option value="all" @selected(empty(Request::get("due")) || Request::get("due") == "all")>전체</option>
                            <option value="payment" @selected(Request::get("due") == "payment")>결제월</option>
                            <option value="refund" @selected(Request::get("due") == "refund")>환불월</option>
                        </select>
                        <input class="form-control" type="month" name="start_at" id='start_at' value="{{ Request::get("start_at") }}" style="width: 150px;">
                        <input class="form-control" type="month" name="end_at" id='end_at' value="{{ Request::get("end_at") }}" style="width: 150px;">
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="calc_payment_affiliation">매출귀속</label>
                        <select class="form-select" name="calc_payment_affiliation" id="calc_payment_affiliation">
                            <option value="all" @selected(empty(Request::get("calc_payment_affiliation")) || Request::get("calc_payment_affiliation") == "all")>전체</option>
                            <option value="business" @selected(Request::get("calc_payment_affiliation") == "business")>사업팀</option>
                            <option value="tnc" @selected(Request::get("calc_payment_affiliation") == "tnc")>TNC</option>
                        </select>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="calc_payment_type">매출구분</label>
                        <select class="form-select" name="calc_payment_type" id="calc_payment_type" multiple>
                            @if(in_array(Request::get("calc_payment_affiliation"), ['business', 'tnc']))
                                <option
                                    value="all" @selected(empty(Request::get("calc_payment_type")) || Request::get("calc_payment_type") == "all")>
                                    전체
                                </option>
                                @php
                                    $affiliationTypes = config('system.calc_affiliation_payment_types');
                                @endphp
                                @foreach(($affiliationTypes[Request::get("calc_payment_affiliation")] ?? []) as $key => $label)
                                    <option
                                        value="{{ $key }}" @selected(in_array($key, Request::get("calc_payment_type", [])))>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            @else
                                <option value="all" selected>
                                    전체
                                </option>
                            @endif
                        </select>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="refund_payment_affiliation">환불귀속</label>
                        <select class="form-select" name="refund_payment_affiliation" id="refund_payment_affiliation" >
                            <option value="all" @selected(empty(Request::get("refund_payment_affiliation")) || Request::get("refund_payment_affiliation") == "all")>전체</option>
                            <option value="business" @selected(Request::get("refund_payment_affiliation") == "business")>사업팀</option>
                            <option value="tnc" @selected(Request::get("refund_payment_affiliation") == "tnc")>TNC</option>
                        </select>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="refund_payment_type">환불구분</label>
                        <select class="form-select" name="refund_payment_type" id="refund_payment_type" multiple>

                            @if(in_array(Request::get("refund_payment_type"), ['business', 'tnc']))
                                <option
                                    value="all" @selected(empty(Request::get("refund_payment_type")) || Request::get("refund_payment_type") == "all")>
                                    전체
                                </option>
                                @php
                                    $affiliationTypes = config('system.calc_affiliation_refund_types');
                                @endphp
                                @foreach(($affiliationTypes[Request::get("refund_payment_affiliation")] ?? []) as $key => $label)
                                    <option
                                        value="{{ $key }}" @selected(in_array($key, Request::get("refund_payment_type", []))) >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            @else
                                <option value="all" selected>
                                    전체
                                </option>
                            @endif
                        </select>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="branch">유학원</label>
                        <select class="form-select" name="branch" id="branch">
                            <option value="all" @selected(empty(Request::get("branch")) || Request::get("branch") == "all")>전체</option>
                            @foreach(config('system.calc_branch') as $key => $label)
                                <option value="{{ $key }}" @selected(Request::get("branch") === $key)>
                                    {{ $label }}
                                </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="user_name" @selected(empty(Request::get("field")) || Request::get("field") == "u.name")>이름</option>
                            <option value="edm_id" @selected(Request::get("field") == "edm_id")>아이디</option>
                            <option value="email" @selected(Request::get("field") == "email")>이메일</option>
                        </select>
                        <input class="form-control" type="text" name="keyword" id='keyword' value="{{ Request::get("keyword") }}">
                    </div>
                </div>
                <button type="button" 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">
                @hasrole(['root',$service.'-admin', 'financial-manager'])
                <button onclick="excelDownload('.search-form', '{{ route('api.payment.calculation-excel') }}')" class="btn btn-success">
                    <i class="bi bi-file-earmark-excel-fill"></i>
                    엑셀다운로드
                </button>
                @endhasrole
            </div>
        </main>
    </section>

    <section>
        <header>
            <h6> 총 <strong>{{ number_format($count) }}</strong> 건, 총 결제금액 <strong>{{number_format($payment)}}</strong>원 |
                신규 <strong>{{$totals['new']['count']}}</strong>건, 매출액 <strong>{{number_format($totals['new']['sum'])}}</strong>원 |
                재등록 <strong>{{$totals['re']['count']}}</strong>건, 매출액 <strong>{{number_format($totals['re']['sum'])}}</strong>원 |
                (+) 변경 <strong>{{$totals['change']['count']}}</strong>건, 매출액 <strong>{{number_format($totals['change']['sum'])}}</strong>원 |
                (-) 변경(환불) <strong style="color: red">{{$totals['change_refund']['count']}}</strong>건,
                매출액 <strong style="color: red">{{ $totals['change_refund']['sum'] > 0 ? '-' . number_format($totals['change_refund']['sum']) : number_format($totals['change_refund']['sum']) }}</strong>원 |
                기타 <strong>{{$totals['etc']['count']}}</strong>건, 매출액 <strong>{{number_format($totals['etc']['sum'])}}</strong>원
            </h6>
        </header>
        <main>
            <table class="table table-striped table-hover table-bordered">
                <colgroup>
                    <col width="2%">
                    <col width="6%">
                    <col width="5%">
                    <col width="6%">
                    <col width="7%">
                    <col width="6%">
                    <col width="6%">
                    <col width="4%">
                    <col width="5%">
                    <col width="4%">
                    <col width="5%">
                    <col width="5%">
                    <col width="5%">
                    <col width="10%">
                    <col width="10%">
                    <col width="6%">
                    <col width="*">
                </colgroup>
                <thead>
                <tr>
                    <th class="align-center">번호</th>
                    <th class="align-center">정산월</th>
                    <th class="align-center">정산등록일</th>
                    <th class="align-center">이름</th>
                    <th class="align-center">핸드폰</th>
                    <th class="align-center">수강시작월</th>
                    <th class="align-center">수강종료월</th>
                    <th class="align-center" colspan="2">매출</th>
                    <th class="align-center" colspan="2">환불</th>
                    <th class="align-center">매출액</th>
                    <th class="align-center">환불액</th>
                    <th class="align-center">수강반(결제상품)</th>
                    <th class="align-center">수강반(수강강좌)</th>
                    <th class="align-center">유학원</th>
                    <th class="align-center">특이사항</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($list as $index => $item)
                    <tr class="payment-list">
                        <input type="hidden" name="payment_id" value="{{$item->payment_id}}">
                        <td class="align-center">{{$list->firstItem() + $index}}</td>
                        <td class="align-center">{{Carbon::parse($item->target_month)->format('Y년 m월')}}</td>
                        <td class="align-center">{{Carbon::parse($item->insert_at)->format('ymd')}}</td>
                        <td>{{$item->user_name}}</td>
                        <td>{{BaseHelper::formatPhoneNumber($item->phone)}}</td>
                        <td class="align-center">{{$item->period_enabled ? "" :Carbon::parse($item->period_start_month)->format('Y년 m월')}}</td>
                        <td class="align-center">{{$item->period_enabled ? "" :Carbon::parse($item->period_end_month)->format('Y년 m월')}}</td>
                        <td>{{config('system.calc_affiliation')[$item->payment_affiliation] ?? ''}}</td>
                        <td>{{config('system.calc_affiliation_payment_types')[$item->payment_affiliation][$item->payment_type] ?? ''}}</td>
                        <td>{{$item->refund_price ? config('system.calc_affiliation')[$item->refund_affiliation] ?? '' : ''}}</td>
                        <td>{{$item->refund_price ? config('system.calc_affiliation_refund_types')[$item->refund_affiliation][$item->refund_type] ?? '' : ""}}</td>
                        <td class="text-right"><b>{{number_format($item->payment_price)}}</b></td>
                        <td class="text-right"><b style="color: red">{{$item->refund_price ? '-'.number_format($item->refund_price) : ''}}</b>
                        </td>
                        <td>{{$item->product_name}}</td>
                        <td>{{$item->course_name}}</td>
                        <td class="align-center">{{$item->branch ? config('system.calc_branch')[$item->branch] . "(".$item->branch_name.")" : ""}}
                        </td>
                        <td>{{$item->notice}}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </main>
        <footer>
            <div class="pagination-wrap">
                {{ $list->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") == 10)>10개씩 보기</option>
                    <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                    <option value="50" @selected(Request::get("paginate") == null || Request::get("paginate") == 50)>50개씩 보기</option>
                    <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
                </select>
            </div>
        </footer>
    </section>
@endsection

@push("script")
    <script>
        let calcSelector;
        let refundSelector;
        $(function() {
            calcSelector = new MultiSelector("calc_payment_type", {isOverall: true});
            refundSelector = new MultiSelector("refund_payment_type", {isOverall: true});

            $(".payment-list").on("dblclick", function() {
                let paymentId = $(this).find("input[name='payment_id']").val();
                const href = "{{ route('payment.detail', ['paymentId' => ':paymentId']) }}";
                window.open(href.replace(":paymentId", paymentId));
            });

            $('.search-button').on("click", function() {
                if ( $('input[type=text]:disabled').length > 0 ) {
                    $.each($('input[type=text]:disabled'), function() {
                        $(this).prop("disabled", false);
                    })
                }

                $('#payment-form').submit()
            })
            // 정산월이 변경될 때 환불월의 최소값 설정
            $('#start_at').on('change', function () {
                const startValue = $(this).val();
                if (startValue) {
                    $('#end_at').attr('min', startValue);
                }
            });

            // 환불월이 변경될 때 정산월의 최대값 설정
            $('#end_at').on('change', function () {
                const endValue = $(this).val();
                if (endValue) {
                    $('#start_at').attr('max', endValue);
                }
            });

            $('#calc_payment_affiliation').on('change', function (){
                let val = $(this).val();
                calcSelector.removeListOptions();
                if (val === 'business') {
                    optionsData = [
                        {id: 'new', name: '신규'},
                        {id: 'change', name: '사업팀 변경'},
                        {id: 'etc', name: '사업팀 기타'}
                    ];
                } else if (val === 'tnc') {
                    optionsData = [
                        {id: 're', name: '재등록' },
                        {id: 'change', name: 'TNC 변경'},
                        {id: 'etc', name: 'TNC 기타'}
                    ];
                } else {
                    optionsData = [
                        {id: '', name: '전체'}
                    ];
                }

                // calcSelector 인스턴스의 옵션을 업데이트
                calcSelector.setOptions(optionsData);
            });

            $('#refund_payment_affiliation').on('change', function (){
                let val = $(this).val();
                refundSelector.removeListOptions();

                if (val === 'business') {
                    optionsData = [
                        {id: 'refund', name: '사업팀 환불'}
                    ];
                } else if (val === 'tnc') {
                    optionsData = [
                        {id: 'refund', name: 'TNC 환불'},
                    ];
                } else {
                    optionsData = [
                        {id: '', name: '전체'}
                    ];
                }
                // refundSelector 인스턴스의 옵션을 업데이트
                refundSelector.setOptions(optionsData);
            });


            const $start = $('#created_start_at');
            const $end = $('#created_end_at');

            // 시작일 변경 시 종료일 최소값 조정
            $start.on('change', function () {
                const startVal = $(this).val();
                $end.attr('min', startVal);
                if ($end.val() < startVal) {
                    $end.val(startVal);
                }
            });

            // 종료일 변경 시 시작일 최대값 조정
            $end.on('change', function () {
                const endVal = $(this).val();
                $start.attr('max', endVal);
                if ($start.val() > endVal) {
                    $start.val(endVal);
                }
            });

        });
    </script>
    <style>
        .text-right {
            text-align: right !important;
        }

        .payment-list {
            cursor: pointer;
        }
    </style>
@endpush