@extends('layouts.app')

@section('content')
    <!-- 配信画面避難用：RoomA -->
    <div class="w-full px-4 lg:px-0 lg:w-4/5 mx-auto pt-20 lg:pt-24 pb-8">
        <div id="log-movie-page"></div>
        <div id="log-movie-page-a"></div>
        {{-- <div id="log-movie-page-b-1"></div>
        <div id="log-movie-page-b-2"></div> --}}
        <div id="event_day_flg-{{ $event_day_flg }}"></div>

        <!---見出し--->
        <h2 class="font-bold">第15回豊橋ライブデモンストレーションコース</h2>
        <!--タイトル読み込み-->
        <div class="text-xl md:text-2xl font-bold my-4" id="event_title_output"></div>
        <!--タイトル読み込み ここまで-->

        @if ($user->user_role == 1)
            <div class="border-y bg-gray-100 p-4 mb-4">
                <div class="form-group">
                    <p class="font-bold">※Adminだけここ見れます</p>
                    <textarea id="event_title" row="3" class="form-control bg-white w-full mt-2"></textarea>
                </div>
                <div class="text-center mt-2">
                    <button id="event_title_send" class="bg-gray-600 text-white rounded px-4 py-1">送信</button>
                    <button id="event_title_delete"
                        class="bg-white text-gray-600 border border-gray-600 rounded px-4 py-1">削除</button>
                </div>
            </div>
        @endif
        <!---見出し ここまで--->

        <!---ルーム--->
        <!--更新メモ：current_roomとother_roomの付け替えだけでOK-->
        <div class="flex flex-wrap items-strech">
            <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_a current_room room_btn active p-2"
                    href="/live_a">Room A</a></div>
            <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_b other_room room_btn active p-2"
                    href="/live_b">Room B</a></div>
            <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_c other_room room_btn active p-2"
                    href="/live_c">Room C</a></div>
            <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_d other_room room_btn active p-2"
                    href="/live_d">Room D</a></div>
            <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_e other_room room_btn active p-2"
                        href="/live_e">Room E</a></div>
            <!--更新メモ：3日目以降にルームを表示-->
            @php
                $thirdDate = '2025-06-26';
            @endphp
            @if (date('Y-m-d') >= $thirdDate)
                <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_f other_room room_btn active p-2"
                        href="/live_f">Room F</a></div>
            @else
                <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a
                        class="other_room room_btn p-2 border-y text-gray-300 pointer-events-none" href="/live_f">Room F</a>
                </div>
            @endif
            <!--更新メモ：最終日しか出ないルームを設定-->
            {{-- @php
                $lastDate = '2025-06-28';
            @endphp
            @if (date('Y-m-d') >= $lastDate)
                <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a class="btn_room_f other_room room_btn active p-2"
                        href="/live_f">Room F</a></div>
            @else
                <div class="w-1/2 sm:w-1/3 lg:w-1/6 mt-1"><a
                        class="other_room room_btn p-2 border-y text-gray-300 pointer-events-none" href="/live_f">Room F</a>
                </div>
            @endif --}}
        </div>
        <!--ルーム ここまで-->

        <!--更新用メモ：ここから先は全ルーム共通-->


        <!--タイトルと概要取得用-->
        {{-- <div class="h-0" id="log-movie-page-a"></div>
        <div id="event_day_flg-3" style="display: none;"></div> --}}
        <!--タイトルと概要取得用 ここまで-->

        <!--エラー表示-->
        <noscript>
            <p>JavaScriptが無効になっています。</p>
            <p>視聴に問題が起こる可能性があるため、有効にしてください。</p>
        </noscript>
        <div class="bg-red-50 border-2 border-red-400 rounded text-red-600 px-4 py-2 my-2" id="log_flg"
            style="display: none;">通信環境が悪くなっています。リロードしてください。</div>
        <!--エラー表示 ここまで-->

        <!--動画とチャット-->
        <div class="flex flex-wrap mt-2">
            {{--  <div class="w-full lg:w-2/3 hidden">
                    <div class="embed-responsive embed-responsive-16by9"><iframe allowfullscreen="" class="embed-responsive-item" src="https://vimeo.com/event/2641192/embed"></iframe></div>
                </div>  --}}

            <!--NTT動画-->
            <div class="w-full lg:w-3/4">
                <div class="embed_video"><iframe src="https://ovp-player.smartstream.ne.jp/camcast6ch/output/player/563ff4d80c0948eb80d544f57ab3a8ea/index.html?mp=efc2b7167a3545e7b8b1e81e87cd557f&ts=1750408081" width="960"  height="540" frameborder="0" allowfullscreen></iframe></div>
            </div>
            <!--NTT動画 ここまで-->

            <!--vimeoチャット-->
            <div class="w-full lg:w-1/4 flex flex-col">
                <div
                    class="order-2 lg:order-1 border border-red-500 rounded text-red-500 text-xs py-1 px-2 mt-2 lg:mt-0 mb-2 lg:ml-2">
                    チャットの起動には少し時間がかかることがあります。お待ちください。
                </div>
                <div class="order-1 lg:order-2 w-full h-96 lg:h-full lg:pl-2">
                <iframe src="https://vimeo.com/live/interaction_tools/live_event/5189665?auth_room_unlisted_hash=ac97d8d2f7&amp;theme=light" width="100%" height="100%" frameborder="0"></iframe></div>
                <div class="chat-menu-disabled"></div>
            </div>
            <!--vimeoチャット ここまで-->

            <!--ビデオグ動画（予備）-->
            <!-- <div class="w-full lg:w-2/3">
                <div class="embed_video"><iframe allowfullscreen="" frameborder="0" height="100%" scrolling="no" src="#" width="100%"></iframe></div>
                </div> --><!--ビデオグ動画（予備） ここまで-->
            <!--ビデオグチャット（予備）-->
            <!-- <div class="w-full lg:w-1/3"><iframe class="comment" frameborder="0" height="100%" src="#" style="min-height: 400px;" width="100%"></iframe></div> -->
            <!--ビデオグチャット（予備） ここまで-->
        </div>
        <!--動画とチャット ここまで-->

        <!--インフォメーション-->
        <div class="flex flex-wrap text-sm lg:text-base items-strech mt-2">
            <div class="w-1/2 lg:w-1/4 bg-gray-50"><a
                    class="block h-full p-2 sm:p-1 text-center border-t border-b hover:bg-gray-300 hover:text-black hover:no-underline"
                    href="https://www.toyohashilive.org/2025/timetable/?inflow=room_a" rel="noopener noreferrer"
                    target="_blank">Time Table<span class="material-icons text-sm pl-1 nav-icon">open_in_new</span></a>
            </div>

            <div class="w-1/2 lg:w-1/4 bg-gray-50"><a
                    class="block h-full h-full p-2 sm:p-1 text-center border-t border-b hover:bg-gray-300 hover:text-black hover:no-underline"
                    href="https://www.toyohashilive.org/2025/program_detail/?inflow=room_a" rel="noopener noreferrer"
                    target="_blank">プログラム詳細<span class="material-icons text-sm pl-1 nav-icon">open_in_new</span></a></div>

            <div class="w-1/2 lg:w-1/4 bg-gray-50"><a
                    class="block h-full p-2 sm:p-1 text-center lg:border-t border-b hover:bg-gray-300 hover:text-black hover:no-underline"
                    href="https://www.toyohashilive.org/wp/wp-content/uploads/2025/06/2025toyohashilive_cases.pdf?inflow=room_a"
                    rel="noopener noreferrer" target="_blank">症例集<span
                        class="material-icons text-sm pl-1 nav-icon">open_in_new</span></a></div>

            <div class="w-1/2 lg:w-1/4 bg-gray-50"><a
                    class="block h-full p-2 sm:p-1 text-center lg:border-t border-b hover:bg-gray-300 hover:text-black hover:no-underline"
                    href="https://www.toyohashilive.org/?inflow=room_a" rel="noopener noreferrer"
                    target="_blank">公式サイトトップ<span class="material-icons text-sm pl-1 nav-icon">open_in_new</span></a>
            </div>
        </div>
        <!--インフォメーション ここまで-->

        <!--概要文-->
        {{-- <div class="pt-4 pb-1 md:flex justify-between">
            <div class="font-bold text-lg">【概要】</div>
            <div class="text-sm">※内容や配信時間は変更になる場合があります。</div>
        </div> --}}
        <div class="pt-4 pb-8" id="summary_output"></div>
        <!--概要文 ここまで-->
        @if ($user->user_role == 1)
            <div class="border-y p-4 bg-gray-100 mb-4">
                <div class="form-group">
                    <p class="font-bold">※Adminだけここ見れます</p>
                    <textarea id="summary" row="3" class="form-control bg-white w-full h-24 mt-2"></textarea>
                </div>
                <div class="text-center mt-2">
                    <button id="summary_send" class="bg-gray-600 text-white rounded px-4 py-1">送信</button>
                    <button id="summary_delete"
                        class="bg-white text-gray-600 border border-gray-600 rounded px-4 py-1">削除</button>
                </div>
            </div>
        @endif

        <!--プログラム詳細-->
        <div id="pgdetail"></div>
        <!--プログラム詳細 ここまで-->


        <!--注意書き-->
        <div class="border-y text-sm py-4 px-2 my-2">
            <p class="font-bold mb-2">ご注意</p>
            <p class="mb-2">本番組は東海ライブ研究会の著作物です。<br />
                著作権法上、許可なく複製、上映、公衆送信、展示、頒布、譲渡、貸与することは禁じられています。<br />
                違反した場合には、著作権法の規定により罰せられ、損害賠償義務を負う場合があります。<br />
                これらの不正行為を発見した場合には、すみやかに事務局までご連絡ください。</p>
            <p>※研修や教育目的であっても、参加料金をお支払いただいた方以外に視聴させることは、著作権の侵害となる場合があります。<br>このような場合には、あらかじめ事務局にご相談ください。</p>
        </div>
        <!--注意書き ここまで-->

        <div class="text-right text-gray-400 pr-2">
            <a href="/home"><span class="material-icons text-base pr-1 nav-icon">home</span>Homeへ</a>
        </div>
    </div>


    <!--以下scriptのみ-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
    <script>
        function comment() {
            'use strict';
            //Firebaseの初期化
            firebase.initializeApp({
                databaseURL: "https://tcross-jbc.firebaseio.com",
                storageBucket: 'gs://tcross-jbc.appspot.com',
                apiKey: "AIzaSyB3Fn2Ecx5HDHdThcN18fAGS5SAij71Jkg",
                authDomain: "https://tcross-jbc.firebaseapp.com",
            });
            const database = firebase.database();
        }
        comment();
    </script>
    <script type="text/javascript">
        //「もっと見る」ボタンの処理
        $(function() {
            $(".detail").hide()
            $(".more_button").on("click", function() {
                $(this).prev().slideToggle();
                if ($(this).html() ===
                    'もっと見る<span class="material-icons text-lg font-normal pl-1">expand_more</span>') {
                    $(this).html(
                        '閉じる<span class="material-icons text-lg font-normal pl-1">expand_less</span>');
                } else {
                    $(this).html(
                        'もっと見る<span class="material-icons text-lg font-normal pl-1">expand_more</span>');
                }
            });
        });


        //プログラム詳細の生成
        ////要更新 IDはイベント担当へ確認
        const currentRoomId = "38";

        ////以下更新不要

        //今日の日付を取得して書式を整える
        const today = new Date();

        const year = today.getFullYear();
        const month = ("00" + (today.getMonth() + 1)).slice(-2);
        const date = ("00" + today.getDate()).slice(-2);

        //本番用の日付定義
        const current = year + '-' + month + '-' + date;
        //テスト用の日付定義
        //const current = "2025-06-28";

        //読み込むjsonを定義
        const url = "https://pgdetail.j-bc.org/api/courses?date=" + current;

        let html = [];
        let pdf = [];

        $.ajaxSetup({
            async: false,
        });
        $.getJSON(url, (data) => {
            attr = "#pgdetail";
            html = "";

            html += '<h4 class="font-bold text-lg pt-1 pb-2 px-2 sm:px-4 border-t bg-gray-200">プログラム</h4>';
            html += '<div class="pb-6">';
            for (let i = 0; i < data.length; i++) {
                if (data[i].room_id == currentRoomId) {
                    start_at = new Date(data[i].start_at.replace(/-/g, "/"));
                    end_at = new Date(data[i].end_at.replace(/-/g, "/"));

                    html += `<div class="border-b border-solid border-gray-300 bg-gray-50 pt-4 pb-2 px-2 sm:px-4">`;

                    html += '<div class="flex flex-wrap">';
                    html += '<div class="mr-4">';
                    html +=
                        `${start_at.getHours()}:${start_at.getMinutes().toString().padStart(2, "0")} - ${end_at.getHours()}:${end_at.getMinutes().toString().padStart(2, "0")}`;
                    html += '</div>';

                    html += '<div class="mr-4 flex-1">';
                    html += '<div class="w-full flex flex-wrap">';
                    html += `<h5 class="font-bold mb-1 mr-2">${data[i].title}</h5>`;
                    if (data[i].subtitle.match(/\S/g)) {
                        html +=
                            `<div class="font-bold">${data[i].subtitle.replace(/\n/g, "<br>")}</div>`; //空欄だったら表示されない
                    }
                    html += '</div>';

                    if (data[i].sponsored_by.match(/\S/g)) {
                        html +=
                            `<div class="text-sm">${data[i].sponsored_by.replace(/\n/g, '<br>')}</div>`; //空欄だったら表示されない
                    }



                    if (data[i].content.match(/\S/g) || data[i].commentator.match(/\S/g) || data[i].sponsored_by
                        .match(/\S/g) || (data[i].pdf !== null && data[i].pdf.length > 2) || (data[i].url !==
                            null && data[i].url.length > 2)) {
                        html += '<div class="flex flex-wrap justify-end">';
                        html += '<div class="detail w-full text-sm border-t mt-4">'; //空欄だったら表示されない
                    }

                    if (data[i].content.match(/\S/g)) {
                        html +=
                            `<div class="pt-4 mb-4">${data[i].content.replace(/\n/g, '<br>')}</div>`; //空欄だったら表示されない
                    }
                    if (data[i].commentator.match(/\S/g)) {
                        html +=
                            `<div class="border-t border-solid border-gray-300 pt-6 mb-2">${data[i].commentator.replace(/\n/g, '<br>')}</div>`; //空欄だったら表示されない
                    }

                    if (data[i].pdf !== null && data[i].pdf.length > 2) {
                        pdf[i] = JSON.parse(data[i].pdf)[0].download_link;
                        html +=
                            `<div class="text-right pt-2"><a href="https://pgdetail.j-bc.org/storage/${pdf[i]}" class="inline-block border border-solid rounded py-1 px-4 bg-gray-500 text-white" target="_blank">詳しくはこちら<i class="fas fa-angle-right 2x pl-2"></i></a></div>`; //空欄だったら表示されない
                    }
                    if (data[i].url !== null && data[i].url.length > 2) {
                        // html += '<div class="pt-3 text-md-right">このセッションでは事前に、<br class="pc">各施設への質問を受け付けています。</div>';
                        html +=
                            `<div class="text-right pt-2"><a href="${data[i].url}" class="inline-block border border-solid rounded py-1 px-4 bg-gray-500 text-white" target="_blank">詳しくはこちら<i class="fas fa-angle-right 2x pl-2"></i></a></div>`; //空欄だったら表示されない
                    }

                    if (data[i].content.match(/\S/g) || data[i].commentator.match(/\S/g) || data[i].sponsored_by
                        .match(/\S/g) || (data[i].pdf !== null && data[i].pdf.length > 2) || (data[i].url !==
                            null && data[i].url.length > 2)) {
                        html += '</div>';
                        html +=
                            `<button type="button" class="more_button text-sm flex items-center">もっと見る<span class="material-icons text-lg font-normal pl-1">expand_more</span></button>`;
                        html += '</div>';
                    }

                    html += '</div>';
                    html += '</div>';


                    html += "</div>";
                }
            }
            html += "</div>";

            $(attr).append(html);
        });
        $.ajaxSetup({
            async: true,
        });
    </script>
    <script type="text/javascript" src="{{ asset('js/note.js') }}?20210709"></script>
    <script type="text/javascript" src="{{ asset('/js/common.js') }}"></script>
@endsection