@extends('layouts.app')
@section('title', __( 'account.balance_sheet' ))

@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">@lang( 'account.balance_sheet')</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('bal_sheet_location_id',  __('purchase.business_location') . ':') !!}
                    {!! Form::select('bal_sheet_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>
    
    <!-- Balance Sheet Content -->
    <div id="balance_sheet_container" style="width:100%;">
        <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();
        
        loadBalanceSheet();

        $('#fiscal_year').change(function() {
            updateAsOfDate();
            loadBalanceSheet();
        });
        
        $('#as_of_date').change(function() {
            loadBalanceSheet();
        });
        
        $('#bal_sheet_location_id').change(function() {
            loadBalanceSheet();
        });
    });
    
    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 loadBalanceSheet() {
        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 = $('#bal_sheet_location_id').val();
        
        var url = "{{ action([\App\Http\Controllers\AccountReportsController::class, 'balanceSheet']) }}?fiscal_year=" + fiscal_year + '&as_of_date=' + as_of_date + '&location_id=' + location_id;
        
        $('#balance_sheet_container').html('<div class="text-center"><i class="fas fa-sync fa-spin fa-fw fa-2x"></i> Loading...</div>');
        
        $.ajax({
            url: url,
            dataType: "json",
            success: function(result) {
                renderBalanceSheet(result);
            },
            error: function(xhr) {
                $('#balance_sheet_container').html('<div class="alert alert-danger">Error loading balance sheet. Please try again.</div>');
                console.log(xhr.responseText);
            }
        });
    }

    function renderBalanceSheet(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>Balance Sheet</h3>';
        html += '<h4>As of ' + formatDateDMY(data.as_of_date || '') + '</h4>';
        html += '</div>';
        html += '<div class="box-body">';
        
        html += '<table class="table table-bordered" style="width:100%; margin:0; border-collapse:collapse;">';
        html += '<tbody>';
        
        // ========== ASSETS SECTION ==========
        html += '<tr style="background-color:#f5f5f5;">';
        html += '<th colspan="2" style="padding:10px;">ASSETS</th>';
        html += '</tr>';
        
        // Non-Current Assets
        html += '<tr style="background-color:#f9f9f9;">';
        html += '<th colspan="2" style="padding:8px;">Non-Current Assets</th>';
        html += '</tr>';
        
        if (data.non_current_assets && data.non_current_assets.length > 0) {
            for (var i = 0; i < data.non_current_assets.length; i++) {
                var asset = data.non_current_assets[i];
                html += '<tr>';
                html += '<td style="padding:6px 8px 6px 20px;">' + asset.name + '</td>';
                html += '<td class="text-right" style="padding:6px 8px;">' + __currency_trans_from_en(asset.value, true) + '</td>';
                html += '</tr>';
            }
        } else {
            html += '<tr>';
            html += '<td colspan="2" class="text-muted" style="padding:6px 8px 6px 20px;">- No non-current assets -</td>';
            html += '</tr>';
        }
        
        html += '<tr style="background-color:#f0f0f0;">';
        html += '<td style="padding:8px;"><strong>Total Non-Current Assets</strong></td>';
        html += '<td class="text-right" style="padding:8px;"><strong>' + __currency_trans_from_en(data.total_non_current_assets, true) + '</strong></td>';
        html += '</tr>';
        
        // Current Assets
        html += '<tr style="background-color:#f9f9f9;">';
        html += '<th colspan="2" style="padding:8px;">Current Assets</th>';
        html += '</tr>';
        
        if (data.current_assets && data.current_assets.length > 0) {
            for (var i = 0; i < data.current_assets.length; i++) {
                var asset = data.current_assets[i];
                html += '<tr>';
                html += '<td style="padding:6px 8px 6px 20px;">' + asset.name + '</td>';
                html += '<td class="text-right" style="padding:6px 8px;">' + __currency_trans_from_en(asset.value, true) + '</td>';
                html += '</tr>';
            }
        } else {
            html += '<tr>';
            html += '<td colspan="2" class="text-muted" style="padding:6px 8px 6px 20px;">- No current assets -</td>';
            html += '</tr>';
        }
        
        html += '<tr style="background-color:#f0f0f0;">';
        html += '<td style="padding:8px;"><strong>Total Current Assets</strong></td>';
        html += '<td class="text-right" style="padding:8px;"><strong>' + __currency_trans_from_en(data.total_current_assets, true) + '</strong></td>';
        html += '</tr>';
        
        html += '<tr style="background-color:#e8e8e8;">';
        html += '<td style="padding:10px;"><strong>TOTAL ASSETS</strong></td>';
        html += '<td class="text-right" style="padding:10px;"><strong>' + __currency_trans_from_en(data.total_assets, true) + '</strong></td>';
        html += '</tr>';
        
        // ========== EQUITY AND LIABILITIES SECTION ==========
        html += '<tr style="background-color:#f5f5f5;">';
        html += '<th colspan="2" style="padding:10px;">EQUITY AND LIABILITIES</th>';
        html += '</tr>';
        
        // Equity
        html += '<tr style="background-color:#f9f9f9;">';
        html += '<th colspan="2" style="padding:8px;">Equity</th>';
        html += '</tr>';
        
        if (data.equity_items && data.equity_items.length > 0) {
            for (var i = 0; i < data.equity_items.length; i++) {
                var item = data.equity_items[i];
                var amountClass = (item.value < 0) ? 'text-danger' : '';
                html += '<tr>';
                html += '<td style="padding:6px 8px 6px 20px;">' + item.name + '</td>';
                html += '<td class="text-right ' + amountClass + '" style="padding:6px 8px;">' + __currency_trans_from_en(item.value, true) + '</td>';
                html += '</tr>';
            }
        } else {
            html += '<tr>';
            html += '<td colspan="2" class="text-muted" style="padding:6px 8px 6px 20px;">- No equity -</td>';
            html += '</tr>';
        }
        
        html += '<tr style="background-color:#f0f0f0;">';
        html += '<td style="padding:8px;"><strong>Total Equity</strong></td>';
        html += '<td class="text-right" style="padding:8px;"><strong>' + __currency_trans_from_en(data.total_equity, true) + '</strong></td>';
        html += '</tr>';
        
        // Liabilities
        html += '<tr style="background-color:#f9f9f9;">';
        html += '<th colspan="2" style="padding:8px;">Liabilities</th>';
        html += '</tr>';
        
        if (data.liabilities && data.liabilities.length > 0) {
            for (var i = 0; i < data.liabilities.length; i++) {
                var liability = data.liabilities[i];
                html += '<tr>';
                html += '<td style="padding:6px 8px 6px 20px;">' + liability.name + '</td>';
                html += '<td class="text-right" style="padding:6px 8px;">' + __currency_trans_from_en(liability.value, true) + '</td>';
                html += '</tr>';
            }
        } else {
            html += '<tr>';
            html += '<td colspan="2" class="text-muted" style="padding:6px 8px 6px 20px;">- No liabilities -</td>';
            html += '</tr>';
        }
        
        html += '<tr style="background-color:#f0f0f0;">';
        html += '<td style="padding:8px;"><strong>Total Liabilities</strong></td>';
        html += '<td class="text-right" style="padding:8px;"><strong>' + __currency_trans_from_en(data.total_liabilities, true) + '</strong></td>';
        html += '</tr>';
        
        // Total Equity + Liabilities
        html += '<tr style="background-color:#e8e8e8;">';
        html += '<td style="padding:10px;"><strong>TOTAL EQUITY AND LIABILITIES</strong></td>';
        html += '<td class="text-right" style="padding:10px;"><strong>' + __currency_trans_from_en(data.total_equity_liabilities, true) + '</strong></td>';
        html += '</tr>';
        
        // Show difference if not balanced
        if (!data.is_balanced && Math.abs(data.difference) > 0.01) {
            html += '<tr style="background-color:#fff3cd;">';
            html += '<td style="padding:8px;"><strong>Difference (Off by)</strong></td>';
            html += '<td class="text-right" style="padding:8px;"><strong>' + __currency_trans_from_en(data.difference, true) + '</strong></td>';
            html += '</tr>';
        }
        
        html += '</tbody>';
        html += '</table>';
        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>';
        
        $('#balance_sheet_container').html(html);
    }
</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;
        }
        #balance_sheet_container {
            width: 100% !important;
        }
        table {
            width: 100% !important;
        }
        td, th {
            padding: 4px !important;
        }
    }
    
    #balance_sheet_container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .box-body {
        padding: 0;
    }
    
    .table {
        width: 100%;
        margin: 0;
        border-collapse: collapse;
    }
    
    .table-bordered {
        border: 1px solid #ddd;
    }
    
    .table-bordered > tbody > tr > td,
    .table-bordered > tbody > tr > th {
        border: 1px solid #ddd;
    }
    
    .text-right {
        text-align: right;
    }
    
    .text-danger {
        color: #a94442;
    }
    
    .text-muted {
        color: #777;
    }
</style>
@endsection