@extends('admin/layouts.master')
@section('title', '聯盟行銷設定')
@section('body')

<section class="content">
  @include('admin.message')
  <form action="{{ route('Aff.save') }}" method="POST">
    @csrf
    <div class="row">
      <div class="col-xs-12">

        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">首次填寫邀請碼 (一次性)</h3>
          </div>
          <div class="box-body row">
              <div class="col-md-12">
                <input class="tgl tgl-skewed" id="user_referral_status" type="checkbox" {{ isset($gsetting->user_referral['status']) && $gsetting->user_referral['status'] ? 'checked' : '' }}>
                <label class="tgl-btn" data-tg-off="關閉" data-tg-on="啟用" for="user_referral_status"></label>
                <input type="hidden" name="user_referral[status]" value="{{ $gsetting->user_referral['status'] ?? '1' }}" id="user_referral_status_v">
              </div>
              
              <div class="col-md-6">
                <label for="exampleInputTit1e">發送者獲得點數:<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="user_referral[sender]" value="{{ $gsetting->user_referral['sender'] ?? '' }}" required>
              </div>

              <div class="col-md-6">
                <label for="exampleInputDetails">填寫者獲得點數:<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="user_referral[writer]"  value="{{ $gsetting->user_referral['writer'] ?? '' }}" required>
              </div>

          </div>
        </div>

        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">訂閱 (完成填寫邀請碼後)</h3>
          </div>
          <div class="box-body row">

              <div class="col-md-12">
                <input class="tgl tgl-skewed" id="user_referral_subscript_status" type="checkbox" {{ isset($gsetting->user_referral_subscript['status']) && $gsetting->user_referral_subscript['status'] ? 'checked' : '' }}>
                <label class="tgl-btn" data-tg-off="關閉" data-tg-on="啟用" for="user_referral_subscript_status"></label>
                <input type="hidden" name="user_referral_subscript[status]" value="{{ $gsetting->user_referral_subscript['status'] ?? '1' }}" id="user_referral_subscript_status_v">
              </div>

              <div class="col-md-12">
                <label for="exampleInputTit1e">套用方案:</label>
                <select name="user_referral_subscript[plans][]" class="form-control plans-select2" multiple>
                  @if ($plans)
                    @foreach ($plans as $plan)
                      <option value="{{$plan->id}}" {{ in_array($plan->id, ($gsetting->user_referral_subscript['plans'] ?? [])) ? 'selected' : '' }}>{{ $plan->name }}</option>
                    @endforeach
                  @endif
                </select>
              </div>

              <div class="col-md-6">
                <label for="exampleInputTit1e">發送者獲得點數:<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="user_referral_subscript[sender]" value="{{ $gsetting->user_referral_subscript['sender'] ?? '' }}" required>
              </div>

              <div class="col-md-6">
                <label for="exampleInputDetails">填寫者獲得點數:<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="user_referral_subscript[writer]"  value="{{ $gsetting->user_referral_subscript['writer'] ?? '' }}" required>
              </div>
          </div>
        </div>

        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">續訂 (完成填寫邀請碼後)</h3>
          </div>
          <div class="box-body row">

            <div class="col-md-12">
                <input class="tgl tgl-skewed" id="user_referral_renew_status" type="checkbox" {{ isset($gsetting->user_referral_renew['status']) && $gsetting->user_referral_renew['status'] ? 'checked' : '' }}>
                <label class="tgl-btn" data-tg-off="關閉" data-tg-on="啟用" for="user_referral_renew_status"></label>
                <input type="hidden" name="user_referral_renew[status]" value="{{ $gsetting->user_referral_renew['status'] ?? '1' }}" id="user_referral_renew_status_v">
            </div>


            <div class="col-md-6">
                <label for="exampleInputTit1e">發送者獲得點數:<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="user_referral_renew[sender]" value="{{ $gsetting->user_referral_renew['sender'] ?? '' }}" required>
              </div>

              <div class="col-md-6">
                <label for="exampleInputDetails">填寫者獲得點數:<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="user_referral_renew[writer]"  value="{{ $gsetting->user_referral_renew['writer'] ?? '' }}" required>
              </div>
          </div>
        </div>

        <div class="box box-primary">
          <div class="box-header with-border">
            <div class="d-flex justify-space-between">
              <h3 class="box-title">其他設定</h3>
              <button class="btn btn-info" id="essay" type="button" data-toggle="modal" data-target="#essayModal">新增文案</button>
            </div>
          </div>
          <div class="box-body row">
            <div class="col-md-12">
                <label for="exampleInputTit1e">一帳號可分享帳號數量(不限請設定0):<sup class="redstar">*</sup></label>
                <input type="number" class="form-control" name="aff_setting[share_count]" value="{{ $gsetting->aff_setting['share_count'] ?? '0' }}" required>
              </div>

              <div class="col-md-12">
                <label for="exampleInputDetails">說明文案:<sup class="redstar">*</sup></label>
                <textarea id="detail" name="aff_setting[illustrate]" rows="3" class="form-control" value="">{!! $gsetting->aff_setting['illustrate'] ?? '' !!}</textarea>
              </div>
          </div>
        </div>
      </div> 

      <div class="col-xs-12">
        <button class="btn btn-success" type="submit">保存</button>
      </div>  
    </div>
  </form>

