@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Heat Map Chart
    @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" />

@stop
{{-- Page content --}}
@section('content')
    <section class="content-header">
        <!--section starts-->
        <h1>Heat Map Chart</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>
                </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>
@stop