@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
Heat Map Table
@parent
@stop

{{-- page level styles --}}
@section('header_styles')

<link href="{{ asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.css') }}"  rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/vendors/iCheck/css/all.css') }}"  rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/buttons.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/colReorder.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/rowReorder.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/buttons.bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/scroller.bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/pages/tables.css') }}" />

@stop
{{-- Page content --}}
@section('content')
<section class="content-header">
    <!--section starts-->
    <h1>Heat Map Table</h1>
    <ol class="breadcrumb">
        <li>
            <a href="{{ route('admin.dashboard') }}">
                <i class="livicon" data-name="home" data-size="14" data-loop="true"></i>
                Dashboard
            </a>
        </li>
        <li>
            <a href="#">Forms</a>
        </li>
        <li class="active">Form Examples</li>
    </ol>
</section>
<!--section ends-->
<section class="content">
    <!--main content-->
    <div class="row">
        <!--row starts-->
        <div class="col-md-6">
            <!--lg-6 starts-->
            <!--basic form starts-->
            <div class="panel panel-primary" id="hidepanel1">
                <div class="panel-body">
                    <form class="form-horizontal" action="#">
                        <!-- CSRF Token -->
                        <!-- Name input-->
                        <h2>MEASURES</h2>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="rangex">X-Axis Range</label>
                            <div class="col-md-9">
                                <input id="rangex" name="rangex" type="text" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="rangey">Y-Axis Range</label>
                            <div class="col-md-9">
                                <input id="rangey" name="rangey" type="text" class="form-control">
                            </div>
                        </div>

                        <h2>FILTERS</h2>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="sold_cnt">SoldTo Country</label>
                            <div class="col-md-9">
                                <select id="sold_cnt" name="sold_cnt" class="form-control">
                                    <option value=""></option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="prod_hr">Prod Hierarchy</label>
                            <div class="col-md-9">
                                <input id="prod_hr" name="prod_hr" type="text" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="segment">Segment</label>
                            <div class="col-md-9">
                                <select id="segment" name="segment" class="form-control">
                                    <option value=""></option>
                                    <option value="100">100</option>
                                    <option value="1000">1000</option>
                                    <option value="1000000">1000000</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="sub_segment">Sub-Segment</label>
                            <div class="col-md-9">
                                <select id="sub_segment" name="sub_segment" class="form-control">
                                    <option value=""></option>
                                    <option value="100">100</option>
                                    <option value="1000">1000</option>
                                    <option value="1000000">1000000</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="cust_group">Customer Group</label>
                            <div class="col-md-9">
                                <input id="cust_group" name="cust_group" type="text" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="ext_sales">External Sales Employee</label>
                            <div class="col-md-9">
                                <select id="ext_sales" name="ext_sales" class="form-control">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>

                    </form>






                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="table2"
                               width="100%">
                            <thead>
                            <tr>
                                <th>Customer/Prospect</th>
                                <th>Total Demand(kSQM)</th>
                                <th>Share</th>
                                <th>Company Index</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

        </div>
        <!--md-6 ends-->

    </div>

    <!--main content ends-->
</section>
<!-- content -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<div style="width:75%">
    <canvas id="bridge-plot"></canvas>
</div>

@stop

{{-- page level scripts --}}
@section('footer_scripts')
<script src="{{ asset('assets/vendors/jasny-bootstrap/js/jasny-bootstrap.js') }}" ></script>
<script src="{{ asset('assets/vendors/iCheck/js/icheck.js') }}"></script>
<script src="{{ asset('assets/js/pages/form_examples.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/bridge.js') }}" ></script>

<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/jquery.dataTables.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/jeditable/js/jquery.jeditable.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.bootstrap.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.buttons.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.colReorder.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.responsive.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.rowReorder.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/buttons.colVis.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/buttons.html5.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/buttons.print.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/buttons.bootstrap.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/buttons.print.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/pdfmake.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/vfs_fonts.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.scroller.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/js/pages/table-advanced.js') }}" ></script>
@stop