{{-- resources/views/balance-sheet.blade.php --}}
@extends('layouts.master')
@section('title', 'Balance Sheet')

@section('styles')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style>
:root {
    --bs-bg: #eef2f7;
    --bs-surface: #ffffff;
    --bs-text: #0f172a;
    --bs-text-2: #475569;
    --bs-text-3: #64748b;
    --bs-primary: #1d4ed8;
    --bs-primary-soft: #e8efff;
    --bs-border: #e2e8f0;
    --bs-emerald: #059669;
    --bs-amber: #d97706;
    --bs-rose: #e11d48;
    --bs-radius: 18px;
    --bs-shadow: 0 16px 30px -18px rgba(15, 23, 42, 0.35), 0 2px 8px rgba(15, 23, 42, 0.08);
}

body, .content-wrapper {
    background: linear-gradient(145deg, #eef2f7 0%, #e7edf4 100%) !important;
    font-family: 'Inter', sans-serif;
}

.bs-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 32px 40px;
}

.bs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.bs-title h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--bs-text);
    letter-spacing: -0.015em;
    margin: 0 0 6px;
}

.bs-title .sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-text-3);
    font-size: 0.85rem;
    font-weight: 500;
}

.bs-date {
    background: rgba(255, 255, 255, 0.75);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--bs-text);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.bs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bs-back {
    text-decoration: none;
    color: var(--bs-text-2);
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    padding: 8px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: 0.2s ease;
}

.bs-back:hover {
    color: var(--bs-text);
    background: #f8fafc;
    text-decoration: none;
}

.bs-filter {
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    padding: 18px 20px;
    box-shadow: var(--bs-shadow);
    margin-bottom: 22px;
}

.bs-filter label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-text-3);
    font-weight: 600;
}

.bs-filter .form-control,
.bs-filter .form-select {
    border-radius: 10px;
    border: 1px solid var(--bs-border);
    font-size: 0.9rem;
}

.bs-btn {
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s ease;
}

