@extends('layouts.app')

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

@section('content')
<section class="content-header">
    <h1>@lang('accounting-reports::lang.statistics')</h1>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Filters</h3>
                </div>
                <div class="box-body">
                    <form id="filter-form">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>@lang('accounting-reports::lang.location')</label>
                                    <select name="location_id" id="location_id" class="form-control select2" style="width:100%">
                                        <option value="">@lang('accounting-reports::lang.all_locations')</option>
                                        @foreach($locations as $locationId => $locationName)
                                            <option value="{{ $locationId }}">{{ $locationName }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label for="start_date">@lang('accounting-reports::lang.from_date'):</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" id="start_date" value="{{ @format_date('now -1 month') }}" class="form-control" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label for="end_date">@lang('accounting-reports::lang.to_date'):</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" id="end_date" value="{{ @format_date('now') }}" class="form-control" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label><br>
                                    <button type="button" id="generate-btn" class="btn btn-primary">
                                        <i class="fa fa-refresh"></i> @lang('accounting-reports::lang.view')
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="loading" style="display:none; text-align:center; padding:20px;">
        <i class="fa fa-spinner fa-spin fa-3x"></i>
        <p>Loading statistics...</p>
    </div>

    <div id="statistics-content" style="display:none;">
        <!-- 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</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="info-box bg-green">
                                    <span class="info-box-icon"><i class="fa fa-percent"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Gross Profit Margin</span>
                                        <span class="info-box-number" id="gross-profit-margin">0%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box bg-blue">
                                    <span class="info-box-icon"><i class="fa fa-percent"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Net Profit Margin</span>
                                        <span class="info-box-number" id="net-profit-margin">0%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box bg-aqua">
                                    <span class="info-box-icon"><i class="fa fa-percent"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Operating Margin</span>
                                        <span class="info-box-number" id="operating-margin">0%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Liquidity 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-money"></i> Liquidity</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-green"><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" id="current-ratio">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-blue"><i class="fa fa-tachometer"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Quick Ratio</span>
                                        <span class="info-box-number" id="quick-ratio">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><i class="fa fa-dollar"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Cash Ratio</span>
                                        <span class="info-box-number" id="cash-ratio">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-yellow"><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" id="working-capital">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sales 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-shopping-cart"></i> Sales</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-4">
                                <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">Total Sales</span>
                                        <span class="info-box-number" id="total-sales">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box bg-red">
                                    <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" id="total-transactions">0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box bg-purple">
                                    <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" id="avg-transaction-value">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-md-4">
                                <div class="info-box">
                                    <span class="info-box-icon bg-green"><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" id="avg-basket-size">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box">
                                    <span class="info-box-icon bg-blue"><i class="fa fa-building"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Sales per Employee</span>
                                        <span class="info-box-number" id="sales-per-employee">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><i class="fa fa-square"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Sales per Sq Ft</span>
                                        <span class="info-box-number" id="sales-per-sqft">0.00</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</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-red"><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" id="total-inventory-value">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-yellow"><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" id="stock-out-rate">0%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-orange"><i class="fa fa-hourglass-half"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Slow-moving %</span>
                                        <span class="info-box-number" id="slow-moving-percentage">0%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-blue"><i class="fa fa-cube"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Total Products</span>
                                        <span class="info-box-number" id="total-products">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Efficiency 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-cog"></i> Efficiency</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="info-box">
                                    <span class="info-box-icon bg-green"><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" id="receivables-days">0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box">
                                    <span class="info-box-icon bg-blue"><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" id="inventory-turnover">0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><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" id="cash-conversion-cycle">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Location Performance -->
        <div class="row" id="location-performance-section" style="display:none;">
            <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" id="location-performance-table">
                                <thead>
                                    <tr>
                                        <th>Location</th>
                                        <th style="text-align:right;">Revenue</th>
                                        <th style="text-align:right;">Gross Profit</th>
                                        <th style="text-align:right;">Gross Margin %</th>
                                    </tr>
                                </thead>
                                <tbody id="location-performance-tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="error-message" style="display:none;" class="alert alert-danger"></div>
</section>
@endsection

@section('javascript')
<script>
$(document).ready(function() {
    // Initialize date pickers
    $('#start_date').datepicker({
        autoclose: true,
        format: datepicker_date_format
    });
    
    $('#end_date').datepicker({
        autoclose: true,
        format: datepicker_date_format
    });

    // Initialize select2
    $('#location_id').select2();

    // Load on page load
    loadStatistics();

    $('#start_date, #end_date, #location_id').change(function() {
        loadStatistics();
    });

    $('#generate-btn').click(function() {
        loadStatistics();
    });

    function loadStatistics() {
        var location_id = $('#location_id').val();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();

        if (!start_date || !end_date) {
            toastr.error('Please select start and end dates');
            return;
        }

        $('#loading').show();
        $('#statistics-content').hide();
        $('#error-message').hide();

        $.ajax({
            url: "{{ action([\Modules\AccountingReports\Http\Controllers\StatisticsController::class, 'getData']) }}",
            data: {
                location_id: location_id,
                start_date: start_date,
                end_date: end_date
            },
            dataType: 'json',
            success: function(response) {
                $('#loading').hide();
                
                if (response.success === false) {
                    $('#error-message').text(response.error || 'Error loading statistics').show();
                    return;
                }

                displayStatistics(response);
                $('#statistics-content').show();
            },
            error: function(xhr, status, error) {
                $('#loading').hide();
                var errorMsg = 'Error loading statistics';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                $('#error-message').text(errorMsg).show();
            }
        });
    }

    function displayStatistics(data) {
        // Profitability
        if (data.profitability) {
            $('#gross-profit-margin').text(formatPercent(data.profitability.gross_profit_margin));
            $('#net-profit-margin').text(formatPercent(data.profitability.net_profit_margin));
            $('#operating-margin').text(formatPercent(data.profitability.operating_margin));
        }

        // Liquidity
        if (data.liquidity) {
            $('#current-ratio').text(formatNumber(data.liquidity.current_ratio, 2));
            $('#quick-ratio').text(formatNumber(data.liquidity.quick_ratio, 2));
            $('#cash-ratio').text(formatNumber(data.liquidity.cash_ratio, 2));
            $('#working-capital').text(formatCurrency(data.liquidity.working_capital));
        }

        // Sales
        if (data.sales) {
            $('#total-sales').text(formatCurrency(data.sales.total_sales));
            $('#total-transactions').text(formatNumber(data.sales.total_transactions, 0));
            $('#avg-transaction-value').text(formatCurrency(data.sales.average_transaction_value));
            $('#avg-basket-size').text(formatNumber(data.sales.average_basket_size, 2));
            $('#sales-per-employee').text(formatCurrency(data.sales.sales_per_employee));
            $('#sales-per-sqft').text(formatCurrency(data.sales.sales_per_square_foot));
        }

        // Inventory
        if (data.inventory) {
            $('#total-inventory-value').text(formatCurrency(data.inventory.total_inventory_value));
            $('#stock-out-rate').text(formatPercent(data.inventory.stock_out_rate));
            $('#slow-moving-percentage').text(formatPercent(data.inventory.slow_moving_percentage));
            $('#total-products').text(formatNumber(data.inventory.total_products, 0));
        }

        // Efficiency
        if (data.efficiency) {
            $('#receivables-days').text(formatNumber(data.efficiency.receivables_collection_period_days, 1) + ' days');
            $('#inventory-turnover').text(formatNumber(data.efficiency.inventory_turnover_ratio, 2));
            $('#cash-conversion-cycle').text(formatNumber(data.efficiency.cash_conversion_cycle_days, 1) + ' days');
        }

        // Location Performance
        if (data.location_performance && data.location_performance.length > 0) {
            var tbody = $('#location-performance-tbody');
            tbody.empty();
            
            $.each(data.location_performance, function(index, location) {
                var row = $('<tr>');
                row.append($('<td>').text(location.location_name));
                row.append($('<td>').text(formatCurrency(location.revenue)).css('text-align', 'right'));
                row.append($('<td>').text(formatCurrency(location.gross_profit)).css('text-align', 'right'));
                row.append($('<td>').text(formatPercent(location.gross_margin)).css('text-align', 'right'));
                tbody.append(row);
            });
            
            $('#location-performance-section').show();
        } else {
            $('#location-performance-section').hide();
        }
    }

    function formatCurrency(amount) {
        if (typeof amount === 'undefined' || amount === null) {
            return '0.00';
        }
        var num = parseFloat(amount);
        if (isNaN(num)) {
            return '0.00';
        }
        return num.toLocaleString('en-IN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function formatNumber(num, decimals) {
        if (typeof num === 'undefined' || num === null) {
            return '0';
        }
        var number = parseFloat(num);
        if (isNaN(number)) {
            return '0';
        }
        return number.toLocaleString('en-IN', {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
        });
    }

    function formatPercent(value) {
        if (typeof value === 'undefined' || value === null) {
            return '0.00%';
        }
        var num = parseFloat(value);
        if (isNaN(num)) {
            return '0.00%';
        }
        return num.toFixed(2) + '%';
    }
});
</script>
@endsection