@if(auth()->guard('employee')->user()->system_user->branch_id == 'all' || auth()->guard('employee')->user()->system_user->branch_id == $branch->id)
<div class="row gy-5 g-xl-10 mb-10">
    <div class="col-sm-6">
        <div class="card card-bordered">
            <div class="card-body">
                <h2>{{ __("dashboard.home.total_sales") }}</h2>
                <div id="total_sales_chart" style="height: 350px;"></div>
            </div>
        </div>
    </div>
    <!--begin::Col-->
    <div class="col-sm-6">
        <!--begin::List Widget 4-->
        <div class="card card-bordered">
            <!--begin::Body-->
            <div class="card-body">
                <h2 class="mb-5">{{ __("dashboard.home.products_to_limit") }}</h2>
                @foreach($items_limit??[] as $item)
                <!--begin::Item-->
                <div class="d-flex align-items-sm-center mb-5">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-50px me-5">
                        <span class="symbol-label">
                            <img src="{{$item['icon_path']}}" class="w-100 align-self-center" alt="" />
                        </span>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Section-->
                    <div class="d-flex align-items-center flex-row-fluid flex-wrap">
                        <div class="flex-grow-1 me-2">
                            <a href="{{ dashboard_route('items.edit',['item' => $item['id']]) }}" class="text-gray-800 text-hover-primary fs-6 fw-bolder">{{$item['name']}}</a>
                        </div>
                        <span class="badge badge-light fw-bolder my-2">{{$item['actual_qty']}}</span>
                    </div>
                    <!--end::Section-->
                </div>
                <!--end::Item-->
                @endforeach
                @if(count($items_limit) == 0)
                    <div>
                        {{ __("dashboard.home.products_to_limit_not_have") }}
                    </div>
                @else
                <div class="mb-1">
                    <a class="text-base" href="{{dashboard_route('reports.items.limits.index')}}">{{ __("dashboard.home.products_to_limit_show_more") }}</a>
                </div>
                @endif
            </div>
            <!--end::Body-->
        </div>
        <!--end::List Widget 4-->
    </div>
    <!--end::Col-->
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="row gy-5 g-xl-10">
            <!--begin::Col-->
            <div class="col-sm-6 mb-2">
                <!--begin::List widget 1-->
                <div class="card card-flush h-lg-100">
                    <!--begin::Header-->
                    <div class="card-header pt-5">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bolder text-dark">{{__('dashboard.home.clients_balances.title')}}</span>
                        </h3>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-5">
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.clients_balances.credit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($clients_credits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.clients_balances.debit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($clients_debits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.clients_balances.balance')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($clients_balances)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::LIst widget 1-->
            </div>
            <!--end::Col-->
            <!--begin::Col-->
            <div class="col-sm-6 mb-2">
                <!--begin::List widget 1-->
                <div class="card card-flush h-lg-100">
                    <!--begin::Header-->
                    <div class="card-header pt-5">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bolder text-dark">{{__('dashboard.home.suppliers_balances.title')}}</span>
                        </h3>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-5">
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.suppliers_balances.credit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($suppliers_credits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.suppliers_balances.debit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($suppliers_debits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.suppliers_balances.balance')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($suppliers_balances)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::LIst widget 1-->
            </div>
            <!--end::Col-->
            <!--begin::Col-->
            <div class="col-sm-6 mb-2">
                <!--begin::List widget 1-->
                <div class="card card-flush h-lg-100">
                    <!--begin::Header-->
                    <div class="card-header pt-5">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bolder text-dark">{{__('dashboard.home.safes_balances.title')}}</span>
                        </h3>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-5">
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.safes_balances.credit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($safes_credits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.safes_balances.debit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($safes_debits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.safes_balances.balance')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($safes_balances)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::LIst widget 1-->
            </div>
            <!--end::Col-->
            <!--begin::Col-->
            <div class="col-sm-6 mb-2">
                <!--begin::List widget 1-->
                <div class="card card-flush h-lg-100">
                    <!--begin::Header-->
                    <div class="card-header pt-5">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bolder text-dark">{{__('dashboard.home.banks_balances.title')}}</span>
                        </h3>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-5">
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.banks_balances.credit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($banks_credits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.banks_balances.debit')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($banks_debits)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <!--begin::Section-->
                            <div class="text-gray-700 fw-bold fs-6 me-2">{{__('dashboard.home.banks_balances.balance')}}</div>
                            <!--end::Section-->
                            <!--begin::Statistics-->
                            <div class="d-flex align-items-senter">
                                <!--begin::Number-->
                                <span class="text-gray-900 fw-boldest fs-6">{{default_currency($banks_balances)}}</span>
                                <!--end::Number-->
                            </div>
                            <!--end::Statistics-->
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::LIst widget 1-->
            </div>
            <!--end::Col-->
        </div>
    </div>
    <div class="col-sm-6">
        <canvas @if(app()->getLocale() == 'ar') dir="rtl" @else dir="ltr"  @endif id="income_and_expenses" class="mh-400px"></canvas>
    </div>
</div>
<div class="row mt-5">
    <div class="col-sm-12">
        <!--begin::Alert-->
        <div class="alert bg-success d-flex flex-column justify-content-center flex-sm-row p-5 mb-5">
            <!--begin::Wrapper-->
            <div class="d-flex flex-column text-center text-light pe-0 pe-sm-10">
                <!--begin::Content-->
                <span class="">{{ __("dashboard.home.important_shortcuts") }}</span>
                <!--end::Content-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Alert-->
    </div>
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-3">
                <a href="{{dashboard_route('items_categories.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_item_category")}}</a>
                <a href="{{dashboard_route('units.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_unit")}}</a>
                <a href="{{dashboard_route('items.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_item")}}</a>
                <a href="{{dashboard_route('warehouses.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_warehouse")}}</a>
            </div>
            <div class="col-sm-3">
                <a href="{{dashboard_route('clients.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_client")}}</a>
                <a href="{{dashboard_route('sales_quotations.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_sales_quotation_invoice")}}</a>
                <a href="{{dashboard_route('sales.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_sales_invoice")}}</a>
                <a href="{{dashboard_route('sales_returns.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_sales_return_invoice")}}</a>
            </div>
            <div class="col-sm-3">
                <a href="{{dashboard_route('suppliers.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_supplier")}}</a>
                <a href="{{dashboard_route('purchases.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_purchases_invoice")}}</a>
                <a href="{{dashboard_route('purchases_returns.create')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_purchases_return_invoice")}}</a>
            </div>
            <div class="col-sm-3">
                <a href="{{dashboard_route('receipt_payments.create',['type' => 'receive'])}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_receipt_payments_receive")}}</a>
                <a href="{{dashboard_route('receipt_payments.create',['type' => 'spend'])}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.add_receipt_payments_spend")}}</a>
                <a href="{{dashboard_route('reports.financial_accounting.account_statement.index')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.account_statement")}}</a>
                <a href="{{dashboard_route('reports.financial_accounting.account_statement.human.index')}}" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success w-100 mb-5">{{__("dashboard.home.human_account_statement")}}</a>
            </div>
        </div>
    </div>