.bs-btn-primary { background: var(--bs-primary); color: #fff; }
.bs-btn-primary:hover { background: #1e40af; color: #fff; }
.bs-btn-ghost { background: #f1f5f9; color: var(--bs-text-2); }
.bs-btn-ghost:hover { background: #e2e8f0; }
.bs-btn-success { background: var(--bs-emerald); color: #fff; }
.bs-btn-success:hover { filter: brightness(1.05); color: #fff; }

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

.bs-card {
    background: var(--bs-surface);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--bs-shadow);
    overflow: hidden;
}

.bs-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 10px;
    border-bottom: 1px solid var(--bs-border);
}

.bs-card-header i {
    font-size: 1.4rem;
    color: var(--bs-primary);
    background: var(--bs-primary-soft);
    padding: 8px;
    border-radius: 16px;
}

.bs-card-header h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--bs-text);
    font-weight: 600;
}

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

.bs-table tr {
    border-bottom: 1px solid #eef2f6;
}

.bs-table td {
    padding: 12px 18px;
    font-size: 0.92rem;
}

.bs-item {
    color: var(--bs-text);
    font-weight: 500;
}

.bs-amount {
    text-align: right;
    font-weight: 600;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

.bs-total-row {
    background: #f8fafc;
    font-weight: 700;
}

.bs-total-row .bs-amount {
    color: var(--bs-primary);
    font-size: 1rem;
}

.bs-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bs-summary {
    margin-top: 24px;
    background: var(--bs-surface);
    border-radius: 20px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.bs-equation {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #eef4ff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #1e3a8a;
    font-weight: 600;
}

.bs-balance {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-text-2);
}

.bs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.bs-badge.ok { background: #e2f3e4; color: #1b5e20; }
.bs-badge.warn { background: #fff4e5; color: #9a5a06; }

.bs-meta {
    font-size: 0.8rem;
    color: var(--bs-text-3);
}

@media (max-width: 900px) {
    .bs-grid { grid-template-columns: 1fr; }
    .bs-wrap { padding: 20px 16px; }
    .bs-title h1 { font-size: 2.1rem; }
}

@media print {
    .no-print,
    .bs-filter,
    .bs-actions,
    .bs-back {
        display: none !important;
    }

    .bs-card,
    .bs-summary {
        box-shadow: none;
        border: 1px solid #cbd5e1;
    }
}
</style>
@endsection

@section('content')
@php
    $pfromDisplay = isset($pfrom) ? date('F j, Y', strtotime($pfrom)) : date('F j, Y');
    $ptoDisplay = isset($pto) ? date('F j, Y', strtotime($pto)) : date('F j, Y');
@endphp
<div class="bs-wrap">
    <div class="bs-header">
        <div class="bs-title">
            <h1>Balance Sheet</h1>
            <div class="sub">
                <i class="fas fa-chart-line"></i>
                <span>financial position · assets = liabilities + equity</span>
            </div>
        </div>
        <div class="bs-actions">
            <a href="{{ route('modules.reports') }}" class="bs-back">
                <i class="fas fa-arrow-left"></i> Back to Reports
            </a>
            <div class="bs-date">
                <i class="far fa-calendar-alt"></i>
                As of {{ $ptoDisplay }}
            </div>
        </div>
    </div>

    <div class="bs-filter">
        <form action="{{ route('balanceSheet.generate') }}" method="POST" class="row g-3 align-items-end">
            @csrf
            <div class="col-md-4">
                <label class="form-label">From Period</label>
                <input type="date" class="form-control" name="pfrom" value="{{ old('pfrom', date('Y-m-d')) }}" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">To Period</label>
                <input type="date" class="form-control" name="pto" value="{{ old('pto', date('Y-m-d')) }}" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Select Currency</label>
                <select class="form-control" name="curr" required>
                    <option value="" disabled {{ old('curr', $currencyId ?? '') ? '' : 'selected' }}>Select Currency</option>
                    @foreach($currencies as $currency)
                        <option value="{{ $currency->currency_id }}" {{ old('curr', $currencyId ?? '') == $currency->currency_id ? 'selected' : '' }}>
                            {{ $currency->currency_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 d-flex justify-content-end gap-2">
                <button type="submit" class="bs-btn bs-btn-primary"><i class="fas fa-filter"></i> View Report</button>
                <button type="reset" class="bs-btn bs-btn-ghost">Refresh</button>
            </div>
        </form>
    </div>

    @php
        $bsAssets = $balanceSheet['assets'] ?? ($assets ?? []);
        $bsLiabilities = $balanceSheet['liabilities'] ?? ($liabilities ?? []);
        $bsEquity = $balanceSheet['equity'] ?? ($equity ?? []);
        $totalAssets = $balanceSheet['totalAssets'] ?? ($totalAssets ?? 0);
        $totalLiabilities = $balanceSheet['totalLiabilities'] ?? ($totalLiabilities ?? 0);
        $totalEquity = $balanceSheet['totalEquity'] ?? ($totalEquity ?? 0);
    @endphp

    @if(isset($bsAssets) && isset($bsLiabilities) && isset($bsEquity))
        <div class="bs-actions no-print" style="justify-content: flex-end; margin-bottom: 16px;">
            <button type="button" class="bs-btn bs-btn-primary" onclick="window.print()">
                <i class="fas fa-print"></i> Print Report
            </button>
            <form action="{{ route('balanceSheet.downloadPdf') }}" method="POST">
                @csrf
                <input type="hidden" name="pfrom" value="{{ old('pfrom', $pfrom ?? date('Y-m-d')) }}">
                <input type="hidden" name="pto" value="{{ old('pto', $pto ?? date('Y-m-d')) }}">
                <input type="hidden" name="currencyId" value="{{ old('curr', $currencyId ?? '') }}">
                <button type="submit" class="bs-btn bs-btn-success">
                    <i class="fas fa-download"></i> Download PDF
                </button>
            </form>
        </div>

        @php
            $liabEquity = ($totalLiabilities ?? 0) + ($totalEquity ?? 0);
            $variance = ($totalAssets ?? 0) - $liabEquity;
            $balanced = abs($variance) < 0.01;
        @endphp

        <div class="bs-grid">
            <div class="bs-card">
                <div class="bs-card-header">
                    <i class="fas fa-building-columns"></i>
                    <h2>Assets</h2>
                </div>
                <table class="bs-table">
                    <tbody>
        @php
            $groupedAssets = collect($bsAssets)->groupBy(function($asset) {
                return strtoupper($asset['name'] ?? '');
            });
        @endphp
        @foreach($groupedAssets as $catName => $assets)
            @if($assets->count() > 0)
                <tr class="bs-subtotal">
                    <td class="bs-item" colspan="2" style="padding-left: 2rem; font-weight: 700; color: var(--bs-emerald);">{{ $catName }}</td>
                </tr>
                @foreach($assets as $asset)
                    <tr>
                        <td class="bs-item" style="padding-left: 2.5rem;">{{ $asset['name'] }}</td>
                        <td class="bs-amount">{{ number_format($asset['amount'], 2) }}</td>
                    </tr>
                @endforeach
            @endif
        @endforeach
        <tr class="bs-total-row">
            <td class="bs-item" style="font-size: 1rem;"><strong>Total Assets</strong></td>
            <td class="bs-amount" style="font-size: 1.1rem; color: var(--bs-emerald);"><strong>{{ number_format($totalAssets, 2) }}</strong></td>
        </tr>
                    </tbody>
                </table>
            </div>

            <div class="bs-side">
                <div class="bs-card">
                    <div class="bs-card-header">
                        <i class="fas fa-hand-holding-usd" style="color: var(--bs-amber); background: #fff5eb;"></i>
                        <h2>Liabilities</h2>
                    </div>
                    <table class="bs-table">
                        <tbody>
                        @forelse($bsLiabilities as $liability)
                                <tr>
                                    <td class="bs-item">{{ $liability['name'] }}</td>
                                    <td class="bs-amount">{{ number_format($liability['amount'], 2) }}</td>
                                </tr>
                            @empty
                                <tr><td class="bs-item" colspan="2">No liabilities found</td></tr>
                            @endforelse
                            <tr class="bs-total-row">
                                <td class="bs-item">Total Liabilities</td>
                                <td class="bs-amount">{{ number_format($totalLiabilities, 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="bs-card">
                    <div class="bs-card-header">
                        <i class="fas fa-chart-pie" style="color: #7c3aed; background: #f3e8ff;"></i>
                        <h2>Equity</h2>
                    </div>
                    <table class="bs-table">
                        <tbody>
                            @forelse($bsEquity as $eq)
                                <tr>
                                    <td class="bs-item">{{ $eq['name'] }}</td>
                                    <td class="bs-amount">{{ number_format($eq['amount'], 2) }}</td>
                                </tr>
                            @empty
                                <tr><td class="bs-item" colspan="2">No equity found</td></tr>
                            @endforelse
                            <tr class="bs-total-row">
                                <td class="bs-item">Total Equity</td>
                                <td class="bs-amount">{{ number_format($totalEquity, 2) }}</td>
                            </tr>
                            <tr class="bs-total-row">
                                <td class="bs-item">Total Liabilities &amp; Equity</td>
                                <td class="bs-amount">{{ number_format($liabEquity, 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="bs-summary">
            <div class="bs-equation"><i class="fas fa-balance-scale"></i> Assets = Liabilities + Equity</div>
            <div class="bs-balance">
                <span class="bs-meta">Total Assets: {{ number_format($totalAssets, 2) }}</span>
                <span class="bs-meta" style="margin-left: 8px;">Liabilities + Equity: {{ number_format($liabEquity, 2) }}</span>
            </div>
            <span class="bs-badge {{ $balanced ? 'ok' : 'warn' }}">
                <i class="fas {{ $balanced ? 'fa-check-circle' : 'fa-exclamation-triangle' }}"></i>
                {{ $balanced ? 'Balanced' : ('Variance ' . number_format(abs($variance), 2)) }}
            </span>
        </div>
    @endif
</div>
@endsection