<style type="text/css">
    .container-fluid{
        background: #fff;
        padding-bottom: 50px;
    }
    .form-inline{
        padding-top: 15px;
    }
</style>

<div class="container-fluid">
    <form class="form-inline product-form" action="#">
        <div class="form-group col-sm-3">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-white text-capitalize"><b>时间</b>&nbsp;<i class="feather icon-calendar"></i></span>
                </div>
                <input autocomplete="off" type="text" class="form-control datepicker" id="filter-column-name-start" placeholder="时间" name="name[start]" value="">
                <span class="input-group-addon" style="border-left: 0; border-right: 0;">To</span>
                <input autocomplete="off" type="text" class="form-control datepicker" id="filter-column-name-end" placeholder="时间" name="name[end]" value="">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-white text-capitalize"><b>用户名</b></span>
                </div>
                <input type="text" class="form-control filter-column-name" placeholder="用户名" name="name" value="">
            </div>
        </div>
        <button class="btn btn-primary btn-sm btn-mini search" type="button" style="margin-left: 12px">
            <i class="feather icon-search"></i><span class="d-none d-sm-inline">&nbsp;&nbsp;搜索</span>
        </button>
    </form>
    <ul class="nav nav-tabs" role="tablist">
        @foreach ($categories as $key => $category)
            <li role="presentation" class="nav-item">
                <a href="#cate{{ $category->id }}" class="nav-link  {{$key == 0 ? 'active' :''}}"  data-toggle="tab">{{ $category->name }}</a>
            </li>
        @endforeach
    </ul>
    <div class="tab-content">
        @foreach ($categories as $key => $category)
        <div role="tabpanel" class="tab-pane {{$key == 0 ? 'active' :''}}" id="cate{{$category->id}}">
            @foreach ($category->products as $product)
            <button type="button" class="btn btn-default btn-product" data-id="{{$product->id}}" style="margin: 5px 0;">{{$product->name}}</button>
            @endforeach
        </div>
        @endforeach
    </div>

    <div class="col-md-12" style="margin: 0;padding: 0;">
        <div id="analyze" style="height: 660px;"></div>
    </div>
</div>
