@extends('layouts.app')



@section('header')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">

<style type="text/css">
  
body {
  padding-bottom: 80px;
}


.ds-btn { list-style:none; float:left; padding:10px; }
.ds-btn  a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
.ds-btn  a span small{width:100%; display:inline-block; text-align:left;}



.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
  width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */
    
    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
  text-indent: 0;
}

.update-nag{
  display: inline-block;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  height: 40px;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
  margin-bottom: 10px;
}

.update-nag:hover{
    cursor: pointer;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.4);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.3);
}

.update-nag > .update-split{
  /*background: #337ab7;*/
  width: 33px;
  float: left;
  color: #fff!important;
  height: 100%;
  text-align: center;
}

.update-nag > .update-split > .glyphicon{
  position:relative;
  top: calc(50% - 9px)!important; /* 50% - 3/4 of icon height */
}
.update-nag > .update-split.update-success{
  background: #5cb85c!important;
}

.update-nag > .update-split.update-danger{
  background: #d9534f!important;
}

.update-nag > .update-split.update-info{
  background: #5bc0de!important;
}



.update-nag > .update-text{
  line-height: 19px;
  padding-top: 11px;
  padding-left: 45px;
  padding-right: 20px;
}


         .dropdown-menu>.active>a
         {
         background-color: #239cef !important;
         }

    :required  {  
   background: url(https://cdn0.iconfinder.com/data/icons/fugue/icon/asterisk-small.png) no-repeat;
   background-position:right top;
  }





.multiselect-container>li>a>label {
  padding-left: 10px;
}

.exportList {
    background-color: #fff;
    padding: 10px;
    font-weight: bold;
    color: #55896F;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
    margin:0px;
}



.commingSoon::after{
            content: 'CommingSoon';
            height: 100%;
            width: 90%;
            font-size: 24px;
            font-family: '微軟正黑體';
            font-weight: bold;
            line-height: 50px;
            letter-spacing: 2px;
            color: #fff;
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            text-align: center;
            opacity: 0.7;
            padding-top: 30%;  
            transition: .8s;
            background-color: #000;

        }



</style>




@endsection









@section('content')



<div id="insight" class="container">
  <div class="row">
    <div class="col-md-12">

    <div class="col-md-6 alert alert-success" role="alert">
      <strong>哦哦哦哦哦</strong> {{$statusMessage}}
    </div>

    <div class="col-md-3 alert alert-info" role="alert" style="padding:8px;text-align: center;">

        <button type="button" class="btn btn-info" style="margin:0px;width: 100%" data-toggle="modal" data-target="#exampleModal">
      使用說明
    </button>
      
    </div>

     <div class="col-md-3 ds-btn pull-right" style="padding: 0px;padding-top: 5px;background-color: #eee;text-align: right;">
             <a class="btn btn-lg btn-primary"  style="display: inline-block;width: 100%;" href="/dv/public/keypoArticles">
          <i class="glyphicon glyphicon-user pull-left"></i><span>跑keypo文章列表點此<br></span></a> 
            
    </div>
      
    </div>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">阿美下</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            使用方法請詢問宇軒
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">我了解了</button>
          </div>
        </div>
      </div>
    </div>

      
    </div>

        <div class="col-md-12">
         <div class="panel panel-default">
            <div class="panel-heading"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;查詢KeyPoApi&nbsp;</div>
            <div class="panel-body" style="padding:0px;">

                <div id="adv-search"  class="col-md-12   col-sm-12   "  >
                <form   style="display:inline-block;text-align: left;width:100%;margin:0px" class="navbar-form" role="search" action="{{ url('/keypoExport/search') }}" method="POST">
                {!! csrf_field() !!}

                  <hr>


                <div class="form-group ">
                            <label for="usr">設定關鍵字組名稱(ex:動物):</label>
                            <input  style="width: 200px" type="text" class="form-control" name="tn">
                </div>

                <hr class="style-six">

                <div class="form-group">
                            <label for="usr">設定關鍵字組(ex:大象&老虎!動物方程式):</label>
                            <input  style="width: 750px" type="text" class="form-control" name="keywords">
                </div>
                

                <hr class="style-six">

                <div class="form-group input-group">
                  <label for="usr">設定查詢Api(多選，每個Api查詢之間會間隔6秒) : </label>
                  &nbsp;
                  <select   name="apiSelect[]" class="multiselect" multiple="multiple">
                      <option value="freq">聲量趨勢</option>
                      <option  value="hotkw">熱門關鍵字</option>
                      <option disabled="disabled" value="sn">SN比</option>
                      <option disabled="disabled" value="pn">PN比</option>
                  </select>
                </div>

                <hr class="style-six">


               <label  >時間區間</label>
               <div id="reportrange" class="pull-right" style="clear:both;background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                  <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                  <span></span> <b class="caret"></b>
               </div>
               <hr class="style-six">
               <input type="hidden" id = "daterange-hidden" name="daterange-hidden" value="">
               <hr class="style-six">
               <hr>
               <button class="btn btn-info pull-right" id="filter-btn" style="margin-top: 5px;"> 查吧查吧 </button>
            </form>
         </div>
         <hr class="style-six">

            </div>
         </div>
      </div>


      <div class="col-md-12" >
      <h3  class="exportList" ><i class="fa fa-external-link-square" aria-hidden="true"></i> 報告輸出 <label for="info" class="btn btn-primary pull-right" >輸出包含同時跑的其他API數據(會在不同的ExcelSheet) <input style="background-color: #7ac5cd;color: #fff" checked type="checkbox" id="exportCheck" class="badgebox"><span class="badge">&check;</span></label></h3>
      <h5 class="alert alert-danger">請先選擇要下載的歷史查詢結果再點擊下方下載</h5>
        <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-heading" style="background-color: #007380;color: #fff;"><i class="fa fa-line-chart" aria-hidden="true"></i> &nbsp;&nbsp;下載聲量趨勢報告&nbsp;</div>
              <div class="panel-body">
                  <div class="list-group">

                      <fieldset class="form-group">
                       <select class="form-control" id="uuidSelect_freq"  name="uuid">
                        @foreach ($keypofreqs as $keypofreq) 
                          <option value='{{$keypofreq->uuid}}' >{{$keypofreq->tn}} ( {{$keypofreq->userName}}   )</option>
                        @endforeach
                       
                       </select>
                    </fieldset>
                  <a id="KFexcelDownload" href="{{url('keypoExport/keypoApiExport')}}" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                      </h3>



                      <h4 class="list-group-item-heading count">
                          下載<span class="tnName"></span>最新輸出結果</h4>
                      <p class="list-group-item-text">
                          (DownloadExcel)</p>
                  </a>
                 </div>
              </div>
          </div>
        </div>
        <div class="col-md-3"> 
          <div class="panel panel-default">
            <div class="panel-heading" style="background-color: #ffa500;color: #fff;" ><i class="fa fa-diamond" aria-hidden="true"></i> &nbsp;&nbsp;下載熱門關鍵字報告&nbsp;</div>
              <div class="panel-body">
                  <div class="list-group">

                      <fieldset class="form-group">
                       <select class="form-control" id="uuidSelect_hkw"  name="uuid">
                       @foreach ($keypohkws as $keypohkw) 
                          <option value='{{$keypohkw->uuid}}' >{{$keypohkw->tn}} ( {{$keypohkw->userName}}   )</option>
                        @endforeach
                       
                       </select>
                    </fieldset>
                  <a id="KHKWexcelDownload" href="{{url('keypoExport/keypoApiExport')}}" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                      </h3>



                      <h4 class="list-group-item-heading count">
                          下載<span class="tnName"></span>最新輸出結果</h4>
                      <p class="list-group-item-text">
                          (DownloadExcel)</p>
                  </a>
                 </div>
              </div>
          </div>
        </div>
        <div class="col-md-3 commingSoon">
          <div class="panel panel-default">
            <div class="panel-heading" style="background-color: #8B2266;color: #fff;" ><i class="fa fa-shield" aria-hidden="true"></i> &nbsp;&nbsp;下載SN比報告&nbsp;</div>
              <div class="panel-body">
                  <div class="list-group">

                      <fieldset class="form-group">
                       <select class="form-control" id="uuidSelect"  name="uuid">

                       
                       </select>
                    </fieldset>
                  <a id="KAexcelDownload" href="{{url('keypoArticles/export')}}" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                      </h3>



                      <h4 class="list-group-item-heading count">
                          下載<span class="tnName"></span>最新輸出結果</h4>
                      <p class="list-group-item-text">
                          (DownloadExcel)</p>
                  </a>
                 </div>
              </div>
          </div>
        </div>
        <div class="col-md-3 commingSoon">
          <div class="panel panel-default">
            <div class="panel-heading" style="background-color: #00592c;color: #fff;" ><i class="fa fa-heartbeat" aria-hidden="true"></i>&nbsp;&nbsp;下載PN比報告&nbsp;</div>
              <div class="panel-body">
                  <div class="list-group">

                      <fieldset class="form-group">

                       <select class="form-control" id="uuidSelect"  name="uuid">

                       
                       </select>
                    </fieldset>
                  <a id="KAexcelDownload" href="{{url('keypoArticles/export')}}" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                      </h3>



                      <h4 class="list-group-item-heading count">
                          下載<span class="tnName"></span>最新輸出結果</h4>
                      <p class="list-group-item-text">
                          (DownloadExcel)</p>
                  </a>
                 </div>
              </div>
          </div>
        </div>

      </div>




        
  </div>
  <hr>
</div>




@endsection






@section('footer')


@section('footer')
<script type="text/javascript">
   $(function() {
   
       var start = moment().subtract(29, 'days');
       var end = moment();

   
       function cb(start, end) {
           $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
       }
   
       $('#reportrange').daterangepicker({
           startDate: start,
           endDate: end,
       }, cb);
   
       cb(start, end);
   
   
       $("#filter-btn").click(function(){
        
   
        var t  = $("#reportrange").text();
        t = $.trim(t);
        $("#daterange-hidden").val(t);
        $("#adv-search").css("display","none");
        $("#gif").css("display","block");
        
   });
       
   });
</script>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>


<script type="text/javascript">
  

$( document ).ready(function() {





    var a_href = $('#KFexcelDownload').attr('href');
    var uuid = $('#uuidSelect_freq').val();
    var new_href = a_href+"?uuid="+ uuid ;
    $('#KFexcelDownload').attr('href',new_href);
    if ($('#exportCheck').is(':checked')) {

        var a_href = $('#KFexcelDownload').attr('href');
        var new_href = a_href+"&exportCheck=true" ;
    }


    $( "#uuidSelect_freq" ).change(function() {
          var a_href = $('#KAexcelDownload').attr('href').split('?')[0];
    var uuid = $('#uuidSelect').val();
    var new_href = a_href+"?uuid="+ uuid ;
    $('#KFexcelDownload').attr('href',new_href);
  });


    $(function() {
    $('.multiselect').multiselect();
});


    var a_href = $('#KHKWexcelDownload').attr('href');
    var uuid = $('#uuidSelect_hkw').val();
    var new_href = a_href+"?uuid="+ uuid ;
    $('#KHKWexcelDownload').attr('href',new_href);


    $( "#uuidSelect_hkw" ).change(function() {
          var a_href = $('#KHKWexcelDownload').attr('href').split('?')[0];
    var uuid = $('#uuidSelect_hkw').val();
    var new_href = a_href+"?uuid="+ uuid ;
    $('#KHKWexcelDownload').attr('href',new_href);
  });


});



</script>




@endsection


@endsection