@extends('layouts.app')

@section('title', __('accounting-reports::lang.kpi_dashboard'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('accounting-reports::lang.kpi_dashboard')
        <small class="text-muted">@lang('accounting-reports::lang.key_performance_indicators')</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row">
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    {!! Form::label('start_date', __('accounting-reports::lang.start_date') . ':') !!}
                    {!! Form::text('start_date', @format_date($kpis['period']['start'] ?? now()->startOfMonth()), ['class' => 'form-control date-picker', 'readonly', 'id' => 'start_date']) !!}
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    {!! Form::label('end_date', __('accounting-reports::lang.end_date') . ':') !!}
                    {!! Form::text('end_date', @format_date($kpis['period']['end'] ?? now()->endOfMonth()), ['class' => 'form-control date-picker', 'readonly', 'id' => 'end_date']) !!}
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                    {!! Form::select('location_id', $locations ?? [], null, ['class' => 'form-control select2', 'placeholder' => __('messages.all'), 'style' => 'width:100%', 'id' => 'location_filter']) !!}
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    <label>&nbsp;</label><br>
                    <button type="button" class="btn btn-primary" id="filter_btn">
                        <i class="fa fa-refresh"></i> @lang('messages.filter')
                    </button>
                </div>
            </div>
        </div>
    @endcomponent

    <!-- Profitability KPIs -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-line-chart"></i> Profitability KPIs</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="fa fa-money"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Gross Profit Margin</span>
                                    <span class="info-box-number">{{ number_format($kpis['profitability']['gross_profit_margin'] ?? 0, 2) }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-blue">
                                <span class="info-box-icon"><i class="fa fa-trophy"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Net Profit Margin</span>
                                    <span class="info-box-number">{{ number_format($kpis['profitability']['net_profit_margin'] ?? 0, 2) }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="fa fa-cogs"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Operating Margin</span>
                                    <span class="info-box-number">{{ number_format($kpis['profitability']['operating_margin'] ?? 0, 2) }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="fa fa-dollar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Revenue</span>
                                    <span class="info-box-number">@format_currency($kpis['profitability']['revenue'] ?? 0)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h3>@format_currency($kpis['profitability']['gross_profit'] ?? 0)</h3>
                                    <p>Gross Profit</p>
                                </div>
                                <div class="icon"><i class="fa fa-arrow-up"></i></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="small-box bg-blue">
                                <div class="inner">
                                    <h3>@format_currency($kpis['profitability']['net_profit'] ?? 0)</h3>
                                    <p>Net Profit</p>
                                </div>
                                <div class="icon"><i class="fa fa-check"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Liquidity KPIs -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-university"></i> Liquidity KPIs</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="fa fa-balance-scale"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Current Ratio</span>
                                    <span class="info-box-number">{{ number_format($kpis['liquidity']['current_ratio'] ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-blue">
                                <span class="info-box-icon"><i class="fa fa-bolt"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Quick Ratio</span>
                                    <span class="info-box-number">{{ number_format($kpis['liquidity']['quick_ratio'] ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="fa fa-money"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Cash Ratio</span>
                                    <span class="info-box-number">{{ number_format($kpis['liquidity']['cash_ratio'] ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="fa fa-briefcase"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Working Capital</span>
                                    <span class="info-box-number">@format_currency($kpis['liquidity']['working_capital'] ?? 0)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Efficiency KPIs -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-tachometer"></i> Efficiency KPIs</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="fa fa-clock-o"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Receivables Collection (Days)</span>
                                    <span class="info-box-number">{{ number_format($kpis['efficiency']['receivables_collection_period_days'] ?? 0, 1) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-blue">
                                <span class="info-box-icon"><i class="fa fa-refresh"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Inventory Turnover</span>
                                    <span class="info-box-number">{{ number_format($kpis['efficiency']['inventory_turnover_ratio'] ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Days Inventory Outstanding</span>
                                    <span class="info-box-number">{{ number_format($kpis['efficiency']['days_inventory_outstanding'] ?? 0, 1) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="fa fa-recycle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Cash Conversion Cycle (Days)</span>
                                    <span class="info-box-number">{{ number_format($kpis['efficiency']['cash_conversion_cycle_days'] ?? 0, 1) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sales KPIs -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-shopping-cart"></i> Sales KPIs</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="fa fa-dollar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Sales</span>
                                    <span class="info-box-number">@format_currency($kpis['sales']['total_sales'] ?? 0)</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-blue">
                                <span class="info-box-icon"><i class="fa fa-shopping-bag"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Transactions</span>
                                    <span class="info-box-number">{{ number_format($kpis['sales']['total_transactions'] ?? 0) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="fa fa-calculator"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Avg Transaction Value</span>
                                    <span class="info-box-number">@format_currency($kpis['sales']['average_transaction_value'] ?? 0)</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="fa fa-basket"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Avg Basket Size</span>
                                    <span class="info-box-number">{{ number_format($kpis['sales']['average_basket_size'] ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Inventory KPIs -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-cubes"></i> Inventory KPIs</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="fa fa-archive"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Inventory Value</span>
                                    <span class="info-box-number">@format_currency($kpis['inventory']['total_inventory_value'] ?? 0)</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-red">
                                <span class="info-box-icon"><i class="fa fa-exclamation-triangle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Stock-Out Rate</span>
                                    <span class="info-box-number">{{ number_format($kpis['inventory']['stock_out_rate'] ?? 0, 2) }}%</span>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: {{ min($kpis['inventory']['stock_out_rate'] ?? 0, 100) }}%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ $kpis['inventory']['stock_out_products'] ?? 0 }} of {{ $kpis['inventory']['total_products'] ?? 0 }} products
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="fa fa-hourglass-half"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Slow-Moving Inventory</span>
                                    <span class="info-box-number">@format_currency($kpis['inventory']['slow_moving_inventory_value'] ?? 0)</span>
                                    <div class="progress">
                                        <div class="progress-bar bg-yellow" style="width: {{ min($kpis['inventory']['slow_moving_percentage'] ?? 0, 100) }}%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ number_format($kpis['inventory']['slow_moving_percentage'] ?? 0, 2) }}% of total inventory
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(isset($kpis['location_performance']) && !empty($kpis['location_performance']))
    <!-- Location Performance -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-map-marker"></i> Location Performance</h3>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Location</th>
                                    <th>Revenue</th>
                                    <th>Gross Profit</th>
                                    <th>Gross Margin</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($kpis['location_performance'] as $location)
                                <tr>
                                    <td>{{ $location['location_name'] ?? 'N/A' }}</td>
                                    <td>@format_currency($location['revenue'] ?? 0)</td>
                                    <td>@format_currency($location['gross_profit'] ?? 0)</td>
                                    <td>
                                        <span class="label label-{{ ($location['gross_margin'] ?? 0) >= 0 ? 'success' : 'danger' }}">
                                            {{ number_format($location['gross_margin'] ?? 0, 2) }}%
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

</section>

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // Date picker
        $('.date-picker').datepicker({
            autoclose: true,
            format: datepicker_date_format
        });

        // Filter button
        $('#filter_btn').on('click', function() {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();
            var locationId = $('#location_filter').val();
            
            var url = '{{ route("accounting-reports.kpi-dashboard.index") }}';
            url += '?start_date=' + startDate + '&end_date=' + endDate;
            if (locationId) {
                url += '&location_id=' + locationId;
            }
            
            window.location.href = url;
        });
    });
</script>
@endsection