@extends('layouts.app')

@section('page-title', 'Balance Sheet Report')

@push('styles')
<style>
    /* =============================================
       CSS CUSTOM PROPERTIES
    ============================================= */
    :root {
        --radius-xl: 20px;
        --radius-lg: 16px;
        --radius-md: 12px;
        --radius-sm: 8px;
        --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
        --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
        --shadow-hover: 0 16px 48px rgba(0,0,0,0.13);
        --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        --color-assets:      #667eea;
        --color-liabilities: #eb3349;
        --color-equity:      #11998e;
        --color-summary:     #1a1a2e;
        --color-primary:     #667eea;
    }

    /* =============================================
       PAGE WRAPPER
    ============================================= */
    .bs-page { padding: 4px 0 28px; }

    /* =============================================
       PAGE HEADER
    ============================================= */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .page-header h2 {
        font-size: clamp(1.2rem, 3vw, 1.65rem);
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

    /* Date badge */
    .date-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(102,126,234,0.1);
        color: var(--color-primary);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 0.82rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* =============================================
       BUTTONS
    ============================================= */
    .btn {
        border-radius: var(--radius-md);
        padding: 9px 18px;
        font-weight: 600;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        text-decoration: none;
        transition: var(--transition);
        cursor: pointer;
        white-space: nowrap;
        line-height: 1.2;
    }

    .btn:hover { transform: translateY(-2px); }

    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102,126,234,0.35);
    }
    .btn-primary:hover { color: #fff; }

    .btn-secondary {
        background: #f1f5f9;
        color: #475569;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .btn-secondary:hover { background: #e2e8f0; color: #334155; }

    .btn-w-full { width: 100%; }

    /* =============================================
       FILTER CARD
    ============================================= */
    .filter-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: none;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .filter-card .card-body { padding: 18px 20px; }

    .filter-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: end;
        margin-bottom: 12px;
    }

    .form-group { display: flex; flex-direction: column; gap: 6px; }

    .form-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin: 0;
    }

    .form-control {
        border-radius: var(--radius-md);
        border: 2px solid #e2e8f0;
        padding: 9px 13px;
        font-size: 0.88rem;
        font-weight: 500;
        color: #334155;
        background: #fff;
        transition: var(--transition);
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
    }

    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
        outline: none;
    }

    .filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    /* =============================================
       MAIN LAYOUT GRID
    ============================================= */
    .bs-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .bs-right-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* =============================================
       SECTION CARDS
    ============================================= */
    .section-card {
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: none;
        overflow: hidden;
        transition: var(--transition);
    }

    .section-card:hover { box-shadow: var(--shadow-md); }

    /* Section header */
    .section-header {
        padding: 14px 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header .header-icon {
        width: 34px; height: 34px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.88rem;
        flex-shrink: 0;
        color: #fff;
    }

    .section-header.assets-hdr     { background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.08)); border-bottom: 2px solid rgba(102,126,234,0.2); }
    .section-header.liab-hdr       { background: linear-gradient(135deg, rgba(235,51,73,0.10),  rgba(244,92,67,0.06));   border-bottom: 2px solid rgba(235,51,73,0.2); }
    .section-header.equity-hdr     { background: linear-gradient(135deg, rgba(17,153,142,0.10), rgba(56,239,125,0.06));  border-bottom: 2px solid rgba(17,153,142,0.2); }
    .section-header.summary-hdr    { background: linear-gradient(135deg, rgba(26,26,46,0.08),   rgba(26,26,46,0.04));    border-bottom: 2px solid rgba(26,26,46,0.15); }

    .section-header .header-icon.assets-icon  { background: linear-gradient(135deg, #667eea, #764ba2); }
    .section-header .header-icon.liab-icon    { background: linear-gradient(135deg, #eb3349, #f45c43); }
    .section-header .header-icon.equity-icon  { background: linear-gradient(135deg, #11998e, #38ef7d); }
    .section-header .header-icon.summary-icon { background: linear-gradient(135deg, #1a1a2e, #374151); }

    .section-header h5 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        color: #1a1a2e;
    }

    /* =============================================
       BS TABLES
    ============================================= */
    .bs-table { width: 100%; border-collapse: collapse; }

    .bs-table tr { transition: var(--transition); }
    .bs-table tr:hover td { background: rgba(102,126,234,0.03); }

    .bs-table td {
        padding: 10px 18px;
        font-size: 0.87rem;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f8fafc;
        vertical-align: middle;
    }

    .bs-table tr:last-child td { border-bottom: none; }

    /* label col */
    .bs-table .label-col { color: #475569; }

    /* indented sub-rows (bank/digital accounts) */
    .bs-table .sub-row td { padding-left: 32px; color: #64748b; font-size: 0.84rem; }
    .bs-table .sub-row td:first-child::before {
        content: '└ ';
        color: #cbd5e1;
        font-size: 0.75rem;
    }

    /* section label rows (Bank Accounts, Digital Accounts) */
    .bs-table .group-label td {
        padding-top: 14px;
        padding-bottom: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #94a3b8;
        background: transparent !important;
        border-bottom: none;
    }

    /* subtotal rows */
    .bs-table .subtotal-row td {
        font-weight: 700;
        color: #334155;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    /* total rows */
    .bs-table .total-row td {
        font-weight: 800;
        font-size: 0.92rem;
        padding-top: 12px;
        padding-bottom: 12px;
        border-top: 2px solid #e2e8f0;
        background: #f1f5f9;
    }

    /* amount col — always right-aligned */
    .bs-table .amt {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .bs-table .total-row .amt.assets    { color: var(--color-assets); }
    .bs-table .total-row .amt.liab      { color: var(--color-liabilities); }
    .bs-table .total-row .amt.equity    { color: var(--color-equity); }
    .bs-table .total-row .amt.summary   { color: var(--color-summary); }
    .bs-table .subtotal-row .amt        { color: #475569; }

    /* positive / negative value colouring */
    .val-positive { color: var(--color-equity) !important; }
    .val-negative { color: var(--color-liabilities) !important; }

    /* =============================================
       BALANCE CHECK ROW
    ============================================= */
    .balance-check-row td {
        font-weight: 800;
        font-size: 0.92rem;
        padding: 12px 18px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .balance-check-row.balanced td   { background: rgba(17,153,142,0.1);  color: #0f766e; }
    .balance-check-row.unbalanced td { background: rgba(235,51,73,0.1);   color: #be123c; }

    .balance-check-row .check-icon { font-size: 1rem; }

    /* =============================================
       EMPTY ROW
    ============================================= */
    .empty-row td {
        text-align: center;
        color: #94a3b8;
        font-size: 0.83rem;
        padding: 14px 18px;
        font-style: italic;
    }

    /* =============================================
       ============================================
       RESPONSIVE BREAKPOINTS
       ============================================
    ============================================= */

    /* ---- EXTRA SMALL < 480px ---- */
    @media (max-width: 479px) {
        .bs-page { padding: 0 0 16px; }

        .page-header { flex-direction: column; align-items: stretch; }
        .page-header h2 { font-size: 1.2rem; }

        .filter-grid { grid-template-columns: 1fr; gap: 10px; }
        .filter-actions .btn { width: 100%; }
        .filter-card .card-body { padding: 14px; }

        /* Stack assets / liabilities into 1 col */
        .bs-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bs-table td { padding: 9px 14px; font-size: 0.83rem; }
        .bs-table .sub-row td { padding-left: 22px; }
        .bs-table .total-row td { font-size: 0.88rem; }

        .section-header h5 { font-size: 0.92rem; }
        .section-header { padding: 12px 14px; }
    }

    /* ---- SMALL 480–575px ---- */
    @media (min-width: 480px) and (max-width: 575px) {
        .filter-grid { grid-template-columns: 1fr; gap: 10px; }
        .filter-actions .btn { width: 100%; }

        .bs-grid { grid-template-columns: 1fr; gap: 14px; }

        .bs-table td { padding: 9px 14px; font-size: 0.84rem; }
    }

    /* ---- MEDIUM 576–767px ---- */
    @media (min-width: 576px) and (max-width: 767px) {
        .filter-grid { grid-template-columns: 1fr auto; }

        /* Still stack on medium — side-by-side gets too cramped */
        .bs-grid { grid-template-columns: 1fr; gap: 14px; }

        .bs-table td { padding: 10px 14px; }
    }

    /* ---- TABLET 768–991px ---- */
    @media (min-width: 768px) and (max-width: 991px) {
        /* Side by side fits on tablet landscape */
        .bs-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
        .bs-table td { padding: 9px 14px; font-size: 0.85rem; }
    }

    /* ---- DESKTOP 992px+ ---- */
    @media (min-width: 992px) {
        .bs-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    }

    /* ---- WIDE 1400px+ ---- */
    @media (min-width: 1400px) {
        .bs-table td { padding: 11px 20px; font-size: 0.9rem; }
    }

    /* =============================================
       TOUCH OPTIMISATIONS
    ============================================= */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover          { transform: none; }
        .section-card:hover { box-shadow: var(--shadow-sm); }
        .bs-table tr:hover td { background: transparent; }
        .btn { padding: 11px 18px; }
        .bs-table td { padding: 13px 16px; }
    }

    /* =============================================
       ACCESSIBILITY
    ============================================= */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }

    :focus-visible {
        outline: 3px solid #667eea;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* =============================================
       LANDSCAPE PHONES
    ============================================= */
    @media (max-height: 500px) and (orientation: landscape) {
        .bs-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .bs-table td { padding: 7px 12px; font-size: 0.82rem; }
        .filter-grid { grid-template-columns: 1fr auto; }
    }

    /* =============================================
       PRINT
    ============================================= */
    @media print {
        .filter-card { display: none !important; }
        .bs-page { padding: 0 !important; }

        .bs-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 10px !important;
        }

        .section-card {
            box-shadow: none !important;
            border: 1px solid #ccc !important;
            page-break-inside: avoid;
        }

        .bs-table td { padding: 6px 10px !important; font-size: 0.77rem !important; }

        .section-header.assets-hdr,
        .section-header.liab-hdr,
        .section-header.equity-hdr,
        .section-header.summary-hdr {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .balance-check-row.balanced td,
        .balance-check-row.unbalanced td {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
</style>
@endpush

@section('content')
<div class="bs-page">

    {{-- ========================================
         PAGE HEADER
    ======================================== --}}
    <div class="page-header">
        <h2>Balance Sheet</h2>
        <span class="date-badge">
            <i class="fas fa-calendar-alt" style="font-size:0.75rem;"></i>
            As at {{ \Carbon\Carbon::parse($asAt)->format('M d, Y') }}
        </span>
    </div>

    {{-- ========================================
         FILTERS
    ======================================== --}}
    <div class="filter-card">
        <div class="card-body">
            <form method="GET" action="{{ route('reports.balance-sheet') }}">
                <div class="filter-grid">
                    <div class="form-group">
                        <label for="as_at" class="form-label">As At Date</label>
                        <input type="date" class="form-control" id="as_at" name="as_at"
                               value="{{ $asAt }}">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-w-full">
                            <i class="fas fa-chart-bar"></i> Generate
                        </button>
                    </div>
                </div>
                <div class="filter-actions">
                    <a href="{{ url('reports/balance-sheet/print?as_at=' . $asAt) }}"
                       target="_blank"
                       class="btn btn-secondary">
                        <i class="fas fa-print"></i> Print Report
                    </a>
                </div>
            </form>
        </div>
    </div>

    {{-- ========================================
         BALANCE SHEET GRID
    ======================================== --}}
    <div class="bs-grid">

        {{-- ---- ASSETS ---- --}}
        <div class="section-card">
            <div class="section-header assets-hdr">
                <div class="header-icon assets-icon">
                    <i class="fas fa-landmark"></i>
                </div>
                <h5>Assets</h5>
            </div>
            <div class="card-body" style="padding:0;">
                <table class="bs-table">

                    {{-- Cash --}}
                    <tr>
                        <td class="label-col">Cash in Hand</td>
                        <td class="amt">৳{{ number_format($cashBalance, 2) }}</td>
                    </tr>

                    {{-- Bank Accounts --}}
                    <tr class="group-label">
                        <td colspan="2">
                            <i class="fas fa-university" style="margin-right:5px;"></i> Bank Accounts
                        </td>
                    </tr>
                    @forelse($bankAccounts as $account)
                        <tr class="sub-row">
                            <td>{{ $account['name'] }}</td>
                            <td class="amt">৳{{ number_format($account['balance'], 2) }}</td>
                        </tr>
                    @empty
                        <tr class="empty-row"><td colspan="2">No bank accounts</td></tr>
                    @endforelse
                    <tr class="subtotal-row">
                        <td>Total Bank Balance</td>
                        <td class="amt">৳{{ number_format($totalBankBalance, 2) }}</td>
                    </tr>

                    {{-- Digital Accounts --}}
                    <tr class="group-label">
                        <td colspan="2">
                            <i class="fas fa-mobile-alt" style="margin-right:5px;"></i> Digital Accounts
                        </td>
                    </tr>
                    @forelse($digitalAccounts as $account)
                        <tr class="sub-row">
                            <td>{{ $account['name'] }}</td>
                            <td class="amt">৳{{ number_format($account['balance'], 2) }}</td>
                        </tr>
                    @empty
                        <tr class="empty-row"><td colspan="2">No digital accounts</td></tr>
                    @endforelse
                    <tr class="subtotal-row">
                        <td>Total Digital Balance</td>
                        <td class="amt">৳{{ number_format($totalDigitalBalance, 2) }}</td>
                    </tr>

                    {{-- Other Assets --}}
                    <tr>
                        <td class="label-col">Accounts Receivable</td>
                        <td class="amt {{ $accountsReceivable > 0 ? 'val-positive' : '' }}">
                            ৳{{ number_format($accountsReceivable, 2) }}
                        </td>
                    </tr>
                    <tr>
                        <td class="label-col">Inventory Value</td>
                        <td class="amt">৳{{ number_format($inventoryValue, 2) }}</td>
                    </tr>

                    {{-- Total Assets --}}
                    <tr class="total-row">
                        <td>Total Assets</td>
                        <td class="amt assets">৳{{ number_format($totalAssets, 2) }}</td>
                    </tr>

                </table>
            </div>
        </div>

        {{-- ---- RIGHT COLUMN: Liabilities + Equity + Summary ---- --}}
        <div class="bs-right-col">

            {{-- Liabilities --}}
            <div class="section-card">
                <div class="section-header liab-hdr">
                    <div class="header-icon liab-icon">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </div>
                    <h5>Liabilities</h5>
                </div>
                <div class="card-body" style="padding:0;">
                    <table class="bs-table">
                        <tr>
                            <td class="label-col">Accounts Payable</td>
                            <td class="amt {{ $accountsPayable > 0 ? 'val-negative' : '' }}">
                                ৳{{ number_format($accountsPayable, 2) }}
                            </td>
                        </tr>
                        <tr class="total-row">
                            <td>Total Liabilities</td>
                            <td class="amt liab">৳{{ number_format($totalLiabilities, 2) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            {{-- Equity --}}
            <div class="section-card">
                <div class="section-header equity-hdr">
                    <div class="header-icon equity-icon">
                        <i class="fas fa-chart-pie"></i>
                    </div>
                    <h5>Equity</h5>
                </div>
                <div class="card-body" style="padding:0;">
                    <table class="bs-table">
                        <tr>
                            <td class="label-col">Retained Earnings</td>
                            <td class="amt {{ $retainedEarnings >= 0 ? 'val-positive' : 'val-negative' }}">
                                ৳{{ number_format($retainedEarnings, 2) }}
                            </td>
                        </tr>
                        <tr class="total-row">
                            <td>Total Equity</td>
                            <td class="amt equity">৳{{ number_format($totalEquity, 2) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            {{-- Summary --}}
            <div class="section-card">
                <div class="section-header summary-hdr">
                    <div class="header-icon summary-icon">
                        <i class="fas fa-balance-scale"></i>
                    </div>
                    <h5>Summary</h5>
                </div>
                <div class="card-body" style="padding:0;">
                    <table class="bs-table">
                        <tr class="total-row">
                            <td>Total Liabilities &amp; Equity</td>
                            <td class="amt summary">
                                ৳{{ number_format($totalLiabilitiesAndEquity, 2) }}
                            </td>
                        </tr>
                        @php $balanced = $totalAssets == $totalLiabilitiesAndEquity; @endphp
                        <tr class="balance-check-row {{ $balanced ? 'balanced' : 'unbalanced' }}">
                            <td>
                                <i class="fas fa-{{ $balanced ? 'check-circle' : 'exclamation-triangle' }} check-icon"
                                   style="margin-right:6px;"></i>
                                Balance Check
                            </td>
                            <td class="amt">
                                @if($balanced)
                                    Balanced ✓
                                @else
                                    Not Balanced ✗
                                    <div style="font-size:0.73rem; font-weight:500; margin-top:3px; opacity:0.85;">
                                        Difference: ৳{{ number_format(abs($totalAssets - $totalLiabilitiesAndEquity), 2) }}
                                    </div>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>{{-- /bs-right-col --}}

    </div>{{-- /bs-grid --}}

</div>
@endsection
