@extends('layouts.app')

@section('content')
    <div>
        {{-- フラッシュメッセージ --}}
        @if (session('success'))
            <div id="flash-message" class="alert alert-success alert-dismissible fade show text-center" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        @if (session('error'))
            <div id="flash-message" class="alert alert-danger alert-dismissible fade show text-center" role="alert">
                {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="container-fluid mt-md-2 mt-xl-4">
            <div class="container mb-5">
                @if ($user->payment == 2)
                    <div class="card_info text-center col-12 col-md-12 col-lg-8 col-xl-8">
                        <div>お支払いに失敗致しました</div>
                        <div>詳しくはこちらにお電話ください</div>
                        <div>03-5341-4670</div>
                    </div>
                @endif
                @if ($user->payment == null || $user->payment == 2)
                    <div class="card_info d-flex justify-content-center col-12 col-md-12 col-lg-8 col-xl-8">
                        <div class="card-body">
                            <h4 class="card-title bg-main-color text-white p-2 text-center position-relative">
                                <i class="fas fa-exclamation-circle fa-fw align-middle"></i>
                                @if ($user->member_flg)
                                    <span class="align-middle ml-2">会費のお支払いには<br class="phone_area">決済の必要がございます</span>
                                @else
                                    <span class="align-middle ml-2">イベントにご参加いただくには決済の必要がございます</span>
                                @endif
                            </h4>

                            @if ($user->member_flg)
                                <img style="width: 100%;" src="{{ asset('img/top_toyohashi.png') }}" alt="" />
                            @else
                                <img style="width: 100%;" src="{{ asset('img/top_toyohashi.png') }}" alt="" />
                            @endif

                            <div class="rounded mt-4 text-center" style="border: solid 1px#BEC3C8;">
                                @if ($user->member_flg)
                                    <h6 class="f20 py-3 font-weight-bold card-text" style="background-color: #f3f4f6;"> 東海ライブ研究会 年会費</h6>
                                @else
                                    <h6 class="f20 py-3 font-weight-bold card-text" style="background-color: #f3f4f6;">フルアクセスプラン</h6>
                                @endif
                                <div class="p-3">
                                    <div class="f24 font-weight-bold card-text" id="price-display">{{ $price }}円</div>

                                    <form id="payment-form" class="text-center my-3">
                                        @csrf
                                        <div id="payment-element" class="mb-3">
                                            <!-- Stripe Elementsがここに表示されます -->
                                        </div>
                                        <div id="payment-message" class="alert alert-danger d-none mb-3"></div>
                                        <button id="submit-button" class="btn btn-primary">
                                            <div class="spinner-border spinner-border-sm d-none" id="spinner" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            <span id="button-text">決済する</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <div class="mt-3">
                                <ul class="small list-unstyled bg-light mt-5 p-4 rounded">
                                    <li>※決済がエラーになる場合、カード情報をお確かめの上、再度お試しください。</li>
                                    <li>※万が一エラーが解消しない場合、以下の情報を事務局までご連絡ください。
                                        <div class="pl-sm-2 pl-lg-3">
                                            - お名前<br>
                                            - ご連絡先メールアドレス<br>
                                            - 表示されるエラー内容もしくはスクリーンショット<br>
                                            - ご利用のカード銘柄（VISA、Master等）<br>
                                            - カードの有効期限
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                @else
                    {{-- 決済完了後の表示 --}}
                    @php
                        $ondemandStartDate = '2025-07-22 12:00:00'; // 表示開始日時
                        $ondemandEndDate = '2025-08-21 11:59:59';   // 表示終了日時
                        $currentTime = date('Y-m-d H:i:s'); // 現在の日時
                    @endphp
                    <div id="payment_ok" class="card_info py-3 px-3 col-12 col-md-12 col-lg-8 col-xl-8">
                        
                        @if ($currentTime >= $ondemandStartDate && $currentTime <= $ondemandEndDate)
                            <h4 class="card-title bg-main-color text-white p-2 text-center position-relative">
                                <span class="align-middle ml-2">▼オンデマンド配信一覧</span>
                            </h4>
                        @else
                            <h4 class="card-title bg-main-color text-white p-2 text-center position-relative">
                                <span class="align-middle ml-2">▼ライブ配信会場入り口</span>
                            </h4>
                        @endif

                        <picture>
                            <source srcset="{{ asset('img/top_toyohashi.png') }}" media="(max-width: 575px)">
                            <img style="width: 100%;" src="{{ asset('img/top_toyohashi.png') }}" alt="" />
                        </picture>
                        
                        <div class="my-2">
                            @if ($currentTime >= $ondemandStartDate && $currentTime <= $ondemandEndDate)
                            {{-- オンデマンド配信画面 --}}
                                <div class="row my-3 mx-md-3">
                                    <div class="col-12 col-md-8 mx-auto text-center">
                                        <p class="my-2">オンデマンド配信期間：<br class="md:hidden">2025年7月22日（火）正午〜8月21日（木）正午まで</p>
                                    </div>
                                    <div class="col-12 col-md-8 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_a') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">6月24日（火）</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-8 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_b') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">6月25日（水）</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-8 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_c') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">6月26日（木）</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-8 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_d') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">6月27日（金）</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-8 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_e') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">6月28日（土）</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-8 mx-auto text-center mt-2">
                                        <p class="align-middle"><a href="https://www.toyohashilive.org/2025/news/on-demand/" class="text-sub-color" target="_blank">オンデマンド配信プログラム一覧<span class="material-symbols-outlined f14 align-middle ml-1">open_in_new</span></p>
                                    </div>
                                </div>
                            @elseif ($currentTime > $ondemandEndDate)
                            {{-- オンデマンド終了後 --}}
                                <p class="text-center mt-4">配信は終了しました。<br>ご視聴いただきありがとうございました。</p>
                                <p class="text-center mt-5 f14">領収書・参加証につきましては<br>下記よりダウンロードいただけます。</p>
                            @else
                            {{-- 当日配信画面 --}}
                                <div class="row my-3 mx-md-3">
                                    <div class="col-12 col-md-6 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_a') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">Room A</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-6 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_b') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">Room B</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-6 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_c') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">Room C</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-6 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_d') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">Room D</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-6 mx-auto">
                                        <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                            href="{{ url('/live_e') }}">
                                            <h2 class="m-0">
                                                <span class="material-icons align-middle">ondemand_video</span>
                                                <span class="align-middle ml-2">Room E</span>
                                            </h2>
                                        </a>
                                    </div>
                                    <!--更新メモ：3日目以降にルームを表示-->
                                    @php
                                        $thirdDate = '2025-06-26';
                                    @endphp
                                    @if (date('Y-m-d') >= $thirdDate)
                                        <div class="col-12 col-md-6 mx-auto">
                                            <a class="btn btn-hover bg-sub-color text-white w-100 py-3 my-3"
                                                href="{{ url('/live_f') }}">
                                                <h2 class="m-0">
                                                    <span class="material-icons align-middle">ondemand_video</span>
                                                    <span class="align-middle ml-2">Room F</span>
                                                </h2>
                                            </a>
                                        </div>
                                    @else
                                        <div class="col-12 col-md-6 mx-auto">
                                            <a class="btn bg_gray_200 text-white w-100 py-3 my-3"
                                                href="{{ url('/live_f') }}" style="pointer-events: none">
                                                <h2 class="m-0">
                                                    <span class="material-icons align-middle">ondemand_video</span>
                                                    <span class="align-middle ml-2">Room F</span>
                                                </h2>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <div class="row">
                                <div class="col-10 col-md-6 mx-auto">
                                    @if (Carbon\Carbon::now()->lt($date_set->event_day))
                                        @if ($user->payment == 1)
                                            <div class="my-4"><a class="btn btn-hover border-main-color text-main-color bg-white w-100"
                                                    href="{{ url('/receipt') }}">領収書ダウンロードページ ></a></div>
                                        @endif
                                    @else
                                        @if ($user->payment == 1)
                                            <div class="my-3"><a class="btn border-main-color text-main-color bg-white w-100"
                                                    href="{{ url('/receipt') }}">領収書ダウンロードページ ></a></div>
                                        @endif
                                        @if ($prize_btn)
                                            <div class="my-3"><a class="btn btn-hover border-main-color text-main-color bg-white w-100"
                                                    href="{{ url('/pdf') }}">参加証ダウンロード ></a></div>
                                            @if ($user->work_category == 3)
                                                <div class="my-3"><a class="btn btn-hover border-main-color text-main-color bg-white w-100"
                                                        href="/img/attendance_certification_2025.pdf">出席証明書ダウンロード ></a>
                                                </div>
                                            @endif
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    {{-- Stripeの新しいJSライブラリを読み込み --}}
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        function loggedUser() {
            window.localStorage.setItem('loggedUser', $('#logged_user').text());
        }
        loggedUser();

        // フラッシュメッセージを5秒後に自動的に消す
        setTimeout(function () {
            const flashMessage = document.getElementById('flash-message');
            if (flashMessage) {
                flashMessage.remove();
            }
        }, 5000);

        // Stripe決済の処理
        document.addEventListener('DOMContentLoaded', function () {
            // Stripe公開キーの設定
            const stripe = Stripe('{{ env('STRIPE_KEY') }}');
            let elements;

            const planId = "1"; // デフォルトはプランID 1

            // PaymentIntentを作成する関数
            async function initialize() {
                const form = document.getElementById('payment-form');
                if (!form) return;

                try {
                    // サーバーからclientSecretを取得
                    const response = await fetch(`/create-payment-intent/${planId}`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });

                    const { clientSecret, price } = await response.json();

                    // 料金表示を更新
                    document.getElementById('price-display').textContent = `${price}円`;

                    // Stripe Elementsを初期化
                    elements = stripe.elements({
                        clientSecret,
                        appearance: {
                            theme: 'stripe',
                            variables: {
                                colorPrimary: '#0d6efd',
                            }
                        }
                    });

                    // PaymentElementを作成して表示
                    const paymentElement = elements.create("payment");
                    paymentElement.mount("#payment-element");

                    // フォームの送信イベントリスナーを設定
                    form.addEventListener("submit", handleSubmit);
                } catch (error) {
                    console.error("初期化エラー:", error);
                    showMessage("支払いの初期化に失敗しました。ページを更新して再試行してください。");
                }
            }

            // フォーム送信処理
            async function handleSubmit(e) {
                e.preventDefault();
                setLoading(true);

                const { error: submitError } = await elements.submit();
                if (submitError) {
                    showMessage(submitError.message);
                    setLoading(false);
                    return;
                }

                // 決済を確定
                const { error, paymentIntent } = await stripe.confirmPayment({
                    elements,
                    confirmParams: {
                        return_url: "{{ route('payment.complete') }}", // 成功時のリダイレクト先
                    },
                    redirect: "if_required"
                });

                if (error) {
                    // エラーの表示
                    showMessage(error.message);
                    setLoading(false);
                } else if (paymentIntent && paymentIntent.status === 'succeeded') {
                    // 支払い成功
                    // サーバーに決済完了を通知
                    const response = await fetch(`/payment-complete/${planId}`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({
                            payment_intent_id: paymentIntent.id
                        })
                    });

                    if (response.ok) {
                        // 成功時の処理
                        window.location.reload();
                    } else {
                        // エラー処理
                        const data = await response.json();
                        showMessage(data.message || "決済処理に失敗しました。");
                        setLoading(false);
                    }
                }
            }

            // エラーメッセージの表示
            function showMessage(messageText) {
                const messageContainer = document.getElementById("payment-message");
                messageContainer.classList.remove("d-none");
                messageContainer.textContent = messageText;

                setTimeout(function () {
                    messageContainer.classList.add("d-none");
                    messageContainer.textContent = "";
                }, 8000);
            }

            // 送信ボタンのローディング状態を切り替え
            function setLoading(isLoading) {
                const submitButton = document.getElementById("submit-button");
                const spinner = document.getElementById("spinner");
                const buttonText = document.getElementById("button-text");

                if (isLoading) {
                    submitButton.disabled = true;
                    spinner.classList.remove("d-none");
                    buttonText.textContent = "処理中...";
                } else {
                    submitButton.disabled = false;
                    spinner.classList.add("d-none");
                    buttonText.textContent = "決済する";
                }
            }

            // 初期化を実行
            initialize();
        });
    </script>
@endsection