@extends('layout.master')
@section('title', '首頁')
@section('content')

<div class="bwarp">
    <div class="b_txt col-12">
        <h1>{{ $title }}</h1>
        <a href="#" onclick="homeBtn()" id="homeBtn" class="homeBtn col-2"><img id="homeIMG" src="{{ asset('images/首頁按鈕.png') }}" class="img-fluid img-fluid-50" alt=""></a>
        <a href="#" onclick="closeMenu()" id="closeBtn" class="closeBtn col-2" style="display:none;"><img id="closeIMG" src="{{ asset('images/關閉.png') }}" class="img-fluid img-fluid-50" alt=""></a>
        <a href="#" onclick="switchMusic()" class="musicBtn col-2"><img src="{{ asset('images/音樂符號.png') }}" class="img-fluid" alt="" id="musicBtn"></a>
    </div>
    
    <div class="container">
        <div class="h_fun row" id="h_fun">

            <!-- <div class="col-6 position-relative winnBoxK">
                <img src="{{ asset('images/中獎欄位.png') }}" class="img-fluid" alt="">
                <div class="winnBox">
                    <img src="{{ asset('images/0.png') }}" class="img-fluid" alt="">
                    <img src="{{ asset('images/1.png') }}" class="img-fluid" alt="">
                    <img src="{{ asset('images/2.png') }}" class="img-fluid" alt="">
                    <img src="{{ asset('images/3.png') }}" class="img-fluid" alt="">
                    <img src="{{ asset('images/4.png') }}" class="img-fluid" alt="">
                    <img src="{{ asset('images/5.png') }}" class="img-fluid" alt="">
                </div>
                <img src="{{ asset('images/重抽.png') }}" class="restarImg disabled" alt="">
            </div> -->

        </div>
    </div>
    
    <div class="pagination" id="pagination">
        <!-- 分頁按鈕 -->
    </div>

    <div class="row h_footer">
        <a href="#" onclick="BingoMenu()" id="BingoLink" class="col-4 position-relative BingoLink">
            <div class="img-container">
                <img src="{{ asset('images/選擇獎項.png') }}" id="prizeImg" class="img-fluid" alt="">
                <span id="awardName"></span>
            </div>    
        </a>
        <a href="#" class="col-6 position-relative">
            <div class="img-containers">
                <img src="{{ asset('images/獎品欄位2.png') }}" class="img-fluid" alt="">
                <span id="prizeName" style="display:none;"></span>
            </div>
        </a>
        <a href="#" id="startBtn" class="col-2 position-relative startBtn ">
            <div class="row p-0 position-relative" style="display:none;" id="PrizeTotalMenu">
                <img src="{{ asset('images/中獎數.png') }}" class="p-0 img-fluid  w-50" alt="">
                <img src="{{ asset('images/1.png') }}" class="p-0 img-fluid" style="width:15%;height:70%;margin-top: 5%;" alt="">
                <img src="{{ asset('images/0.png') }}" class="p-0 img-fluid" style="width:15%;height:70%;margin-top: 5%;" alt="">
                <img src="{{ asset('images/0.png') }}" class="p-0 img-fluid" style="width:15%;height:70%;margin-top: 5%;" alt="">
            </div>
            
            
            <span id="prizeTotal" style="display:none;"></span>
        </a>
    </div>

    <!-- 獎項選擇 -->
    <div class="BingoMenu" id="BingoMenu" style="display:none;">
        <div class="prizeMenu" id="prizeMenu">
            @forelse($Awards ?? [] as $Award)
            <div class="item"><a href="#" onclick="prizeApi('{{$ActivityGuid}}','{{$Award->AwardName}}','{{$Award->LightSec}}','{{$Award->PrizeName}}','{{$Award->PrizeTotal}}','{{$StartRange}}','{{$EndRange}}','{{$Award->ActivityGuid}}','{{$key_number}}')">{{$Award->AwardName}}</a></div>
            @empty

            @endforelse
        </div>
        <button type="button" id="prev" onclick="prevPage()"><</button>
        <button type="button" id="next" onclick="nextPage()">></button>
    </div>
</div>

<!-- 是否重抽畫面 -->
<div class="reStarbgk" id="reStarbgk" style="display:none;">
    <div class="reStarbgkBTN">
        <a href="#" id="cancelBtn"><img src="{{ asset('images/取消.png') }}" alt=""></a>
        <a href="#" id="confirmBtn"><img src="{{ asset('images/確定.png') }}" alt=""></a>
    </div>
</div>

