@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<div class="page-wrapper" id="pl-page">

    <!-- Start Content -->
    <div class="content">
        <div class="card">
            <div class="card-body">

                <style>
                    .report-header {
                        text-align: center;
                        position: relative;
                        margin-bottom: 28px;
                        margin-top: 16px;
                    }

                    .report-header h1 {
                        color: #0b2a6f;
                        font-size: 28px;
                        font-weight: 700;
                        margin-bottom: 4px;
                    }

                    .report-header h3 {
                        font-size: 16px;
                        font-weight: 500;
                    }


                    table {
                        width: 100%;
                        border-collapse: collapse;
                    }

                    .main-table th {
                        background: #06256d;
                        color: #fff;
                        padding: 14px;
                        font-size: 14px;
                        border: 1px solid #d8d8d8;
                    }

                    .main-table td {
                        border: 1px solid #e2e2e2;
                        vertical-align: top;
                        padding: 16px;
                    }

                    .section-title {
                        font-size: 16px;
                        font-weight: 700;
                        margin-bottom: 15px;
                    }

                    .income {
                        color: #0b7a1f;
                    }

                    .expense {
                        color: #c21807;
                    }

                    .item-row {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 10px;
                        font-size: 15px;
                    }

                    table.main-table {
                        color: black;
                    }

                    .totals-row {
                        font-weight: 700;
                        font-size: 18px;
                        padding-top: 15px;
                    }

                    .total-income {
                        color: #0b7a1f;
                    }

                    .total-expense {
                        color: #c21807;
                    }

                    .net-profit {
                        background: #eef1f5;
                        padding: 18px 20px;
                        display: flex;
                        justify-content: space-between;
                        font-size: 22px;
                        font-weight: 700;
                        color: #10235f;
                        border: 1px solid #d9d9d9;
                        border-top: none;
                    }

                    .bottom-section {
                        display: flex;
                        gap: 40px;
                        margin-top: 40px;
                    }

                    .summary {
                        width: 50%;
                    }

                    .summary h3,
                    .note h3 {
                        color: #10235f;
                        margin-bottom: 12px;
                        font-size: 22px;
                    }

                    .summary table td {
                        border: 1px solid #dcdcdc;
                        padding: 12px 16px;
                        font-size: 18px;
                    }

                    .summary .profit {
                        color: #0b7a1f;
                        font-weight: 700;
                    }

                    .note {
                        width: 50%;
                        font-size: 18px;
                        line-height: 1.8;
                    }

                    .footer-sign {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 80px;
                        text-align: center;
                    }

                    .sign-box {
                        width: 250px;
                    }

                    .sign-line {
                        border-top: 2px solid #999;
                        margin-top: 40px;
                        padding-top: 10px;
                        font-size: 16px;
                    }
                </style>


                <div class="report-container">

                    <div class="report-header">

                        <h1>PROFIT & LOSS ACCOUNT</h1>

                        <h3>From 01-Apr-2025 To 31-Mar-2026</h3>



                    </div>

                    <table class="main-table">

                        <thead>
                            <tr>
                                <th>Income</th>
                                <th style=" text-align: right; ">Amount (₹)</th>
                                <th>Expenses</th>
                                <th style="text-align: right;">Amount (₹)</th>
                            </tr>
                        </thead>

                        <tbody>

                            <tr>

                                <td colspan="2">

                                    <div class="section-title income">INCOME</div>

                                    @foreach ($income_accounts as $account)
                                        <div class="item-row">
                                            <span>{{ $account->account_name }}</span>
                                            <span>{{ env('CURRENCY') . $account->total_credit }}</span>
                                        </div>
                                    @endforeach

                                </td>

                                <td colspan="2">

                                    <div class="section-title expense">EXPENSES</div>

                                    @foreach ($expense_accounts as $account)
                                        <div class="item-row">
                                            <span>{{ $account->account_name }}</span>
                                            <span>{{ env('CURRENCY') . $account->total_credit }}</span>
                                        </div>
                                    @endforeach

                                </td>

                            </tr>

                            <tr class="totals-row">

                                <td class="total-income">TOTAL INCOME</td>
                                <td class="total-income" align="right">
                                    {{ env('CURRENCY') . number_format($total_income, 2) }}</td>

                                <td class="total-expense">TOTAL EXPENSES</td>
                                <td class="total-expense" align="right">
                                    {{ env('CURRENCY') . number_format($total_expense, 2) }}</td>

                            </tr>

                        </tbody>

                    </table>

                    <div class="net-profit">
                        <span>NET PROFIT</span>
                        <span>{{ env('CURRENCY') . number_format($net_profit, 2) }}</span>
                    </div>


                </div>


            </div>
        </div>


    </div>
</div>

<!-- ========================
   End Page Content
  ========================= -->


@include('layouts.footer')