@extends('layouts.user')

@section('title', __('balance_sheet.balance_sheet'))
@section('page_title', __('balance_sheet.balance_sheet'))
@section('breadcrumb', __('balance_sheet.reports') . ' / ' . __('balance_sheet.balance_sheet'))

@section('content')
@php
    $fmt = fn($v) => number_format((float) $v, 2);
    $asOfDate = \Carbon\Carbon::parse($asOf)->format('d M, Y');

    $differenceAbs = abs((float) ($difference ?? 0));
    $isBalanced = $differenceAbs < 0.01;

    $assetItems = [
        ['label' => __('balance_sheet.cash_bank_mfs_balance'), 'amount' => $totalAccountBalances ?? 0],
        ['label' => __('balance_sheet.customer_receivable'), 'amount' => $customerDue ?? 0],
        ['label' => __('balance_sheet.employee_outstanding_advance'), 'amount' => $employeeOutstandingAdvance ?? 0],
    ];

    $liabilityItems = [
        ['label' => __('balance_sheet.supplier_payable'), 'amount' => $supplierDue ?? 0],
        ['label' => __('balance_sheet.loan_payable'), 'amount' => $loanPayable ?? 0],
        ['label' => __('balance_sheet.unpaid_employee_bonus'), 'amount' => $unpaidEmployeeBonus ?? 0],
        ['label' => __('balance_sheet.salary_due'), 'amount' => $salaryDue ?? 0],
    ];

    $equityItems = [
        ['label' => __('balance_sheet.owner_capital'), 'amount' => $ownerCapital ?? 0],
        ['label' => __('balance_sheet.retained_earnings'), 'amount' => $retainedEarnings ?? 0],
    ];
@endphp

<div class="w-full px-1 sm:px-2 lg:px-3 space-y-4">

    {{-- Header --}}
<div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
    <div class="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-3 py-3">
        <div class="flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="text-[9px] font-semibold uppercase tracking-[0.18em] text-slate-400">
                    {{ __('balance_sheet.financial_position') }}
                </p>
                <h1 class="mt-0.5 text-base font-semibold text-white leading-tight">
                    {{ __('balance_sheet.balance_sheet') }}
                </h1>
                <p class="text-[10px] text-slate-400">
                    {{ __('balance_sheet.as_of') }} {{ $asOfDate }}
                </p>
            </div>

            <form method="GET" action="{{ route('user.reports.balance-sheet') }}" class="flex flex-wrap items-end gap-1.5">
                <input
                    type="date"
                    name="as_of"
                    value="{{ request('as_of', \Carbon\Carbon::parse($asOf)->format('Y-m-d')) }}"
                    class="h-7 border border-white/20 bg-white/10 px-2 text-[11px] text-white outline-none"
                >

                <button class="h-7 px-3 text-[11px] font-semibold bg-white text-slate-900 border border-white">
                    {{ __('balance_sheet.filter') }}
                </button>

                <a href="{{ route('user.reports.balance-sheet.pdf', ['as_of' => request('as_of', \Carbon\Carbon::parse($asOf)->format('Y-m-d'))]) }}"
                   target="_blank"
                   class="h-7 px-3 text-[11px] font-semibold border border-white/20 text-white bg-white/10">
                    PDF
                </a>
            </form>
        </div>
    </div>

    {{-- Top Cards --}}
    <div class="grid gap-2 p-2 md:grid-cols-2 xl:grid-cols-4">
        <div class="border border-emerald-200 bg-emerald-50 px-2 py-2">
            <p class="text-[9px] uppercase text-emerald-700">{{ __('balance_sheet.total_assets') }}</p>
            <p class="text-sm font-bold text-emerald-900">{{ $fmt($totalAssets ?? 0) }}</p>
        </div>

        <div class="border border-rose-200 bg-rose-50 px-2 py-2">
            <p class="text-[9px] uppercase text-rose-700">{{ __('balance_sheet.total_liabilities') }}</p>
            <p class="text-sm font-bold text-rose-900">{{ $fmt($totalLiabilities ?? 0) }}</p>
        </div>

        <div class="border border-sky-200 bg-sky-50 px-2 py-2">
            <p class="text-[9px] uppercase text-sky-700">{{ __('balance_sheet.total_equity') }}</p>
            <p class="text-sm font-bold text-sky-900">{{ $fmt($equity ?? 0) }}</p>
        </div>

        <div class="border {{ $isBalanced ? 'border-emerald-200 bg-emerald-50' : 'border-amber-200 bg-amber-50' }} px-2 py-2">
            <p class="text-[9px] uppercase {{ $isBalanced ? 'text-emerald-700' : 'text-amber-700' }}">
                {{ __('balance_sheet.status') }}
            </p>
            <p class="text-xs font-bold">
                {{ $isBalanced ? __('balance_sheet.balanced') : __('balance_sheet.needs_review') }}
            </p>
        </div>
    </div>
