@extends('m3::liberty-theme.layout.main')
@section('title')
Solon Sentinel Portal
@endsection
@section('content')
<div class="container-fluid px-4">
    <h1 class="mt-4">Executive Dashboard</h1>

    <div class="card mb-4">
        <div class="card-header" style="line-height: 34px;">
            <i class="fas fa-table me-1"></i>
            Filters
        </div>
        <div class="card-body">
            <div class="card-body">

                <form>
                    @csrf

                    <div class="row mb-3">
                        <label for="inputEmail" class="col-sm-2 col-form-label">Date Range</label>
                            <div class="col-sm-10">
                                <label for="text" class="visually-hidden">dates</label>
<input value="{{ $starting }} - {{ $ending }}" id="text" name="dates" type="text"  aria-describedby="textHelpBlock" class="form-control">
                            </div>
                    </div>

                    <div class="row mb-3">
                        <label for="inputWhs" class="col-sm-2 col-form-label">Warehouse</label>
                            <div class="col-sm-10">
                                <label for="exec_whs" class="visually-hidden">Warehouse</label>
                                <select id="exec_whs" name="whs" class="form-control">
                                    <option value="*ALL">*ALL</option>
                                    @foreach($whs_array as $key)
                                        <option value={{$key}}
                                            @if($whs==$key) selected @endif
                                        >{{$key}}</option>
                                    @endforeach
                                </select>
                            </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-xs-offset-2 col-xs-10">
                            <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>

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

    <div class="row">
        @foreach($data as $key=>$value)
        <div class="col-xl-6">
            <div class="card mb-12">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    {{($key=="IC")?'INTERCO':'EXTERNAL'}}
                </div>
                <div class="card-body">

                <figure class="highcharts-figure">
                <div id="container{{($key=='IC')?'1':'2'}}"></div>
                </figure>

                </div>
            </div>
        </div>
        @endforeach
    </div>


    <div class="row" style="margin-top:20px;">
        @foreach($data as $key=>$value)
        <div class="col-sm-6">
            <div class="card text-white bg-info mb-3" id="div2">
                <div class="card-header"><h5 class="card-title">{{($key=="IC")?'INTERCO':'EXTERNAL'}} <span class="text-end">$ {{ number_format($data[$key]['total'], 0, '.', ',') }}</span></h5></div>
                <div class="card-body">
                    <b>Held</b>: $ {{ number_format($data[$key]['HLD'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9495;&nbsp;<b>Financial Hold</b>: $ {{ number_format($data[$key]['FinHld'], 0, '.', ',') }}&nbsp;&nbsp;($ {{ number_format($data[$key]['FinFutHld'], 0, '.', ',') }} is &#62;{{env('FDATE')}} in future)<br>
                    &nbsp;&nbsp;&#9475;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved On Pick</b>: $ {{ number_format($data[$key]['FHResPick'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9475;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved No Pick</b>: $ {{ number_format($data[$key]['FHResNoPick'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9475;&nbsp;&nbsp;&#9495;&nbsp;<b>Not reserved</b>: $ {{ number_format($data[$key]['FHNres'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9495;&nbsp;<b>Customer Hold</b>: $ {{ number_format($data[$key]['CusHld'], 0, '.', ',') }}&nbsp;&nbsp;($ {{ number_format($data[$key]['CusFutHld'], 0, '.', ',') }} is &#62;{{env('FDATE')}} in future)<br>
                    &nbsp;&nbsp;&#9475;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved On Pick</b>: $ {{ number_format($data[$key]['CHResPick'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9475;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved No Pick</b>: $ {{ number_format($data[$key]['CHResNoPick'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9475;&nbsp;&nbsp;&#9495;&nbsp;<b>Not reserved</b>: $ {{ number_format($data[$key]['CHNres'], 0, '.', ',') }}<br>
                    <b>Avail</b>: $ {{ number_format($data[$key]['Avail'], 0, '.', ',') }}&nbsp;&nbsp;($ {{ number_format($data[$key]['futNH'], 0, '.', ',') }} is &#62;{{env('FDATE')}} in future)<br>
                    &nbsp;&nbsp;&#9495;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved On Pick</b>: $ {{ number_format($data[$key]['AvResPick'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9495;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved No Pick Fill Code 1</b>: $ {{ number_format($data[$key]['AvResNoPickFillCode1'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9495;&nbsp;&nbsp;&#9495;&nbsp;<b>Reserved No Pick</b>: $ {{ number_format($data[$key]['AvResNoPick'], 0, '.', ',') }}<br>
                    &nbsp;&nbsp;&#9495;&nbsp;<b>Not reserved</b>: $ {{ number_format($data[$key]['AvUNres'], 0, '.', ',') }}<br>
                    <b>No Early</b>: $ {{ number_format($data[$key]['NoE'], 0, '.', ',') }}
                </div>
            </div>
        </div>
        @endforeach
    </div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

var s1 = $('#div1').height();
var s2 = $('#div2').height();
if (s1 > s2){
    $('#div2').css('height', s1 + "px");
}else{
    $('#div1').css('height', s2 + "px");
}

@foreach ($data as $key=>$value)
    var data{{$key}} = [
    {id: '0.0',parent: '', name: 'Total', value: '{{ $data[$key]['total'] }}'},
        { id: '1.1', parent: '0.0', name: 'Held', value: '{{ $data[$key]['HLD'] }}'},
            { id: '1.1.1', parent: '1.1', name: 'Financial Hold', value: '{{ $data[$key]['FinHld'] }}'},
                { id: '1.1.1.1', parent: '1.1.1', name: 'Reserved', value: '{{ $data[$key]['FHResPick'] }}'},
                { id: '1.1.1.2', parent: '1.1.1', name: 'Reserved', value: '{{ $data[$key]['FHResNoPick'] }}'},
                { id: '1.1.1.3', parent: '1.1.1', name: 'Not reserved', value: '{{ $data[$key]['FHNres'] }}'},
            { id: '1.1.2', parent: '1.1', name: 'Customer Hold', value: '{{ $data[$key]['CusHld'] }}'},
                { id: '1.1.2.1', parent: '1.1.2', name: 'Reserved', value: '{{ $data[$key]['CHResPick'] }}'},
                { id: '1.1.2.2', parent: '1.1.2', name: 'Reserved', value: '{{ $data[$key]['CHResNoPick'] }}'},
                { id: '1.1.2.3', parent: '1.1.2', name: 'Not reserved', value: '{{ $data[$key]['CHNres'] }}'},
        { id: '1.2', parent: '0.0', name: 'Avail', value: '{{ $data[$key]['Avail'] }}'},
            { id: '1.2.1', parent: '1.2', name: 'Avail', value: '{{ $data[$key]['Avail'] }}'},
                { id: '1.2.1.1', parent: '1.2.1', name: 'Reserved On Pick', value: '{{ $data[$key]['AvResPick'] }}'},
                { id: '1.2.1.2', parent: '1.2.1', name: 'Reserved No Pick', value: '{{ $data[$key]['AvResNoPick'] }}'},
                { id: '1.2.1.3', parent: '1.2.1', name: 'Reserved No Pick Fill Code 1', value: '{{ $data[$key]['AvResNoPickFillCode1'] }}'},
                { id: '1.2.1.4', parent: '1.2.1', name: 'Not reserved', value: '{{ $data[$key]['AvUNres'] }}'},
        { id: '1.3', parent: '0.0', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'},
            { id: '1.3.1', parent: '1.3', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'},
                { id: '1.3.1.1', parent: '1.3.1', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'}
    ];
@endforeach

Highcharts.chart('container1', {
chart: { height: '100%'},
colors: ['transparent'].concat(Highcharts.getOptions().colors),
title: { text: 'Interco Chart'},

series: [{
    type: 'sunburst',
    data: dataIC,

    allowDrillToNode: true,
    cursor: 'pointer',
    dataLabels: {
        format: '{point.name}',
        filter: {
            property: 'innerArcLength',
            operator: '>',
            value: 16
        },
        rotationMode: 'circular'
    },
    levels: [{
        level: 1,
        levelIsConstant: false,
        dataLabels: {
            filter: {
                property: 'outerArcLength',
                operator: '>',
                value: 64
            }
        }
    }, {
        level: 2,
        colorByPoint: true
    },
    {
        level: 3,
        colorVariation: {
            key: 'brightness',
            to: -0.5
        }
    }, {
        level: 4,
        colorVariation: {
            key: 'brightness',
            to: 0.5
        }
    }]

}],

tooltip: {
    headerFormat: '',
    pointFormat: '<b>{point.name}</b> is <b>$ {point.value:,.1f}</b>'
}

});

Highcharts.chart('container2', {
chart: { height: '100%' },
colors: ['transparent'].concat(Highcharts.getOptions().colors),
title: {  text: 'External Chart' },

series: [{
    type: 'sunburst',
    data: dataEX,

    allowDrillToNode: true,
    cursor: 'pointer',
    dataLabels: {
        format: '{point.name}',
        filter: {
            property: 'innerArcLength',
            operator: '>',
            value: 16
        },
        rotationMode: 'circular'
    },
    levels: [{
        level: 1,
        levelIsConstant: false,
        dataLabels: {
            filter: {
                property: 'outerArcLength',
                operator: '>',
                value: 64
            }
        }
    }, {
        level: 2,
        colorByPoint: true
    },
    {
        level: 3,
        colorVariation: {
            key: 'brightness',
            to: -0.5
        }
    }, {
        level: 4,
        colorVariation: {
            key: 'brightness',
            to: 0.5
        }
    }]

}],

tooltip: {
    headerFormat: '',
    pointFormat: '<b>{point.name}</b> is <b>$ {point.value:,.1f}</b>'
}
});
</script>

<script>

    $(document).ready(function() {

        // Date range init
        $('input[name="dates"]').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD',
            },
            startDate: '{{ $starting }}',
            endDate: '{{ $ending }}',
            alwaysShowCalendars: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'This Year': [moment().startOf('year'), moment()]
             }
        });

    });

</script>
@endsection