@extends('layouts.admin')

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

@section('content')


<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.contracts')</span></h4>
            {{--<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>--}}
        </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.contract_summary_heading')</h5>
        </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">{{ $total_contracts['all'] }}</h4>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-muted">@lang('crm.contracts_view_all')</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $total_contracts['active'] }} <span class="text-success font-size-sm font-weight-normal">( {{ $total_contracts['active_percent'] }}% )</span></h4>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-success">@lang('crm.contract_summary_active')</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $total_contracts['expired'] }} <span class="text-danger font-size-sm font-weight-normal">( {{ $total_contracts['expired_percent'] }}% )</span></h4>
                        <span class="badge badge-mark border-danger mr-1"></span> <span class="text-danger">@lang('crm.contract_summary_expired')</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $total_contracts['about_expired'] }}<span class="text-success font-size-sm font-weight-normal"> ( {{ $total_contracts['about_expired_percent'] }}% )</span></h4>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-success">@lang('crm.contract_summary_about_to_expire')</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $total_contracts['recently_added'] }}<span class="text-danger font-size-sm font-weight-normal">( {{ $total_contracts['recently_added_percent'] }}% )</span></h4>
                        <span class="badge badge-mark border-danger mr-1"></span> <span class="text-danger">@lang('crm.contract_summary_recently_added')</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h4 class="font-weight-semibold mb-0">{{ $total_contracts['trash'] }}</h4>
                        <span class="badge badge-mark border-muted mr-1"></span> <span class="text-muted">@lang('crm.contract_summary_trash')</span>
                    </div>
                </div>

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

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h4>@lang('crm.contract_summary_by_type')</h4>
                    <div class="relative" style="max-height:400px">
                        <canvas class="chart" height="400" id="contracts-by-type-chart"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <h4>@lang('crm.contract_summary_by_type_value') (<span data-popup="tooltip" data-container="body" data-placement="top" data-title="@lang('crm.base_currency_string')" class="text-has-action">{{ $base_currency->name }}</span>)</h4>
                    <div class="relative" style="max-height:400px">
                        <canvas class="chart" height="400" id="contracts-value-by-type-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title">@lang('crm.contracts')</h5>
            <div class="header-elements">
                <div class="list-icons">
                    <a class="list-icons-item" data-action="collapse"></a>
                    <a class="list-icons-item" data-action="reload"></a>
                    <a class="list-icons-item" data-action="remove"></a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row header-controls">
                <div class="col-md-6">
                    @if(admin_permission('contract.create'))
                    <a href="{{ route('admin.contracts.new') }}" class="btn btn-success" id="add-contract">
                        <i class="icon-plus-circle2"></i>&nbsp;
                        @lang('crm.new_contract')
                    </a>
                    @endif
                </div>
                <div class="col-md-6">
                    @include('admin.invoice.partials.sale_filter', ['statuses' => $statuses, 'sale_agents' => $sale_agents])
                </div>
            </div>


            <table class="table" id="contracts-table">
                <thead>
                    <th>@lang('crm.the_number_sign')</th>
                    {{--<th>@lang('crm.contract_list_subject')</th>--}}
                    <th>@lang('crm.contract_list_client')</th>
                    <th>@lang('crm.contract_types_list_name')</th>
                    <th>@lang('crm.contract_value')</th>
                    <th>@lang('crm.contract_client_fee')</th>
                    <th>@lang('crm.contract_list_start_date')</th>
                    <th>@lang('crm.contract_list_end_date')</th>
                    <th>@lang('crm.clients_contracts_status')</th>
                    <th>@lang('crm.signature')</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

</div>
@stop

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

    <script>

        $(document).ready(function () {
            var table = $('#contracts-table').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url':'{{ url('admin/contracts/postGetContractsData') }}',
                    'data': function ( d ) {
                        var status = [];
                        $.each($("input[name='status']:checked"), function(){
                            status.push($(this).val());
                        });
                        d.status = status.join(",");

                        var sale_agent = [];
                        $.each($("input[name='sale_agent']:checked"), function(){
                            sale_agent.push($(this).val());
                        });
                        d.sale_agent = sale_agent.join(",");
                    }
                },
                'columns': [
                    { data: 'id' },
                    /*{ data: 'subject' },*/
                    { data: 'company' },
                    { data: 'contracts_type_name'},
                    { data: 'contract_value' },
                    { data: 'client_fee' },
                    { data: 'datestart' },
                    { data: 'dateend' },
                    { data: 'status' },
                    { data: 'signature' },
                ],
                'order': [[6, 'asc']],
                rowCallback: function (row, data) {
                    $(row).addClass('has-row-options');
                    if ( data.is_past) {
                        $(row).addClass('alert-danger');
                    }
                }
            });

            $('input[name="status"], input[name="sale_agent"]').on('change', function () {
                table.ajax.reload();
            })

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

        });
    </script>
@stop