@extends('dashboard.layouts.app')

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

    <div class="container-fluid app-bg cost-center-result-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title title="Cost Center Result"
                    description="Revenue, direct cost, and result by cost center with collapsible details.">
                </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('cost_center_result.index')"
                                searchName="search"
                                searchPlaceholder="search cost center, account, entry"
                                formId="cost-center-result-table-controls"
                                :clearUrl="route('cost_center_result.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="result-table-wrap">
                        <x-table :headers="[
                            'Cost Center',
                            'Revenue',
                            'Direct Cost',
                            'Result'
                        ]">
                            @forelse($summaryRows as $rowCostCenterId => $row)
                                @php
                                    $costCenterId = $row['cost_center_id'] ?? $rowCostCenterId;
                                    $details = $detailsByCostCenter->get($costCenterId, ['accounts' => collect(), 'movements' => collect()]);
                                    $accounts = collect($details['accounts'] ?? []);
                                    $movements = collect($details['movements'] ?? []);
                                @endphp

                                <tr class="result-summary-row {{ !empty($row['has_children']) ? 'result-summary-row--parent' : '' }}" data-cost-center-id="{{ $costCenterId }}">
                                    <td>
                                        <div class="result-cost-center-cell" style="--cost-center-level: {{ (int) ($row['level'] ?? 0) }};">
                                            <button type="button" class="result-toggle" data-target-id="{{ $costCenterId }}" aria-expanded="false" title="Show details">
                                                <iconify-icon icon="ri:arrow-right-s-line"></iconify-icon>
                                            </button>
                                            <span class="result-cost-center-tree-marker {{ !empty($row['has_children']) ? 'result-cost-center-tree-marker--parent' : '' }}">
                                                <iconify-icon icon="{{ !empty($row['has_children']) ? 'ri:folder-3-line' : 'ri:file-list-3-line' }}"></iconify-icon>
                                            </span>
                                            <div class="result-name-cell">
                                                <strong>{{ $row['cost_center_title'] }}</strong>
                                                <span>{{ $row['cost_center_code'] ?: '-' }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if($row['revenue'] != 0)
                                            <span class="result-money result-money--revenue">{{ number_format($row['revenue'], 2) }}</span>
                                        @else
                                            <span class="result-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($row['direct_cost'] != 0)
                                            <span class="result-money result-money--expense">{{ number_format($row['direct_cost'], 2) }}</span>
                                        @else
                                            <span class="result-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="result-money {{ $row['result'] >= 0 ? 'result-money--revenue' : 'result-money--expense' }}">
                                            {{ number_format($row['result'], 2) }}
                                        </span>
                                    </td>
                                </tr>

                                <tr class="result-detail-row d-none" data-detail-for="{{ $costCenterId }}">
                                    <td colspan="4">
                                        <div class="result-detail-panel">
                                            <div class="result-detail-section">
                                                <div class="result-detail-title">
                                                    Accounts inside cost center ({{ $accounts->count() }})
                                                </div>

                                                <div class="result-inner-table-wrap">
                                                    <table class="result-inner-table">
                                                        <thead>
                                                            <tr>
                                                                <th>Account</th>
                                                                <th>Parent</th>
                                                                <th>Section</th>
                                                                <th>Amount</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse($accounts as $account)
                                                                <tr>
                                                                    <td>
                                                                        <div class="result-account-tree-cell" style="--account-level: {{ (int) ($account['level'] ?? 0) }};">
                                                                            <span class="result-account-tree-marker {{ !empty($account['has_children']) ? 'result-account-tree-marker--parent' : '' }}">
                                                                                <iconify-icon icon="{{ !empty($account['has_children']) ? 'ri:folder-3-line' : 'ri:file-list-3-line' }}"></iconify-icon>
                                                                            </span>
                                                                            <div class="result-name-cell">
                                                                                <strong>{{ $account['account_title'] }}</strong>
                                                                                <span>{{ $account['account_code'] ?: '-' }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ $account['classification'] }}</span></td>
                                                                    <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ $account['section'] }}</span></td>
                                                                    <td class="text-center">
                                                                        <span class="result-money {{ $account['section'] === 'Revenue' ? 'result-money--revenue' : 'result-money--expense' }}">{{ number_format($account['amount'], 2) }}</span>
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="4" class="text-center result-muted">No accounts found.</td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                            <div class="result-detail-section">
                                                <div class="result-detail-title">
                                                    Movements ({{ $movements->count() }})
                                                </div>

                                                <div class="result-inner-table-wrap">
                                                    <table class="result-inner-table">
                                                        <thead>
                                                            <tr>
                                                                <th>Date</th>
                                                                <th>Entry</th>
                                                                <th>Account</th>
                                                                <th>Section</th>
                                                                <th>Description</th>
                                                                <th>Amount</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse($movements as $movement)
                                                                <tr>
                                                                    <td class="text-center">{{ optional($movement['date'])->format('Y-m-d') ?: '-' }}</td>
                                                                    <td class="text-center">
                                                                        <a class="result-entry-link" href="{{ route('journal_entries.review', $movement['journal_entry_id']) }}">
                                                                            #{{ $movement['journal_entry_id'] }}
                                                                        </a>
                                                                    </td>
                                                                    <td>
                                                                        <div class="result-name-cell">
                                                                            <strong>{{ $movement['account_title'] }}</strong>
                                                                            <span>{{ $movement['account_code'] ?: '-' }}</span>
                                                                        </div>
                                                                    </td>
                                                                    <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ $movement['section'] }}</span></td>
                                                                    <td><div class="result-description" title="{{ $movement['description'] }}">{{ $movement['description'] }}</div></td>
                                                                    <td class="text-center">
                                                                        <span class="result-money {{ $movement['section'] === 'Revenue' ? 'result-money--revenue' : 'result-money--expense' }}">{{ number_format($movement['amount'], 2) }}</span>
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="6" class="text-center result-muted">No movements found.</td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4">
                                        <div class="table-empty-state">
                                            <iconify-icon icon="ri:pie-chart-line"></iconify-icon>
                                            <h6>No cost center results found.</h6>
                                            <p>Try changing filters or date range.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse

                            {{-- <tr class="result-total-row">
                                <td>Total</td>
                                <td class="text-center result-money result-money--revenue">{{ number_format($summaryTotals['revenue'], 2) }}</td>
                                <td class="text-center result-money result-money--expense">{{ number_format($summaryTotals['direct_cost'], 2) }}</td>
                                <td class="text-center result-money {{ $summaryTotals['result'] >= 0 ? 'result-money--revenue' : 'result-money--expense' }}">
                                    {{ number_format($summaryTotals['result'], 2) }}
                                </td>
                            </tr> --}}
                        </x-table>
                    </div>

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

