@extends('layouts.app')
@section('style')
{{-- <link href="{{ asset('assets/global/css/plugins.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/css/plugins-md.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/plugins/morris/morris.css')}}" rel="stylesheet" type="text/css" /> --}}
<link rel="stylesheet" href="{{url('/')}}/ltr/assets/global/plugins/amcharts/amcharts/plugins/export/export.css" type="text/css" media="all" />
<style type="text/css">
    .setting_menu li.active a,
    .ver-inline-menu li.active i {
        background-color: #d4d7dc !important;
        color: #393a3d !important;
    }
    .ver-inline-menu li a {
        background: #eceef1 !important;
        border-left: solid 2px #eceef1;
        color: #393a3d !important;
    }
    .ver-inline-menu li i {
        background: #eceef1 !important;
    }
    .t_head {
        background-color: #eceef1 !important;
        /* padding: 7px !important; */
    }
    .t_body {
        background-color: #eceef1 !important;
        /* padding: 7px !important; */
    }
    .report_a_title {
        color: #393a3d;
    }
    a.report_a_title:hover {
        color: #393a3d;
        text-decoration: none;
    }
    .table-advance {
        text-align: center !important;
    }
    .amcharts-chart-div>a{
        display: none !important;
    }
    .income .amcharts-pie-slice {
        fill: #00ff00;
    }
    .expense .amcharts-pie-slice {
        fill: #ff0000
    }
    .cost .amcharts-pie-slice {
        fill: #ffff00
    }
    .exp {
        float: left;
    }
    .exp:hover .amcharts-export-menu {
        opacity: 1;
    }
    #chartdiv {
        width: 100%;
        height: 300px;
    }
    .amcharts-legend-div {
        overflow-y: auto!important;
        max-height: 300px;
    }
    .firstCard{
        border: 1px solid rgba(189, 189, 189, 0.169);
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: center;
        padding: 15px 0px;
        border-radius: 10px;
        background: rgba(189, 189, 189, 0.169);
        outline: none;
        transition: .5s;
        margin-bottom: 5px;
    }
    .firstCard:hover{
        background: transparent;
        scale: 1.03;
        border: 1px solid rgba(170, 170, 170, 0.203);
    }
</style>
@stop
@section('content')
@include('invoices.modal')
<div id="date_model" v-cloak>
    {{Form::open(['route' => 'financialReportComparison2.income','method' => 'Get','class' => 'inline'])}}
    <button id="show-modal" style="display: none" type="button" @click="editExample">Show Modal</button>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
        <div slot="body" >
            <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.FirstDate')</label>
                            <div class="input-group">
                                <input class="form-control date" id="range-from-example" name="from_date" autocomplete="off" >
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control date" id="range-to-example" name="to_date" autocomplete="off" >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.SecondDate')</label>
                            <div class="input-group">
                                <input class="form-control date" id="range-from-example" name="from_date1" autocomplete="off" >
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control date" id="range-to-example" name="to_date1" autocomplete="off" >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer">
            <button type="submit" class="btn btn-success" @click="ok">
                @lang('layout.Submit')
            </button>
            <button type="button" class="btn btn-danger" @click="close">
                @lang('layout.Cancel')
            </button>
        </div>
    </modal>
    {{Form::close()}}