<!-- 中獎畫面 -->
<div class="aniStarbgk" id="aniStarbgk" style="display: none;">
    <div class="aniStarbgkBTN">
        <img src="{{ asset('images/中獎.png') }}" class="img-fluid" alt="">
        <p id="ani_title" class="ani_title">恭喜 <span id="ani_awardName" class="text-warning"></span> 中獎</p>
        <p id="restar_title" class="restar_title" style="display: none;">共有 <span id="restar_awardName" class="text-warning">1</span> 位 重新抽獎</p>
    </div>
</div>

<input type="hidden" id="key_sec">
<input type="hidden" id="key_StartRange">
<input type="hidden" id="key_EndRange">
<input type="hidden" id="key_ActivityGuid">
<input type="hidden" id="awardName_key">
<input type="hidden" id="key_number">

<audio id="bingo-sound" src="{{ asset('music/中獎音樂.m4a') }}"></audio>
<audio id="bg-sound" src="{{ asset('music/背景音樂.m4a') }}" loop></audio>
<audio id="ku-sound" src="{{ asset('music/鼓聲.m4a') }}"></audio>
<audio id="jump-sound" src="{{ asset('music/彈跳.m4a') }}"></audio>
<audio id="click-sound" src="{{ asset('music/點擊.m4a') }}"></audio>

@if (!empty($INDEX_VIDEO))
    <input type="hidden" value="{{ asset($INDEX_VIDEO) }}" id="INDEX_VIDEO">
@else
    <input type="hidden" value="" id="INDEX_VIDEO">
@endif
@if (!empty($INDEX_URL))
    <input type="hidden" value="{{ asset($INDEX_URL) }}" id="INDEX_URL">
@else
    <input type="hidden" value="" id="INDEX_URL">
@endif
@if (!empty($BINGO_URL))
    <input type="hidden" value="{{ asset($BINGO_URL) }}" id="BINGO_URL">
@else
    <input type="hidden" value="" id="BINGO_URL">
@endif
@if (!empty($LOTTERY_URL))
    <input type="hidden" value="{{ asset($LOTTERY_URL) }}" id="LOTTERY_URL">
@else
    <input type="hidden" value="" id="LOTTERY_URL">
@endif
@if (!empty($LOTTERY_MP3))
    <input type="hidden" value="{{ asset($LOTTERY_MP3) }}" id="LOTTERY_MP3">
@else
    <input type="hidden" value="" id="LOTTERY_MP3">
@endif
@if (!empty($WINN_URL))
    <input type="hidden" value="{{ asset($WINN_URL) }}" id="WINN_URL">
@else
    <input type="hidden" value="" id="WINN_URL">
@endif
@if (!empty($WINN_MP3))
    <input type="hidden" value="{{ asset($WINN_MP3) }}" id="WINN_MP3">
@else
    <input type="hidden" value="" id="WINN_MP3">
@endif

