@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
    Waterfall
    @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 href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>

@stop
{{-- Page content --}}
@section('content')
        <section class="content-header">
        <!--section starts-->
        <h1>
            Waterfall

            @if(\App\Models\Role_Permission::hasExportPermission())
                <button style="width: 100px; float: right; text-transform: capitalize; " id="button-md" onclick="loading();setTimeout(function(){ save_tabel_and_chart('chart_waterfall', 'table2') }, 2000);">Export</button>
            @endif

        </h1>

    </section>
    <!--section ends-->
    <section class="content">
        <!--main content-->
    {{--<div class="row">--}}
    <!--row starts-->
        <div class="col-md-4">
            <!--lg-6 starts-->
            <!--basic form starts-->
            <div class="panel" id="hidepanel1">

                <div class="panel-body">
                    <form class="form-horizontal pareto-menu" action="#">
                        <div class="form-position">
                            <button type="button" onClick="clearForm(this.form)" id="button-lg" class="btn btn-responsive btn-primary btn-lg">
                                Clear Inputs
                            </button>
                        </div>
                        <h2 class="first-tier-trigger">SIMULATIONS
                            <i class="glyphicon glyphicon-chevron-up showhide clickable" title="Show Panel content"></i>
                        </h2>
                        <div class="input-block active-first-tier">

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="priceInput">Price (percent)</label>
                                <input type="number" step="0.1" name="priceInput" min="-100" max="100"
                                       @if( $request->get("priceInput")) value={{$request->get("priceInput")}}@else value="0"
                                       @endif oninput="this.form.price.value=this.value;ChangeToSimulation(event)" style="color:#000"
                                       class="form-control range-type-value"/>
                                <input id="price" step="0.1" name="price" type="range" min="-100"
                                       @if( $request->get("priceInput")) value={{$request->get("priceInput")}}@else value="0" @endif  max="100"
                                       class="form-control range-type" oninput="this.form.priceInput.value=this.value" onchange="ChangeToSimulation(event)">

                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="quantityInput">Quantity (percent)</label>
                                <input type="number" name="quantityInput" step="0.1" min="-100" max="100"
                                       @if( $request->get("quantityInput")) value={{$request->get("quantityInput")}}@else value="0"
                                       @endif oninput="this.form.quantity.value=this.value;ChangeToSimulation(event)" style="color:#000"
                                       class="form-control range-type-value"/>
                                <input id="quantity" name="quantity" step="0.1" type="range" min="-100"
                                       @if($request->get("quantityInput")) value={{$request->get("quantityInput")}}@else value="0" @endif  max="100"
                                       class="form-control range-type" oninput="this.form.quantityInput.value=this.value" onchange="ChangeToSimulation(event)">

                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="rebateInput">Rebate (percentage points)</label>
                                <input type="number" name="rebateInput" step="0.1" min="-100" max="100"
                                       @if($request->get("rebateInput")) value={{$request->get("rebateInput")}}@else value="0"
                                       @endif oninput="this.form.rebate.value=this.value;ChangeToSimulation(event)" style="color:#000"
                                       class="form-control range-type-value"/>
                                <input id="rebate" name="rebate" step="0.1" type="range" min="-100" max="100"
                                       @if($request->get("rebateInput")) value={{$request->get("rebateInput")}}@else value="0"
                                       @endif class="form-control range-type"
                                       oninput="this.form.rebateInput.value=this.value" onchange="ChangeToSimulation(event)">
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="paperBoardInput">Board Costs (percent)</label>
                                <input type="number" name="paperBoardInput" step="0.1" min="-100" max="100"
                                       @if($request->get("paperBoardInput")) value={{$request->get("paperBoardInput")}}@else value="0"
                                       @endif oninput="this.form.paperBoard.value=this.value;ChangeToSimulation(event)" style="color:#000"
                                       class="form-control range-type-value"/>
                                <input id="paperBoard" name="paperBoard" step="0.1" type="range" min="-100" max="100"
                                       @if($request->get("paperBoardInput")) value={{$request->get("paperBoardInput")}}@else value="0"
                                       @endif class="form-control range-type"
                                       oninput="this.form.paperBoardInput.value=this.value" onchange="ChangeToSimulation(event)">
                            </div>


                            @include("admin.layouts.impact.visualization", ["name" => $visualizationLabel, "required" => $visualizationRequired, "visualizationValues" => $visualizationValues, "visualizationNames" => $visualizationNames])

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="show">Show</label>
                                <div class="">
                                    <select id="show" name="show" class="form-control">
                                        <option value=""></option>
                                        <option value="original" @if( $request->get("show")  == "original") selected="selected" @endif>
                                            ORIGINAL
                                        </option>
                                        <option value="simulation"
                                                @if( $request->get("show")  == "simulation") selected="selected" @endif>SIMULATION
                                        </option>
                                    </select>
                                </div>
                            </div>

                            @include("admin.layouts.impact.dateRange",  ["labelFrom" => "date-from", "labelTo" => "date-to", "name" => "Date Range", "requiredFrom" => "", "requiredTo" => ""])

                        </div>
                        <h2 class="first-tier-trigger">
                            <i class="glyphicon glyphicon-chevron-down showhide clickable"></i>
                            FILTERS
                        </h2>
                        <div class="input-block ">
                        @include("admin.layouts.impact.filters" , ["dataset"=> ""])
                        </div>
                        <div class="form-position">

                            <button type="submit" id="button-lg" class="btn btn-responsive btn-primary btn-lg">
                                Submit
                            </button>

                        </div>

                    </form>
                </div>
            </div>

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


        <script language="javascript" type="text/javascript" src="{{ asset('assets/js/chart-min.js') }}"></script>
        @if($original == 1)
            <div class="col-md-8 pull-right">
                <div class="panel panel-primary" id="chart_waterfall">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#F0785F"
                               data-hc="#F0785F"></i> Waterfall Chart
                               @include('admin.display_date_range')
                        </h3>
                        <span class="pull-right ">
                        <i class="glyphicon showhide clickable glyphicon-chevron-up" title="Hide Panel content"></i>
                    </span>
                    </div>

                    <div style="" class="panel-body">
                        <canvas id="waterfall"></canvas>
                    </div>
                </div>
            </div>
        @else

            <div class="col-md-8 pull-right">
                <div class="panel panel-primary" id="chart_waterfall">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#F0785F"
                               data-hc="#F0785F"></i> Waterfall Chart
                        </h3>
                        <span class="pull-right ">
                        <i class="glyphicon showhide clickable glyphicon-chevron-up" title="Hide Panel content"></i>
                    </span>
                    </div>

                    <div style="" class="panel-body">
                        <canvas id="waterfall"></canvas>
                    </div>
                </div>

                @if(\App\Models\Role_Permission::hasExportPermission())
                    <button style="width: 100px; float: right; text-transform: capitalize; " id="button-md" onclick="loading();setTimeout(function(){ save_tabel_and_chart('sim_chart_waterfall', 'table2') }, 2000);">Export</button>
                @endif

                <div class="panel panel-primary" id="sim_chart_waterfall">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#F0785F"
                               data-hc="#F0785F"></i>Simulation
                        </h3>
                        <span class="pull-right ">
                        <i class="glyphicon showhide clickable glyphicon-chevron-up" title="Hide Panel content"></i>
                    </span>
                    </div>

                    <div class="panel-body">
                        <canvas id="simulated_waterfall"></canvas>
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-md-8 pull-right">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#F0785F"
                               data-hc="#F0785F"></i> Waterfall Table
                        </h3>
                        <span class="pull-right pareto-table-closed">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                    </span>
                    </div>
                    <div class="panel-body">

                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="table2" width="100%">
                                <thead>
                                <tr>
                                    <th>Position</th>
                                    <th>Original Value</th>
                                    @if($original == 0)
                                        <th>Simulated Value</th>
                                        <th>Deviation</th>
                                    @endif
                                </tr>
                                </thead>
                                <tbody>