@extends('layouts.app')


@section('content')
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>

<div class="  ">



                <!-- ============================================================== -->
                <!-- Sales overview chart -->
                <!-- ============================================================== -->
                <div class="row pb-4">
                    <div class="col-lg-12 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex no-block">
                                    <div>
                                        <h3 class="card-title m-b-5"><span class="lstick"></span>Select Crop </h3>
                                    </div>
                                    <div class="ml-auto">
                                        <select name="year" class="custom-select b-0" id="year" onchange="reloadpage()">
                                            <option value="0">Select Year</option>
                                            @foreach($dash['years'] as $key => $value)
                                               <option value="{{ $key }}"  selected >
                                                {{ $value }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml-auto">
                                        <select class="custom-select b-0" id="seasons" onchange="reloadpage()">
                                            <option value="0">All</option>
                                            @foreach($dash['seasons'] as $name)
                                               <option value="{{ $name->season_id }}" @if($name->season_id == $dash['selected_season']) selected @endif>
                                                {{ $name->season_name }}
                                            </option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="chartdiv" class="p-relative" style="height:360px;"></div>
                            </div>
                            
                            
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- visit charts-->
                    <!-- ============================================================== -->
                    
                </div>

                <div class="row pb-4">
                    <div class="col-lg-9 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex no-block">
                                    <div>
                                        <h3 class="card-title m-b-5"><span class="lstick"></span>Employees </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="container" class="p-relative" style="height:360px;"></div>
                            </div>
                            
                            
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- visit charts-->
                    <!-- ============================================================== -->
                    <div class="col-lg-3 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title"><span class="lstick"></span>Region Wise Crop Harvest<select class="custom-select" name="regioncrop" id="regioncrop" onchange="reloadpage()">
                                            <option value="0">All</option>
                                            @foreach($dash['crops'] as $name)
                                               <option value="{{$name->crop_id}}" @if($name->crop_id==$dash['selected_region_crop']) selected @endif>
                                                {{ $name->crop_name }}
                                            </option>
                                            @endforeach

                                        </select></h4>
                                <table class="table vm font-14">
                                    <tr>
                                        <td>Crop Name</td>
                                        <td>Region Name</td>
                                        <td>Total Actual Harvest</td>
                                    </tr>
                                    @foreach($dash['regions_harvested'] as $name)
                                               <tr>
                                                <td>
                                                {{ $name->crop_name }}
                                            </td>
                                            <td>
                                                {{ $name->region }}
                                            </td>
                                            <td>
                                                {{ $name->volume_total }}
                                            </td>
                                            </option>
                                            @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                    <!-- <div class="row pb-4">
                    <div class="col-6 col-lg-3 mb-3">
                        <div class="card  ">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="m-r-20 align-self-center">
                                        <i class="fas fa-leaf text-info" style="font-size: 40px;"></i>
                                    </div>
                                    <div class="align-self-center ">
                                        <h6 class=" m-t-10 m-b-0">Total Income</h6>
                                        <h2 class="m-t-0 ">953,000</h2></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3 mb-3">
                        <div class="card ">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="m-r-20 align-self-center">
                                        <i class="fas fa-credit-card text-danger" style="font-size: 40px;"></i>
                                    </div>
                                    <div class="align-self-center">
                                        <h6 class="text-muted m-t-10 m-b-0">Total Expense</h6>
                                        <h2 class="m-t-0">236,000</h2></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3 mb-3">
                        <div class="card ">
                            <div class="card-body ">
                                <div class="d-flex">
                                    <div class="m-r-20 align-self-center">
                                        <i class="icon-badge text-primary" style="font-size: 40px;"></i>
                                    </div>
                                    <div class="align-self-center">
                                        <h6 class=" m-t-10 m-b-0">Total Assets</h6>
                                        <h2 class="m-t-0">987,563</h2></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" col-6 col-lg-3 mb-3">
                        <div class="card ">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="m-r-20 align-self-center">
                                        <i class="fas fa-users text-warning" style="font-size: 40px;"></i>
                                    </div>
                                    <div class="align-self-center">
                                        <h6 class="text-muted m-t-10 m-b-0">Total Staff</h6>
                                        <h2 class="m-t-0">987,563</h2></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
<!-- ============================================================== -->
                <!-- Twitter facebook and mail boxes -->
                <!-- ============================================================== -->
                <!-- <div class="row pb-4">
                    <div class="col-lg-4">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="stats">
                                        <h1 class="text-white">3257+</h1>
                                        <h6 class="text-white">Twitter Followers</h6>
                                        <button class="btn btn-rounded btn-outline btn-light m-t-10 font-14">Check list</button>
                                    </div>
                                    <div class="stats-icon text-right ml-auto"><i class="fab fa-twitter display-5 op-3 text-dark"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="stats">
                                        <h1 class="text-white">6509+</h1>
                                        <h6 class="text-white">Facebook Likes</h6>
                                        <button class="btn btn-rounded btn-outline btn-light m-t-10 font-14">Check list</button>
                                    </div>
                                    <div class="stats-icon text-right ml-auto"><i class="fab fa-facebook-f display-5 op-3 text-dark"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="stats">
                                        <h1 class="text-white">9062+</h1>
                                        <h6 class="text-white">Subscribe</h6>
                                        <button class="btn btn-rounded btn-outline btn-light m-t-10 font-14">Check list</button>
                                    </div>
                                    <div class="stats-icon text-right ml-auto"><i class="fa fa-envelope display-5 op-3 text-dark"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script type="text/javascript">
  // Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
$(function () {
    Highcharts.chart('chartdiv', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Monthly Statistic'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
    },
    xAxis: {
        categories: {!! $dash['month_legend'] !!},
        plotBands: [{ // visualize the weekend
            from: 4.5,
            to: 6.5,
            color: 'rgba(0, 255, 0, .2)'
        }]
    },
    yAxis: {
        title: {
            text: 'Harvest'
        }
    },
    tooltip: {
        shared: true,
        //valueSuffix: ' Orange'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [
                            {
                name:'Lichi',
                data:[0,0,0,0]
            },
            {
                name:'Grapes',
                data:[0,0,0,0]
            },
            {
                name:'Apple',
                data:[0,0,0,0]
            },
            // {
    //     name: 'Lichi',
    //     data: [3, 4, 3, 5, 4, 10, 12]
    // }, {
    //     name: 'Apple',
    //     data: [1, 3, 4, 3, 3, 5, 4]
    // }
    // , {
    //     name: 'Mango',
    //     data: [4, 5,1, 6, 12, 3, 1]
    // }

    ]
});

});


Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Employees By Gender and Contract Type',
        align: 'left'
    },
    subtitle: {
        text: '',
        align: 'left'
    },
    xAxis: {
        categories: ['Full Time', 'Contract', 'Seasonal', 'Labour'],
        title: {
            text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Number Of Employees',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        gridLineWidth: 0
    },
    tooltip: {
        valueSuffix: ''
    },
    plotOptions: {
        bar: {
            borderRadius: '50%',
            dataLabels: {
                enabled: true
            },
            groupPadding: 0.1
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Male',
        data: [{{$dash['employees'][0]->fulltime_male}}, {{$dash['employees'][0]->contract_male}}, {{$dash['employees'][0]->seasonal_male}}, {{$dash['employees'][0]->labour_male}}]
    }, {
        name: 'Female',
        data: [{{$dash['employees'][0]->fulltime_female}}, {{$dash['employees'][0]->contract_female}}, {{$dash['employees'][0]->seasonal_female}}, {{$dash['employees'][0]->labour_female}}]
    }]
});
             
function reloadpage()
{
    var regioncrop=$("#regioncrop").val(); 
    var reioncropset;
    var url = window.location.href.split('?')[0];
    if(regioncrop!=null && regioncrop!='')
    {
    
if (url.indexOf('?') > -1){
   url += '&crop='+regioncrop;
}else{
   url += '?crop='+regioncrop;
    }
    
    }
    var season=$("#seasons").val(); 
    if(season!=null && season!='')
    {
    
if (url.indexOf('?') > -1){
   url += '&season='+season;
}else{
   url += '?season='+season;
    }
   
    }

    var year=$("#year").val();
    if(year!=null && year!='')
    {
    
if (url.indexOf('?') > -1){
   url += '&year='+year;
}else{
   url += '?year='+year;
    }
   
    }
window.location.href = url;
}
</script>            
@stop