@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg trial-balance-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title title="Trial Balance"
                    description="Review debit and credit balances from posted journal entries.">
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <x-table-controls
                                :action="route('trial_balance.index')"
                                searchName="search"
                                searchPlaceholder="search by code or account"
                                formId="trial-balance-table-controls"
                                :clearUrl="route('trial_balance.index')"
                            >
                                <input type="date" name="from_date"
                                    class="form-control form-control-sm w-auto table-control-auto-submit"
                                    value="{{ $filters['from_date'] }}" title="From Date">

                                <input type="date" name="to_date"
                                    class="form-control form-control-sm w-auto table-control-auto-submit"
                                    value="{{ $filters['to_date'] }}" title="To Date">

                                <select name="cost_center_id" class="form-select form-select-sm w-auto table-control-auto-submit">
                                    <option value="">All Cost Centers</option>
                                    @foreach($costCenters as $costCenter)
                                        <option value="{{ $costCenter->id }}" @selected((string) $filters['cost_center_id'] === (string) $costCenter->id)>
                                            {{ $costCenter->code ? $costCenter->code . ' - ' : '' }}{{ $costCenter->title }}
                                        </option>
                                    @endforeach
                                </select>

                                <select name="posted_only" class="form-select form-select-sm w-auto table-control-auto-submit">
                                    <option value="1" @selected($postedOnly)>Posted Only</option>
                                    <option value="0" @selected(!$postedOnly)>All Entries</option>
                                </select>
                            </x-table-controls>
                        </div>
                    </div>

                    <div class="trial-summary">
                        <div class="trial-summary__item">
                            <div class="trial-summary__label">Total Debit</div>
                            <div class="trial-summary__value trial-amount trial-amount--debit">
                                {{ number_format($totalDebit, 2) }}
                            </div>
                        </div>
                        <div class="trial-summary__item">
                            <div class="trial-summary__label">Total Credit</div>
                            <div class="trial-summary__value trial-amount trial-amount--credit">
                                {{ number_format($totalCredit, 2) }}
                            </div>
                        </div>
                        <div class="trial-summary__item">
                            <div class="trial-summary__label">Balance Check</div>
                            <div class="trial-summary__value {{ $isBalanced ? 'text-success' : 'text-danger' }}">
                                {{ $isBalanced ? 'Balanced' : 'Difference ' . number_format(abs($difference), 2) }}
                            </div>
                        </div>
                    </div>

                    <div class="trial-balance-table-wrap">
                        <x-table :headers="[
                            'Code',
                            'Account Name',
                            'Classification',
                            'Debit',
                            'Credit'
                        ]">
                            @forelse($rows as $row)
                                <tr class="trial-tree-row {{ ($row['level'] ?? 0) > 0 ? 'd-none' : '' }}"
                                    data-account-id="{{ $row['account_id'] }}"
                                    data-parent-id="{{ $row['parent_id'] }}"
                                    data-level="{{ $row['level'] ?? 0 }}">
                                    <td class="text-center">
                                        <span class="trial-code-chip">{{ $row['code'] }}</span>
                                    </td>
                                    <td>
                                        <div class="trial-account-cell" style="--tree-level: {{ $row['level'] ?? 0 }};" title="{{ $row['title'] }}">
                                            @if($row['has_children'] ?? false)
                                                <button type="button" class="trial-tree-toggle" data-target-id="{{ $row['account_id'] }}" aria-expanded="false" title="Show child accounts">
                                                    <iconify-icon icon="ri:arrow-right-s-line"></iconify-icon>
                                                </button>
                                            @else
                                                <span class="trial-tree-spacer"></span>
                                            @endif

                                            <span class="trial-account-name">{{ $row['title'] }}</span>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span class="ui-pill ui-pill--neutral">{{ $row['classification'] }}</span>
                                    </td>
                                    <td class="text-center">
                                        @if($row['debit'] > 0)
                                            <span class="trial-amount trial-amount--debit">{{ number_format($row['debit'], 2) }}</span>
                                        @else
                                            <span class="trial-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($row['credit'] > 0)
                                            <span class="trial-amount trial-amount--credit">{{ number_format($row['credit'], 2) }}</span>
                                        @else
                                            <span class="trial-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">
                                        <div class="table-empty-state">
                                            <iconify-icon icon="ri:scale-line"></iconify-icon>
                                            <h6>No accounts found.</h6>
                                            <p>Try changing filters or search keyword.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse

                            <tr class="trial-total-row">
                                <td colspan="3">Total</td>
                                <td class="text-center trial-amount trial-amount--debit">
                                    {{ number_format($totalDebit, 2) }}
                                </td>
                                <td class="text-center trial-amount trial-amount--credit">
                                    {{ number_format($totalCredit, 2) }}
                                </td>
                            </tr>
                        </x-table>
                    </div>

                    @if($rows->hasPages())
                        <div class="table-pagination">
                            {{ $rows->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .trial-balance-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .trial-balance-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .trial-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-bottom: 1px solid #eef2f7;
            background: #fbfdff;
        }

        .trial-summary__item {
            padding: 1rem 1.25rem;
            border-right: 1px solid #eef2f7;
        }

        .trial-summary__item:last-child {
            border-right: 0;
        }

        .trial-summary__label {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            margin-bottom: 0.25rem;
        }

        .trial-summary__value {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
        }

        .trial-balance-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .trial-balance-page table {
            min-width: 980px;
            vertical-align: middle;
        }

        .trial-balance-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .trial-balance-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .trial-balance-page table tbody tr {
            transition: 0.16s ease;
        }

        .trial-balance-page table tbody tr:hover {
            background: #f8fafc;
        }

        .trial-code-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 58px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .trial-account-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            min-width: 0;
            padding-left: calc(var(--tree-level, 0) * 1.35rem);
        }

        .trial-tree-toggle,
        .trial-tree-spacer {
            width: 26px;
            height: 26px;
            flex: 0 0 26px;
        }

        .trial-tree-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #dbe3ee;
            border-radius: 8px;
            background: #fff;
            color: #475569;
            transition: 0.16s ease;
        }

        .trial-tree-toggle:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #111827;
        }

        .trial-tree-toggle iconify-icon {
            font-size: 1rem;
            transition: transform 0.16s ease;
        }

        .trial-tree-toggle[aria-expanded="true"] iconify-icon {
            transform: rotate(90deg);
        }

        .trial-account-name {
            color: #111827;
            font-weight: 850;
            max-width: 360px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .trial-amount {
            font-weight: 900;
            font-variant-numeric: tabular-nums;
        }

        .trial-amount--debit {
            color: #047857;
        }

        .trial-amount--credit {
            color: #b91c1c;
        }

        .trial-muted {
            color: #94a3b8;
            font-weight: 800;
        }

        .trial-total-row td {
            border-top: 1px solid #111827 !important;
            background: #f8fafc;
            color: #111827 !important;
            font-weight: 900 !important;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state iconify-icon {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .trial-balance-page .table-controls-form {
            max-width: 100%;
            overflow-x: auto;
            padding-bottom: 0.1rem;
        }

        .trial-balance-page .table-controls-form::-webkit-scrollbar {
            height: 6px;
        }

        .trial-balance-page .table-controls-form::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        .trial-balance-page .table-controls-form::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        @media (max-width: 991.98px) {
            .trial-balance-page .ui-card__header > .d-flex {
                align-items: flex-start !important;
            }

            .trial-balance-page .table-controls-form {
                width: 100%;
            }
        }

        @media (max-width: 767.98px) {
            .trial-summary {
                grid-template-columns: 1fr;
            }

            .trial-summary__item {
                border-right: 0;
                border-bottom: 1px solid #eef2f7;
            }

            .trial-summary__item:last-child {
                border-bottom: 0;
            }
        }

        @media (max-width: 575.98px) {
            .trial-balance-page .ui-card__header,
            .table-pagination {
                padding: 1rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const rows = Array.from(document.querySelectorAll('.trial-tree-row'));
            const rowsByParent = rows.reduce((carry, row) => {
                const parentId = row.dataset.parentId || 'root';
                carry[parentId] = carry[parentId] || [];
                carry[parentId].push(row);
                return carry;
            }, {});

            const setToggleState = (accountId, expanded) => {
                const button = document.querySelector(`.trial-tree-toggle[data-target-id="${accountId}"]`);
                if (!button) return;

                button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
                button.setAttribute('title', expanded ? 'Hide child accounts' : 'Show child accounts');
            };

            const hideDescendants = (accountId) => {
                (rowsByParent[accountId] || []).forEach(childRow => {
                    childRow.classList.add('d-none');
                    setToggleState(childRow.dataset.accountId, false);
                    hideDescendants(childRow.dataset.accountId);
                });
            };

            document.querySelectorAll('.trial-tree-toggle').forEach(button => {
                button.addEventListener('click', function () {
                    const accountId = this.dataset.targetId;
                    const expanded = this.getAttribute('aria-expanded') === 'true';
                    const childRows = rowsByParent[accountId] || [];

                    if (expanded) {
                        hideDescendants(accountId);
                        setToggleState(accountId, false);
                        return;
                    }

                    childRows.forEach(row => row.classList.remove('d-none'));
                    setToggleState(accountId, true);
                });
            });
        });
    </script>
@endpush