</div>
@php 
    $months = [];
    $income_and_expenses_labels = [__('dashboard.home.income'),__('dashboard.home.expenses')];
    for($i = 1;$i<=12;$i++){
        $months[] = __('dashboard.months.'.$i);
    }
    if(app()->getLocale() == 'ar'){
        $rtl = true;
    }else{ 
        $rtl = false;
    }
@endphp
<script>
    var isRTL = @json($rtl);
    var months = @json($months);
    var income_and_expenses_totals = @json($income_and_expenses_totals);
    var income_and_expenses_labels = @json($income_and_expenses_labels);
    var default_currency = "{!! currency() !!}";
    var sales_element = document.getElementById('total_sales_chart');
    var height = parseInt(KTUtil.css(sales_element, 'height'));
    var labelColor = KTUtil.getCssVariableValue('--bs-success-500');
    var borderColor = KTUtil.getCssVariableValue('--bs-success-200');
    var baseColor = KTUtil.getCssVariableValue('--bs-success');
    var lightColor = KTUtil.getCssVariableValue('--bs-light-info');
    var sales_options = {
        series: [{
            name: '{!! __("dashboard.home.total_sales") !!}',
            data: @json($sales_months)
        }],
        chart: {
            fontFamily: 'inherit',
            type: 'area',
            height: height,
            toolbar: {
                show: false
            }
        },
        plotOptions: {

        },
        legend: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        fill: {
            type: 'solid',
            opacity: 1
        },
        stroke: {
            curve: 'smooth',
            show: true,
            width: 3,
            colors: [baseColor]
        },
        xaxis: {
            categories: months,
            axisBorder: {
                show: false,
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    colors: labelColor,
                    fontSize: '12px'
                }
            },
            crosshairs: {
                position: 'front',
                stroke: {
                    color: baseColor,
                    width: 1,
                    dashArray: 3
                }
            },
            tooltip: {
                enabled: true,
                formatter: undefined,
                offsetY: 0,
                rtl: true,
                style: {
                    fontSize: '12px'
                }
            }
        },
        yaxis: {
            labels: {
                style: {
                    colors: labelColor,
                    fontSize: '12px'
                }
            },
            opposite: isRTL
        },
        states: {
            normal: {
                filter: {
                    type: 'none',
                    value: 0
                }
            },
            hover: {
                filter: {
                    type: 'none',
                    value: 0
                }
            },
            active: {
                allowMultipleDataPointsSelection: false,
                filter: {
                    type: 'none',
                    value: 0
                }
            }
        },
        tooltip: {
            style: {
                fontSize: '12px'
            },
            y: {
                formatter: function (val) {
                    return val +' '+ default_currency
                }
            }
        },
        colors: [lightColor],
        grid: {
            borderColor: borderColor,
            strokeDashArray: 4,
            yaxis: {
                lines: {
                    show: true
                }
            }
        },
        markers: {
            strokeColor: baseColor,
            strokeWidth: 3
        }
    };

    var sales_chart = new ApexCharts(sales_element, sales_options);
    sales_chart.render();
    var ctx = document.getElementById('income_and_expenses');

    // Define fonts
    var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

    // Chart labels
    var labels = income_and_expenses_labels;

    // Chart data
    var data = {
        labels: labels,
        datasets: [
            {
                label: "Single",
                data: income_and_expenses_totals,
                backgroundColor: [
                KTUtil.getCssVariableValue('--bs-success'),
                KTUtil.getCssVariableValue('--bs-gray'),
                ],
            },
        ]
    };

    // Chart config
    var config = {
        type: 'pie',
        data: data,
        options: {
            plugins: {
                title: {
                    display: false,
                }
            },
            responsive: true,
        },
        defaults:{
            global: {
                defaultFont: fontFamily
            }
        }
    };
    var myChart = new Chart(ctx, config);
</script>
@endif