@php
    $paymentCalculations = $data->paymentCalculations ?? '';
    $affiliationPaymentTypes = config('system.calc_affiliation_payment_types');
    $affiliationRefundTypes = config('system.calc_affiliation_refund_types');
@endphp
<section class="mb-3" id="calculation">
    <header>정산
        @if($type === 'popup')
            <button class="btn btn-success btn-sm" type="button" onclick="onChangePaymentData()">저장</button>
            <input type="hidden" name="payment_id" id="payment_id" value="{{ $data->id }}">
        @endif
    </header>
    <main>
        <span class="px-0 mr-3 text-secondary" style="font-size : 14px;"><i class="bi bi-info-circle"></i> 상품 여러 개 등록 시 첫 번째 상품에 한해서만 정산 매핑됩니다.</span>
        <table class="table table-bordered sub-table" style="--th-cols: 2">
            <colgroup>
                <col style="width: 20%">
                <col style="width: 80%">
            </colgroup>
            <tr>
                <th><label class="required">정산여부</label></th>
                <td colspan="3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="calc_settlement_enabled"
                               name="calc_settlement_enabled"
                               value="1" @checked($paymentCalculations?->settlement_enabled ?? $type === 'popup' ?? false)>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label class="required">수강기간</label>
                </th>
                <td colspan="3">
                    <input type="month" id="period_start_month" name="period_start_month"
                           class="form-control form-select-sm calc_inputs"
                           value="{{ $paymentCalculations?->period_start_month ?? $started_at ??'' }}"
                           style="width : 40%;display: inline-block;">
                    ~
                    <input type="month" id="period_end_month" name="period_end_month"
                           class="form-control form-select-sm calc_inputs"
                           value="{{ $paymentCalculations?->period_end_month  ?? $ended_at ?? '' }}"
                           style="width : 40%;display: inline-block;">


                    <div class="d-flex mx-0 mt-1 mb-0 font-sm">
                                        <span class="px-0 mr-3 text-secondary">
                                            수강기간 비활성화
                                        </span>
                        <div class="form-check form-switch" style="min-height: auto">
                            <input class="form-check-input calc_inputs" type="checkbox" role="switch"
                                   id="is_period_enabled" name="is_period_enabled"
                                   value="1" @checked($paymentCalculations?->period_enabled ?? false)>
                        </div>
                    </div>

                </td>
            </tr>
            <tr>
                <th><label>유학원</label></th>
                <td>
                    <div class="row m-0 px-0">
                        <div class="col-5 px-0">
                            <select id="calc_branch"
                                    name="calc_branch"
                                    class="form-select form-select-sm calc_inputs">
                                <option value="">선택</option>
                                @foreach(config('system.calc_branch') as $key => $label)
                                    <option value="{{ $key }}" @selected( ! empty($paymentCalculations?->branch) && $paymentCalculations?->branch === $key)>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-7 px-0">
                            <input type="text" id="calc_branch_name" name="calc_branch_name"
                                   class="form-control form-select-sm calc_inputs"
                                   value="{{ $paymentCalculations?->branch_name ?? ''}}">
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <div class="calc-sub-section">
            <div class="calc-sub-refund-table mb-2">
                <table class="table table-bordered sub-table" style="--th-cols: 4">
                    <colgroup>
                        <col style="width: 10%">
                        <col style="width: 13%">
                        <col style="width: 10%">
                        <col style="width: 23%">
                        <col style="width: 10%">
                        <col style="width: 34%">
                    </colgroup>
                    <tr>
                        <td colspan="6">
                            환불 내역
                        </td>
                    </tr>
                    <th><label>환불월</label></th>
                    <td>
                        <input type="month" name="calc_refund_month"
                               class="calc_refund_month form-control form-select-sm calc_inputs"
                               value="{{ $paymentCalculations?->refund_month ?? '' }}">
                    </td>
                    <th><label>환불액</label></th>
                    <td>
                        <div class="input-group form-select-sm">
                            <span class="input-group-text">-</span>
                            <input type="text" name="calc_refund_price"
                                   class="form-control number-format form-select-sm calc_inputs"
                                   value="{{ number_format(data_get($paymentCalculations, 'refund_price', 0)) }}">
                        </div>
                    </td>
                    <th><label>환불귀속</label></th>
                    <td>
                        <div class="row m-0 px-0">
                            <div class="col-5 px-0">
                                <select name="calc_refund_affiliation"
                                        class="calc_refund_affiliation form-select form-select-sm calc_inputs">
                                        <option value="">선택</option>
                                        @foreach(['business'=>'사업팀','tnc'=>'TNC'] as $key=>$label)
                                            <option value="{{ $key }}"
                                                @selected($paymentCalculations?->refund_affiliation ?? '' === $key)>{{ $label }}</option>
                                        @endforeach
                                </select>
                            </div>
                            <div class="col-5 px-0">
                                <select name="calc_refund_type"
                                        class="calc_refund_type form-select form-select-sm calc_inputs">
                                        @foreach(($affiliationRefundTypes[$paymentCalculations?->refund_affiliation ?? ''] ?? []) as $key => $label)
                                            <option value="{{ $key }}"
                                                @selected($paymentCalculations?->refund_type === $key)>{{ $label }}</option>
                                        @endforeach
                                </select>

                            </div>
                            @php
                                $fields = ['refund_month', 'refund_price', 'refund_affiliation', 'refund_type'];
                            @endphp

                            @if($paymentCalculations && collect($fields)->every(fn($field) => filled($paymentCalculations->{$field})))
                                <div class="col-2">
                                    <button class="btn btn-sm btn-primary btn-edit-toggle" type="button">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </td>
                </table>
            </div>
        </div>
        <div class="calc-sub-section">
            <div id="calculation-tables">
                @if(count(optional($paymentCalculations)->items ?? []) > 0)
                    @foreach($paymentCalculations?->items ?? [null] as $index => $item)
                        <div class="calc-sub-table mb-2">
                            @if($index > 0)
                                <button type="button" class="btn btn-sm btn-danger float-end"
                                        onclick="removeCalculationTable(this)">X
                                </button>
                            @endif
                            <table class="table table-bordered sub-table" style="--th-cols: 4">
                                <colgroup>
                                    <col style="width: 10%">
                                    <col style="width: 13%">
                                    <col style="width: 10%">
                                    <col style="width: 23%">
                                    <col style="width: 10%">
                                    <col style="width: 34%">
                                </colgroup>
                                @if($index ==  0)
                                    <tr>
                                        <td colspan="6">
                                            정산 내역
                                            <button type="button" class="btn btn-sm btn-primary"
                                                    onclick="addCalculationTable()">추가
                                            </button>
                                        </td>
                                    </tr>
                                @endif
                                <tr>
                                    <th><label class="required">정산월</label></th>
                                    <td>
                                        <input type="hidden" class="calc_item_id" name="calc_item_id[]" value="{{$item?->id}}">
                                        <input type="month" name="calc_payment_month[]"
                                               class="calc_payment_month form-control form-select-sm calc_inputs"
                                               value="{{ $item?->payment_month }}" readonly>
                                    </td>
                                    <th><label class="required">결제액</label></th>
                                    <td>
                                        <input type="text" name="calc_payment_price[]"
                                               class="form-control number-format-negative form-select-sm calc_inputs"
                                               value="{{ number_format($item?->payment_price) }}" readonly>
                                    </td>
                                    <th><label class="required">매출귀속</label></th>
                                    <td>
                                        <div class="row m-0 px-0">
                                            <div class="col-5 px-0">
                                                <select name="calc_payment_affiliation[]"
                                                        class="calc_payment_affiliation form-select form-select-sm calc_inputs"  readonly>
                                                    <option value="">선택</option>
                                                    @foreach(['business'=>'사업팀','tnc'=>'TNC'] as $key=>$label)
                                                        <option value="{{ $key }}"
                                                            @selected($item?->payment_affiliation === $key)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-5 px-0">
                                                <select name="calc_payment_type[]"
                                                        class="calc_payment_type form-select form-select-sm calc_inputs" readonly>
                                                    @foreach(($affiliationPaymentTypes[$item?->payment_affiliation] ?? []) as $key => $label)
                                                        <option value="{{ $key }}"
                                                            @selected($item?->payment_type === $key)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-sm btn-primary btn-edit-toggle" type="button">
                                                    <i class="bi bi-pencil-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    @endforeach
                @else
                    <div class="calc-sub-table mb-2">
                        <table class="table table-bordered sub-table" style="--th-cols: 4">
                            <tr>
                                <td colspan="6">
                                    정산 내역
                                    <button type="button" class="btn btn-sm btn-primary"
                                            onclick="addCalculationTable()">추가
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <th><label class="required">정산월</label></th>
                                <td>
                                    <input type="hidden" class="calc_item_id" name="calc_item_id[]" value="">
                                    <input type="month" name="calc_payment_month[]"
                                           class="calc_payment_month form-control form-select-sm calc_inputs"
                                           value="">
                                </td>
                                <th><label class="required">결제액</label></th>
                                <td>
                                    <input type="text" name="calc_payment_price[]"
                                           class="form-control number-format-negative form-select-sm calc_inputs"
                                           value="">
                                </td>
                                <th><label class="required">매출귀속</label></th>
                                <td>
                                    <div class="row m-0 px-0">
                                        <div class="col-6 px-0">
                                            <select name="calc_payment_affiliation[]"
                                                    class="calc_payment_affiliation form-select form-select-sm calc_inputs">
                                                <option value="">선택</option>
                                                @foreach(['business'=>'사업팀','tnc'=>'TNC'] as $key=>$label)
                                                    <option value="{{ $key }}">{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-6 px-0">
                                            <select name="calc_payment_type[]"
                                                    class="calc_payment_type form-select form-select-sm calc_inputs">
                                            </select>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </main>
</section>
<style>
    select[readonly], input[readonly] {
        pointer-events: none;
        background: #E9ECEF;
    }
</style>
<script>
    $(function () {
        //정산 start
        $('.calc_payment_affiliation').on('change', function () {
            let val = $(this).val();
            let $division = $(this).closest('table').find(".calc_payment_type");
            $division.empty(); // 기존 옵션 제거

            if (val === 'business') {
                // 사업팀
                $division.append('<option value="new">신규</option>');
                $division.append('<option value="change">사업팀 변경</option>');
                $division.append('<option value="etc">사업팀 기타</option>');
            } else if (val === 'tnc') {
                // TNC
                $division.append('<option value="re">재등록</option>');
                $division.append('<option value="change">TNC 변경</option>');
                $division.append('<option value="etc">TNC 기타</option>');
            }
        });

        $('.calc_refund_affiliation').on('change', function () {

            let val = $(this).val();
            let $division = $(this).closest('table').find(".calc_refund_type");
            $division.empty(); // 기존 옵션 제거

            if (val === 'business') {
                // 사업팀
                $division.append('<option value="refund">사업팀 환불</option>');
            } else if (val === 'tnc') {
                // TNC
                $division.append('<option value="refund">TNC 환불</option>');
            }
        });

        $("#calc_settlement_enabled").on('change', function () {
            $(".calc_inputs").prop('disabled', !$(this).is(':checked'));

            $("#period_start_month").prop('disabled', $("#is_period_enabled").is(":checked"));
            $("#period_end_month").prop('disabled', $("#is_period_enabled").is(":checked"));
        });

        $(".calc_payment_month").on('change', function () {
            if ($("#status").val() == "CANCELED") {
                $(this).closest('table').find(".calc_refund_month").val($(this).val());

            }
        });

        // 수강시작 변경시 수강 종료일 수정
        $('#period_start_month').on('change', function () {
            const paymentValue = $(this).val();
            if (paymentValue) {
                $('#period_end_month').attr('min', paymentValue);
            }
        });

        // 수강 종료일 변경시 수강 시작일 수정
        $('#period_end_month').on('change', function () {
            const refundValue = $(this).val();
            if (refundValue) {
                $('#period_start_month').attr('max', refundValue);
            }
        });


        //정산 end
    });
    // 정산월이 변경될 때 환불월의 최소값 설정
    $(document).on('change', '.calc_payment_month', function () {
        let maxPayment = null;
        $('.calc_payment_month').each(function () {
            const val = $(this).val();
            if (val) {
                if (!maxPayment || val > maxPayment) {
                    maxPayment = val;
                }
            }
        });

        if (maxPayment) {
            $(".calc_refund_month").attr('min', maxPayment);
        }
    });

    $(document).on('change', '.calc_refund_month', function () {
        const refundValue = $(this).val();
        if (refundValue) {
            $(this).closest('table').find(".calc_payment_month").attr('max', refundValue);
        }
    });

    $(document).on('change', '#is_period_enabled', function () {
        $("#period_start_month").prop('disabled', $(this).is(':checked'));
        $("#period_end_month").prop('disabled', $(this).is(':checked'));
    });

    $(document).on('click', '.btn-edit-toggle', function () {
        const $row = $(this).closest('tr');
        const $inputs = $row.find('input, select');
        const isEditing = $(this).data('editing') === true;
        const $icon = $(this).find("i");

        console.log($inputs);
        if (!isEditing) {
            // 수정 모드 진입
            $inputs.attr('readonly', false);
            $icon.removeClass("bi-pencil-square").addClass("bi-check-lg");
            $(this).data('editing', true);
        } else {
            // 수정 완료
            $inputs.attr('readonly', true);
            $icon.removeClass("bi-check-lg").addClass("bi-pencil-square");
            $(this).data('editing', false);
        }
    });


    function addCalculationTable() {
        // 기준이 될 첫번째 calc-sub-table 복제
        let $first = $('.calc-sub-table').first();
        let $clone = $first.clone(true, true); // 이벤트까지 복제하려면 true,true
        $clone.find('tr').first().remove();
        $clone.find('.btn-edit-toggle').closest('div').remove();

        // input/select 값 초기화
        $clone.find('input, select').each(function () {
            $(this).attr('readonly', false);
            if (this.type === 'text' || this.type === 'month') {
                $(this).val(''); // 값 초기화
                if (this.type === 'date' || this.type === 'month') {
                    $(this).removeAttr('min').removeAttr('max');
                }
            } else if (this.tagName.toLowerCase() === 'select') {
                if ($(this).hasClass('calc_payment_type') || $(this).hasClass('calc_refund_type')) {
                    $(this).html('<option value="">선택</option>');
                } else {
                    this.selectedIndex = 0; // 첫번째 option으로
                }
            } else if (this.type ==='hidden'){
                $(this).val('');
            }
        });

        if ($clone.find('.remove-calc-table').length === 0) {
            $clone.prepend(
                '<button type="button" class="btn btn-sm btn-danger float-end" onclick="removeCalculationTable(this)">X</button>'
            );
        }

        $clone.removeAttr('id');
        $clone.appendTo($first.parent());
    }

    // 삭제 버튼 클릭 시
    function removeCalculationTable(btn) {
        let $tables = $('.calc-sub-table');
        if ($tables.length > 1) {
            $(btn).closest('.calc-sub-table').remove();
        }
    }

    function onChangePaymentData(){
        if (!academyCalcValidate()) {
            return false;
        }
        let params = {};
        $('#calculation').find('input, select, textarea').each(function () {
            let name = $(this).attr('name');   // input/select/textarea의 name 속성
            let type = $(this).attr('type');   // input type 확인
            let value = $(this).val();

            if (!name) return;


            if (type === 'checkbox') {
                // 체크박스면 checked 여부에 따라 값 결정
                value = $(this).is(':checked') ? $(this).val() : 0;
            } else {
                value = $(this).val();
            }


            // []가 붙은 배열형 name 처리
            if (/\[\]$/.test(name)) {
                // 뒤의 [] 제거
                let baseName = name.replace(/\[\]$/, '');

                // 배열 초기화
                if (!Array.isArray(params[baseName])) {
                    params[baseName] = [];
                }
                params[baseName].push(value);
            } else {
                // 일반 name은 그냥 저장
                params[name] = value;
            }
        });

        setTimeout(() => {
            alertify.confirm("확인", "저장하시겠습니까?", async () => {
                const result = await customFetch("{{ route('api.payment.calculation-modify') }}", {
                    method: "POST",
                    body : JSON.stringify(params) ,
                    headers: { "Content-Type" : "application/json"}
                });

                if (result.status) {
                    alertify.alert("완료", "저장되었습니다.", () => {
                        window.close();
                    });
                } else {
                }

            }, () => {})
        }, 100);


    }

    function academyCalcValidate() {
        if (!$("#calc_settlement_enabled").is(":checked")) {
            return true; // 정산여부 체크 안 돼 있으면 그냥 통과
        }

        let status = $("#status").val();
        let isValid = true;
        let msg = "필수값을 입력해주세요";
        // 전체 필수값 초기화
        $(".form-control-error").removeClass("form-control-error");

        // 공통 영역(수강기간, 유학원 등)
        if(!$("#is_period_enabled").is(":checked")) {
            if (!$("#period_start_month").val()) {
                $("#period_start_month").addClass("form-control-error");
                isValid = false;
            }
            if (!$("#period_end_month").val()) {
                $("#period_end_month").addClass("form-control-error");
                isValid = false;
            }
        }

        let branch = $('#calc_branch').val();
        let branchName = $('#calc_branch_name').val().trim();
        if ((branch && !branchName) || (!branch && branchName)) {
            alertify.alert("알림", '이름/지사구분 모두 입력 하셔야 합니다.');
            return false;
        }
        let refundPrice = parseInt($("input[name='calc_refund_price']").val().replace(/,/g, ''), 10) || 0;
        // 정산/환불 내역 테이블들 반복검증
        $(".calc-sub-table").each(function (idx) {
            let $row = $(this);

            let paymentMonth = $row.find(".calc_payment_month").val();
            let paymentType = $row.find(".calc_payment_type").val();
            let paymentPrice = parseInt($row.find("input[name='calc_payment_price[]']").val().replace(/,/g, ''), 10) || 0;


            // 필수값 검사
            if (!paymentMonth) {
                $row.find(".calc_payment_month").addClass("form-control-error");
                isValid = false;
            }
            if (!paymentType) {
                $row.find(".calc_payment_type").addClass("form-control-error");
                isValid = false;
            }
            if (!paymentPrice) {
                $row.find("input[name='calc_payment_price[]']").addClass("form-control-error");
                isValid = false;
            }

            // 상태별 금액검증
            if (status === "PAID" || status === "REPAYMENT") {
                if (refundPrice !== 0) {
                    msg= "취소상태가 아닌 경우 취소금액 입력이 불가합니다.";
                    isValid = false;
                    return false; // each 중단
                }
            } else {
                if (refundPrice < 1000 && refundPrice !== 0) {
                    $row.find("input[name='calc_refund_price[]']").addClass("form-control-error");
                    msg= "1,000원 이상 입력 가능합니다.";
                    isValid = false;
                    return false;
                }
            }
        });

        if (!isValid) {
            alertify.alert("알림", msg);
            return false;
        }

        return true;
    }
</script>