@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 class="container">
   <div class="row">
      <div class="col-md-12   col-sm-12 " style="min-height: 80px;  text-align: center"    >
      <div class="col-md-12">

          <blockquote class="blockquote">
              <h3 class="mb-0" style="color:#5cb85c">白皮書熱門關鍵字更新</h3>
          </blockquote>

          
          <hr>
          <div class="update-nag">
            <div class="update-split update-success"><i class="glyphicon glyphicon-leaf"></i></div>
            <div class="update-text">本更新為熱門關鍵字 </div>
          </div>
          <hr>
        </div>

        <hr>
        <hr>

         <div id="adv-search"  class="col-md-12   col-sm-12   "  style="border-left: 2px solid #efefef; border-right: 2px solid #efefef;">
            <form style="display:inline-block;text-align: left;width:100%;" class="navbar-form" role="search" action="{{ url('/insight/keypoHkw_search_monitor') }}" method="POST">
               {!! csrf_field() !!}


               <fieldset class="form-group">
                     <label for="exampleSelect1">產業 Industry</label>
                     <select class="form-control"  name="industry">
                     <option value='all' >全部</option>
                     @foreach ($industry_list as $industry) 
                        <option value='{{$industry->industry}}' >{{$industry->industry}}</option>
                     @endforeach
                     </select>
                  </fieldset>
                  <hr>




               <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;"> KEYPO 查詢更新</button>
            </form>
         </div>
         <hr class="style-six">
      </div>
   </div>
</div>
</div>
@endsection
@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>
@endsection