<script>
    var restarCount = 0;
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    
    const divPerPage = 10;
    const h_fun = $('.h_fun');
    const totalDivs = h_fun.find('.winnBox').length;
    let currentPage = 1;

    //中獎動畫
    function PrizeAnimation(restar){
        if(restar == 'restar'){
            //重新抽獎
            $('#restar_title').show();
            $('#restar_awardName').text(restarCount);
        }else{
            $('#restar_title').hide();
        }
        
        let awardName = $('#awardName_key').val(); //獎項名稱
        $('#ani_awardName').text(awardName);
        $('#ani_title').show();
        $('#aniStarbgk').show();
        $('body').css("background-image","url('{{ asset('images/中獎背景.gif') }}')")

        setTimeout(function() {
            $('#aniStarbgk').hide();
            $('body').css("background-image","url('{{ asset('images/預設背景.jpg') }}')")
        }, 3000); 
        //撥放音樂未做
        var audio = document.getElementById('bingo-sound');
        audio.play();
    }
    
    // 翻頁函數
    function showPageDIV(pageNumber) {
        var audio = document.getElementById('click-sound');
        audio.play();
        const startIndex = (pageNumber - 1) * divPerPage;
        const endIndex = startIndex + divPerPage;
        h_fun.find('.winnBoxK').hide(); // 隱藏所有 .winnBoxK 元素
        h_fun.find('.winnBoxK').slice(startIndex, endIndex).show(); // 顯示指定範圍內的 .winnBoxK 元素
    }

     // 生成分頁按鈕
     function generatePagination(totalItems) {
        const totalPages = Math.ceil(totalItems / divPerPage);
        const pagination = $('#pagination');
        pagination.empty(); // 清空現有的按鈕

        if (totalPages > 1) {
            const prevButton = $('<button>').addClass('prev_page').text('<');
            const nextButton = $('<button>').addClass('next_page').text('>');

            prevButton.on('click', function() {
                if (currentPage > 1) {
                    currentPage--;
                    showPageDIV(currentPage);
                }
            });

            nextButton.on('click', function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    showPageDIV(currentPage);
                }
            });

            pagination.append(prevButton);
            pagination.append(nextButton);
        }
    }

    //翻頁功能
    $(document).ready(function() {
        const itemsPerPage = 4;
        const $items = $('.item');
        let currentPage = 0;

        function showPage(page) {
            $items.hide();
            $items.slice(page * itemsPerPage, (page + 1) * itemsPerPage).show();
        }

        $('#prev').on('click', function() {
            currentPage = Math.max(currentPage - 1, 0);
            showPage(currentPage);
        });

        $('#next').on('click', function() {
            currentPage = Math.min(currentPage + 1, Math.ceil($items.length / itemsPerPage) - 1);
            showPage(currentPage);
        });

        // 初始化顯示第一頁
        showPage(currentPage);
    });

    //選擇獎項
    function BingoMenu(){
        var audio = document.getElementById('click-sound');
        audio.play();
        //20241012 YunWang996 ajax重新整理資料
        prizeMenuShow();
        //$('#BingoMenu').show();
        $('#closeBtn').show();
    }

    const itemsPerPage = 24;
        let currentPageDIV = 0;
        let items;

        function showPage(page) {
            items.forEach((item, index) => {
                item.style.display = 'none';
                if (index >= page * itemsPerPage && index < (page + 1) * itemsPerPage) {
                    item.style.display = 'block';
                }
            });
        }

        function nextPage() {
            if ((currentPageDIV + 1) * itemsPerPage < items.length) {
                currentPageDIV++;
                console.log('下一頁:', currentPageDIV);
                showPage(currentPageDIV);
            }
        }

        function prevPage() {
            if (currentPageDIV > 0) {
                currentPageDIV--;
                console.log('上一頁:', currentPageDIV);
                showPage(currentPageDIV);
            }
        }

    function prizeMenuShow() {
            let ActivityGuid = '{{$ActivityGuid}}';
            let htmlcode = "";
            $.ajax({
                url: "{{ route('AwardList') }}",
                method: 'POST',
                async: false,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: JSON.stringify({
                    ActivityGuid: ActivityGuid,
                }),
                success: function(data) {
                    console.log('獲取的數據:', data);
                    for (let i = 0; i < data.Award.length; i++) {
                        let rowdata = data.Award[i];
                        console.log('AwardName:' + rowdata.AwardName + 'PrizeTotal:' + parseInt(rowdata.PrizeTotal) + ',rowdata.total:' + parseInt(rowdata.total));
                        if(parseInt(rowdata.total) >= parseInt(rowdata.PrizeTotal)){
                            //alert('123');
                            htmlcode += `<div class="item" style="width:16%;"><a href="#" style="color:#55ed06;" onclick="prizeApi('${rowdata.ActivityGuid}','${rowdata.AwardName}','${rowdata.LightSec}','${rowdata.PrizeName}','${rowdata.PrizeTotal}','{{ $StartRange }}','{{ $EndRange }}','${rowdata.ActivityGuid}','{{$key_number}}')">${rowdata.AwardName}</a></div>`;
                        }else{
                            htmlcode += `<div class="item" style="width:16%;"><a href="#" onclick="prizeApi('${rowdata.ActivityGuid}','${rowdata.AwardName}','${rowdata.LightSec}','${rowdata.PrizeName}','${rowdata.PrizeTotal}','{{ $StartRange }}','{{ $EndRange }}','${rowdata.ActivityGuid}','{{$key_number}}')">${rowdata.AwardName}</a></div>`;
                        }
                    }
                    $('#prizeMenu').empty().append(htmlcode);
                    currentPageDIV = 0;
                    items = document.querySelectorAll('.item');
                    console.log('當前項目數量:', items.length);
                    showPage(currentPageDIV);
                    $('#BingoMenu').show();
                    $('#closeBtn').show();
                },
                error: function() {
                    alert('發生錯誤，請重試');
                }
            });
        }

    //關閉獎項
    function closeMenu(){
        $('#BingoMenu').hide();
        $('#closeBtn').hide();
    }

    //開始抽獎按鈕
    function Start(){
        var audio = document.getElementById('click-sound');
        audio.play();
        //需判斷是否選取選項了
        let awardName_key = $('#awardName_key').val();
        if(awardName_key == "" || awardName_key == undefined){
           alert('獎項未選取');
        }else{
            let StartRangeINT = parseInt($('#key_StartRange').val());
            let EndRangeINT = parseInt($('#key_EndRange').val());

            let StartRange = $('#key_StartRange').val();
            let EndRange = $('#key_EndRange').val();

            let prizeTotal = parseInt($('#prizeTotal').text());
            let key_number = parseInt($('#key_number').val());
            let ActivityGuid = $('#key_ActivityGuid').val();
            let sec = $('#key_sec').val();
            if(sec == undefined){
                sec = 3000;
            }else{
                sec = parseInt(sec) * 1000; //轉換為秒數
            }
            //簡報11頁邏輯在此判斷
            /*
            1.抽獎數量必須要大於中獎數量，否則程式無法啟動 v
            2.如果中獎圖/抽獎背景/中獎背景沒有上傳圖片，則畫面顯示預設圖片 
            3.當跑燈位數與抽獎採樣不符合時，則程式無法啟動 v
            4.每個場次抽獎只能給一名中獎，不得讓一個號碼得到兩次 -> 變換號碼時已處理
            5.當前端啟動抽獎程式時，以上欄位無法編輯，只能新增獎項 v
            */
            //alert('抽獎數量:' + (EndRange - StartRange) +',抽獎採樣結尾:'+EndRange+',抽獎採樣開頭'+ StartRange+',中獎數量:' + prizeTotal);
            //alert('StartRange.length:' + StartRange.length + ',EndRange.length:' + EndRange.length + ',key_number:' + key_number);
            
            let awardName = $('#awardName').text();//獎項名稱
            let itemPrizeTotal_val = itemPrizeTotal(ActivityGuid,awardName);//取得目前獎項還有多少獎項可以抽
            if((EndRangeINT - StartRangeINT) < prizeTotal){
                alert('抽獎數量小於中獎數量');
            }else if(StartRange.length != parseInt(key_number) || EndRange.length != parseInt(key_number)){
                alert('跑燈位數與抽獎採樣不符合');
            }else if(parseInt(itemPrizeTotal_val) >= prizeTotal){
                //查詢目前已抽出該獎項還有多少獎
                alert('該獎項已抽取完畢');
            }else if(((EndRangeINT - StartRangeINT) - parseInt(itemPrizeTotal_val)) < prizeTotal){
                //所有可抽範圍-已抽範圍>需抽出數量
                alert('可抽獎數量不足');
            }else{
                initialDraw(sec, StartRangeINT, EndRangeINT, ActivityGuid);
            }
            
        }
    }

    function initialDraw(sec, startRange, endRange, ActivityGuid) {
        var totalBoxes = $('.winnBox').length;
        var completedBoxes = 0;
        var allCodes = [];

        $('.winnBox').each(function() {
            var $winnBox = $(this);
            checkDuplicateAndShuffle(sec, startRange, endRange, ActivityGuid, $winnBox, function(codes) {
                allCodes.push(codes);
                completedBoxes++;
                if (completedBoxes === totalBoxes) {
                    // 所有重複檢查完成後，統一調用 shuffleImages 函數
                    console.log('allCodes:' + allCodes);
                    shuffleImages(sec, allCodes.flat(), $('.winnBox'), function() {
                        // 確保所有圖片更換完成後調用 PrizeAnimation
                        PrizeAnimation();
                        //取消重抽按鈕上的disabled
                    $('.restarImg').removeClass('disabled');
                    });
                }
            });
        });
    }


    //取得目前獎項還有多少獎項可以抽
    function itemPrizeTotal(ActivityGuid,awardName){
        let count = "";
        $.ajax({
            url: "{{ route('itemPrizeTotal') }}",
            method: 'POST',
            async: false,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 確保你的 Blade 模板中有這個 meta 標籤
            },
            data: JSON.stringify({
                ActivityGuid: ActivityGuid,
                awardName: awardName,
            }),
            success: function(response) {
                console.log(response);
                count = response.count;
            },
            error: function() {
                alert('發生錯誤，請重試');
            }
        });
        return count;
    }

    function checkDuplicateAndShuffle(sec, startRange, endRange, ActivityGuid, $winnBox, callback) {
        var codes = generateCodes(startRange, endRange); // 生成指定範圍內的數字列表

        $.ajax({
            url: "{{ route('checkDuplicate') }}",
            method: 'POST',
            data: { 
                codes: codes, 
                ActivityGuid: ActivityGuid, 
            },
            success: function(response) {
                if (response.duplicates.length > 0) {
                    // 有重複的數字，重新配對
                    console.log('有重複的數字:', response.duplicates);
                    // 重新生成 codes 並再次檢查
                    checkDuplicateAndShuffle(sec, startRange, endRange, ActivityGuid, $winnBox, callback);
                } else {
                    // 沒有重複的數字，執行回調函數
                    console.log('沒有重複的數字');
                    if (typeof callback === 'function') {
                        callback(codes);
                    }
                }
            }
        });
    }

    //將抽出的號碼存取至資料庫
    function saveCodesToDatabase(codes) {
        let awardName = $('#awardName').text();//獎項名稱
        let key_ActivityGuid = $('#key_ActivityGuid').val(); //活動Guid
        let PrizeNames = $('#prizeName').text(); //獎品名稱
        //alert('PrizeName:' + PrizeNames + ',awardName:' + awardName + ',key_ActivityGuid:' + key_ActivityGuid);
        console.log('saveCodesToDatabase codes:' + codes);
        $.ajax({
            url: "{{ route('saveWinner') }}",
            type: 'POST',
            data: JSON.stringify({
                codes: codes,
                awardName: awardName,
                key_ActivityGuid: key_ActivityGuid,
                PrizeName: PrizeNames,
            }),
            contentType: 'application/json',
            success: function(response) {
                console.log('數據已成功存儲到資料庫');
                console.log(response);
            },
            error: function(xhr, status, error) {
                console.log('存儲數據時發生錯誤');
                console.error(xhr, status, error);
            }
        });
    }

    //將重抽的號碼更新
    function updateCodesInDatabase(codes,originalNumbers) {
        //originalNumbers->原本數字
        let awardName = $('#awardName').text();//獎項名稱
        let key_ActivityGuid = $('#key_ActivityGuid').val(); //活動Guid
        let PrizeNames = $('#prizeName').text(); //獎品名稱
        //alert('PrizeName:' + PrizeNames + ',awardName:' + awardName + ',key_ActivityGuid:' + key_ActivityGuid);
        console.log('updateCodesInDatabase originalNumbers:' + originalNumbers + '->New Code:' + codes);
        $.ajax({
            url: "{{ route('updateWinner') }}",
            type: 'POST',
            data: JSON.stringify({
                codes: codes,
                awardName: awardName,
                key_ActivityGuid: key_ActivityGuid,
                PrizeName: PrizeNames,
                originalNumbers: originalNumbers,
            }),
            contentType: 'application/json',
            success: function(response) {
                console.log('數據已成功更新到資料庫');
                console.log(response);
            },
            error: function(xhr, status, error) {
                console.log('更新數據時發生錯誤');
                console.error(xhr, status, error);
            }
        });
    }

    //重抽
    function reDrawImages($button, $winnBox, originalNumbers, $winnBoxK) {
        console.log('Original Numbers:', originalNumbers);
        // 禁用按鈕以防止重複點擊
        $button.prop('disabled', true);

        // 取得抽獎秒數
        let sec = $('#key_sec').val();
        if (sec == undefined) {
            sec = 3000;
        } else {
            sec = parseInt(sec) * 1000; // 轉換為秒數
        }

        // 發送 AJAX 請求以獲取新的數字
        let key_StartRange = $('#key_StartRange').val();
        let key_EndRange = $('#key_EndRange').val();
        let newCodes = generateCodes(key_StartRange, key_EndRange); // 生成指定範圍內的數字列表
        let ActivityGuid = $('#key_ActivityGuid').val();
        console.log('要重抽的數字 newCodes:' + newCodes);
        $.ajax({
            url: "{{ route('checkDuplicate') }}",
            method: 'POST',
            data: { 
                codes: newCodes, 
                ActivityGuid: ActivityGuid, 
            },
            success: function(response) {
                if (response.duplicates.length > 0) {
                    // 有重複的數字，重新配對
                    console.log('有重複的數字:', response.duplicates);
                    // 重新執行 reDrawImages 函數
                    reDrawImages($button, $winnBox, originalNumbers, $winnBoxK);
                } else {
                    console.log('沒有重複的數字，執行 shuffleImages 函數');
                    reShuffleImages(sec, newCodes, $winnBox, originalNumbers, function() {
                        // 重新啟用按鈕
                        $button.prop('disabled', false);
                        // 執行 PrizeAnimation
                        PrizeAnimation('restar');
                         // 移除 z-index: 9999
                         $winnBoxK.css('z-index', '');
                        // 隱藏彈出視窗
                        $('#reStarbgk').hide();
                    }); // 重新執行 shuffleImages 函數
                }
            },
            error: function() {
                // 重新啟用按鈕
                $button.prop('disabled', false);
                alert('發生錯誤，請重試');
            }
        });
    }

    //變更數字
    function reShuffleImages(sec, codes, $winnBox, originalNumbers, callback) {
    var allNumbers = [];
    let int_sec = parseInt(sec);
    console.log('shuffleImages codes:' + codes);
    var $imgs = $winnBox.find('img');
    var imgCount = $imgs.length;
    var intervals = [];

    // 確保 codes 是字串
    codes = codes.toString();

    // 每個圖片設置一個 setInterval 來持續變換圖片
    $imgs.each(function(index) {
        var $img = $(this);
        var interval = setInterval(function() {
            var randomIndex = Math.floor(Math.random() * codes.length);
            if (codes[randomIndex] !== undefined) {
                var code = codes[randomIndex].toString();
                var digit = code.charAt(Math.floor(Math.random() * code.length)); // 確保每次生成隨機索引
                $img.attr('src', `{{ asset('images/${digit}.png') }}`);
            }
        }, 50); // 持續變換圖片的時間間隔設置為 50 毫秒
        intervals.push(interval);
    });

    // 在 sec 秒後停止所有 setInterval，並從左至右依序停下
    setTimeout(function() {
        intervals.forEach(function(interval, imgIndex) {
            setTimeout(function() {
                clearInterval(interval);
                if (codes.length > 0) {
                    var finalDigit = codes.charAt(imgIndex); // 直接使用對應的數字
                    $imgs.eq(imgIndex).attr('src', `{{ asset('images/${finalDigit}.png') }}`);
                }

                // 播放音效
                var audio = document.getElementById('jump-sound');
                audio.play();
            }, imgIndex * 1000); // 從左至右間隔一秒停止
        });

        setTimeout(function() {
            var finalNumbers = $imgs.map(function() {
                var match = $(this).attr('src').match(/(\d+)\.png$/);
                return match ? match[1] : '';
            }).get().join('');
            allNumbers.push(finalNumbers);
            console.log(allNumbers);
            updateCodesInDatabase(allNumbers, originalNumbers); // 重抽 function 只差異在這裡

            // 執行回調函數
            if (typeof callback === 'function') {
                callback();
            }
        }, imgCount * 1000); // 確保所有圖片停止後再收集結果
    }, int_sec); // 確保在 sec 秒後停止變換

    return allNumbers;
}





    //變更數字
    function shuffleImages(sec, allCodes, $winnBoxes, callback) {
        var allNumbers = [];
        let int_sec = parseInt(sec);
        console.log('shuffleImages allCodes:' + allCodes);

        $winnBoxes.each(function(boxIndex) {
            var $winnBox = $(this);
            var $imgs = $winnBox.find('img');
            var intervals = [];
            var codes = allCodes[boxIndex]; // 為每個 div 使用不同的 codes

            // 開始所有圖片的隨機更換
            $imgs.each(function(index) {
                var $img = $(this);
                var interval = setInterval(function() {
                    var randomIndex = Math.floor(Math.random() * codes.length);
                    if (codes[randomIndex] !== undefined) {
                        var audio = document.getElementById('jump-sound');
                        audio.play();
                        var code = codes[randomIndex].toString();
                        var digit = code.charAt(index % code.length); // 確保索引不超過數字長度
                        $img.attr('src', `{{ asset('images/${digit}.png') }}`);
                    }
                }, 50);
                intervals.push(interval);
            });

            // 設置定時器來依序停止每個圖片的隨機更換
            $imgs.each(function(index) {
                var $img = $(this);
                setTimeout(function() {
                    clearInterval(intervals[index]);

                    // 停止後設置最終圖片
                    if (codes.length > 0) {
                        var finalNumber = codes[index % codes.length]; // 確保每個圖片取對應的數字
                        if (finalNumber !== undefined) {
                            var finalCode = finalNumber.toString();
                            var finalDigit = finalCode.charAt(index % finalCode.length); // 確保索引不超過數字長度
                            $img.attr('src', `{{ asset('images/${finalDigit}.png') }}`);
                        }
                    }

                    // 確保所有圖片停止後再收集結果
                    if (index === $imgs.length - 1) {
                        setTimeout(function() {
                            var finalNumbers = $imgs.map(function() {
                                var match = $(this).attr('src').match(/(\d+)\.png$/);
                                return match ? match[1] : '';
                            }).get().join('');
                            allNumbers.push(finalNumbers);
                            console.log(allNumbers);

                            // 在所有圖片停止後統一保存結果
                            if (boxIndex === $winnBoxes.length - 1) {
                                saveCodesToDatabase(allNumbers);
                                if (callback) callback(); // 執行回呼函數
                            }
                        }, 500); // 延遲 500 毫秒以確保所有圖片停止
                    }
                }, 1000 * index); // 依序停止，每個圖片間隔 1 秒鐘
            });
        });

        return allNumbers;
    }

    //產出數字
    function generateCodes(startRange, endRange) {
        let prizeTotal = parseInt($('#prizeTotal').text()); // 獎品數量
        let key_number = parseInt($('#key_number').val()); // 每個編號長度

        // 檢查 key_number 是否為有效數字
        if (isNaN(key_number) || key_number <= 0) {
            alert('無效的編號長度');
            return [];
        }

        // 檢查 startRange 和 endRange 的值
        if (isNaN(startRange) || isNaN(endRange) || startRange > endRange) {
            alert('無效的範圍');
            return [];
        }
        // 確保 startRange 和 endRange 是數字
        startRange = parseInt(startRange);
        endRange = parseInt(endRange);

        let rangeArray = Array.from({ length: endRange - startRange + 1 }, (_, i) => (i + startRange).toString().padStart(key_number, '0'));
        //alert('Range Array: ' + rangeArray); // 調試用
        let shuffledArray = shuffleArray(rangeArray);
        let codes = shuffledArray.slice(0, 1); 
        //let codes = shuffledArray.slice(0, prizeTotal); // 確保生成的數字數組長度與獎品總數一致
        //alert('Generated codes: ' + codes);
        return codes;
    }

    //數字處理
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    //獎項選擇
    function prizeApi(key,name,sec,PrizeName,total,StartRange,EndRange,ActivityGuid,key_number){
        var audio = document.getElementById('jump-sound');
        audio.play();
        closeMenu();//關閉獎項選擇畫面
        restarCount = 0; //重抽人數每次變更獎項都歸0
        $('#prizeImg').attr('src','{{ asset('images/獎項已選擇2.png') }}'); //更換圖片
        $('#awardName').text(name).show(); //更換獎項名稱
        $('#awardName_key').val(name); //更換獎項名稱KEY
        $('#prizeName').text(PrizeName).show(); //更換獎品名稱
        //$('#prizeTotal').show().text(total); //顯示獎項數量
        $('#key_sec').val(parseInt(sec));
        $('#key_StartRange').val(StartRange);
        $('#key_EndRange').val(EndRange);
        $('#key_ActivityGuid').val(ActivityGuid);
        $('#key_number').val(key_number);

        //顯示對應的抽獎版面
        
        let htmlcode = "";
        let htmlclass = "col-6";
        if(parseInt(total) <= 1){
            //通常是頭獎 代表只有一個
            htmlclass = "col";
        }else if(parseInt(total) >= 10){
            //較多獎項 改為縮小比例
            htmlclass = "col-5";
        }
        $('#h_fun').empty();


        $.ajax({
            url: "{{ route('itemPrizeTotal') }}",
            method: 'POST',
            async: false,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 確保你的 Blade 模板中有這個 meta 標籤
            },
            data: JSON.stringify({
                ActivityGuid: ActivityGuid,
                awardName: name,
            }),
            success: function(response) {
                console.log(response);
                for(let i=0;i<parseInt(response.count);i++){
                    let numberStr = response.data[i].code.toString();
                    htmlcode = htmlcode + `<div class="${htmlclass} position-relative winnBoxK">
                        <img src="{{ asset('images/中獎欄位.png') }}" class="img-fluid" alt="">
                        <div class="winnBox">`;
                        for(let k=0;k<numberStr.length;k++){
                            var digit = numberStr.charAt(k);
                            htmlcode = htmlcode + `<img src="{{ asset('images/${digit}.png') }}" class="img-fluid" alt="">`;
                        }
                    htmlcode = htmlcode + `</div></div>`;
                }
            },
            error: function() {
                alert('發生錯誤，請重試');
            }
        });

        $('#h_fun').append(htmlcode);
        let PrizeTotalMenuHTML = '<img src="{{ asset('images/中獎數.png') }}" class="p-0 img-fluid  w-50" style="height:70%;" alt="">';
        let totalStr = total.toString();
        for(let k=0;k<totalStr.length;k++){
            var digit = totalStr.charAt(k);
            PrizeTotalMenuHTML = PrizeTotalMenuHTML + `
            <img src="{{ asset('images/${digit}.png') }}" class="p-0 img-fluid" style="width:17%;height:25%;margin: 0;padding:0;" alt="">`;
        }

        $('#PrizeTotalMenu').empty().append(PrizeTotalMenuHTML).show();

        //觸發funtion判斷是否需要分頁 showPageDIV(page)
        showPageDIV(1);
        generatePagination($('.winnBoxK').length);
    }

    $(document).ready(function() {
        //抓出抽獎背景 有值就更換
        let LOTTERY_URL = $('#LOTTERY_URL').val();
        if(LOTTERY_URL != ""){
            $('body').css('background-image','url('+LOTTERY_URL+')');
        }

        //抓出背景音樂 有值就更換
        let LOTTERY_MP3 = $('#LOTTERY_MP3').val();
        if(LOTTERY_MP3 != ""){
            $('#bg-sound').css('src',LOTTERY_MP3);
        }

        //抓出中獎音樂 有值就更換
        let WINN_MP3 = $('#WINN_MP3').val();
        if(WINN_MP3 != ""){
            $('#bingo-sound').css('src',WINN_MP3);
        }

        //中獎背景
        let WINN_URL = $('#WINN_URL').val();

        //取得開始按鈕圖片寬度
        $('.startBtn').on('load', function() {
            var imgWidth = $(this).width();
            $('#prizeTotal').width(imgWidth);
        });

        $(document).on('click', '.restarImg', function() {
            let $button = $(this);
            if ($(this).hasClass('disabled')) {
                //代表無法重抽
            }else{
                var $winnBoxK = $button.closest('.winnBoxK');
                $winnBoxK.css('z-index', '9999');
                // 確認按鈕事件
                $('#reStarbgk').show();
                $('#confirmBtn').show();
                $('#cancelBtn').show();
                // 確認按鈕事件
                $('#confirmBtn').off('click').on('click', function() {
                    restarCount = restarCount+1;
                    var $winnBox = $button.closest('.winnBoxK').find('.winnBox');
                    var originalNumbers = $winnBox.find('img').map(function() {
                        var match = $(this).attr('src').match(/(\d+)\.png$/);
                        return match ? match[1] : '';
                    }).get().join('');
                    //按鈕也要隱藏
                    $('#confirmBtn').hide();
                    $('#cancelBtn').hide();

                    // 執行重抽功能
                    reDrawImages($button, $winnBox, originalNumbers, $winnBoxK);
                    // 取得抽獎秒數
                    let sec = $('#key_sec').val();
                    if (sec == undefined) {
                        sec = 3000;
                    } else {
                        sec = parseInt(sec) * 1000; // 轉換為秒數
                    }
                });

                // 取消按鈕事件
                $('#cancelBtn').off('click').on('click', function() {
                    // 移除 z-index: 9999
                    $winnBoxK.css('z-index', '');
                    
                    // 隱藏彈出視窗
                    $('#reStarbgk').hide();
                });

                /*
                var $winnBox = $button.closest('.winnBoxK').find('.winnBox');
                var originalNumbers = $winnBox.find('img').map(function() {
                    var match = $(this).attr('src').match(/(\d+)\.png$/);
                    return match ? match[1] : '';
                }).get().join('');
                reDrawImages($button, $winnBox, originalNumbers);
                */
            }
        });

        const itemsPerPage = 16;
        const $items = $('.item');
        let currentPage = 0;

        function showPage(page) {
            var audio = document.getElementById('click-sound');
            audio.play();
            $items.hide();
            $items.slice(page * itemsPerPage, (page + 1) * itemsPerPage).show();
        }

        function updateButtons() {
            $('#prev').toggle(currentPage > 0);
            $('#next').toggle(currentPage < Math.ceil($items.length / itemsPerPage) - 1);
        }

        $('#prev').on('click', function() {
            currentPage = Math.max(currentPage - 1, 0);
            showPage(currentPage);
            updateButtons();
        });

        $('#next').on('click', function() {
            currentPage = Math.min(currentPage + 1, Math.ceil($items.length / itemsPerPage) - 1);
            showPage(currentPage);
            updateButtons();
        });

        // 初始化顯示第一頁
        showPage(currentPage);
        updateButtons();
    });

   //2024/09/08修補
   function homeBtn(){
        //$('#homeIMG').removeClass('img-fluid-50');
        setTimeout(function() {
            //$('#homeIMG').addClass('img-fluid-50');
            location.href = "{{ Route('index',['api' => $api]) }}";
        }, 100); 
    }

    //關閉獎項
    function closeMenu(){
        //$('#closeIMG').removeClass('img-fluid-50');
        setTimeout(function() {
            //$('#closeIMG').addClass('img-fluid-50');
            $('#BingoMenu').hide();
            $('#closeBtn').hide();
        }, 100); 
    }
</script>
@stop