@php
/*
|----------------------------------------------------------------------
| TALLY-STYLE PROFIT & LOSS REPORT
| Left = Expenses
| Right = Incomes
|----------------------------------------------------------------------
*/

function renderSide(array $groups, string $fromDate, string $toDate): string
{
$ledgerBase = route('account-ledger-report.index');
$html = '';
static $grpId = 1000; // Offset to avoid clash with other potential counters

foreach ($groups as $grp) {
if (!is_array($grp) || !isset($grp['group_name'])) continue;

$html .= '<tr class="bs-lvl2">';
    $html .= '<td style="padding-left:14px;font-weight:bold;background:#D9E1F2;">'
        . e($grp['group_name']) . '</td>';
    $html .= '<td class="text-end" style="font-weight:bold;background:#D9E1F2;white-space:nowrap;">'
        . number_format($grp['amount'], 2) . '</td>';
    $html .= '</tr>';

foreach ($grp as $L3 => $aGrp) {
if (!is_array($aGrp) || !isset($aGrp['a_group_name'])) continue;
if (round(abs($aGrp['amount'] ?? 0), 2) == 0) continue;

$ledgers = array_filter($aGrp, fn($v) =>
is_array($v) && isset($v['ledger_account']) && round(abs($v['amount'] ?? 0), 2) != 0
);

$grpId++;
$hasChildren = count($ledgers) > 0;
$chevron = $hasChildren ? '<i class="fa fa-chevron-right bs-chevron" style="font-size:10px; margin-right:5px;"></i>' : '';
$rowClass = $hasChildren ? 'bs-toggle bs-collapsed' : '';

$html .= '<tr class="bs-lvl3 ' . $rowClass . '" data-target="pl-group-' . $grpId . '" style="cursor:pointer;">';
    $html .= '<td style="padding-left:28px;color:#333;">' . $chevron . e($aGrp['a_group_name']) . '</td>';
    $html .= '<td class="text-end" style="color:#333;white-space:nowrap;">'
        . number_format($aGrp['amount'], 2) . '</td>';
    $html .= '</tr>';

foreach ($ledgers as $ledger) {
$ledId = $ledger['ledger_id'] ?? null;
$ledName = $ledger['ledger_account'];
$ledAmt = $ledger['amount'];

$link = $ledId
? $ledgerBase . '?ledger_id=' . $ledId
. '&from_date=' . urlencode($fromDate)
. '&to_date=' . urlencode($toDate)
: '#';

$html .= '<tr class="bs-lvl4 pl-group-' . $grpId . '" style="display:none;">';
    $html .= '<td style="padding-left:44px;">'
        . '<a href="' . $link . '" class="bs-ledger-link" target="_blank">'
            . e($ledName) . '</a></td>';
    $html .= '<td class="text-end" style="white-space:nowrap;">'
        . number_format($ledAmt, 2) . '</td>';
    $html .= '</tr>';
}
}
}
return $html;
}
@endphp

<style>
    .bs-wrapper {
        display: flex;
        gap: 0;
        font-family: 'Courier New', monospace;
        font-size: 15px;
        /* Increased from 13px */
        color: #000;
        border: 1px solid #4472C4;
    }

    .bs-side {
        flex: 1;
        border-right: 2px solid #4472C4;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .bs-side:last-child {
        border-right: none;
    }

    .bs-side table {
        width: 100%;
        border-collapse: collapse;
    }

    .bs-side table td {
        border-bottom: 1px solid #c8d4ee;
        padding: 3px 6px;
        vertical-align: middle;
    }

    .bs-header-row {
        background: #36506b;
        color: #fff;
        font-weight: bold;
        font-size: 15px;
        /* Increased */
        text-align: center;
        padding: 8px 10px;
    }

    .bs-total-row td {
        background: #B4C6E7 !important;
        font-weight: bold;
        font-size: 15px;
        /* Increased */
        border-top: 2px solid #4472C4 !important;
    }

    .bs-ledger-link {
        color: #1a3a8f;
        text-decoration: none;
    }

    .bs-ledger-link:hover {
        text-decoration: underline;
        color: #0056b3;
    }

    .bs-lvl1 td {
        background: #C9D5F0 !important;
        font-weight: bold;
        font-size: 16px;
    }

    .bs-lvl2 td {
        background: #D9E1F2 !important;
        font-size: 15px;
    }

    .bs-lvl3 td {
        background: #ECEFF9 !important;
        font-size: 14px;
    }

    .bs-lvl4 td {
        background: #F8F9FE !important;
        font-size: 14px;
    }

    .bs-title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        padding: 10px 0 4px;
        color: #1a3a8f;
        border-bottom: 2px solid #4472C4;
        margin-bottom: 8px;
        font-family: Arial, sans-serif;
    }

    .bs-subtitle {
        text-align: center;
        font-size: 12px;
        color: #555;
        margin-bottom: 10px;
        font-family: Arial, sans-serif;
    }

    .bs-chevron {
        transition: transform 0.2s;
    }

    .bs-toggle:not(.bs-collapsed) .bs-chevron {
        transform: rotate(90deg);
    }

    .pl-divider {
        background: #f1f1f1 !important;
        font-weight: bold;
        height: 2px;
    }

    @media (max-width: 768px) {
        .bs-wrapper {
            flex-direction: column;
        }

        .bs-side {
            border-right: none !important;
            border-bottom: 2px solid #4472C4;
        }
    }