</div>

    {{-- Statement --}}
    <div class="grid gap-4 xl:grid-cols-2">
        {{-- Assets --}}
        <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
            <div class="border-b border-slate-100 px-4 py-3">
                <h2 class="text-sm font-bold text-slate-900">{{ __('balance_sheet.assets') }}</h2>
                <p class="mt-0.5 text-xs text-slate-500">{{ __('balance_sheet.company_will_receive_owns') }}</p>
            </div>

            <div class="p-4 space-y-2.5">
                @foreach ($assetItems as $item)
                    <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                        <span class="text-xs font-medium text-slate-700">{{ $item['label'] }}</span>
                        <span class="text-xs font-bold text-slate-900">{{ $fmt($item['amount']) }}</span>
                    </div>
                @endforeach

                <div class="flex items-center justify-between bg-emerald-600 px-3 py-2.5">
                    <span class="text-xs font-bold text-white">{{ __('balance_sheet.total_assets') }}</span>
                    <span class="text-sm font-bold text-white">{{ $fmt($totalAssets ?? 0) }}</span>
                </div>
            </div>
        </div>

        {{-- Liabilities + Equity --}}
        <div class="space-y-4">
            <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
                <div class="border-b border-slate-100 px-4 py-3">
                    <h2 class="text-sm font-bold text-slate-900">{{ __('balance_sheet.liabilities') }}</h2>
                    <p class="mt-0.5 text-xs text-slate-500">{{ __('balance_sheet.company_needs_to_pay') }}</p>
                </div>

                <div class="p-4 space-y-2.5">
                    @foreach ($liabilityItems as $item)
                        <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                            <span class="text-xs font-medium text-slate-700">{{ $item['label'] }}</span>
                            <span class="text-xs font-bold text-slate-900">{{ $fmt($item['amount']) }}</span>
                        </div>
                    @endforeach

                    <div class="flex items-center justify-between bg-rose-600 px-3 py-2.5">
                        <span class="text-xs font-bold text-white">{{ __('balance_sheet.total_liabilities') }}</span>
                        <span class="text-sm font-bold text-white">{{ $fmt($totalLiabilities ?? 0) }}</span>
                    </div>
                </div>
            </div>

            <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
                <div class="border-b border-slate-100 px-4 py-3">
                    <h2 class="text-sm font-bold text-slate-900">{{ __('balance_sheet.equity') }}</h2>
                    <p class="mt-0.5 text-xs text-slate-500">{{ __('balance_sheet.owner_interest_in_business') }}</p>
                </div>

                <div class="p-4 space-y-2.5">
                    @foreach ($equityItems as $item)
                        <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                            <span class="text-xs font-medium text-slate-700">{{ $item['label'] }}</span>
                            <span class="text-xs font-bold text-slate-900">{{ $fmt($item['amount']) }}</span>
                        </div>
                    @endforeach

                    <div class="flex items-center justify-between bg-sky-600 px-3 py-2.5">
                        <span class="text-xs font-bold text-white">{{ __('balance_sheet.total_equity') }}</span>
                        <span class="text-sm font-bold text-white">{{ $fmt($equity ?? 0) }}</span>
                    </div>

                    <div class="flex items-center justify-between border border-slate-200 bg-slate-900 px-3 py-2.5">
                        <span class="text-xs font-bold text-white">{{ __('balance_sheet.liabilities_plus_equity') }}</span>
                        <span class="text-sm font-bold text-white">{{ $fmt(($totalLiabilities ?? 0) + ($equity ?? 0)) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Accounts details --}}
    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div class="flex flex-col gap-2 border-b border-slate-100 px-4 py-3 md:flex-row md:items-center md:justify-between">
            <div>
                <h2 class="text-sm font-bold text-slate-900">{{ __('balance_sheet.cash_bank_mfs_details') }}</h2>
                <p class="mt-0.5 text-xs text-slate-500">{{ __('balance_sheet.account_wise_balance_summary') }}</p>
            </div>

            <div class="border border-slate-200 bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700">
                {{ __('balance_sheet.total') }}: {{ $fmt($totalAccountBalances ?? 0) }}
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50">
                    <tr class="text-left text-slate-600">
                        <th class="px-4 py-3 font-bold">{{ __('balance_sheet.account') }}</th>
                        <th class="px-4 py-3 font-bold">{{ __('balance_sheet.type') }}</th>
                        <th class="px-4 py-3 font-bold">{{ __('balance_sheet.account_no') }}</th>
                        <th class="px-4 py-3 font-bold text-right">{{ __('balance_sheet.opening') }}</th>
                        <th class="px-4 py-3 font-bold text-right">{{ __('balance_sheet.debit') }}</th>
                        <th class="px-4 py-3 font-bold text-right">{{ __('balance_sheet.credit') }}</th>
                        <th class="px-4 py-3 font-bold text-right">{{ __('balance_sheet.balance') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($accountRows ?? [] as $row)
                        <tr class="hover:bg-slate-50/80">
                            <td class="px-4 py-3 font-semibold text-slate-900">{{ $row['name'] }}</td>
                            <td class="px-4 py-3 text-slate-600 capitalize">{{ str_replace('_', ' ', $row['type']) }}</td>
                            <td class="px-4 py-3 text-slate-600">{{ $row['account_number'] ?: '—' }}</td>
                            <td class="px-4 py-3 text-right text-slate-700">{{ $fmt($row['opening']) }}</td>
                            <td class="px-4 py-3 text-right text-emerald-700 font-semibold">{{ $fmt($row['debit']) }}</td>
                            <td class="px-4 py-3 text-right text-rose-700 font-semibold">{{ $fmt($row['credit']) }}</td>
                            <td class="px-4 py-3 text-right font-bold text-slate-900">{{ $fmt($row['balance']) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-xs text-slate-500">
                                {{ __('balance_sheet.no_active_account_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>

                @if (!empty($accountRows) && count($accountRows))
                    <tfoot class="bg-slate-50">
                        <tr>
                            <th colspan="3" class="px-4 py-3 text-left text-xs font-bold text-slate-900">
                                {{ __('balance_sheet.total') }}
                            </th>
                            <th class="px-4 py-3 text-right text-xs font-bold text-slate-900">
                                {{ $fmt($totalOpeningBalances ?? 0) }}
                            </th>
                            <th class="px-4 py-3 text-right text-xs font-bold text-emerald-700">
                                {{ $fmt(collect($accountRows)->sum('debit')) }}
                            </th>
                            <th class="px-4 py-3 text-right text-xs font-bold text-rose-700">
                                {{ $fmt(collect($accountRows)->sum('credit')) }}
                            </th>
                            <th class="px-4 py-3 text-right text-xs font-bold text-slate-900">
                                {{ $fmt($totalAccountBalances ?? 0) }}
                            </th>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </div>

    {{-- Helpers --}}
    <div class="grid gap-4 lg:grid-cols-2">
        <div class="border border-slate-200 bg-white shadow-sm p-4">
            <h3 class="text-sm font-bold text-slate-900">{{ __('balance_sheet.profit_retained_earnings_summary') }}</h3>
            <div class="mt-3 space-y-2">
                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.total_sales') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($totalSales ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.purchase_cost') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($totalPurchaseCost ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.general_expenses') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($totalExpenses ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.payroll_expense') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($payrollExpense ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.bonus_expense') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($bonusExpense ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-amber-200 bg-amber-50 px-3 py-2">
                    <span class="text-xs text-amber-700">{{ __('balance_sheet.loan_interest_expense') }}</span>
                    <span class="text-xs font-bold text-amber-900">{{ $fmt($loanInterestExpense ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-amber-200 bg-amber-50 px-3 py-2">
                    <span class="text-xs text-amber-700">{{ __('balance_sheet.loan_fee_expense') }}</span>
                    <span class="text-xs font-bold text-amber-900">{{ $fmt($loanFeeExpense ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-orange-200 bg-orange-50 px-3 py-2">
                    <span class="text-xs font-bold text-orange-700">{{ __('balance_sheet.loan_finance_cost') }}</span>
                    <span class="text-xs font-bold text-orange-900">{{ $fmt($loanFinanceCost ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-sky-200 bg-sky-50 px-3 py-2">
                    <span class="text-xs font-bold text-sky-700">{{ __('balance_sheet.retained_earnings') }}</span>
                    <span class="text-xs font-bold text-sky-900">{{ $fmt($retainedEarnings ?? 0) }}</span>
                </div>
            </div>
        </div>

        <div class="border border-slate-200 bg-white shadow-sm p-4">
            <h3 class="text-sm font-bold text-slate-900">{{ __('balance_sheet.owner_capital_summary') }}</h3>
            <div class="mt-3 space-y-2">
                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.owner_investment') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($ownerInvestment ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.owner_drawings') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($ownerDrawings ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.recorded_capital') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($ownerCapitalRecorded ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2">
                    <span class="text-xs text-slate-600">{{ __('balance_sheet.retained_earnings') }}</span>
                    <span class="text-xs font-bold text-slate-900">{{ $fmt($retainedEarnings ?? 0) }}</span>
                </div>

                <div class="flex items-center justify-between border border-emerald-200 bg-emerald-50 px-3 py-2">
                    <span class="text-xs font-bold text-emerald-700">{{ __('balance_sheet.total_equity') }}</span>
                    <span class="text-xs font-bold text-emerald-900">{{ $fmt($equity ?? 0) }}</span>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection