@extends('layout.basic.main')
@section('title','CSV管理（一覧）')
@push('css')
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/plugins/bootstrap-3.3.7/js/bootstrap.js"></script>

<style>
  #csv-management {
    font-weight: bold !important;
  }

  #csv-management a {
    font-weight: bold !important;
  }

  #csv-management .box-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #csv-management .box-top h2 {
    font-size: 20px;
    color: rgb(34, 34, 34);
    padding: 10px 10px 10px 0px;
  }

  #csv-management .tab-content .tab-pane {
    background-color: white !important;
    padding-top: 10px !important;
  }

  #csv-management .nav-tabs {
    border-bottom: 2px solid #7D9195 !important;
  }

  #csv-management .nav-tabs li,
  #csv-management .nav-tabs li a {
    background: white !important;
    border-color: white !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    min-width: 120px;
    text-align: center;
    margin: 0 !important;
  }

  #csv-management .nav-tabs .active,
  #csv-management .nav-tabs .active a {
    background: #7D9195 !important;
    border-color: #7D9195 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    color: white !important;
  }

  #csv-management .tab-content #tab-export .box-content_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #csv-management .tab-content #tab-export .box-content_top button {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  #csv-management .tab-content table tr {
    border: unset !important;
  }

  #csv-management .tab-content table td {
    border: unset !important;
    border-bottom: 1px solid #cccbcbad !important;
  }

  #csv-management .ic-menu {
    font-size: 25px;
    cursor: pointer
  }

  #csv-management .box-ic .action-broadcast {
    min-width: 74px;
    left: -24px;
    top: 23px;
    text-align: center;
  }

  #csv-management .box-ic:hover .action-broadcast {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    display: block !important;
  }

  #csv-management .focus-pointer-item {
    cursor: pointer;
    padding: 5px;
  }

  #csv-management .focus-pointer-item:hover {
    background-color: #f6f6f6 !important;
  }

  #csv-management .column-action {
    text-align: left;
  }

  #csv-management .column-action button {
    min-width: 162px;
  }

  #csv-management .btn-choise-folder {
    background: rgba(8, 191, 90, 1);
    width: 140px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    margin-bottom: 25px;
    margin-top: 10px;
  }

  #csv-management .box-ic-sort i {
    line-height: 2px;
    font-size: 24px;
    padding: 9px 3px !important;
    cursor: pointer !important;
  }

  #csv-management .box-ic-sort i:hover {
    background-color: #96ADB2 !important;
    color: #FFFFFF !important;
    padding: 9px 3px !important;
    border-radius: 4px;
  }

  #csv-management .nav-tabs li:not(.active) a:hover {
    background-color: #eee !important;
  }

  #csv-management .line_user_link a:focus {
    color: #337ab7;
  }
  @media  screen and (max-width: 1500px) {
    #text-csv{
      font-size: 14px;
    }
  }

  @media  screen and (max-width: 1366px) {
      #text-csv{
        font-size: 13.5px;
      }
  }

  @media  screen and (max-width: 1330px) {
      #text-csv{
        font-size: 13px;
      }
  }

  @media  screen and (max-width: 1280px) {
    #text-csv{
      font-size: 12px;
    }
  }
  .box-action-confirm{
     color: #222222;
    margin-top: 30px;
  }
  .box-action-confirm .label-group {
    color: #222222;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
  }

  .box-action-confirm .radio-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .box-action-confirm .radio-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
    font-weight: 300;
    cursor: pointer;
  }

  .box-action-confirm .radio-label input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    outline: none;
    margin-top: 0;
  }

  .box-action-confirm .radio-label input[type="radio"]:checked {
    border-color: #08BF5A;
  }

  .box-action-confirm .radio-label input[type="radio"]:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #08BF5A;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
  }

  .box-action-confirm .radio-label input[type="radio"]:checked + span {
    color: #08BF5A;
    font-weight: bold;
  }

  #modalConfirmAction .modal-dialog{
    margin: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #modalConfirmAction{
    background-color: rgba(136, 136, 136, 0.64);
  }
</style>
@endpush
@section('content')
<section>
  <div class="container-fluid pc-body" id="csv-management" v-cloak>
    <div class="row">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12">
            <div class="box-top">
              <h2 style="font-weight: bold !important;">CSV管理</h2>
              <!-- <button class="btn btn-sns-line btn-sns-line-dark">
                マニュアル
              </button> -->
            </div>
          </div>
        </div>
        <!-- <div class="row">
          <div class="col-xs-12">
            <div style="width: 100%" id="text-csv">
              機能説明を160文字以下、二行まででここに記載。機能説明を160文字以下、二行まででここに記載。機能説明を160文字以下、二行まででここに記載。機能説明を160文
              <br />
              字以下、二行まででここに記載。機能説明を160文字以下、二行まででここに記載。機能説明を160文字以下、二行まででここに記載。機能説明を160文字以下、二行まで
            </div>
          </div>
        </div> -->
        <div class="row" style="margin-top: 20px;">
          <div class="col-xs-12">
            <ul class="nav nav-tabs">
              <li v-on:click="loadInitExportCsv()" class="active" style="border: none !important"><a data-toggle="tab" href="#tab-export" style="font-weight: bold !important; border: none !important; padding: 9px 15px !important">エクスポート</a></li>
              <li v-on:click="loadInitImportCsv()" style="border: none !important"><a data-toggle="tab" href="#tab-import" style="font-weight: bold !important; border: none !important; padding: 9px 15px !important">インポート</a></li>
            </ul>

            <div class="tab-content">
              <div id="tab-export" class="tab-pane active">
                <div class="box-content_top">
{{--                  <a href="{{ route('createDownloadFile') }}">--}}
                    <button  v-on:click="addNewItem()" type="button" class="btn btn-sns-line btn-sns-line-primary">新規作成</button>
{{--                  </a>--}}
                  <div>
                    <button type="button" class="btn btn-sns-line btn-sns-line-dark" data-toggle="modal" data-target="#modalSortItem" v-on:click="showModalSortItems()">並べ替え</button>
                    <button v-if="selected.length > 0" type="button" class="btn btn-sns-line btn-sns-line-danger" v-on:click="deleteItemsInfo()">一括削除</button>
                    <button v-else type="button" class="btn btn-sns-line btn-sns-line-danger" style="background: #B0C2C6;" disabled>一括削除</button>
                  </div>
                </div>
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th style="min-height: 40px !important">
                        <input style="cursor: pointer !important;" type="checkbox" name="" value="" v-model="selectAll">
                      </th>
                      <th style="white-space: nowrap !important;">作成日</th>
                      <th style="text-align: left !important; white-space: nowrap !important;">管理名</th>
                      <th style="white-space: nowrap !important;">対象人数</th>
                      <th style="white-space: nowrap !important;">最終条件設定</th>
                      <th></th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-if="items.length > 0" v-for="(item, index) in items">
                      <td>
                        <input style="cursor: pointer !important;" type="checkbox" name="check_item[]" :value="item.id" v-model="selected">
                      </td>
                      <td>@{{ formatDate(item.created_at) }}</td>
                      <td style="text-align: left !important;"><a :href="'/basic/csv-management/edit-download-file/'+item.id" style="text-decoration: underline;"> @{{ item.name }} </a></td>
                      <td class="line_user_link">
{{--                        @{{ JSON.parse(item.line_user_ids).length }}人--}}
                        <a v-if="item.enable_filter_friend == 1" href="#" v-on:click="showNumberFilter(item.id)" style="text-decoration: underline;">@{{ item.total_line_user}}人</a>
                        <a v-else-if="item.enable_bot_block_friend == 1" :href="'/basic/friendlist/block'" style="text-decoration: underline;">@{{ item.total_line_user }}人</a>
                        <a v-if="item.enable_friend_block_bot == 1" :href="'/basic/friendlist/user-block'" style="text-decoration: underline;">@{{ item.total_line_user }}人</a>
                      </td>
                      <td :id="'date_of_last_change_of_condition_csv_'+item.id">@{{ formatDate(item.date_of_last_change_of_condition) }}</td>
                      <td class="column-action" style="white-space: nowrap !important;">
                        <div :id="'action_csv_'+item.id" v-if="item.filter_update_status == 30">
                          <button type="button" class="btn btn-sns-line btn-sns-line-warning" v-on:click="updateLatestInformation(item.id)" style="min-width: 190px !important"><i class="far fa-redo"></i> 最新情報に更新</button>
                          <button type="button" class="btn btn-sns-line btn-sns-line-primary" v-on:click="exportCsv(item.id)" style="min-width: 190px !important" v-if="item.total_line_user > 0">CSVダウンロード <i class="fa fa-download" aria-hidden="true"></i></button>
                          <button type="button" disabled class="btn btn-sns-line btn-sns-line-secondary" style="min-width: 190px !important" v-else>作成中</button>
                        </div>
                        <div :id="'waiting_action_csv_'+item.id" v-else>
                          <button type="button" disabled class="btn btn-sns-line btn-sns-line-secondary" style="min-width: 190px !important"><i class="far fa-redo"></i> 最新情報に更新</button>
                          <button type="button" disabled class="btn btn-sns-line btn-sns-line-secondary" style="min-width: 190px !important">作成中</button>
                        </div>
                      </td>
                      <td>
                        <div class="btn-group box-ic" style="padding: unset;">
                          <i class="far fa-ellipsis-h ic-menu"></i>
                          <ul class="dropdown-menu action-broadcast">
                            <li class="focus-pointer-item">
                              <a v-on:click="copyItem(item.id)"  style="cursor: pointer !important; font-weight: bold !important; padding: 0 !important;">
                                コピー
                              </a>
                            </li>
                            <li class="focus-pointer-item" v-on:click="deleteItem(item.id)">
                              <div style="cursor: pointer; color: #F44336; font-weight: bold !important; padding: 0 !important;">
                                削除
                              </div>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div id="tab-import" class="tab-pane">
                <p>CSVデータのインポートにより個人メモ・タグ・友だち情報の情報を書き換えることができます。</p>
                <p style="color: red">対応マーク・最終メッセージ受信日時・配信中ステップ・QRコードアクションの情報は書き換えできません。</p>
                <div style="padding-top: 30px; padding-bottom: 30px">
                  <div style="display: flex !important; align-items: center !important; margin-bottom: 10px;">
                    <div>
                      <label for="fileUpload">
                        <span class="btn btn-sns-line btn-sns-line-primary" style="margin: 0">ファイル選択</span>
                      </label>
                      <input type="file" name="csv" style="display: none;" id="fileUpload" accept=".csv" onchange="importCSV(this)">
                    </div>
                    <p id="preview_file_name" style="margin-left: 10px !important;"></p>
                  </div>
                  <button type="button" class="btn btn-sns-line btn-sns-line-success" onclick="csvSave()" :disabled="csv_file.length==0">アップロード</button>
                </div>
                <p style="background-color: #F2F2F2; padding: 20px 20px 40px 20px">
                  ※CSVデータは必ずエクスポートページからダウンロードしたものをご利用ください。
                  <br />
                  ※CSVデータの上1・2行目と左1列目は、絶対に編集しないでください。
                  <br />
                  ※友だち情報タイプ「画像」「PDF」はインポートできません
                  <br />
                  ※友だち情報タイプ「年月日」は指定フォーマット( YYYY/MM/DD )以外は正常にインポートされません
                </p>
                <p style="margin-top: 60px">インポート履歴</p>
                <div style="height: 300px; overflow-y: scroll;">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th style="text-align: left !important; width: 5%!important; white-space: nowrap !important;">作成日</th>
                        <th style="width: 10% !important; white-space: nowrap !important;"></th>
                        <th style="text-align: left !important; min-width: 20% !important; white-space: nowrap !important;">管理名</th>
                        <th style="width: 10% !important; white-space: nowrap !important;">対象人数</th>
                        <th style="white-space: nowrap !important;">最終条件設定</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-if="historyUploadFilterItems.length > 0" v-for="(item, index) in historyUploadFilterItems">
                        <td style="text-align: left !important;">@{{ formatDate(item.created_at) }}</td>
                        <td style="text-align: left !important;">@{{ formatTime(item.created_at) }}</td>
                        <td style="text-align: left !important;">@{{ item.name }}</td>
                        <td>@{{ item.number_line_user }}人</td>
                        <td>
                          <span v-if="item.upload_status == 2">完了済</span> 
                          <span v-else>作業中</span>  
                        </td>
                      </tr>
                      <tr v-if="uploadingFilterItems.length > 0" v-for="(item, index) in uploadingFilterItems">
                        <td style="text-align: left !important;">@{{ formatDate(item.created_at) }}</td>
                        <td style="text-align: left !important;">@{{ formatTime(item.created_at) }}</td>
                        <td style="text-align: left !important;">@{{ item.name }}</td>
                        <td>@{{ item.number_line_user }}人</td>
                        <td>作業中</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="modalSortItem" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="modalSortItem">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header" style="border: 0 !important">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px" v-on:click="closeModalSortItems()">
              <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
            <h2 class="text-center" style="font-weight: bold !important;"> 【 並べ替え 】</h2>

          </div>
          <div class="modal-body scroll-modal" style="padding-bottom: 5px !important;">
            <div class="row mt-item-fol" v-for="(item,index) in arrItemsSort" :data-id="item.id" style="display: flex !important; align-items: center !important; margin-bottom: 10px !important;">
              <div class="col-sm-9 col-sm-offset-1  ">
                <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
              </div>
              <div class="col-sm-1" style="display: flex !important; align-items: center !important;">
                <div class="box-ic-sort">
                  <i class="far fa-chevron-up" v-on:click="onUpdate(undefined, index, 'up')"></i>
                  <i class="far fa-chevron-down" v-on:click="onUpdate(undefined, index, 'down')"></i>
                </div>
              </div>
            </div>
            <input type="hidden" id="array_sort" value="">
            <input type="hidden" id="current_position" value="">
          </div>
          <div class="text-center">
            <button type="button" class="btn btn-sns-line btn-sns-line-success btn-choise-folder" v-on:click="sortedItemInfor" data-dismiss="modal">保存</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modalConfirmAction" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="modalConfirmAction">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header" style="border: 0 !important; padding-bottom: 10px">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 32px; margin-top: 8px; margin-right: 15px;" >
              <i class="fal fa-times" style="color: #222222 !important;"></i></button>
            <h2 class="" style="font-weight: 600 !important; font-size: 18px; margin-left: 36px;margin-top: 20px;color: #222222;"><i class="far fa-exclamation-circle" style="color: #FEA600; margin-right: 5px;"></i>アクション稼働に関する確認</h2>

          </div>
          <div class="modal-body scroll-modal" style="padding: 0 47px">
            <div style="font-size: 14px; font-weight: 300; color: #222222; line-height: 24px">
              インポートする情報にタグ・友だち情報が含まれています。<br>
              タグ追加時アクション・友だち情報の登録時アクションが設定されている場合の <br>
              アクション稼働について選択してください。<br>
            </div>
            <div>
              <div class="box-action-confirm">
                <div class="label-group">タグ追加時アクション</div>
                <div class="radio-group">
                  <label class="radio-label">
                    <input type="radio" v-model="actionTag" value="0">
                    <span>稼働させない</span>
                  </label>
                  <label class="radio-label">
                    <input type="radio" v-model="actionTag" value="1">
                    <span>稼働させる</span>
                  </label>
                </div>

                <div class="label-group" style="margin-top: 30px">友だち情報 登録時アクション</div>
                <div class="radio-group">
                  <label class="radio-label">
                    <input type="radio" v-model="actionInForFriend" value="0">
                    <span>稼働させない</span>
                  </label>
                  <label class="radio-label">
                    <input type="radio" v-model="actionInForFriend" value="1">
                    <span>稼働させる</span>
                  </label>
                </div>
              </div>

            </div>


          </div>
          <div class="text-right" style="padding: 40px 40px 20px">
            <button type="button" class="btn btn-sns-line btn-sns-line-success " style="color: #222222 !important; background:#F8F8F8; border-color:#F8F8F8 ;width:120px " data-dismiss="modal">閉じる</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-success " style="width: 150px"  data-dismiss="modal">インポートする</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
@endsection
@push('js')
<script>
  var domainMediaCSV = '{{ env('URL_SERVER_MEDIA') }}';
</script>
<script src="/js/csv_management/csv_management.js?v={{config("sns-line.version")}}"></script>
@endpush