@push('styles')
    <style>
        .cost-center-result-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;
        }

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

        .result-table-wrap,
        .result-inner-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .cost-center-result-page table {
            min-width: 1080px;
            vertical-align: middle;
        }

        .cost-center-result-page table thead th,
        .result-inner-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;
        }

        .cost-center-result-page table tbody td,
        .result-inner-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .result-summary-row:hover {
            background: #f8fafc;
        }

        .result-summary-row--parent td {
            background: #fbfdff;
        }

        .result-cost-center-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            padding-left: calc(var(--cost-center-level, 0) * 1.45rem);
            min-width: 260px;
        }

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

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

        .result-toggle iconify-icon {
            font-size: 1.05rem;
            transition: transform 0.16s ease;
        }

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

        .result-cost-center-tree-marker {
            width: 26px;
            height: 26px;
            flex: 0 0 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e5e7eb;
            border-radius: 7px;
            background: #fff;
            color: #64748b;
        }

        .result-cost-center-tree-marker--parent {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }

        .result-cost-center-tree-marker iconify-icon {
            font-size: 0.98rem;
        }

        .result-name-cell {
            display: inline-flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 0;
        }

        .result-name-cell strong {
            color: #111827;
            font-weight: 900;
            max-width: 360px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .result-name-cell span {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 750;
        }

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

        .result-account-tree-marker {
            width: 26px;
            height: 26px;
            flex: 0 0 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e5e7eb;
            border-radius: 7px;
            background: #fff;
            color: #64748b;
        }

        .result-account-tree-marker--parent {
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: #047857;
        }

        .result-account-tree-marker iconify-icon {
            font-size: 0.98rem;
        }

        .result-money {
            font-weight: 900;
            font-variant-numeric: tabular-nums;
        }

        .result-money--revenue {
            color: #047857;
        }

        .result-money--expense {
            color: #b91c1c;
        }

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

        .result-detail-row > td {
            padding: 0 !important;
            background: #f8fafc;
        }

        .result-detail-panel {
            padding: 1rem 1.25rem 1.25rem;
            display: grid;
            gap: 1rem;
        }

        .result-detail-section {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
        }

        .result-detail-title {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid #eef2f7;
            color: #111827;
            font-size: 0.9rem;
            font-weight: 900;
        }

        .result-inner-table {
            width: 100%;
            min-width: 980px;
            margin: 0;
        }

        .result-inner-table th,
        .result-inner-table td {
            padding: 0.75rem 0.9rem;
        }

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

        .result-balance-chip,
        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        .result-entry-link {
            background: #eff6ff;
            color: #1d4ed8;
            text-decoration: none;
            border: 1px solid #dbeafe;
        }

        .result-entry-link:hover {
            background: #2563eb;
            color: #fff;
        }

        .result-description {
            max-width: 460px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

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

        .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;
        }

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

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

            .cost-center-result-page .table-controls-form {
                width: 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.result-toggle').forEach(button => {
                button.addEventListener('click', function () {
                    const targetId = this.dataset.targetId;
                    const row = document.querySelector(`.result-detail-row[data-detail-for="${targetId}"]`);
                    const expanded = this.getAttribute('aria-expanded') === 'true';

                    if (!row) return;

                    row.classList.toggle('d-none', expanded);
                    this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
                    this.setAttribute('title', expanded ? 'Show details' : 'Hide details');
                });
            });
        });
    </script>
@endpush