@extends('Admin.component.layout')
@section('title', '活動列表新增')
@section('content')
    @if(session()->has('alert_message'))
        <script>
            alert('{{ session("alert_message") }}');
        </script>
    @endif
    @if (session('alert_message'))
        <script>
            alert('{{ session("alert_message") }}');
        </script>
    @endif
<style>
    [type="radio"]:not(:checked), [type="radio"]:checked  {
        position: relative !important; 
        left: 0 !important; 
        opacity: 1 !important;
    }
</style>
<div class="row page-titles">
    <div class="col-md-5 col-8 align-self-center">
        <h3 class="text-themecolor m-b-0 m-t-0">活動列表</h3>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">活動列表</a></li>
            <li class="breadcrumb-item ">清單列表</li>
            <li class="breadcrumb-item active">活動資料新增</li>
        </ol>
    </div>
    <div class="col-md-7 col-4 align-self-center">
        
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-block">
                <form class="form-horizontal form-material" action="{{ route('Activity.insert') }}" method="post" id="dataForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="userid" value="{{ session('id') }}">
                    <input type="hidden" id="AwardName_array" name="AwardName_array" value="">
                    <input type="hidden" id="PrizeName_array" name="PrizeName_array" value="">
                    <input type="hidden" id="PrizeTotal_array" name="PrizeTotal_array" value="">
                    <input type="hidden" id="LightSec_array" name="LightSec_array" value="">
                    <input type="hidden" id="numcode_array" name="numcode_array" value="">
                    <div class="row mb-3">
                        <div class="col">
                            <label for="title" class="form-label fw-bold fs-5">活動名稱<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" value="">
                        </div>
                        <div class="col">
                            <label for="StartDate" class="form-label fw-bold fs-5">活動起始日<span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="StartDate" name="StartDate" value="">
                        </div>
                        <div class="col">
                            <label for="EndDate" class="form-label fw-bold fs-5">活動結束日<span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="EndDate" name="EndDate" value="">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col">
                            <label for="Organizer" class="form-label fw-bold fs-5">主辦單位</label>
                            <input type="text" class="form-control" id="Organizer" name="Organizer" value="">
                        </div>
                        <div class="col">
                            <label for="tel" class="form-label fw-bold fs-5">連絡電話</label>
                            <input type="text" class="form-control" id="tel" name="tel" value="" maxlength="10" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
                        </div>
                        <div class="col">
                            <label for="api" class="form-label fw-bold fs-5">活動網址(請輸入本活動代號)<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="api" name="api" value="" onchange="getAPIChk()">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col">
                            <label for="winntype" class="form-label fw-bold fs-5">抽獎方式<span class="text-danger">*</span></label>
                            <select class="form-control form-control-line" name="winntype" id="winntype" onchange="winntypeKEY(this.value)">
                                <option value="" disabled selected>請選擇</option>
                                <option value="1">抽獎採樣</option>
                                <option value="2">匯入採樣</option>
                            </select>
                        </div>
                        <div class="col" id="winnRangeLenght" style="display: block;">
                            <label for="number" class="form-label fw-bold fs-5">跑燈位數<span class="text-danger">*</span></label>
                            <select class="form-control form-control-line" name="number" id="number" onchange="NumberKEY(this.value)">
                                <option value="" disabled selected>請選擇</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </div>
                        <div class="col" id="winnRangeBox" style="display: none;">
                            <label for="StartRange" class="form-label fw-bold fs-5">抽獎採樣<span class="text-danger">*</span></label>
                            <div class="row">
                                <input type="text" class="border border-dark col-3 disabled" disabled id="StartRange" name="StartRange" value="" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
                                <span class="mx-2">~</span>
                                <input type="text" class="border border-dark col-3 disabled" disabled id="EndRange" name="EndRange" value="" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
                            </div>
                        </div>
                    </div>
                    
                    <div class="my-5" id="winnNumber" style="display: none;">
                        <hr>
                        <p class="h5">匯入採樣</p>
                        <table class="table">
                            <thead>
                                <tr>
                                <th scope="col">抽樣號碼</th>
                                <th>
                                    <button type="button" class="btn btn-success btn-sm" onclick="WinnImport()">匯入</button>
                                    <a href="{{ asset('upload/File/WinnTemple.csv') }}" class="btn btn-success btn-sm" target="_blank">範本</a>
                                    <button type="button" class="btn btn-warning btn-sm" onclick="new_tbody_w()">新增獎項</button>
                                </th>
                                </tr>
                            </thead>
                            <tbody id="dataContent2">
                                <tr>
                                    <td><input type="text" name="num_code" placeholder="抽樣號碼(僅限輸入數字)" value="" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></td>
                                    <td>
                                    <button type="button" class="btn btn-danger" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button>
                                    <button type="button" class="btn btn-info" onclick="copyRow(this)"><i class="fa fa-copy"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <hr>
                    </div>
                    <div class="form-group">
                        <label for="mark" class="col-md-12 p-0">活動標題呈現</label>
                        <div class="col-md-12 p-0">
                            <input type="radio" class="" name="title_diplay" id="title_diplay_y" checked value="Y">顯示
                            <input type="radio" class="" name="title_diplay" id="title_diplay_n" value="N">隱藏
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mark" class="col-md-12 p-0">備考</label>
                        <div class="col-md-12 p-0">
                            <input type="text" placeholder="" class="form-control form-control-line" name="mark" id="mark">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="INDEX_VIDEO" class="col-md-12 p-0">活動首頁影片ID<a href="#" onclick="infoModal()"><i class="fa-solid fa-circle-question"></i></a></label>
                        <div class="col-md-12 p-0">
                            <input type="text" placeholder="" class="form-control form-control-line" name="INDEX_VIDEO" id="INDEX_VIDEO">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col">
                            <label for="" class="form-label fw-bold fs-5">活動首頁圖檔</label>
                            <div class="row m-0 text-center">
                                <input type="file" class="form-control col-3 border-0" style="background-image: none;" id="INDEX_URL" name="INDEX_URL" value="" onchange="readURL(this,'INDEX_URL_IMG')">
                                <img src="" alt="" id="INDEX_URL_IMG" height="100" style="display: none;">
                            </div>
                        </div>
                        <div class="col">
                            <label for="BINGO_URL" class="form-label fw-bold fs-5">中獎圖</label>
                            <div class="row m-0">
                                <input type="file" class="form-control col-3 border-0" style="background-image: none;" id="BINGO_URL" name="BINGO_URL" value="" onchange="readURL(this,'BINGO_URL_IMG')">
                                <img src="" alt="" id="BINGO_URL_IMG" height="100" style="display: none;">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col">
                            <label for="LOTTERY_URL" class="form-label fw-bold fs-5">抽獎背景</label>
                            <div class="row m-0">
                                <input type="file" class="form-control col-3 border-0" style="background-image: none;" id="LOTTERY_URL" name="LOTTERY_URL" value="" onchange="readURL(this,'LOTTERY_URL_IMG')">
                                <img src="" alt="" id="LOTTERY_URL_IMG" height="100" style="display: none;">
                            </div>
                        </div>
                        <div class="col">
                            <label for="LOTTERY_MP3" class="form-label fw-bold fs-5">抽獎音樂</label>
                            <div class="row m-0">
                                <input type="file" class="form-control col-3 border-0" style="background-image: none;" id="LOTTERY_MP3" name="LOTTERY_MP3" value="">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col">
                            <label for="WINN_URL" class="form-label fw-bold fs-5">中獎背景</label>
                            <div class="row m-0">
                                <input type="file" class="form-control col-3 border-0" style="background-image: none;" id="WINN_URL" name="WINN_URL" value="" onchange="readURL(this,'WINN_URL_IMG')">
                                <img src="" alt="" id="WINN_URL_IMG" height="100" style="display: none;">
                            </div>
                        </div>
                        <div class="col">
                            <label for="WINN_MP3" class="form-label fw-bold fs-5">中獎音樂</label>
                            <div class="row m-0">
                                <input type="file" class="form-control col-3 border-0" style="background-image: none;" id="WINN_MP3" name="WINN_MP3" value="">
                            </div>
                        </div>
                    </div>

                    <div class="my-5">
                        <p class="h3">獎項列表</p>
                        <hr>
                        <table class="table">
                            <thead>
                                <tr>
                                <th scope="col">獎項名稱</th>
                                <th scope="col">獎品名稱</th>
                                <th scope="col">獎品數量</th>
                                <th scope="col">跑燈秒數</th>
                                <th scope="col">獎項圖片</th>
                                <th>
                                    <button type="button" class="btn btn-success btn-sm" onclick="CSVImport()">匯入</button>
                                    <a href="{{ asset('upload/File/PrizeTemple.csv') }}" class="btn btn-success btn-sm" target="_blank">範本</a>
                                    <button type="button" class="btn btn-warning btn-sm" onclick="new_tbody()">新增獎項</button>
                                </th>
                                </tr>
                            </thead>
                            <tbody id="dataContent">
                                <tr id="noData"><td class="text-center" colspan="6">無獎項資料</td></tr>
                            </tbody>
                        </table>
                    </div>
   
                    <div class="form-group">
                        <div class="col-sm-12">
                            <a href="#" class="btn btn-success" onclick="chk()">送出資料</a>
                            <a href="{{ route('Activity.list') }}" class="btn btn-secondary">返回清單</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="ImportModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">網站訊息</h5>
        </div>
        <div class="modal-body">
            <form id="uploadForm" enctype="multipart/form-data">
                @csrf
                <input type="file" name="file" id="file" accept=".csv">
                <button type="button" onclick="dataImport()">匯入</button>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" onclick="ImportModalClose()">關閉</button>
        </div>
        </div>
    </div>
