@extends('layouts.app')



@section('header')

<style type="text/css">
  

.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;
}



</style>




@endsection









@section('content')



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

    <div class="col-md-9 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>


    <!-- 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-9">
         <div class="panel panel-default">
            <div class="panel-heading"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;查詢關鍵字組文章&nbsp;</div>
            <div class="panel-body">

                     <div id="adv-search"  class="col-md-12   col-sm-12   "  >
            <form style="display:inline-block;text-align: left;width:100%;" class="navbar-form" role="search" action="{{ url('/keypoArticles/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">
                            <label for="page">頁數(每頁需要6秒執行時間，一頁10筆):</label>
                            <input type="number" class="form-control" id="pages" name="s" value="1">
                </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-3">

        <div class="panel panel-default">
          <div class="panel-heading"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;下載結果&nbsp;</div>
            <div class="panel-body">
                <div class="list-group">

                    <fieldset class="form-group">
                     <h5 class="alert alert-danger">請先選擇要下載的歷史查詢結果再點擊下方下載</h5>
                     <select class="form-control" id="uuidSelect"  name="uuid">

                     
                     @foreach ($keypoArticleCates as $keypoArticleCate) 
                        <option value='{{$keypoArticleCate->uuid}}' >{{$keypoArticleCate->name}}</option>
                     @endforeach
                     </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>




@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">
  

$( document ).ready(function() {
    var a_href = $('#KAexcelDownload').attr('href');
    var uuid = $('#uuidSelect').val();
    var new_href = a_href+"?uuid="+ uuid ;
    $('#KAexcelDownload').attr('href',new_href);


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




});



</script>


@endsection


@endsection