@extends('layouts.app')
@section('title', __('dashboard.accounts_dashboard'))

@section('content')

@include('dashboard.partials.theme')

<div class="dava-dash-bg">
<div class="dava-dash-wrap">

    {{-- Header banner with filters --}}
    <div class="dava-welcome">
        <div class="dava-pill dava-pill-1"></div>
        <div class="dava-pill dava-pill-2"></div>
        <div class="dava-pill dava-pill-3"></div>

        <div class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-justify-between tw-gap-4">
            <div style="position: relative; z-index: 2;">
                <h1>{{ __('dashboard.accounts_dashboard') }}</h1>
                <p class="dava-welcome-sub">{{ __('dashboard.accounts_overview_sub') }}</p>
                <div class="dava-welcome-meta" style="margin-top:10px;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                    {{ \Carbon::now()->format('l, d M Y') }}
                </div>
            </div>

            <div class="dava-filter tw-flex tw-flex-col sm:tw-flex-row tw-gap-3 tw-w-full md:tw-w-auto">
                @if (count($all_locations) > 1)
                    {!! Form::select('dashboard_location', $all_locations, null, [
                        'class' => 'dava-select select2',
                        'placeholder' => __('lang_v1.select_location'),
                        'id' => 'dashboard_location',
                    ]) !!}
                @endif

                <button type="button" id="dashboard_date_filter">
                    <svg width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                    <span>{{ __('messages.filter_by_date') }}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="6 9 12 15 18 9"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    {{-- ACCOUNTS STAT CARDS --}}
    <div class="dava-section-title">
        <div class="bar"></div>
        <h2>{{ __('dashboard.accounts_overview') }}</h2>
        <span class="hint">{{ __('dashboard.accounts_overview_sub') }}</span>
    </div>

    <div class="dava-stat-grid cols-5">

        <div class="dava-stat-card solid compact green">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.total_balance') }}</p>
                    <p class="total_balance dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact sky">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.total_credit') }}</p>
                    <p class="total_credit dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact red">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.total_debit') }}</p>
                    <p class="total_debit dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 6 10.5 15.5 15.5 10.5 23 18"/><polyline points="17 18 23 18 23 12"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact violet">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.net_cash_flow') }}</p>
                    <p class="net_cash_flow dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact amber">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.total_deposits') }}</p>
                    <p class="total_deposits dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact orange">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.total_fund_transfers') }}</p>
                    <p class="total_fund_transfers dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact green">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.no_of_transactions') }}</p>
                    <p class="no_of_transactions dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact violet">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.avg_transaction_value') }}</p>
                    <p class="avg_transaction_value dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact sky">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.active_accounts') }}</p>
                    <p class="active_accounts dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                </div>
            </div>
        </div>

        <div class="dava-stat-card solid compact red">
            <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
                <div style="flex:1; min-width:0;">
                    <p class="dava-stat-label">{{ __('dashboard.closed_accounts') }}</p>
                    <p class="closed_accounts dava-stat-value" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;"></p>
                </div>
                <div class="dava-stat-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/></svg>
                </div>
            </div>
        </div>
    </div>

    {{-- CHARTS --}}
    <div class="tw-mt-2">
        <div class="tw-grid tw-grid-cols-1 tw-gap-4 sm:tw-gap-5 lg:tw-grid-cols-2">

            <div class="dava-panel lg:tw-col-span-2">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon green">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.cash_flow_trend_30_days') }}</h3>
                        <p class="dava-panel-sub">{{ __('dashboard.accounts_overview_sub') }}</p>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $accounts_chart_1->container() !!}
                    </div>
                </div>
            </div>

            <div class="dava-panel lg:tw-col-span-2">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon orange">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 3v18h18"/><path d="M7 12l3-3 4 4 5-5"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.cash_flow_trend_fy') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $accounts_chart_2->container() !!}
                    </div>
                </div>
            </div>

            {{-- ACCOUNT-WISE BALANCE - BAR --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon sky">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.account_wise_balance') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $account_balance_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- ACCOUNT-WISE VOLUME - BAR --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon amber">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20.59 13.41 13 21l-9-9V3h9l7.59 7.59a2 2 0 0 1 0 2.82Z"/><circle cx="7.5" cy="7.5" r="1.5"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.account_wise_volume') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $account_volume_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- BALANCE BY ACCOUNT TYPE - PIE --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon violet">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 10 10H12Z"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.balance_by_account_type') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $account_type_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- CREDIT VS DEBIT - PIE --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon red">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 10 10H12Z"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.credit_vs_debit') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body">
                    <div class="dava-chart-wrap">
                        {!! $credit_debit_chart->container() !!}
                    </div>
                </div>
            </div>

            {{-- ACCOUNT BALANCES --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon green">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.account_balances') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body tight">
                    <div class="tw-overflow-x-auto">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>{{ __('account.account') }}</th>
                                    <th>{{ __('sale.status') }}</th>
                                    <th>{{ __('lang_v1.balance') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($account_balances as $acc)
                                    <tr>
                                        <td>
                                            <a href="{{ route('account.show', [$acc->id]) }}">{{ $acc->name }}</a>
                                        </td>
                                        <td>
                                            @if ($acc->is_closed)
                                                <span class="dava-badge red">{{ __('account.closed') }}</span>
                                            @else
                                                <span class="dava-badge green">{{ __('account.active') }}</span>
                                            @endif
                                        </td>
                                        <td>@format_currency($acc->balance)</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center">@lang('lang_v1.no_records_found')</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- RECENT TRANSACTIONS --}}
            <div class="dava-panel lg:tw-col-span-1">
                <div class="dava-panel-head">
                    <div class="dava-panel-icon amber">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                        </svg>
                    </div>
                    <div>
                        <h3>{{ __('dashboard.recent_transactions') }}</h3>
                    </div>
                </div>
                <div class="dava-panel-body tight">
                    <div class="tw-overflow-x-auto">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>@lang('messages.date')</th>
                                    <th>{{ __('account.account_name') }}</th>
                                    <th>{{ __('sale.status') }}</th>
                                    <th>@lang('sale.total')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($recent_transactions as $txn)
                                    <tr>
                                        <td>{{ \Carbon::parse($txn->operation_date)->format('d-m-Y') }}</td>
                                        <td>
                                            <a href="{{ route('account.show', [$txn->account_id]) }}">{{ $txn->account_name }}</a>
                                        </td>
                                        <td>
                                            @if ($txn->type == 'credit')
                                                <span class="dava-badge green">{{ __('account.credit') }}</span>
                                            @else
                                                <span class="dava-badge red">{{ __('account.debit') }}</span>
                                            @endif
                                        </td>
                                        <td>@format_currency($txn->amount)</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center">@lang('lang_v1.no_records_found')</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>

@endsection

@section('javascript')
    {!! $accounts_chart_1->script() !!}
    {!! $accounts_chart_2->script() !!}
    {!! $account_balance_chart->script() !!}
    {!! $account_volume_chart->script() !!}
    {!! $account_type_chart->script() !!}
    {!! $credit_debit_chart->script() !!}
    <script type="text/javascript">
        $(document).ready(function() {
            function update_accounts_dashboard_statistics(start, end) {
                var location_id = '';
                if ($('#dashboard_location').length > 0) {
                    location_id = $('#dashboard_location').val();
                }
                var data = { start: start, end: end, location_id: location_id };
                var loader = '<i class="fas fa-sync fa-spin fa-fw margin-bottom"></i>';
                $('.total_balance').html(loader);
                $('.total_credit').html(loader);
                $('.total_debit').html(loader);
                $('.net_cash_flow').html(loader);
                $('.total_deposits').html(loader);
                $('.total_fund_transfers').html(loader);
                $('.no_of_transactions').html(loader);
                $('.avg_transaction_value').html(loader);
                $('.active_accounts').html(loader);
                $('.closed_accounts').html(loader);

                $.ajax({
                    method: 'get',
                    url: '{{ route('dashboard.accounts.get-totals') }}',
                    dataType: 'json',
                    data: data,
                    success: function(data) {
                        $('.total_balance').html(__currency_trans_from_en(data.total_balance, true));
                        $('.total_credit').html(__currency_trans_from_en(data.total_credit, true));
                        $('.total_debit').html(__currency_trans_from_en(data.total_debit, true));
                        $('.net_cash_flow').html(__currency_trans_from_en(data.net_cash_flow, true));
                        $('.total_deposits').html(__currency_trans_from_en(data.total_deposits, true));
                        $('.total_fund_transfers').html(__currency_trans_from_en(data.total_fund_transfers, true));
                        $('.no_of_transactions').html(data.no_of_transactions);
                        $('.avg_transaction_value').html(__currency_trans_from_en(data.avg_transaction_value, true));
                        $('.active_accounts').html(data.active_accounts);
                        $('.closed_accounts').html(data.closed_accounts);
                    },
                });
            }

            if ($('#dashboard_date_filter').length == 1) {
                dateRangeSettings.startDate = moment();
                dateRangeSettings.endDate = moment();
                $('#dashboard_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
                    $('#dashboard_date_filter span').html(
                        start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                    );
                    update_accounts_dashboard_statistics(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
                });

                update_accounts_dashboard_statistics(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            }

            $('#dashboard_location').change(function(e) {
                var start = $('#dashboard_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var end = $('#dashboard_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                update_accounts_dashboard_statistics(start, end);
            });
        });
    </script>
@endsection