</div>

<div id="WinnModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">網站訊息</h5>
        </div>
        <div class="modal-body">
            <form id="uploadForm2" enctype="multipart/form-data">
                @csrf
                <input type="file" name="file" id="file" accept=".csv">
                <button type="button" onclick="dataWImport()">匯入</button>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" onclick="ImportModalClose()">關閉</button>
        </div>
        </div>
    </div>
</div>

<script>
    // 定義對應的name屬性
    const inputNames = ['AwardName', 'PrizeName', 'PrizeTotal', 'LightSec'];
    const inputTypes = ['text', 'text', 'number', 'number'];

    //判斷必填欄位
    function chk(){
        //顯示整個自定義欄位
        let AwardName_array = GetCheckedTxtMust('AwardName');
		let PrizeName_array = GetCheckedTxtMust('PrizeName');
		let PrizeTotal_array = GetCheckedTxtMust('PrizeTotal');
		let LightSec_array = GetCheckedTxtMust('LightSec');
		$('#AwardName_array').val(AwardName_array);
		$('#PrizeName_array').val(PrizeName_array);
		$('#PrizeTotal_array').val(PrizeTotal_array);
		$('#LightSec_array').val(LightSec_array);

        let numcode_array = GetCheckedTxt('num_code');
		$('#numcode_array').val(numcode_array);

        let title = $('#title').val().trim();
        let StartDate = $('#StartDate').val().trim();
        let EndDate = $('#EndDate').val().trim();
        let number = $('#number').val();
        let StartRange = $('#StartRange').val().trim();
        let EndRange = $('#EndRange').val().trim();
        let api = $('#api').val().trim();
        let winntype = $('#winntype').val();

        if(number == "" || number == undefined){
                    alert('跑燈位數未輸入');
        }
         //2024/10/13 增補獎項列表為必填
         else if(AwardName_array == "" || AwardName_array == undefined){
            alert('獎項名稱未輸入');
        }else if(PrizeName_array == "" || PrizeName_array == undefined){
            alert('獎品名稱未輸入');
        }else if(PrizeTotal_array == "" || PrizeTotal_array == undefined){
            alert('獎品數量未輸入');
        }else if(LightSec_array == "" || LightSec_array == undefined){
            alert('跑燈秒數未輸入');
        }else if(title == "" || title == undefined){
            alert('活動名稱未輸入');
        }else if(StartDate == "" || StartDate == undefined){
            alert('活動起始時間未輸入');
        }else if(EndDate == "" || EndDate == undefined){
            alert('活動結束時間未輸入');
        }else if(api == "" || api == undefined){
            alert('活動網址未輸入');
        }else if(winntype == "" || winntype == undefined){
            alert('抽獎方式未選擇');
        }else{
            $('#dataContent tr').each(function(index, tr) {
                $(tr).find('input[type="file"]').attr('name', 'AwardImg[' + index + ']');
            });

            if(winntype == "1"){
                if(StartRange == "" || StartRange == undefined){
                    alert('抽獎採樣未輸入');
                }else if(EndRange == "" || EndRange == undefined){
                    alert('抽獎採樣未輸入');
                }else if(parseInt(StartRange)>parseInt(EndRange)){
                    //2024/09/06 確認結束範圍是否比開始範圍大
                    alert('抽獎採樣結束範圍不可小於開始範圍');
                }else{
                    $('#dataForm').submit();
                }
            }else if(winntype == "2"){
                if(numcode_array == "" || numcode_array == undefined){
                    alert('匯入採樣未輸入或匯入');
                }else{
                    $('#dataForm').submit();
                }
            }else{
                alert('發生不明錯誤');
            }
        }
    }

    //必填欄位
	function GetCheckedTxtMust(checkBoxName)
    {
		let block = 0;
		let result = $('input[name=' + checkBoxName + ']').map(function ()
		{
			if($(this).val() == ""){
				block = 1;
			}else{
				//return encodeURIComponent($(this).val());
                return $(this).val();
			}
		
		})
		.get().join(',');
		if(block == 0){
			return result;
		}else{
			return '';
		}
    }

    //處理多欄位值
	function GetCheckedTxt(checkBoxName)
    {
     return $('input[name=' + checkBoxName + ']').map(function ()
     {
       return $(this).val();
     })
     .get().join(',');
    }

    //抓取跑燈位數後改變抽獎採樣數 StartRange EndRange
    function NumberKEY(number){
        if(number != ''){
            $('#StartRange').removeClass('disabled').attr('disabled',false).attr('maxlength',number).attr('minlength',number);
            $('#EndRange').removeClass('disabled').attr('disabled',false).attr('maxlength',number).attr('minlength',number);
        }else{
            $('#StartRange').addClass('disabled').attr('disabled',true);
            $('#EndRange').addClass('disabled').attr('disabled',true);
        }
    }

    function new_tbody_w(){
        let htmlcode = `
		<tr>
            <td><input type="text" name="num_code" placeholder="抽樣號碼(僅限輸入數字)" value="" onkeyup="value=value.replace(/[^\\d{1,}\\.\\d{1,}|\\d{1,}]/g,'')"></td>
            <td>
            <button type="button" class="btn btn-danger" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button>
            <button type="button" class="btn btn-info" onclick="copyRow(this)"><i class="fa fa-copy"></i></button>
            </td>
        </tr>
		`;
        $('#noData2').remove();
		$('#dataContent2').append(htmlcode);
    }

    function winntypeKEY(key){
        if(key == "1"){
            //$('#winnRangeLenght').show();
            $('#winnRangeBox').show();
            $('#winnNumber').hide();
        }else if(key == "2"){
            //$('#winnRangeLenght').hide();
            $('#winnRangeBox').hide();
            $('#winnNumber').show();
        }else{
            //$('#winnRangeLenght').hide();
            $('#winnRangeBox').hide();
            $('#winnNumber').hide();
        }
    }

    function dataImport(){
        //資料匯入
        var formData = new FormData($('#uploadForm')[0]);

        $.ajax({
            url: "{{ route('Activity.import') }}",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                console.log(response);
                let htmlcode = "";
                response.slice(1).forEach(function(row) {
                    htmlcode = htmlcode + '<tr>';
                    row.forEach(function(cell, cellIndex) {
                        htmlcode = htmlcode + '<td><input type="'+ inputTypes[cellIndex] +'" name="' + inputNames[cellIndex] + '" value="' + cell.trim() + '"></td>';
                    });
                    htmlcode = htmlcode + `<td>
                        <input type="file" name="AwardImg" accept="image/*" onchange="checkFileSize(this)">
                    </td>`;
                    htmlcode = htmlcode + '<td><button type="button" class="btn btn-danger" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button><button type="button" class="btn btn-info" onclick="copyRow(this)"><i class="fa fa-copy"></i></button></td></tr>';
                });
                if(htmlcode != ""){ $('#noData').remove(); }
                $('#dataContent').append(htmlcode);
                alert('檔案匯入成功');
                ImportModalClose();
            },
            error: function(xhr, status, error) {
                alert('檔案上傳失敗');
            }
        });
    }


    function new_tbody(){
        let htmlcode = `
		<tr>
			<td><input type="text" name="AwardName" placeholder="獎項名稱"></td>
			<td><input type="text" name="PrizeName" placeholder="獎品名稱"></td>
			<td><input type="number" name="PrizeTotal" placeholder="獎品數量"></td>
			<td><input type="number" name="LightSec" placeholder="跑燈秒數"></td>
            <td>
                <input type="file" name="AwardImg[]" accept="image/*" onchange="checkFileSize(this)">
            </td>
            <td>
            <button type="button" class="btn btn-danger" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button>
            <button type="button" class="btn btn-info" onclick="copyRow(this)"><i class="fa fa-copy"></i></button>
            </td>
		</tr>
		`;
        $('#noData').remove();
		$('#dataContent').append(htmlcode);
    }

    //圖片檢查
    function checkFileSize(input) {
        if (input.files && input.files[0]) {
            if (input.files[0].size > 2 * 1024 * 1024) {
                alert("圖片大小不能超過 2MB！");
                input.value = "";
            }
        }
    }

    function deleteRow(btn) {
		var row = btn.parentNode.parentNode; // 獲取按鈕所在的行
		row.parentNode.removeChild(row); // 刪除該行
	}

    function copyRow(btn){
        var $row = $(btn).closest('tr'); // 使用 jQuery 獲取按鈕所在的行
        var $clone = $row.clone(); // 複製該行
        $row.after($clone); // 將複製的行添加到當前行之後
    }

    function CSVImport(){
        $('#ImportModal').modal('show');
    }
    
    function WinnImport(){
        $('#WinnModal').modal('show');
    }

    function ImportModalClose(){
        $('#ImportModal').modal('hide');
        $('#WinnModal').modal('hide');
    }
</script>
@stop