@extends('layouts.app')

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

@section('content')
<section class="content-header">
    <h1>@lang('accounting-reports::lang.funds_flow')</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>
                                    <button type="button" id="export-btn" class="btn btn-success">
                                        <i class="fa fa-download"></i> @lang('accounting-reports::lang.export')
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Funds Flow Statement</h3>
                </div>
                <div class="box-body">
                    <div id="loading" style="display:none; text-align:center; padding:20px;">
                        <i class="fa fa-spinner fa-spin fa-3x"></i>
                        <p>Loading funds flow statement...</p>
                    </div>
                    <div id="funds-flow-content" style="display:none;">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="business-name" style="text-align:center; margin-bottom:5px; color:#0066cc; font-weight:bold;"></h3>
                                <h4 style="text-align:center; margin-top:0; margin-bottom:5px; color:#0066cc; font-weight:bold;">Funds Flow Statement</h4>
                                <p id="period-dates" style="text-align:center; margin-bottom:20px; font-size:14px; color:#666;"></p>
                            </div>
                        </div>
                        <div class="table-responsive" style="border: 1px solid #ddd;">
                            <table class="table table-bordered" id="funds-flow-table" style="margin-bottom:0; border-collapse: collapse;">
                                <thead>
                                    <tr>
                                        <th width="50%" style="text-align:center; background-color:#4a90e2; color:#fff; font-weight:bold; padding:12px; font-size:15px; border: 1px solid #357abd;">Sources of Funds</th>
                                        <th width="50%" style="text-align:center; background-color:#4a90e2; color:#fff; font-weight:bold; padding:12px; font-size:15px; border: 1px solid #357abd;">Uses of Funds</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td id="sources-column" style="vertical-align:top; padding:0; border: 1px solid #ddd;">
                                            <table class="table" style="margin:0; border:0; width:100%;">
                                                <tbody id="sources-tbody"></tbody>
                                            </table>
                                        </td>
                                        <td id="uses-column" style="vertical-align:top; padding:0; border: 1px solid #ddd;">
                                            <table class="table" style="margin:0; border:0; width:100%;">
                                                <tbody id="uses-tbody"></tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td style="text-align:right; font-weight:bold; padding:12px; background-color:#e8f4f8; border-top: 2px solid #4a90e2; font-size:15px;">
                                            <span id="total-sources"></span>
                                        </td>
                                        <td style="text-align:right; font-weight:bold; padding:12px; background-color:#e8f4f8; border-top: 2px solid #4a90e2; font-size:15px;">
                                            <span id="total-uses"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="text-align:center; font-weight:bold; padding:12px; background-color:#f0f8ff; border-top: 2px solid #4a90e2; font-size:15px;">
                                            <span id="working-capital-info"></span>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div id="error-message" style="display:none;" class="alert alert-danger"></div>
                </div>
            </div>
        </div>
    </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
    loadFundsFlow();

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

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

    $('#export-btn').click(function() {
        exportFundsFlow();
    });

    function loadFundsFlow() {
        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();
        $('#funds-flow-content').hide();
        $('#error-message').hide();

        $.ajax({
            url: "{{ action([\Modules\AccountingReports\Http\Controllers\FundsFlowController::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 funds flow statement').show();
                    return;
                }

                if (response.sources_of_funds !== undefined && response.uses_of_funds !== undefined) {
                    displayFundsFlow(response);
                    $('#funds-flow-content').show();
                } else {
                    $('#error-message').text('No data available for the selected period').show();
                }
            },
            error: function(xhr, status, error) {
                $('#loading').hide();
                var errorMsg = 'Error loading funds flow statement';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                $('#error-message').text(errorMsg).show();
            }
        });
    }

    function displayFundsFlow(data) {
        // Set business name and period
        $('#business-name').text(data.business_name || '');
        
        var startDate = moment(data.start_date).format('DD-MMM-YYYY');
        var endDate = moment(data.end_date).format('DD-MMM-YYYY');
        $('#period-dates').text('For the period from ' + startDate + ' to ' + endDate);

        // Clear existing content
        $('#sources-tbody').empty();
        $('#uses-tbody').empty();

        // Render Sources of Funds
        renderItems(data.sources_of_funds, 'sources-tbody', 'Sources of Funds');

        // Render Uses of Funds
        renderItems(data.uses_of_funds, 'uses-tbody', 'Uses of Funds');

        // Display totals
        $('#total-sources').html('<strong>Total Sources: ' + formatCurrency(data.total_sources) + '</strong>');
        $('#total-uses').html('<strong>Total Uses: ' + formatCurrency(data.total_uses) + '</strong>');

        // Display working capital information
        var wcInfo = 'Opening Working Capital: ' + formatCurrency(data.opening_working_capital) + 
                     ' | Closing Working Capital: ' + formatCurrency(data.closing_working_capital) + 
                     ' | Change: ' + formatCurrency(data.working_capital_change);
        $('#working-capital-info').html(wcInfo);
    }

    function renderItems(items, tbodyId, sectionLabel) {
        var tbody = $('#' + tbodyId);
        
        if (!items || items.length === 0) {
            tbody.append($('<tr>').append($('<td>').html('No items').css({
                'padding': '10px',
                'text-align': 'center',
                'color': '#999',
                'font-style': 'italic'
            })));
            return;
        }
        
        $.each(items, function(index, item) {
            var row = $('<tr>');
            
            // Item label
            var labelCell = $('<td>').html(item.label).css({
                'padding': '8px 5px',
                'border-left': '3px solid #4a90e2',
                'font-size': '13px',
                'font-weight': '500'
            });
            
            // Item amount
            var amountCell = $('<td>').html(formatCurrency(item.amount)).css({
                'text-align': 'right',
                'padding': '8px 5px',
                'font-size': '13px'
            });
            
            row.append(labelCell);
            row.append(amountCell);
            tbody.append(row);
            
            // Add description if available
            if (item.description) {
                var descRow = $('<tr>');
                var descCell = $('<td>').html('&nbsp;&nbsp;&nbsp;&nbsp;<small style="color:#666;">' + item.description + '</small>').attr('colspan', 2).css({
                    'padding': '2px 5px 8px 5px',
                    'font-size': '11px',
                    'font-style': 'italic',
                    'color': '#666'
                });
                descRow.append(descCell);
                tbody.append(descRow);
            }
        });
    }

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

    function exportFundsFlow() {
        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;
        }

        var url = "{{ action([\Modules\AccountingReports\Http\Controllers\FundsFlowController::class, 'export']) }}";
        url += '?location_id=' + location_id + '&start_date=' + start_date + '&end_date=' + end_date;
        
        window.location.href = url;
    }
});
</script>
@endsection