@extends('layouts.app')

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

@section('content')
<section class="content-header">
    <h1>@lang('accounting-reports::lang.budget_vs_actual')</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.fiscal_year')</label>
                                    <input type="text" name="fiscal_year" id="fiscal_year" class="form-control" value="{{ $fiscalYear }}" placeholder="e.g., 2024-2025" required>
                                </div>
                            </div>
                            <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-md-3">
                                <div class="form-group">
                                    <label>@lang('accounting-reports::lang.select_account')</label>
                                    <select name="account_id" id="account_id" class="form-control select2" style="width:100%">
                                        <option value="">@lang('lang_v1.all')</option>
                                        @foreach($accounts as $accountId => $accountName)
                                            <option value="{{ $accountId }}">{{ $accountName }}</option>
                                        @endforeach
                                    </select>
                                </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.generate')
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="report-container" style="display:none;">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Budget vs Actual Report</h3>
                </div>
                <div class="box-body">
                    <div id="budget-vs-actual-table"></div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        $('.select2').select2();

        $('#generate-btn').on('click', function() {
            var fiscalYear = $('#fiscal_year').val();
            var locationId = $('#location_id').val();
            var accountId = $('#account_id').val();

            if (!fiscalYear) {
                toastr.error('Please enter fiscal year');
                return;
            }

            $.ajax({
                url: '{{ route("accounting-reports.budget-vs-actual.get-data") }}',
                method: 'GET',
                data: {
                    fiscal_year: fiscalYear,
                    location_id: locationId,
                    account_id: accountId
                },
                beforeSend: function() {
                    $('#generate-btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
                },
                success: function(response) {
                    if (response.success) {
                        displayReport(response.data);
                        $('#report-container').show();
                    } else {
                        toastr.error(response.error || 'Error loading report');
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Error loading report';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMsg = xhr.responseJSON.error;
                    }
                    toastr.error(errorMsg);
                },
                complete: function() {
                    $('#generate-btn').prop('disabled', false).html('<i class="fa fa-refresh"></i> @lang("accounting-reports::lang.generate")');
                }
            });
        });

        function displayReport(data) {
            var html = '<table class="table table-bordered table-striped">';
            html += '<thead><tr>';
            html += '<th>@lang("accounting-reports::lang.month")</th>';
            html += '<th class="text-right">@lang("accounting-reports::lang.budget")</th>';
            html += '<th class="text-right">@lang("accounting-reports::lang.actual")</th>';
            html += '<th class="text-right">@lang("accounting-reports::lang.variance")</th>';
            html += '<th class="text-right">@lang("accounting-reports::lang.variance_percent")</th>';
            html += '</tr></thead><tbody>';

            if (data.months && data.months.length > 0) {
                data.months.forEach(function(month) {
                    var varianceClass = month.variance >= 0 ? 'text-success' : 'text-danger';
                    html += '<tr>';
                    html += '<td>' + month.month_name + '</td>';
                    html += '<td class="text-right">' + parseFloat(month.budget || 0).toFixed(2) + '</td>';
                    html += '<td class="text-right">' + parseFloat(month.actual || 0).toFixed(2) + '</td>';
                    html += '<td class="text-right ' + varianceClass + '">' + parseFloat(month.variance || 0).toFixed(2) + '</td>';
                    html += '<td class="text-right ' + varianceClass + '">' + parseFloat(month.variance_percent || 0).toFixed(2) + '%</td>';
                    html += '</tr>';
                });

                // Summary row
                var summaryClass = data.summary.total_variance >= 0 ? 'text-success' : 'text-danger';
                html += '<tr class="bg-gray"><td><strong>Total</strong></td>';
                html += '<td class="text-right"><strong>' + parseFloat(data.summary.total_budget || 0).toFixed(2) + '</strong></td>';
                html += '<td class="text-right"><strong>' + parseFloat(data.summary.total_actual || 0).toFixed(2) + '</strong></td>';
                html += '<td class="text-right ' + summaryClass + '"><strong>' + parseFloat(data.summary.total_variance || 0).toFixed(2) + '</strong></td>';
                html += '<td class="text-right ' + summaryClass + '"><strong>' + parseFloat(data.summary.total_variance_percent || 0).toFixed(2) + '%</strong></td>';
                html += '</tr>';
            } else {
                html += '<tr><td colspan="5" class="text-center">No data available</td></tr>';
            }

            html += '</tbody></table>';
            $('#budget-vs-actual-table').html(html);
        }
    });
</script>
@endsection