</div>
<div class="portlet light ">
    <div class="portlet-title" id="backbtn">
        <div class="caption">
            <i class="icon-equalizer font-green-haze"></i>&nbsp;
            <span class="caption-subject font-green-haze bold uppercase">@lang('layout.ProfitAndLoss')</span>
        </div>
    </div>
    <div class="portlet-body form">
        <div class="row">
            <div id="tab_6" class="tab-pane active">
                <div id="accordion1" class="panel-group">
                    <div class="panel panel-default">
                        <div class="">
                            {{-- <a href="{{route('financialReport.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('layout.ProfitAndLossSimple')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div> --}}
                                    {{-- <table class="table table-striped table-bordered table-advance">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('layout.ProfitAndLossSimple')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                {{-- </div>
                            </a> --}}
                            {{-- <a href="{{route('financialReport1.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('layout.ProfitAndLossSimple') 1</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div> --}}

                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('layout.ProfitAndLossSimple') 1
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                {{-- </div>
                            </a> --}}
                            {{-- <a href="{{route('financialReport2.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('layout.ProfitAndLossSimple') 2</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div> --}}

                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('layout.ProfitAndLossSimple') 2
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                {{-- </div>
                            </a> --}}
                            {{-- <a href="{{route('financialReportComparison.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('menu.ProfitAndLossByPrevYearComparison')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div> --}}

                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('menu.ProfitAndLossByPrevYearComparison')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                {{-- </div>
                            </a> --}}
                            {{-- <a id="select_date_report" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('menu.ProfitAndLossYTDComparison')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>  
                                        </div>
                                    </div> --}}

                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('menu.ProfitAndLossYTDComparison')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                {{-- </div>
                            </a> --}}
                            {{-- @if(systemConfig()[24] == 1)
                            <a href="{{route('financialReportClass.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('menu.ProfitAndLossByClass')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i> 
                                        </div>
                                    </div> --}}

                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('menu.ProfitAndLossByClass')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                {{-- </div>
                            </a>
                            @endif --}}
                        </div>
                        <div class="panel-body">
                            <a href="{{route('financialReport.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('layout.ProfitAndLossSimple')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div>
                                    {{-- <table class="table table-striped table-bordered table-advance">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('layout.ProfitAndLossSimple')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                </div>
                            </a>
                            <a href="{{route('financialReport1.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('layout.ProfitAndLossSimple') 1</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div>
                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('layout.ProfitAndLossSimple') 1
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                </div>
                            </a>
                            <a href="{{route('financialReport2.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('layout.ProfitAndLossSimple') 2</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div>
                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('layout.ProfitAndLossSimple') 2
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                </div>
                            </a>
                            <a href="{{route('financialReportComparison.income')}}" class="report_a_title">
                                <div class="col-md-3 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('menu.ProfitAndLossByPrevYearComparison')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                        </div>
                                    </div>
                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('menu.ProfitAndLossByPrevYearComparison')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                </div>
                            </a>
                            <a id="select_date_report" class="report_a_title">
                                <div class="col-md-3 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('menu.ProfitAndLossYTDComparison')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i>  
                                        </div>
                                    </div>
                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('menu.ProfitAndLossYTDComparison')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                </div>
                            </a>
                            @if(systemConfig()[24] == 1)
                            <a href="{{route('financialReportClass.income')}}" class="report_a_title">
                                <div class="col-md-2 col-sm-12 col-xs-12">
                                    <div class="firstCard">
                                        <div>
                                            <span style="font-size: 16px;">@lang('menu.ProfitAndLossByClass')</span>
                                        </div>
                                        <div style="margin-top: 1em;">
                                            <i class="fa fa-file-text-o" style="font-size: 38px;"></i> 
                                        </div>
                                    </div>
                                    {{-- <table class="table table-striped table-bordered table-advance ">
                                        <tr>
                                            <td class="t_head" style="font-weight: bold;">
                                                @lang('menu.ProfitAndLossByClass')
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="t_body">
                                                <i class="fa fa-file-text-o" style="font-size: 38px;"></i>
                                            </td>
                                        </tr>
                                    </table> --}}
                                </div>
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!----------------------------------------------------------------------------
        | BEGIN  Income And Expenses Charts
        |---------------------------------------------------------------------------->
        <div class="row">
            <div class="col-md-12 col-sm-12" style="border: 1px solid rgba(170, 170, 170, 0.203); border-radius: 5px;padding: 0px 0px 15px 0px;margin: 0px 0px 10px 0px">
                <div class="col-md-12 col-sm-12" id="income-and-expense-chart">
                    <div class="portlet light">
                        <div class="portlet-body">
                            <div class="actions" style="border-bottom: 1px solid rgba(170, 170, 170, 0.203);margin-bottom: 10px;">
                                <i class="fa fa-print text-warning" onclick="printChart('income_and_expense_chart')" style="font-size: 20px;cursor:pointer"></i>
                                <i class="fa fa-refresh text-info" @click="getData()" style="font-size: 20px;cursor:pointer"></i>
                            </div>
                            <div class="alert alert-success text-center" v-show="loading">
                                <img src="{{asset('ltr/assets/layouts/layout/img/ajax-modal-loading.gif')}}" />
                            </div>
                            <div class="col-lg-8">
                                <div style="padding: 0px;margin:0px" class="dashboard-stat2" v-show="this.chart !=null && !loading">
                                    <table class="dashboard-tabel table-bordered" width="100%">
                                        <thead>
                                            <tr style="background-color: #eceef1; height:34px">
                                                <th colspan="2">@lang('layout.Total') </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <span>
                                                @foreach($income_expense_all AS $asset)
                                                <tr style="height:30px">
                                                    @if($asset['type'] =="income" || $asset['type'] =="otherIncome")
                                                    <td class="highlight" style="color: green;">
                                                        {{__('layout.' . ucfirst($asset['type']))}}
                                                    </td>
                                                    <td  style="color: green;"> {{myRound($asset['balance'])}}</td>
                                                    @endif
                                                    @if($asset['type'] =="expense" || $asset['type'] =="otherExpense")
                                                    <td class="highlight" style="color: red;">
                                                        {{__('layout.' . ucfirst($asset['type']))}}
                                                    </td>
                                                    <td  style="color: red;"> {{myRound($asset['balance'])}}</td>
                                                    @endif
                                                    @if($asset['type'] =="costOfGoodSold")
                                                    <td class="highlight" style="color: orange;">
                                                        {{__('layout.' . ucfirst($asset['type']))}}
                                                    </td>
                                                    <td  style="color: orange;"> {{myRound($asset['balance'])}}</td>
                                                    @endif 
                                                </tr>
                                                @endforeach
                                                <tr style="background-color: #eceef1; height:34px">
                                                    <td style="color: green;">@lang('layout.Income') </td>
                                                    <td style="color: red;">@lang('layout.Expense') </td>
                                                </tr>
                                                <tr >
                                                    <td class="highlight" style="color: green; height:34px">
                                                        {{myRound($Incomes_t)}} {{getHomeCurrency()['code']}}
                                                    </td>
                                                    <td class="highlight" style="color: red; height:34px">
                                                        {{myRound($Expense_t)}} {{getHomeCurrency()['code']}}
                                                    </td>
                                                </tr>
                                            </span>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div>
                                    <canvas id="income_and_expense_chart" height="280" width="600"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12" style="border: 1px solid rgba(170, 170, 170, 0.203); border-radius: 10px; padding: 25px 0px 0px 0px;">
                <div class="row">
                    <div class="col-md-9 col-sm-12" id="income-and-expense-chart2">
                        <div :class="fullSc">
                            <div class="portlet light">
                                <div class="portlet-body">
                                    <div class="actions" style="border-bottom: 1px solid rgba(170, 170, 170, 0.203);margin-bottom: 10px;">
                                        <i class="fa fa-print text-warning" onclick="printChart('income_and_expense_chart2')" style="font-size: 20px;cursor:pointer"></i>
                                        <!-- <button  class="btn red" onclick="downloadChart('income_and_expense_chart2','chart')" ><i class="fa fa-print"></i></button> -->
                                        <i class="fa fa-refresh text-info" @click="getData()"  style="font-size: 20px;cursor:pointer"></i>
                                        <!-- <a class="btn red" data-container="false" data-placement="bottom" href="javascript:;" data-original-title="" title="" @click="fullScreen()">
                                            <i class="fa fa-expand" ></i>
                                        </a> -->
                                    </div>
                                    <div class="alert alert-success text-center" v-show="loading">
                                        <img src="{{asset('ltr/assets/layouts/layout/img/ajax-modal-loading.gif')}}" />
                                    </div>
                                    <div style="display: flex;flex-wrap: wrap;justify-content: center; align-items: center;">
                                        <div style="padding: 0px;margin:0px" class="dashboard-stat2" v-show="this.chart !=null && !loading">
                                            <table class="dashboard-tabel table-bordered" width="100%">
                                                <thead>
                                                    <br />
<b>Warning</b>:  Undefined variable $Incomes_t in <b>E:\Ampps\www\CAS\resources\views\financial\index.blade.php</b> on line <b>545</b><br />
<br />
<b>Warning</b>:  Undefined variable $Expense_t in <b>E:\Ampps\www\CAS\resources\views\financial\index.blade.php</b> on line <b>545</b><br />
                                                    <tr style="background-color: #eceef1; height:34px">
                                                        <th style="color: green;">@lang('layout.Income') </th>
                                                        <th style="color: red;">@lang('layout.Expense') </th>
                                                        <th style="color: {{($net_p>0)?'green':'red'}}">@lang('layout.NetProfit') </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <span>
                                                        <tr style="height:34px">
                                                            <td class="highlight" style="color: green;">
                                                                {{myRound($Incomes_t)}} {{getHomeCurrency()['code']}}
                                                            </td>
                                                            <td class="highlight" style="color: red;">
                                                                {{myRound($Expense_t)}} {{getHomeCurrency()['code']}}
                                                            </td>
                                                            <td class="highlight" style="color: {{($net_p>0)?'green':'red'}}">
                                                                {{myRound($net_p)}} {{getHomeCurrency()['code']}}
                                                            </td>
                                                        </tr>
                                                    </span>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div>
                                            <canvas id="income_and_expense_chart2" height="180" width="600"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12" id="today-income-and-expense-chart">
                        <div :class="fullSc">
                            <div class="portlet light">
                                <div class="portlet-body">
                                    <div class="alert alert-success text-center" v-show="loading">
                                        <img src="{{asset('ltr/assets/layouts/layout/img/ajax-modal-loading.gif')}}" />
                                    </div>
                                    <div>
                                        <canvas id="today_income_and_expense_chart" height="410" width="600"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
        <!----------------------------------------------------------------------------
        | End  Income And Expenses Charts
        |---------------------------------------------------------------------------->
        <!----------------------------------------------------------------------------
        | BEGIN  Income And Expenses Charts
        |---------------------------------------------------------------------------->
        <div>
            <div class="row" style="border: 1px solid rgba(170, 170, 170, 0.203); border-radius: 5px;margin-top: 10px;display: flex; justify-content: center;align-items: center;">
                <div class="col-md-12 col-sm-12">
                    <div class="" id="income_expense_chart">
                        <div class="portlet light">
                            <div class="portlet-body">
                                <div class="actions"></div>
                                <div id="chartIncomeExpense" class="chart" style="height: 400px;"> </div>
                                <div id="ex_income_expens" class="exp"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="border: 1px solid rgba(170, 170, 170, 0.203); border-radius: 5px;margin-top: 10px; display: flex; justify-content: center;align-items: center;">
                <div class="col-md-12 col-sm-12">
                    <div class="row" style="display: flex; justify-content: center; align-items: center;">
                        <div id="income_expense_cost_chart" style="width: 80%;">
                            <div>
                                <div class="portlet light">
                                    <div class="portlet-body">
                                        <div id="income_expense_cost" class="chart" style="height: 400px;"> </div>
                                        <div id="ex_income_expens_cost" class="exp"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!----------------------------------------------------------------------------
        | End  Income And Expenses Charts
        |---------------------------------------------------------------------------->
        {{-- <div id="chartdiv" style="width: 100%;height:800px;"></div> --}}
    </div>
</div>
@endsection
@push('scripts')
<script>
var Modal = Vue.component('modal', {
    template: '#modal-template',
    methods: {
        ok: function () {
            this.$emit('ok')
        }
    }
});
// start date_model
new Vue({
    el: '#date_model',
    data: {
        showModal: false
    },
    methods: {
        ok: function () {
            //alert('you clicked me');
            this.showModal = !this.showModal;
        },
        close: function (e) {
            this.showModal = !this.showModal;
        },
        editExample: function () {
            //Your other code that launches the modal
            this.showModal = true;
            this.$nextTick(function () {
                $(document).ready(function () {
                    $(".date").persianDatepicker(modelDate());
                });
            })
        }
    },
});
$('#select_date_report').on('click', function (e) {
    $('#show-modal').click();
    e.preventDefault();
})
</script>
<script src="{{ asset('chart/Chart.bundle.js') }}"></script>
<script src="{{ asset('assets/global/plugins/morris/morris.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/morris/raphael-min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/amcharts.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/serial.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/pie.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/radar.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/themes/light.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/themes/patterns.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/themes/chalk.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/ammap/ammap.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/ammap/maps/js/worldLow.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amstockcharts/amstock.js') }}" type="text/javascript"></script>
<script src="{{url('/')}}/ltr/assets/global/plugins/amcharts/amcharts/plugins/export/export.js"></script>
<script src="{{ asset('assets/pages/scripts/dashboard.js') }}" type="text/javascript"></script>
<script>
    Vue.component('v-select', VueSelect.VueSelect);
    //--------------------------------------------------------
    //              Begin  Income And Expense                       
    //--------------------------------------------------------//
    let incomeAndExpense = new Vue({
        el: '#income-and-expense-chart',
        data: {
            chart: null,
            dates: [],
            label: [],
            color: [],
            loading: false,
            type: 'income_expense_all',
            fullSc: 'portlet light bordered'
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData: function() {
                this.loading = true;
                if (this.chart != null) {
                    this.chart.destroy();
                }
                type_temp = this.type;
                axios.get("{{route('home.chartjsTest')}}?type=" + type_temp)
                .then(response => {
                    if (response.data.todayIncomeExpense.length > 0) {
                        this.dates = response.data.todayIncomeExpense;
                        this.label = response.data.todayIncomeExpenseLabel;
                        this.color = response.data.todayIncomeExpenseColor;
                        incomeAndExpense.chartData(this.dates, this.label, this.color);
                    }
                })
                .catch(function(error) {})
                .finally(() => (this.loading = false));
            },
            fullScreen() {
                if (this.fullSc == 'portlet light bordered portlet-fullscreen') {
                    this.fullSc = 'portlet light bordered';
                } else {
                    this.fullSc = 'portlet light bordered portlet-fullscreen';
                }
            },
            chartData(dates, label, color) {
                var ctx_income_and_expense = document.getElementById("income_and_expense_chart");
                incomeAndExpense.chart = new Chart(ctx_income_and_expense, {
                    // type: 'polarArea',
                    type: 'doughnut',
                    // type: 'line',
                    // type: 'radar',
                    // type: 'bubble',
                    // type: 'pie',
                    data: {
                        labels: label,
                        datasets: [{
                            backgroundColor: color,
                            data: dates,
                            borderWidth: 3
                        }],
                    },
                    options: {
                        legend: {
                            display: true,
                            position: 'right',
                            align: 'center',
                            labels: {
                                fontSize: 14,
                                fontColor: 'red',
                                boxWidth: 20,
                                boxHeight: 20
                            }
                        },
                        elements: {
                            rectangle: {
                                borderWidth: 2,
                                borderColor: 'rgb(0, 255, 0)',
                                borderSkipped: 'bottom'
                            }
                        },
                        responsive: true,
                        title: {
                            display: false,
                            text: '@lang("layout.IncomeAndExpense")',
                            position: 'left',
                            fontSize: 20,
                        }
                    }
                });
            }
        }
    });
    //--------------------------------------------------------
    //              End Income And Expense                       
    //--------------------------------------------------------//
    //--------------------------------------------------------
    //              Begin Today Income And Expense                       
    //--------------------------------------------------------//
    let todayIncomeAndExpense = new Vue({
        el: '#today-income-and-expense-chart',
        data: {
            chart: null,
            dates: [],
            label: [],
            color: [],
            loading: false,
            type: 'income_expense_all_total',
            fullSc: 'portlet light bordered'
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData: function() {
                this.loading = true;
                if (this.chart != null) {
                    this.chart.destroy();
                }
                type_temp = this.type;
                axios.get("{{route('home.chartjsTest')}}?type=" + type_temp)
                .then(response => {
                    if (response.data.todayIncomeExpense.length > 0) {
                        this.dates = response.data.todayIncomeExpense;
                        this.label = response.data.todayIncomeExpenseLabel;
                        this.color = response.data.todayIncomeExpenseColor;
                        todayIncomeAndExpense.chartData(this.dates, this.label, this.color);
                    }
                })
                .catch(function(error) {})
                .finally(() => (this.loading = false));
            },
            fullScreen() {
                if (this.fullSc == 'portlet light bordered portlet-fullscreen') {
                    this.fullSc = 'portlet light bordered';
                } else {
                    this.fullSc = 'portlet light bordered portlet-fullscreen';
                }
            },
            chartData(dates, label, color) {
                var ctx_today_income_and_expense = document.getElementById("today_income_and_expense_chart");
                todayIncomeAndExpense.chart = new Chart(ctx_today_income_and_expense, {
                    // type: 'bar',
                    // type: 'polarArea',
                    type: 'doughnut',
                    // type: 'bar',
                    // type: 'line',
                    // type: 'radar',
                    // type: 'bubble',
                    // type: 'scatter',
                    data: {
                        labels: label,
                        datasets: [{
                            backgroundColor: color,
                            data: dates,
                            borderWidth: 2
                        }],
                    },
                    options: {
                        legend: {
                            display: false,
                            position: 'right',
                            align: 'center',
                            labels: {
                                // fontSize:18,
                                // fontColor:'red',
                                // boxWidth:80
                                // boxHeight:80
                            }
                        },
                        elements: {
                            rectangle: {
                                borderWidth: 2,
                                borderColor: 'rgb(0, 255, 0)',
                                borderSkipped: 'bottom'
                            }
                        },
                        responsive: true,
                        title: {
                            display: false,
                            text: '@lang("layout.IncomeAndExpense")',
                            // position:'left',
                            // fontSize: 16,
                        }
                    }
                });
            }
        }
    });
    //--------------------------------------------------------
    //              End Today Income And Expense                       
    //--------------------------------------------------------//
    //--------------------------------------------------------
    //              Begin Today Income And Expense                       
    //--------------------------------------------------------//
    let IncomeAndExpense2 = new Vue({
        el: '#income-and-expense-chart2',
        data: {
            chart: null,
            dates: [],
            label: [],
            color: [],
            loading: false,
            type: 'income_expense_all_total',
            fullSc: 'portlet light bordered'
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData: function() {
                this.loading = true;
                if (this.chart != null) {
                    this.chart.destroy();
                }
                type_temp = this.type;
                axios.get("{{route('home.chartjsTest')}}?type=" + type_temp)
                .then(response => {
                    if (response.data.todayIncomeExpense.length > 0) {
                        this.dates = response.data.todayIncomeExpense;
                        this.label = response.data.todayIncomeExpenseLabel;
                        this.color = response.data.todayIncomeExpenseColor;
                        IncomeAndExpense2.chartData(this.dates, this.label, this.color);
                    }
                })
                .catch(function(error) {})
                .finally(() => (this.loading = false));
            },
            fullScreen() {
                if (this.fullSc == 'portlet light bordered portlet-fullscreen') {
                    this.fullSc = 'portlet light bordered';
                } else {
                    this.fullSc = 'portlet light bordered portlet-fullscreen';
                }
            },
            chartData(dates, label, color) {
                var ctx_income_and_expense2 = document.getElementById("income_and_expense_chart2");
                IncomeAndExpense2.chart = new Chart(ctx_income_and_expense2, {
                    // type: 'bar',
                    // type: 'polarArea',
                    type: 'pie',
                    // type: 'doughnut',
                    // type: 'bar',
                    // type: 'line',
                    // type: 'radar',
                    // type: 'bubble',
                    // type: 'scatter',
                    data: {
                        labels: label,
                        datasets: [{
                            backgroundColor: color,
                            data: dates,
                            borderWidth: 2
                        }],
                    },
                    options: {
                        legend: {
                            display: false,
                            position: 'right',
                            align: 'center',
                            labels: {
                                // fontSize:18,
                                // fontColor:'red',
                                // boxWidth:80
                                // boxHeight:80
                            }
                        },
                        elements: {
                            rectangle: {
                                borderWidth: 2,
                                borderColor: 'rgb(0, 255, 0)',
                                borderSkipped: 'bottom'
                            }
                        },
                        responsive: true,
                        title: {
                            display: false,
                            text: '@lang("layout.IncomeAndExpense")',
                            // position:'left',
                            // fontSize: 16,
                        }
                    }
                });
            }
        }
    });
    //--------------------------------------------------------
    //              End Today Income And Expense                       
    //--------------------------------------------------------//
    //--------------------------------------------------------
    //              Print Function   Chart                     
    //--------------------------------------------------------//
    function printChart(chartId) {
        id = chartId;
        var canvas = document.getElementById(id);
        var win = window.open(canvas.toDataURL(), '_blank', 'toolbar=yse,scrollbars=yes,resizable=yes');
        win.document.write("<br><img onclick = 'window.print()' src='" + canvas.toDataURL() + "'/>");
    }
    //--------------------------------------------------------
    //           End   Print Function   Chart                     
    //--------------------------------------------------------// 
    //----------------------------------------------------------------------------------------------------------------------//   
    //--------------------------------------------------------
    //        Begin   Income Expense amChart                   
    //--------------------------------------------------------//
    function sty(){
        return 12;
    }
    //////////For Active Print Button activ this in export.js //////////
        // , {
                // format: "PRINT",
                // label: _this.i18l( "menu.label.print" )
            // } 
    //////////////////////////////////////////////////////////////////
    @if(App::isLocale('fa'))
        AmCharts.translations['export']['en']['menu.label.save.image'] = "دانلود";
        AmCharts.translations['export']['en']['menu.label.save.data'] = "ذخیره";
        AmCharts.translations['export']['en']['menu.label.draw'] = "حاشیه نویسی";
        AmCharts.translations['export']['en']['menu.label.print'] = "چاپ";
        AmCharts.translations['export']['en']['menu.label.draw.change'] = "تغیر";
        AmCharts.translations['export']['en']['menu.label.draw.add'] = "اضافه کردن";
        AmCharts.translations['export']['en']['menu.label.draw.shapes'] = "شکلک";
        AmCharts.translations['export']['en']['menu.label.draw.colors'] = "رنگ";
        AmCharts.translations['export']['en']['menu.label.draw.widths'] = "اندازه";
        AmCharts.translations['export']['en']['menu.label.draw.opacities'] = "شفافیت";
        AmCharts.translations['export']['en']['menu.label.draw.text'] = "متن";
        AmCharts.translations['export']['en']['menu.label.undo'] = "لغو کردن";
        AmCharts.translations['export']['en']['menu.label.redo'] = "انجام مجدد";
        AmCharts.translations['export']['en']['menu.label.cancel'] = "لغو";
        AmCharts.translations['export']['en']['menu.label.draw.modes'] = "حالت";
        AmCharts.translations['export']['en']['menu.label.draw.modes.pencil'] = "پنسل";
        AmCharts.translations['export']['en']['menu.label.draw.modes.line'] = "خط";
        AmCharts.translations['export']['en']['menu.label.draw.modes.arrow'] = "تیر";
    @elseif(App::isLocale('en'))
        AmCharts.translations['export']['en']['menu.label.save.image'] = "Download...";
        AmCharts.translations['export']['en']['menu.label.save.data'] = "Save...";
        AmCharts.translations['export']['en']['menu.label.draw'] = "Annonate...";
        AmCharts.translations['export']['en']['menu.label.print'] = "Print";
        AmCharts.translations['export']['en']['menu.label.draw.change'] = "Change...";
        AmCharts.translations['export']['en']['menu.label.draw.add'] = "Add...";
        AmCharts.translations['export']['en']['menu.label.draw.shapes'] = "Shape...";
        AmCharts.translations['export']['en']['menu.label.draw.colors'] = "Color...";
        AmCharts.translations['export']['en']['menu.label.draw.widths'] = "Size...";
        AmCharts.translations['export']['en']['menu.label.draw.opacities'] = "Opacity...";
        AmCharts.translations['export']['en']['menu.label.draw.text'] = "Text";
        AmCharts.translations['export']['en']['menu.label.undo'] = "Undo";
        AmCharts.translations['export']['en']['menu.label.redo'] = "Redo";
        AmCharts.translations['export']['en']['menu.label.cancel'] = "Cancel";
        AmCharts.translations['export']['en']['menu.label.draw.modes'] = "Mode...";
        AmCharts.translations['export']['en']['menu.label.draw.modes.pencil'] = "Pencil";
        AmCharts.translations['export']['en']['menu.label.draw.modes.line'] = "Line";
        AmCharts.translations['export']['en']['menu.label.draw.modes.arrow'] = "Arrow";
    @elseif(App::isLocale('pa'))
        AmCharts.translations['export']['en']['menu.label.save.image'] = "دانلود";
        AmCharts.translations['export']['en']['menu.label.save.image'] = "خوندی کول";
        AmCharts.translations['export']['en']['menu.label.draw'] = "تبصره";
        AmCharts.translations['export']['en']['menu.label.print'] = "چاپ";
        AmCharts.translations['export']['en']['menu.label.draw.change'] = "بدلون";
        AmCharts.translations['export']['en']['menu.label.draw.add'] = "اضافه کول";
        AmCharts.translations['export']['en']['menu.label.draw.shapes'] = "شکلونه";
        AmCharts.translations['export']['en']['menu.label.draw.colors'] = "رنگونه";
        AmCharts.translations['export']['en']['menu.label.draw.widths'] = "اندازه";
        AmCharts.translations['export']['en']['menu.label.draw.opacities'] = "شفافیت";
        AmCharts.translations['export']['en']['menu.label.draw.text'] = "متن";
        AmCharts.translations['export']['en']['menu.label.undo'] = "بیرته کول";
        AmCharts.translations['export']['en']['menu.label.redo'] = "بیا کول";
        AmCharts.translations['export']['en']['menu.label.cancel'] = "لغوه کول";
        AmCharts.translations['export']['en']['menu.label.draw.modes'] = "طریقی";
        AmCharts.translations['export']['en']['menu.label.draw.modes.pencil'] = "پنسل";
        AmCharts.translations['export']['en']['menu.label.draw.modes.line'] = "کرشه";
        AmCharts.translations['export']['en']['menu.label.draw.modes.arrow'] = "تیر";
    @else
        AmCharts.translations['export']['en']['menu.label.save.image'] = "Download...";
        AmCharts.translations['export']['en']['menu.label.save.data'] = "Save...";
        AmCharts.translations['export']['en']['menu.label.draw'] = "Annonate...";
        AmCharts.translations['export']['en']['menu.label.print'] = "Print";
        AmCharts.translations['export']['en']['menu.label.draw.change'] = "Change...";
        AmCharts.translations['export']['en']['menu.label.draw.add'] = "Add...";
        AmCharts.translations['export']['en']['menu.label.draw.shapes'] = "Shape...";
        AmCharts.translations['export']['en']['menu.label.draw.colors'] = "Color...";
        AmCharts.translations['export']['en']['menu.label.draw.widths'] = "Size...";
        AmCharts.translations['export']['en']['menu.label.draw.opacities'] = "Opacity...";
        AmCharts.translations['export']['en']['menu.label.draw.text'] = "Text";
        AmCharts.translations['export']['en']['menu.label.undo'] = "Undo";
        AmCharts.translations['export']['en']['menu.label.redo'] = "Redo";
        AmCharts.translations['export']['en']['menu.label.cancel'] = "Cancel";
        AmCharts.translations['export']['en']['menu.label.draw.modes'] = "Mode...";
        AmCharts.translations['export']['en']['menu.label.draw.modes.pencil'] = "Pencil";
        AmCharts.translations['export']['en']['menu.label.draw.modes.line'] = "Line";
        AmCharts.translations['export']['en']['menu.label.draw.modes.arrow'] = "Arrow";
    @endif
    var accountChart = AmCharts.makeChart("chartIncomeExpense", {
        "type": "pie",
        "theme": "light",
        // "addClassNames": true,
        "startDuration": 0,
        "legend": {
            "position": "right",
            "marginRight": 100,
            "autoMargins": false
        },
        "innerRadius": "30%",
        "valueField": "value",
        "titleField": "title",
        // "classNameField": "class",
        "outlineAlpha": 0.8,
        "depth3D": 20,
        "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
        // "balloonText": "<table id='tb-accounts-chart'> <tr><td>@lang('layout.Name') </td><td>[[name]]</td><tr><tr><td> @lang('layout.Type')</td><td>[[type]]</td></tr><tr><tr><td> @lang('layout.Amount')</td><td>[[value]]</td></tr><tr><tr><td> @lang('layout.Currency')</td><td>[[currency]]</td></tr>",
        "angle": 40,
        "export": {
            "enabled": true,
            "divId": "ex_income_expens",
            // "menu":[{
            //     "class":"export-main",
            //     "format":"PNG"
            // }]
        }
    });
    let account = new Vue({
        el:'#income_expense_chart',
        data:{ 
            type:null, 
            blanceType:'positive',
            income_expense:[]
        },
        mounted() {
            this.getAccounts();
        },
        methods: { 
            getAccounts () {
                var type      =  (this.type)?this.type:null;
                var type_temp='';
                var balanceType=this.blanceType;
                if(type)
                {type_temp=type.type;} 
                var req = axios.get("{{route('home.amchart')}}")
                .then(function (response){
                    account.income_expense = response.data.income_expense_all;
                    accountChart.dataProvider = response.data.income_expense_all;
                    accountChart.validateData();
                    accountChart.validateNow();
                })
                .catch(function (error) {
                });
            },
        }
    });
    //--------------------------------------------------------
    //        Begin   Income Expense Cost amChart                   
    //--------------------------------------------------------//
    var income_expense_costChart = AmCharts.makeChart("income_expense_cost", {
        "type": "pie",
        "theme": "light",
        // "addClassNames": true,
        "startDuration": 0,
        @if(App::isLocale('fa') || App::isLocale('pa'))
        "legend": {
            "position": "top",
            "marginRight": 100,
            "autoMargins": false
        },
        @endif
        @if(App::isLocale('en'))
        "legend": {
            "position": "right",
            "marginRight": 100,
            "autoMargins": false
        },
        @endif
        "innerRadius": "20%",
        "valueField": "value",
        "titleField": "title",
        // "classNameField": "class",
        "outlineAlpha": 0.8,
        "depth3D": 20,
        "balloonText": "[[title]]<br><span style='font-size:16px'><b>[[value]]</b> ([[percents]]%)</span>",
        // "balloonText": "<table id='tb-accounts-chart'> <tr><td>@lang('layout.Name') </td><td>[[name]]</td><tr><tr><td> @lang('layout.Type')</td><td>[[type]]</td></tr><tr><tr><td> @lang('layout.Amount')</td><td>[[value]]</td></tr><tr><tr><td> @lang('layout.Currency')</td><td>[[currency]]</td></tr>",
        "angle": 40,
        "export": {
            "enabled": true,
            "divId": "ex_income_expens_cost"
        }
    });
    let in_ex_co = new Vue({
        el:'#income_expense_cost_chart',
        data:{ 
            type:null, 
            blanceType:'positive'
        },
        mounted() {
            this.getIncomeExpenseCost();
        },
        methods: { 
            getIncomeExpenseCost () {
                var type      =  (this.type)?this.type:null;
                var type_temp='';
                var balanceType=this.blanceType;
                if(type)
                {type_temp=type.type;} 
                var req = axios.get("{{route('home.amchart')}}")
                    .then(function (response){
                        income_expense_costChart.dataProvider = response.data.income_expense_cost;
                        income_expense_costChart.validateData();
                        income_expense_costChart.validateNow();
                    })
                    .catch(function (error) {
                    });
            },
        }
    });
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "pie",
        "angle": 12,
        "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
        "depth3D": 15,
        "innerRadius": '40%',
        "theme": "light",
        "allLabels": [],
        "balloon": {},
        "export": {
            "enabled": true,
        },
        "legend": {
            "position": "right",
            "enabled": true,
            //   "align": "center",
            "markerType": "circle"
        },
        "titles": [],
        "dataProvider": [{
            "country": "Lithuania",
            "litres": 501.9
        }, {
            "country": "Czech Republic",
            "litres": 301.9
        }, {
            "country": "Ireland",
            "litres": 201.1
        }, {
            "country": "The Netherlands",
            "litres": 50
        }],
        "valueField": "litres",
        "titleField": "country"
    });
</script>
@endpush