/* ================================
Modaal
=================================== */ 
$(function() {
    $('#btn-purchase2').on('click', function(e) {
        e.preventDefault();
        $('#error').fadeOut();

        $.ajax({
            url: '/api/kepco/is-agreed',
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.result) {
                    // is_agree が true の場合、charge-list モーダルを表示
                    
					showChargeListModal();
                } else {
                    // is_agree が false の場合、agree モーダルを表示
                    $('#agree').fadeIn();
                }
                // モーダル表示中は背景のスクロールを無効化
                $('body').css('overflow', 'hidden');
            },
            error: function() {
                $('#agree').fadeIn();
            }
        });
    });

    $('#btn-purchase').on('click', function(e) {
        e.preventDefault();

        $.ajax({
            url: '/api/kepco/is-agreed',
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.result) {
                    // is_agree が true の場合、charge-list モーダルを表示
                    
					showChargeListModal();
                } else {
                    // is_agree が false の場合、agree モーダルを表示
                    $('#agree').fadeIn();
                }
                // モーダル表示中は背景のスクロールを無効化
                $('body').css('overflow', 'hidden');
            },
            error: function() {
                $('#agree').fadeIn();
            }
        });
    });

    $('#screen2-modaal1-btn').on('click', function(e) {
        e.preventDefault();

        // チェックボックスの同意確認
        const allChecked = $('#screen2-modaal1-form input[type="checkbox"]').length ===
                           $('#screen2-modaal1-form input[type="checkbox"]:checked').length;

        if (!allChecked) {
            alert('すべての項目に同意してください。');
            return;
        }

        // API呼び出し
        $.ajax({
            url: '/api/kepco/agree',
            method: 'POST',
            dataType: 'json',
            success: function(response) {
                if (response.result) {
                    // 同意モーダルを非表示
                    $('#agree').fadeOut();

					showChargeListModal();

                    // 背景のスクロールを無効化
                    $('body').css('overflow', 'hidden');
                } else {
                    alert('同意処理に失敗しました。');
                }
            },
            error: function() {
                alert('同意処理中にエラーが発生しました。');
            }
        });
    });

	$(".comp-modaal__close").click(function () {
		$(".comp-modaal").fadeOut();
		$('body').css('overflow', 'inherit');
	});
	$(".comp-modaal__btn").click(function () {
		$(".comp-modaal").fadeOut();
		$('body').css('overflow', 'inherit');
	});


	$('input[type="checkbox"]').on('change', function() {
		if ($(this).is(':checked')) {
			$(this).closest('.checkbox').addClass('active');
		} else {
			$(this).closest('.checkbox').removeClass('active');
		}
	});

	$('#screen2-modaal1-form input[type="checkbox"]').on('change', function() {
		const $form = $('#screen2-modaal1-form');
		const $checkboxes = $form.find('input[type="checkbox"]');
		const allChecked = $checkboxes.length > 0 && $checkboxes.filter(':not(:checked)').length === 0;
		if (allChecked) {
			$('#screen2-modaal1-btn').removeClass('btn-disabled');
		} else {
			$('#screen2-modaal1-btn').addClass('btn-disabled');
		}
	});

    $('#screen2-modaal2-content__price').off('click').on('click', '.wrap__btn', function () {
        const itemId = $(this).data('item-id');
        let boothId = typeof booth !== 'undefined' ? booth : 0;
        const csrfToken = $('#screen2-modaal2-content__price').attr('data-csrf-token');

        // ここで空タブを開く
        const win = window.open('about:blank');

        $.ajax({
            url: '/api/kepco-sbps/transaction',
            method: 'POST',
            data: { 
                item: itemId, 
                booth: boothId,
                csrf_token: csrfToken
            },
            dataType: 'json',
            success: function(response) {
                if (response.result) {
                    createAndSubmitForm(response, win); // winを渡す
                } else {
                    alert('決済処理に失敗しました。');
                    win.close();
                }
            },
            error: function() {
                alert('通信エラーが発生しました。');
                win.close();
            }
        });
    });

});


function createAndSubmitForm(formData, win) {
    const doc = win.document;
    const form = doc.createElement('form');
    form.action = formData.action;
    form.method = 'POST';
    form.target = '_self';
    form.acceptCharset = 'Shift_JIS';

    for (const key in formData.fields) {
        if (Array.isArray(formData.fields[key])) {
            formData.fields[key].forEach(value => {
                const input = doc.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = value;
                form.appendChild(input);
            });
        } else {
            const input = doc.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = formData.fields[key];
            form.appendChild(input);
        }
    }

    doc.body.appendChild(form);
    form.submit();
}

/* Screenの高さを取得 */
function updateModaalHeight() {
	var screenHeight = $('.screen')[0]?.getBoundingClientRect().height;
	if (screenHeight) {
		$('.comp-modaal').css('height', screenHeight + 'px');
	}
}

$(function() {
	updateModaalHeight(); // 初回
	$(window).on('resize', updateModaalHeight); // リサイズ対応
});

function showChargeListModal() {
    $.ajax({
        url: '/api/kepco-sbps/get-purchase-point-list',
        method: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.result) {
                const list = response.purchase_point_list;
                const container = $('#screen2-modaal2-content__price');
                // 既存のリストをクリア
                container.empty();
                // CSRFトークンをコンテナに属性としてセット
                container.attr('data-csrf-token', response.csrf_token);

                // リスト生成
				list.forEach(item => {
					const point = Number(item.point).toLocaleString();
					const priceTax = Number(item.price_tax).toLocaleString();
				
                    const html = `
                        <div class="wrap">
                            <div class="wrap__left">
                                <img src="/assets/pc/img/kepco/icon-point.svg" alt="">
                                <div class="wrap__left__price">
                                    ${point}<span>GP</span>
                                </div>
                            </div>
                            <div class="btn btn-blue wrap__btn" data-item-id="${item.id}">
                                ${priceTax}円<span class="tax-text">(税込)</span>
                            </div>
                        </div>
                    `;

					container.append(html);
				});

                // モーダル表示
                $('#charge-list').fadeIn();
                $('body').css('overflow', 'hidden');

            } else {
                alert('購入ポイントリストの取得に失敗しました。');
            }
        },
        error: function() {
            alert('通信エラーが発生しました。');
        }
    });
}