@extends('layouts.admin')

@section('page-title', trans('crm.profit'))

@section('content')

@section('styles')
    {!! HTML::style('assets/plugins/handsontable-7.3/handsontable.full.min.css') !!}
@stop

<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h4><a href="javascript:history.back()" style="color: black;"><i class="icon-arrow-left52 mr-2"></i></a> <span class="font-weight-semibold">@lang('crm.profit')</span></h4>
        </div>
    </div>
</div>

<div class="content">

    @include('partials.messages')
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title">@lang('crm.profit_summary')</h5>
            <div class="header-elements font-size-lg">
                <select class="form-control" id="select_date" data-fouc>
                    @foreach(range(2017, \Carbon\Carbon::today()->year + 10) as $y)
                        <option value="{{ $y }}" @if($y == $year) selected @endif>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="card-body">
            <div class="d-sm-flex align-items-sm-center justify-content-sm-between flex-sm-wrap">
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $summary['deposit'] }} <span class="text-success font-size-sm font-weight-normal">( {{ get_percent($summary['deposit'], $summary['total']) }}% )</span></h4>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-success">Deposit Fee</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $summary['performance'] }} <span class="text-success font-size-sm font-weight-normal">( {{ get_percent($summary['performance'], $summary['total']) }}% )</span></h4>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-success">Performance Fee</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $summary['total'] }}</h4>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-muted">@lang('crm.contracts_view_all')</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <h4>Profit Per Month</h4>
                    <div class="relative" style="max-height:400px">
                        <canvas class="chart" height="400" id="profit-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card profit-wrapper">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <h4>Profit Per Contract</h4>
                    <div class="hot-container hot-scrollable" style="height: 450px;">
                        <div id="hot_format" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                    </div>
                    <br>
                    @if(admin_permission('profit.update'))
                    <button type="button" class="btn btn-primary float-right" onclick="saveProfit()" >@lang('crm.save')</button>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>
@stop

@section('scripts')
    {!! HTML::script('assets/plugins/Chart.js/Chart.min.js') !!}

    {!! HTML::script('assets/plugins/handsontable-7.3/handsontable.full.min.js') !!}

    <script>
        var profits, readonlyRender;

        $(document).ready(function () {

            new Chart($('#profit-chart'), {
                type: 'bar',
                data: {!! $chart !!},
                options: {
                    legend: {
                        display: true,
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            display: true,
                            ticks: {
                                suggestedMin: 0,
                            }
                        }]
                    }
                }
            });



            var hot_format = document.getElementById('hot_format');
            profits = new Handsontable(hot_format, {
                data: {!! $profit_contracts !!},
                colHeaders: true,
                rowHeaders: true,
                stretchH: "all",
                rowHeights: '30px',
                className: "htCenter htMiddle",
                licenseKey: 'non-commercial-and-evaluation',
                nestedHeaders: [
                    [ '','',{label: 'Jan', colspan: 2},{label: 'Feb', colspan: 2},{label: 'Mar', colspan: 2},{label: 'Apr', colspan: 2},
                        {label: 'May', colspan: 2},{label: 'Jun', colspan: 2},{label: 'Jul', colspan: 2},{label: 'Aug', colspan: 2},
                        {label: 'Sep', colspan: 2},{label: 'Oct', colspan: 2},{label: 'Nov', colspan: 2},{label: 'Dec', colspan: 2},
                    ],
                    [
                        '','Contract Type', 'Days','Profit','Days','Profit','Days','Profit','Days','Profit','Days','Profit','Days','Profit',
                        'Days','Profit','Days','Profit','Days','Profit','Days','Profit','Days','Profit','Days','Profit',
                    ]
                ],
                hiddenColumns: {
                    columns: [0],
                    indicators: false
                },
                fixedColumnsLeft:2,
                fixedRowsTop: 0,
                columns: function(index) {
                    var month = new Date().getMonth();
                    return {
                        type: index > 1 ? 'numeric' : 'text',
                        /*readOnly: index < month * 2 + 2,*/
                        numericFormat: {
                            pattern: (index > 1 && index % 2 === 1) ? '0.00 %' : '00'
                        },
                    }
                },
                afterValidate (isValid, value, row, prop, source) {
                    // track errors for showing in tooltip
                    if (!isValid) {
                        console.log(row, prop);
                    }
                },
            });

            var menu = $('#select_date').multiselect({
                buttonClass: 'text-default font-weight-semibold bg-transparent border-0 cursor-pointer outline-0 py-0 pl-0',
                enableHTML: true,
                dropRight: $('html').attr('dir') == 'rtl' ? false : true,
                onChange: function(element) {
                    window.location.href = "{{ url('sales/profit?year=') }}"+$(element).val()
                },
                buttonText: function (options, element) {
                    var selected = '';
                    options.each(function() {
                        selected += $(this).html() + ', ';
                    });
                    return '<span class="badge badge-mark border-warning mr-2"></span>' + selected.substr(0, selected.length -2);
                }
            });


        });

       function saveProfit() {
           profits.validateCells((valid) => {
               if (!valid) {
                   errorNotify('Please fix invalid cells of profit table.');
                   return false;
               }else{

                   var data = profits.getData();

                   blockUI($('.profit-wrapper'));

                   $.ajax({
                       type: 'POST',
                       url: "/sales/profit/save",
                       data: {data: JSON.stringify(data), year: '{{ Request::get('year') }}' },
                       success: function (response) {
                           if (response.status == 1) {
                               successNotify('Success', response.msg);
                           } else {
                               errorNotify('Error', response.msg);
                           }
                       },
                       error: function (response) {
                           errorNotify('Error', response.message);
                       },
                       complete: function () {
                           unblock($('.profit-wrapper'));
                       }
                   }, 'json')
               }
           })
       }

    </script>
@stop