@extends('layouts.app')
@section('title', __('Profit & Loss Statement'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Profit & Loss Statement</h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row no-print">
        <div class="col-sm-12">
            @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('profit_loss_location_id', __('purchase.business_location') . ':') !!}
                    {!! Form::select('profit_loss_location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('fiscal_year', __('Fiscal Year') . ':') !!}
                    {!! Form::select('fiscal_year', $fiscal_years, $current_year, ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('as_of_date', __('As Of Date') . ':') !!}
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input type="text" id="as_of_date" class="form-control" readonly>
                    </div>
                </div>
            </div>
            @endcomponent
        </div>
    </div>
    <br>
    
    <div id="profit_loss_container">
        <div class="text-center">
            <i class="fas fa-sync fa-spin fa-fw fa-2x"></i> Loading...
        </div>
    </div>
</section>
@stop

@section('javascript')
<script type="text/javascript">
    // Format date as dd/mm/yyyy
    function formatDateDMY(dateString) {
        if (!dateString) return '';
        var parts = dateString.split('-');
        if (parts.length === 3) {
            return parts[2] + '/' + parts[1] + '/' + parts[0];
        }
        return dateString;
    }
    
    // Parse dd/mm/yyyy to yyyy-mm-dd for API
    function parseDMYToYMD(dateString) {
        if (!dateString) return '';
        var parts = dateString.split('/');
        if (parts.length === 3) {
            return parts[2] + '-' + parts[1] + '-' + parts[0];
        }
        return dateString;
    }
    
    $(document).ready(function(){
        // Initialize datepicker with d/m/y format
        $('#as_of_date').datepicker({
            autoclose: true,
            format: 'dd/mm/yyyy'
        });
        
        // Set initial as_of_date based on selected fiscal year
        updateAsOfDate();
        
        loadProfitLoss();

        $('#fiscal_year').change(function() {
            updateAsOfDate();
            loadProfitLoss();
        });
        
        $('#as_of_date').change(function() {
            loadProfitLoss();
        });
        
        $('#profit_loss_location_id').change(function() {
            loadProfitLoss();
        });
    });
    
    function updateAsOfDate() {
        var fiscal_year = $('#fiscal_year').val();
        // Set as 31/12/YYYY format
        var as_of_date = '31/12/' + fiscal_year;
        $('#as_of_date').val(as_of_date);
    }

    function loadProfitLoss() {
        var fiscal_year = $('#fiscal_year').val();
        var as_of_date_dmy = $('#as_of_date').val();
        // Convert from dd/mm/yyyy to yyyy-mm-dd for API
        var as_of_date = parseDMYToYMD(as_of_date_dmy);
        var location_id = $('#profit_loss_location_id').val();
        
        $('#profit_loss_container').html('<div class="text-center"><i class="fas fa-sync fa-spin fa-fw fa-2x"></i> Loading...</div>');
        
        $.ajax({
            url: "{{ action([\App\Http\Controllers\AccountReportsController::class, 'profitLosss']) }}",
            data: {
                fiscal_year: fiscal_year,
                as_of_date: as_of_date,
                location_id: location_id
            },
            dataType: "json",
            success: function(result) {
                renderProfitLoss(result);
            },
            error: function(xhr) {
                $('#profit_loss_container').html('<div class="alert alert-danger">Error loading data. Please try again.</div>');
                console.log(xhr.responseText);
            }
        });
    }
    
    function renderProfitLoss(data) {
        var html = '';
        
        html += '<div class="box box-solid">';
        html += '<div class="box-header print_section text-center">';
        html += '<h2><strong>' + (data.business_name || '').toUpperCase() + '</strong></h2>';
        html += '<h3>Profit & Loss Statement</h3>';
        html += '<h4>For The Period: ' + (data.period || '') + '</h4>';
        html += '</div>';
        html += '<div class="box-body">';
        
        // ========== INCOME SECTION ==========
        html += '<div style="margin-bottom: 20px;">';
        html += '<h4 class="text-left"><strong>INCOME</strong></h4>';
        html += '<div class="table-responsive">';
        html += '<table class="table table-bordered table-striped">';
        html += '<thead>';
        html += '<tr style="background-color: #f5f5f5;">';
        html += '<th style="width: 70%;">Particulars</th>';
        html += '<th class="text-right" style="width: 30%;">Amount (KES)</th>';
        html += '</tr>';
        html += '</thead>';
        html += '<tbody>';
        
        // Opening Stock
        html += '<tr>';
        html += '<td><strong>Opening Stock</strong></td>';
        html += '<td class="text-right">' + formatNumber(data.cost_of_goods_sold.opening_stock) + '</td>';
        html += '</tr>';
        
        // Purchases
        html += '<tr>';
        html += '<td><strong>Purchases</strong></td>';
        html += '<td class="text-right">' + formatNumber(data.cost_of_goods_sold.purchases) + '</td>';
        html += '</tr>';
        
        // Closing Stock (negative)
        html += '<tr>';
        html += '<td><strong>Closing Stock</strong></td>';
        html += '<td class="text-right"> ' + formatNumber(data.cost_of_goods_sold.closing_stock) + '</td>';
        html += '</tr>';
        
        // Cost of Goods Sold (COGS)
        html += '<tr style="border-top: 2px solid #ddd; background-color: #f9f9f9;">';
        html += '<td><strong>Cost of Goods Sold (COGS)</strong></td>';
        html += '<td class="text-right">' + formatNumber(data.cost_of_goods_sold.total_cogs) + '</td>';
        html += '</tr>';
        
        // Sales Revenue
        html += '<tr>';
        html += '<td><strong>Sales Revenue</strong></td>';
        html += '<td class="text-right">' + formatNumber(data.income.sales_revenue) + '</td>';
        html += '</tr>';
        
        // Shipping Income (only if > 0)
        if (data.income.shipping_income > 0) {
            html += '<tr>';
            html += '<td><strong>Shipping Fees</strong></td>';
            html += '<td class="text-right">' + formatNumber(data.income.shipping_income) + '</td>';
            html += '</tr>';
        }
        
        // Total Income
        html += '<tr style="background-color: #e1f0fa; font-weight: bold;">';
        html += '<td><strong>Total Income</strong></td>';
        html += '<td class="text-right"><strong>' + formatNumber(data.income.total_income) + '</strong></td>';
        html += '</tr>';
        
        html += '</tbody>';
        html += '</table>';
        html += '</div>';
        html += '</div>';
        
        // ========== EXPENDITURE SECTION ==========
        html += '<div style="margin-bottom: 20px;">';
        html += '<h4 class="text-left"><strong>EXPENDITURE</strong></h4>';
        html += '<div class="table-responsive">';
        html += '<table class="table table-bordered table-striped">';
        html += '<thead>';
        html += '<tr style="background-color: #f5f5f5;">';
        html += '<th style="width: 70%;">Expense Category</th>';
        html += '<th class="text-right" style="width: 30%;">Amount (KES)</th>';
        html += '</tr>';
        html += '</thead>';
        html += '<tbody>';
        
        if (data.expenses && data.expenses.length > 0) {
            for (var i = 0; i < data.expenses.length; i++) {
                var expense = data.expenses[i];
                html += '<tr>';
                html += '<td>' + escapeHtml(expense.name) + '</td>';
                html += '<td class="text-right">' + formatNumber(expense.amount) + '</td>';
                html += '</tr>';
            }
        } else {
            html += '<tr>';
            html += '<td colspan="2" class="text-center text-muted">- No expenses recorded for this period -</td>';
            html += '</tr>';
        }
        
        // Total Expenditure
        html += '<tr style="background-color: #e1f0fa; font-weight: bold; border-top: 2px solid #ddd;">';
        html += '<td><strong>Total Expenditure</strong></td>';
        html += '<td class="text-right"><strong>' + formatNumber(data.total_expenses) + '</strong></td>';
        html += '</tr>';
        
        html += '</tbody>';
        html += '</table>';
        html += '</div>';
        html += '</div>';
        
        // ========== PROFIT/LOSS SECTION ==========
        html += '<div style="margin-top: 20px;">';
        html += '<div class="table-responsive">';
        html += '<table class="table table-bordered">';
        html += '<tbody>';
        
        var profit_class = data.gross_profit >= 0 ? 'text-green' : 'text-red';
        var profit_label = data.gross_profit >= 0 ? 'Profit' : 'Loss';
        
        // Gross Profit/Loss
        html += '<tr style="background-color: #dff0d8;">';
        html += '<td style="width: 70%;"><strong>Gross ' + profit_label + '</strong></td>';
        html += '<td class="text-right ' + profit_class + '" style="width: 30%;"><strong>' + formatNumber(data.gross_profit) + '</strong></td>';
        html += '</tr>';
        
        // Net Profit/Loss
        var net_profit_class = data.net_profit >= 0 ? 'text-green' : 'text-red';
        var net_profit_label = data.net_profit >= 0 ? 'Profit' : 'Loss';
        html += '<tr style="background-color: #d9edf7; font-size: 1.1em;">';
        html += '<td><strong>Net ' + net_profit_label + '</strong></td>';
        html += '<td class="text-right ' + net_profit_class + '"><strong>' + formatNumber(data.net_profit) + '</strong></td>';
        html += '</tr>';
        
        html += '</tbody>';
        html += '</table>';
        html += '</div>';
        html += '</div>';
        
        html += '</div>';
        
        // Print button
        html += '<div class="box-footer no-print">';
        html += '<button type="button" class="tw-dw-btn tw-dw-btn-primary tw-text-white pull-right" onclick="window.print()">';
        html += '<i class="fa fa-print"></i> @lang("messages.print")</button>';
        html += '</div>';
        
        html += '</div>';
        
        $('#profit_loss_container').html(html);
    }
    
    function formatNumber(amount) {
        if (amount === undefined || amount === null) amount = 0;
        return 'KES ' + parseFloat(amount).toLocaleString('en-KE', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }
    
    function escapeHtml(text) {
        if (!text) return '';
        return text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }
</script>

<style>
    @media print {
        .no-print {
            display: none !important;
        }
        .box {
            border: none !important;
        }
        .box-header {
            text-align: center !important;
        }
        .text-right {
            text-align: right !important;
        }
        .table-responsive {
            overflow: visible !important;
        }
    }
    
    .text-right {
        text-align: right;
    }
    .text-green {
        color: #3c763d;
    }
    .text-red {
        color: #a94442;
    }
    .text-center {
        text-align: center;
    }
    .text-muted {
        color: #777;
    }
    .table-responsive {
        overflow-x: auto;
    }
    h2, h3, h4 {
        margin: 5px 0;
    }
</style>
@endsection