@php
    // parents: Collection of parent cost centers
    // $account, $index, $type, $saved_centers must be passed from controller

    $savedByParent = collect();

    if (isset($saved_centers) && $saved_centers->count()) {
        $savedByParent = $saved_centers->groupBy(function ($r) {
            return optional($r->cost_center)->parent_center_id ?? 0;
        });
    }
@endphp

<style>
    /* ===== Cost Centers UI ===== */
    .cc-group {
        border: 1px solid #eef0f3;
        border-radius: 12px;
        padding: 12px 12px 6px;
        background: #fff;
        margin-bottom: 14px;
    }

    .cc-group-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 10px;
        color: #2b2f38;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cc-rows {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* “row” نفسه نخليه كرت ثابت */
    .cc-row {
        border: 1px solid #f0f2f5;
        border-radius: 12px;
        padding: 10px;
        background: #fafbfc;
    }

    /* بدل الاعتماد على row/col المتداخلة، نخليها Grid مرن */
    .cc-grid {
        display: grid;
        grid-template-columns: 3fr 2.5fr 1.5fr 2.5fr 110px;
        gap: 10px;
        align-items: end;
    }

    /* ريسبونسف */
    @media (max-width: 992px) {
        .cc-grid {
            grid-template-columns: 1fr 1fr;
        }

        .cc-actions {
            justify-content: flex-end;
        }
    }

    @media (max-width: 576px) {
        .cc-grid {
            grid-template-columns: 1fr;
        }

        .cc-actions {
            justify-content: flex-start;
        }
    }

    .cc-label {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #5b6472;
    }

    /* توحيد الارتفاع */
    .cc-input,
    .cc-select .select2-selection--single,
    .cc-select select.form-control {
        height: 42px !important;
        border-radius: 10px !important;
    }

    .cc-select .select2-selection--single {
        display: flex !important;
        align-items: center !important;
    }

    .cc-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    .cc-actions .btn {
        width: 44px;
        height: 42px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .cc-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cc-help {
        font-size: 11px;
        color: #8b93a3;
        margin-top: 4px;
    }
</style>

@foreach($parents as $parent)
    @php
        $parentId = $parent->id;
        $children = $parent->children_centers ?? collect();

        $rows = $savedByParent->get($parentId, collect());
        $hasSavedRows = $rows->count() > 0;
    @endphp

    <div class="cc-group cost-center-group account-{{ $account->id }}" data-group="{{ $parentId }}">
        <h3 class="cc-group-title">
            {{ $parent->{'center_name_' . trans('admin.lang')} }}
        </h3>

        <div class="cc-rows">

            {{-- ===== Saved rows ===== --}}
            @if($hasSavedRows)
                @foreach($rows as $rIndex => $r)
                    @php
                        $centerId = $r->center_id;
                        $perc     = $r->amount_perc;
                        $mVal     = $r->cost_type == 2 ? $r->amount : 0;
                        $dVal     = $r->cost_type == 1 ? $r->amount : 0;
                    @endphp

                    <div class="cc-row parent_row">
                        <div class="cc-grid">

                            {{-- Cost Center --}}
                            <div>
                                <div class="cc-label">@Lang('admin.cost_center') <span class="require">*</span></div>
                                <div class="cc-select">
                                    <select class="form-control cc_center select2"
                                            name="center_id[{{$index}}][{{$parentId}}][]">
                                        <option value="">@Lang('admin.select')</option>
                                        @foreach($children as $child)
                                            <option value="{{ $child->id }}"
                                                {{ (int)$child->id === (int)$centerId ? 'selected' : '' }}>
                                                — {{ $child->{'center_name_' . trans('admin.lang')} }}
                                                ({{ $child->center_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Account name --}}
                            <div>
                                <div class="cc-label">@Lang('admin.account_name')</div>
                                <input type="text"
                                       class="form-control cc-input"
                                       value="{{ $account->{'account_name_'.trans('admin.lang')} }}"
                                       readonly>
                            </div>

                            {{-- Percentage --}}
                            <div>
                                <div class="cc-label">@Lang('admin.percentage') <span class="require">*</span></div>
                                <input type="text"
                                       step="0.01" min="0" autocomplete="off"
                                       data-type="{{ $type }}"
                                       value="{{ $perc }}"
                                       class="form-control cc-input numeric-input camount"
                                       name="camount[{{$index}}][{{$parentId}}][]">
                                <div class="cc-help">@Lang('admin.percentage')</div>
                            </div>

                            {{-- Madeen/Daen --}}
                            <div>
                                <div class="cc-split">
                                    <div>
                                        <div class="cc-label">@Lang('admin.madeen') <span class="require">*</span></div>
                                        <input type="text"
                                               step="0.01" min="0" autocomplete="off"
                                               value="{{ $mVal }}"
                                               class="form-control cc-input numeric-input mamount"
                                               name="mamount[{{$index}}][{{$parentId}}][]">
                                    </div>
                                    <div>
                                        <div class="cc-label">@Lang('admin.daen') <span class="require">*</span></div>
                                        <input type="text"
                                               step="0.01" min="0" autocomplete="off"
                                               value="{{ $dVal }}"
                                               class="form-control cc-input numeric-input damount"
                                               name="damount[{{$index}}][{{$parentId}}][]">
                                    </div>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="cc-actions">
                                <button type="button" class="btn btn-primary"
                                        onclick="addCostCenterRow({{$index}}, {{$parentId}})">
                                    <i class="fa fa-plus"></i>
                                </button>

                                <button type="button" class="btn btn-danger"
                                        onclick="removeCostCenterRow(this)">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>

                        </div>
                    </div>
                @endforeach

            @else
                {{-- ===== Default row ===== --}}
                <div class="cc-row parent_row">
                    <div class="cc-grid">

                        <div>
                            <div class="cc-label">@Lang('admin.cost_center') <span class="require">*</span></div>
                            <div class="cc-select">
                                <select class="form-control cc_center select2"
                                        name="center_id[{{$index}}][{{$parentId}}][]">
                                    <option value="">@Lang('admin.select')</option>
                                    @foreach($children as $child)
                                        <option value="{{ $child->id }}">
                                            — {{ $child->{'center_name_' . trans('admin.lang')} }}
                                            ({{ $child->center_code }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div>
                            <div class="cc-label">@Lang('admin.account_name')</div>
                            <input type="text"
                                   class="form-control cc-input"
                                   value="{{ $account->{'account_name_'.trans('admin.lang')} }}"
                                   readonly>
                        </div>

                        <div>
                            <div class="cc-label">@Lang('admin.percentage') <span class="require">*</span></div>
                            <input type="text"
                                   step="0.01" min="0" autocomplete="off"
                                   data-type="{{ $type }}"
                                   value="100"
                                   class="form-control cc-input numeric-input camount"
                                   name="camount[{{$index}}][{{$parentId}}][]">
                        </div>

                        <div>
                            <div class="cc-split">
                                <div>
                                    <div class="cc-label">@Lang('admin.madeen') <span class="require">*</span></div>
                                    <input type="text"
                                           step="0.01" min="0" autocomplete="off"
                                           value="0"
                                           class="form-control cc-input numeric-input mamount"
                                           name="mamount[{{$index}}][{{$parentId}}][]">
                                </div>
                                <div>
                                    <div class="cc-label">@Lang('admin.daen') <span class="require">*</span></div>
                                    <input type="text"
                                           step="0.01" min="0" autocomplete="off"
                                           value="0"
                                           class="form-control cc-input numeric-input damount"
                                           name="damount[{{$index}}][{{$parentId}}][]">
                                </div>
                            </div>
                        </div>

                        <div class="cc-actions">
                            <button type="button" class="btn btn-primary"
                                    onclick="addCostCenterRow({{$index}}, {{$parentId}})">
                                <i class="fa fa-plus"></i>
                            </button>

                            <button type="button" class="btn btn-danger"
                                    onclick="removeCostCenterRow(this)">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>

                    </div>
                </div>
            @endif

        </div>
    </div>
@endforeach