<!-- 新增文案 Modal -->
<div class="modal fade" id="essayModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="d-flex justify-space-between">
          <h1 class="modal-title">新增文案</h1>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
      </div>
      <div class="modal-body">
        <label class="btn btn-essay {{ $gsetting->user_referral['status'] ? 'active' : '' }}" data-essay="1">
          <input type="checkbox" autocomplete="off" {{ $gsetting->user_referral['status'] ? 'checked' : '' }}>
          <span>文案1</span>
        </label>
        <label class="btn btn-essay {{ $gsetting->user_referral_subscript['status'] ? 'active' : '' }}" data-essay="2" >
          <input type="checkbox" autocomplete="off" {{ $gsetting->user_referral_subscript['status'] ? 'checked' : '' }}>
          <span>文案2</span>
        </label>
        <label class="btn btn-essay {{ $gsetting->user_referral_renew['status'] ? 'active' : '' }}" data-essay="3">
          <input type="checkbox" autocomplete="off" {{ $gsetting->user_referral_renew['status'] ? 'checked' : '' }}>
          <span>文案3</span>
        </label>

        <div class="col-md-12 mtb-2r">
          <textarea name="" id="essay1" rows="10" class="form-control d-block" style="resize:none"></textarea>
          <textarea name="" id="essay2" rows="10" class="form-control d-none" style="resize:none"></textarea>
          <textarea name="" id="essay3" rows="10" class="form-control d-none" style="resize:none"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success" id="insertBtn">插入</button>
      </div>
    </div>
  </div>
</div>

</section>

@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

  <script>
    $('#user_referral_subscript_status').change(function() {
      $('#user_referral_subscript_status_v').val(+ $(this).prop('checked'))
    })
    $('#user_referral_status').change(function() {
      $('#user_referral_status_v').val(+ $(this).prop('checked'))
    })
    $('#user_referral_renew_status').change(function() {
      $('#user_referral_renew_status_v').val(+ $(this).prop('checked'))
    })
    
    jQuery(document).ready(function($){
      $('.plans-select2').select2();
    });

    const btns = document.querySelectorAll('[data-essay]')
    const btnsInput = document.querySelectorAll('[data-essay] input')
    const insertBtn = document.querySelector('#insertBtn')
    // const inserted = document.querySelector('#inserted')
    const textDetail = document.querySelector("textarea#detail")
    const essay1 = document.querySelector("#essay1")
    const essay2 = document.querySelector("#essay2")
    const essay3 = document.querySelector("#essay3")

    jQuery(document).ready(function($){
      $("#essayModal").on("show.bs.modal", function() {
        const user_referral_sender = document.querySelector('input[name="user_referral[sender]"]').value
        const user_referral_writer = document.querySelector('input[name="user_referral[writer]"]').value
        const user_referral_subscript_sender = document.querySelector('input[name="user_referral_subscript[sender]"]').value
        const user_referral_subscript_writer = document.querySelector('input[name="user_referral_subscript[writer]"]').value
        const user_referral_renew_sender = document.querySelector('input[name="user_referral_renew[sender]"]').value
        const user_referral_renew_writer = document.querySelector('input[name="user_referral_renew[writer]"]').value
        $("#essay1").val(`註冊：邀請你的朋友完成註冊，立即獲得 ${user_referral_sender} 點 OPEN POINT，你將獲得 ${user_referral_writer} 點 OPEN POINT。`);
        $("#essay2").val(`訂閱：邀請你的朋友完成付費訂閱，即可再獲得 ${user_referral_subscript_sender} 點 OPEN POINT，你也將再獲得 ${user_referral_subscript_writer} 點 OPEN POINT。`);
        $("#essay3").val(`續訂：你的朋友完成首次訂閱並續訂成功，即可再獲得 ${user_referral_renew_sender} 點 OPEN POINT，你也將再獲得 ${user_referral_renew_writer} 點 OPEN POINT。`);
      });
    });
    
    /* 開啟對應文案 */
    function openEssay(e){
      const labelBtn = e.target.parentNode
      let num = Number(labelBtn.dataset.essay)
      for(let i = 1; i < btns.length+1; i++){
        if (i === num){
          if(e.target.checked){
            labelBtn.classList.add('active')
          } else {
            labelBtn.classList.remove('active')
          }
          window[`essay${i}`].classList.remove('d-none')
          window[`essay${i}`].classList.add('d-block')
        } else {
          window[`essay${i}`].classList.remove('d-block')
          window[`essay${i}`].classList.add('d-none')
        }
      }
    }

     /* 插入文案 */
    function insertEssay(){
      const modalBackdrop = document.querySelector('.modal-backdrop');
      let text = ''
      let totalText = []
      btnsInput.forEach( (btnInput, index) => {
        if(btnInput.checked) {
          text = window[`essay${index+1}`].value.replace(/\n/g, '<br>')
          totalText.push(text)
        }
      })
      finalText = totalText.join('<br>')
      const editor = tinymce.get('detail');
      editor.setContent(finalText);

      /* 關閉 modal */
      essayModal.classList.remove('in'); 
      setTimeout(() => {
        essayModal.style.display = 'none';
        document.body.classList.remove('modal-open');
        modalBackdrop.parentNode.removeChild(modalBackdrop);
      }, 2000);
    }
    
    btnsInput.forEach( btnInput => {
      btnInput.addEventListener('change', openEssay)
    })
    
    insertBtn.addEventListener('click', insertEssay)

  </script>
@endsection