@extends('Modules.Stock.layouts.main')
<title>Stock Dashboard</title>
<link rel="icon" href="{{URL::to('src/img/Dairycare.ico') }}">
<link href="{{URL::to('src/ionicons-2.0.1/css/ionicons.min.css') }}" rel="stylesheet" type="text/css" /> <!-- Theme style -->
<link type="text/css" href="{{URL::to('src/css/loading-overlay.css')}}" rel="stylesheet">
@section('main-content')
@if(Auth::user()->hasRole('Admin')||Auth::user()->hasRole('Stock Keeper'))
<link href="{{URL::to('src/css/css/AdminLTE.css') }}" rel="stylesheet" type="text/css" />
<link href=" {{URL::to('src/css/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{URL::to('src/css/jquery-ui.css')}}" rel="stylesheet" type="text/css" />
<script src="{{URL::to('src/js/loading-overlay-corrected.min.js')}}"></script>
<style>
        .x_panel{position:relative;width:100%;margin-bottom:10px;padding:10px 17px;display:inline-block;background:#fff;border:1px solid #E6E9ED;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;column-break-inside:avoid;opacity:1;transition:all .2s ease}.x_title{border-bottom:2px solid #E6E9ED;padding:1px 5px 6px;margin-bottom:10px}.x_title .filter{width:40%;float:right}.x_title h2{margin:5px 0 6px;float:left;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.x_title h2 small{margin-left:10px}.x_title span{color:#BDBDBD}.x_content{padding:0 5px 6px;position:relative;width:100%;float:left;clear:both;margin-top:5px}.x_content h4{font-size:16px;font-weight:500}legend{padding-bottom:7px}.demo-placeholder{height:280px}
       .content-wrapper{
        background-image: url('img/warehouse.jpg');
    }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<script src="{{URL::to('src/js/highcharts.js')}}"></script>
<!--<script type="text/javascript"  src="{{URL::to('src/js/highcharts_reports.js')}}"></script>-->
<script src="{{URL::to('src/js/highcharts-3d.js')}}"></script>
<script type="text/javascript"  src="{{URL::to('src/js/exporting.js')}}"></script>



@foreach($name as $m)
    <input type="hidden" name="name[]" id="months" value="{{$m.' ('.$feed_units[$k].')'}}">
    @endforeach
    @foreach($quantity as $count)
        <input type="hidden" name="quantity[]" id="months" value="{{$count}}">
    @endforeach
    
    @foreach($sem_name as $m)
        <input type="hidden" name="sem_name[]" id="months" value="{{$m}}">
    @endforeach
    @foreach($sem_quantity as $count)
        <input type="hidden" name="sem_quantity[]" id="months" value="{{$count}}">
    @endforeach
    
    @foreach($med_name as $m)
        <input type="hidden" name="med_name[]" id="months" value="{{$m}}">
    @endforeach
    @foreach($med_quantity as $count)
        <input type="hidden" name="med_quantity[]" id="months" value="{{$count}}">
    @endforeach



    <div class="row">
        <div class="col-lg-3 col-xs-3" id="feeding_stock_div">
            <!-- small box -->
            <div class="small-box bg-blue-steel">
                <div class="inner">
                    <h4><div id="feeding_stock_value"></div></h4>
                    <p>Feeding Stock price</p>
                </div>
                <div class="icon">
                    <i class="ion ion-clipboard" style="margin-top: 5px;"></i>
                </div>
<!--                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
        </div>
        
        <div class="col-lg-3 col-xs-3" id="medicine_stock_div">
            <!-- small box -->
            <div class="small-box bg-blue-steel">
                <div class="inner">
                    <h4><div id="medicine_stock_value"></div></h4>
                    <p>Medicine Stock price</p>
                </div>
                <div class="icon">
                    <i class="ion ion-clipboard" style="margin-top: 5px;"></i>
                </div>
<!--                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-3">
            <!-- small box -->
            <div class="small-box bg-green-jungle">
                <div class="inner">
                    <h4>{{$total_products}}</h4>

                    <p>Total products</p>
                </div>
                <div class="icon" >
                    <i class="ion ion-calendar" style="margin-top: 5px;"></i>
                </div>
<!--                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
        </div>
        
        <div class="col-lg-3 col-xs-3">
            <!-- small box -->
            <div class="small-box bg-orange-active">
                <div class="inner">
                    <h4>{{$sum_semen_quantity}}</h4>

                    <p>Net Semen Quantity</p>
                </div>
                <div class="icon" >
                    <i class="ion ion-waterdrop" style="margin-top: 5px;"></i>
                </div>
<!--                <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
        </div>

        <!-- ./col -->
    </div>
    
    <div class="portlet box" style="background-color:#BF360C;border: 2px solid #BF360C">
        <div class="portlet-title">
            <div class="caption">Stock Information</div>
        </div>
        <div class="portlet-body" style="background-color:#E0E0E0;">
            <div id="container" style="height: 400px;"></div>
            <br>
            <div id="sem_graph" style="height: 400px;"></div>

        </div>


    </div>
<script>

get_stock_price();

    function get_stock_price()
    {
        jQuery(function ($) {
            var target = $('#feeding_stock_div');

            $('.toggle-loading').click(function () {
                if (target.hasClass('loading')) {
                    target.loadingOverlay('remove');
                } else {
                    target.loadingOverlay();
                    $(".loading-overlay").css('z-index',5);
                };
            });
        });

        $("#feeding_stock_div").LoadingOverlay("show");

        $("#feeding_stock_div").LoadingOverlay("show", {
        background  : "rgba(171, 210, 236, 0.5)"
        });
        
        jQuery(function ($) {
            var target = $('#medicine_stock_div');

            $('.toggle-loading').click(function () {
                if (target.hasClass('loading')) {
                    target.loadingOverlay('remove');
                } else {
                    target.loadingOverlay();
                    $(".loading-overlay").css('z-index',5);
                };
            });
        });

        $("#medicine_stock_div").LoadingOverlay("show");

        $("#medicine_stock_div").LoadingOverlay("show", {
        background  : "rgba(171, 210, 236, 0.5)"
        });


        $.ajax({
            method: 'GET',
            url: '{{url("get_stock_price_of_feeding_and_medication")}}',
            data: {
            },
            success: function(response)
            {
                $('.nav-md').css({'padding-right':'0px'});
                var balance_data = JSON.parse(response);

                setTimeout(function(){
                    $("#feeding_stock_div").LoadingOverlay("hide", true);
                }, 200);

                $("#feeding_stock_value").text(balance_data.feeding_cost);
                
                setTimeout(function(){
                    $("#medicine_stock_div").LoadingOverlay("hide", true);
                }, 200);

                $("#medicine_stock_value").text(balance_data.medicine_cost);
            },
            error: function (jqXHR, status, err) {

            }
        }); 
    }

    $(function () {

        var a =  $("input[name='quantity[]']").map(function(){return $(this).val();}).get()+'';
        console.log(a);

        var b = a.split(',');
        //console.log(b);
        var c = b.map(Number);

        Highcharts.chart('container', {
            chart: {
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 10,
                    beta: 5,
                    depth: 80
                },
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                        [0, 'rgb(188, 170, 164)'],
                        [1, 'rgb(249, 251, 231)']
                    ]
                }
            },
            title: {
                text: 'Feed Stock',
                style: {
                    color: '#8D6E63',
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            subtitle: {
                text: 'Products Names And Quantities',
                style: {
                    color: '#8D6E63',
                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            credits: {
                text: 'dairycare.website',
                href: 'http://dairycare.website'
            },
            xAxis: {
                categories: $("input[name='name[]']").map(function(){return $(this).val();}).get()
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                name: 'Quantity',
                data: c,
                color:'#83A83D',
                tooltip: {
                    valueSuffix: ' '
                },
            }]
        });
    });

    $(function () {

        var a =  $("input[name='sem_quantity[]']").map(function(){return $(this).val();}).get()+'';
        console.log(a);
        var b = a.split(',');
        //console.log(b);
        var c = b.map(Number);


        Highcharts.chart('sem_graph', {
            chart: {
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 10,
                    beta: 5,
                    depth: 80
                },
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                        [0, 'rgb(240, 244, 195)'],
                        [1, 'rgb(249, 251, 231)']
                    ]
                }
            },
            credits: {
                text: 'dairycare.website',
                href: 'http://dairycare.website'
            },
            title: {
                text: 'Semen Stock',
                align: 'center',
                style: {
                    color: '#EA4335',
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            subtitle: {
                text: 'Products Names And Qunatities',
                style: {
                    color: '#EA4335',
                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            legend: {
                itemStyle: {
                    font: '9pt Trebuchet MS, Verdana, sans-serif',
                    color: '#EA4335'
                },
                itemHoverStyle:{
                    color: '#EA4335'
                }   
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            xAxis: {
                categories: $("input[name='sem_name[]']").map(function(){return $(this).val();}).get()
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                name: 'Quantity (NOS)',
                data: c,
                color:'#FBBB3D'
                        
            }]
        });
    });
</script>

@else

<h3>Insufficient Permissions</h3>
@endif

@endsection