@extends('backend.layouts.app')
@section('content')
    <h4 class="mb-4">Balance Sheet Report</h4>
    <form method="GET" class="row g-3 mb-4">
        <div class="col-md-3">
            <label for="start_date" class="form-label">Start Date</label>
            <input type="date" name="start_date" id="start_date" class="form-control" value="{{ request('start_date') }}">
        </div>
        <div class="col-md-3">
            <label for="end_date" class="form-label">End Date</label>
            <input type="date" name="end_date" id="end_date" class="form-control" value="{{ request('end_date') }}">
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button type="button" onclick="printBalanceSheet()" class="btn btn-secondary w-100">
                <i class="fa fa-print"></i> Print Report
            </button>
        </div>
    </form>

    <div id="printArea">
        <div class="row">
            <!-- ASSETS -->
            <div class="col-md-6">
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-primary text-white fw-bold">Assets</div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Cash & Bank (Paid Income)</span>
                                <strong>{{ number_format($totalCash, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Receivables (Unpaid Income)</span>
                                <strong>{{ number_format($totalReceivables, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Fixed Assets</span>
                                <strong>{{ number_format($fixedAssets, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between border-top">
                                <strong>Total Assets</strong>
                                <strong>{{ number_format($totalAssets, 2) }}</strong>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- LIABILITIES + EQUITY -->
            <div class="col-md-6">
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-danger text-white fw-bold">Liabilities</div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Unpaid Donation Requests</span>
                                <strong>{{ number_format($unpaidDonationRequests, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Unpaid Expenses</span>
                                <strong>{{ number_format($unpaidExpenses, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Other Liabilities</span>
                                <strong>{{ number_format($otherLiabilities, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between border-top">
                                <strong>Total Liabilities</strong>
                                <strong>{{ number_format($totalLiabilities, 2) }}</strong>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white fw-bold">Equity</div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Retained Earnings</span>
                                <strong>{{ number_format($retainedEarnings, 2) }}</strong>
                            </li>
                            <li class="list-group-item d-flex justify-content-between border-top">
                                <strong>Total Equity</strong>
                                <strong>{{ number_format($totalEquity, 2) }}</strong>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        function printBalanceSheet() {
            const printContents = $('#printArea').html();

            // Calculate center position
            const width = 1000;
            const height = 800;
            const left = (screen.width - width) / 2;
            const top = (screen.height - height) / 2;

            const printWindow = window.open('', '', `width=${width},height=${height},top=${top},left=${left}`);

            printWindow.document.write('<html><head><title>Balance Sheet</title>');
            printWindow.document.write(`
        <style>
            body {
                font-family: Arial, sans-serif;
                padding: 20px;
            }
            .fw-bold { font-weight: bold; }
            .card {
                border: 1px solid #ccc;
                border-radius: 5px;
                margin-bottom: 20px;
            }
            .card-header {
                font-size: 18px;
                padding: 10px;
                background-color: #f8f9fa;
                border-bottom: 1px solid #ccc;
            }
            .card-body {
                padding: 15px;
            }
            .list-group {
                padding: 0;
                list-style: none;
            }
            .list-group-item {
                padding: 8px 0;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
            }
            .border-top {
                border-top: 2px solid #000 !important;
            }
        </style>
    `);
            printWindow.document.write('</head><body>');
            printWindow.document.write('<h3>Balance Sheet Report</h3>');
            printWindow.document.write('<div>' + printContents + '</div>');
            printWindow.document.write('</body></html>');

            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    </script>
@endpush