</style>

<div class="bs-title">Profit &amp; Loss A/c</div>
<div class="bs-subtitle">For the period: {{ date('d-M-Y', strtotime($from_date)) }} to {{ date('d-M-Y', strtotime($to_date)) }}</div>

<div class="bs-wrapper">

    {{-- ============ LEFT SIDE: Expenses ============ --}}
    <div class="bs-side">
        <div class="bs-header-row">Expenses</div>
        <div style="flex-grow: 1;">
            <table>
                <tbody>
                    {{-- TRADING: Opening Stock --}}
                    <tr class="bs-lvl2">
                        <td style="padding-left:14px; font-weight:bold;">
                            <a href="{{ route('stock-valuation.index', ['as_of_date' => date('d-m-Y', strtotime($from_date . ' -1 day'))]) }}" class="bs-ledger-link" target="_blank">
                                Opening Stock
                            </a>
                        </td>
                        <td class="text-end" style="font-weight:bold; white-space:nowrap;">
                            <a href="{{ route('stock-valuation.index', ['as_of_date' => date('d-m-Y', strtotime($from_date . ' -1 day'))]) }}" class="bs-ledger-link" target="_blank">
                                {{ number_format($data['openingStock'], 2) }}
                            </a>
                        </td>
                    </tr>

                    {{-- TRADING: Direct Expenses --}}
                    {!! renderSide($data['tradingExpenses'], $from_date, $to_date) !!}

                    {{-- P&L: Indirect Expenses --}}
                    {!! renderSide($data['pAndLExpenses'], $from_date, $to_date) !!}

                    {{-- P&L: Net Profit --}}
                    @if($data['netProfit'] > 0)
                    <tr class="bs-lvl1">
                        <td style="padding-left:14px; font-weight:bold;">Net Profit</td>
                        <td class="text-end" style="font-weight:bold;">{{ number_format($data['netProfit'], 2) }}</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
        <table>
            <tfoot>
                <tr class="bs-total-row">
                    <td>Total</td>
                    <td class="text-end" style="width:130px;">{{ number_format($data['finalExpTotal'], 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

    {{-- ============ RIGHT SIDE: Incomes ============ --}}
    <div class="bs-side">
        <div class="bs-header-row">Incomes</div>
        <div style="flex-grow: 1;">
            <table>
                <tbody>
                    {{-- TRADING: Closing Stock --}}
                    <tr class="bs-lvl2">
                        <td style="padding-left:14px; font-weight:bold;">
                            <a href="{{ route('stock-valuation.index', ['as_of_date' => date('d-m-Y', strtotime($to_date))]) }}" class="bs-ledger-link" target="_blank">
                                Closing Stock
                            </a>
                        </td>
                        <td class="text-end" style="font-weight:bold; white-space:nowrap;">
                            <a href="{{ route('stock-valuation.index', ['as_of_date' => date('d-m-Y', strtotime($to_date))]) }}" class="bs-ledger-link" target="_blank">
                                {{ number_format($data['closingStock'], 2) }}
                            </a>
                        </td>
                    </tr>
                    {{-- TRADING: Direct Incomes (Sales etc) --}}
                    {!! renderSide($data['tradingIncome'], $from_date, $to_date) !!}



                    {{-- P&L: Indirect Incomes --}}
                    {!! renderSide($data['pAndLIncome'], $from_date, $to_date) !!}

                    {{-- P&L: Net Loss --}}
                    @if($data['netLoss'] > 0)
                    <tr class="bs-lvl1">
                        <td style="padding-left:14px; font-weight:bold;">Net Loss</td>
                        <td class="text-end" style="font-weight:bold;">{{ number_format($data['netLoss'], 2) }}</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
        <table>
            <tfoot>
                <tr class="bs-total-row">
                    <td>Total</td>
                    <td class="text-end" style="width:130px;">{{ number_format($data['finalIncTotal'], 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

</div>

<script>
    document.querySelectorAll('.bs-toggle').forEach(row => {
        row.addEventListener('click', function() {
            const targetClass = this.getAttribute('data-target');
            const children = document.querySelectorAll('.' + targetClass);
            const wasCollapsed = this.classList.contains('bs-collapsed');
            this.classList.toggle('bs-collapsed');
            children.forEach(child => {
                child.style.display = wasCollapsed ? 'table-row' : 'none';
            });
        });
    });
</script>