@php
    $shareholder = $payment->shareholder;
@endphp

<div class="card card-flush flex-row-fluid overflow-hidden mb-5 mb-xl-8">
    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Ayant-droit : {{ $shareholder->title }}</h2>
        </div>
    </div>
    <div class="card-body pt-0">
        <div class="table-responsive">
            <table class="table align-middle table-row-dashed fs-6 mb-0">
                <thead>
                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-175px">Intitulé</th>
                        <th class="w-125px text-end">Revenue</th>
                        <th class="w-125px text-end">Part %</th>
                        <th class="w-125px">Total</th>
                    </tr>
                </thead>
                <tbody class="fw-semibold text-gray-600">
                    @foreach ($payment->unsavedDistributions as $distKey => $distribution)
                        <tr>
                            <td>
                                <input type="hidden"
                                    name="payments[{{ $key }}][distributions][{{ $distKey }}][id]"
                                    value="{{ $distribution->distribution_id }}" readonly>
                                <input type="hidden"
                                    name="payments[{{ $key }}][distributions][{{ $distKey }}][title]"
                                    value="{{ $distribution->title }}" readonly>
                                <input type="hidden"
                                    name="payments[{{ $key }}][distributions][{{ $distKey }}][revenue_total]"
                                    value="{{ $distribution->revenue_total }}" readonly>
                                <input type="hidden"
                                    name="payments[{{ $key }}][distributions][{{ $distKey }}][share]"
                                    value=" {{ $distribution->share }}" readonly>
                                <div class="d-flex align-items-center">
                                    <div class="ms-5">
                                        <span class="fw-bold text-gray-600 text-hover-primary">
                                            {{ $distribution->title }}
                                        </span>
                                    </div>
                                </div>
                            </td>
                            <td class="text-end">
                                {{ $distribution->revenue_total }}
                            </td>
                            <td class="text-end">
                                {{ $distribution->share }}
                            </td>
                            <td class="text-end">
                                <div class="input-group input-group-sm">
                                    <input type="text"
                                        name="payments[{{ $key }}][distributions][{{ $distKey }}][revenue_share]"
                                        step=".01"
                                        class="form-control form-control-sm form-control-solid text-end
                                        @error('payments.' . $key . '.distributions.' . $distKey . '.revenue_share') is-invalid @enderror"
                                        value="{{ old('payments.' . $key . '.distributions.' . $distKey . '.revenue_share', $distribution->revenue_share) }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text">€</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tbody class="fw-semibold text-gray-600" data-init-function="repeatableTableSectionElement"
                    data-section-key="{{ $key }}">
                    @foreach (old('payments.' . $key . '.attributablecosts', []) as $attrKey => $item)
                        <tr>
                            <td>
                                <div class="input-group input-group-sm">
                                    <div class="input-group-prepend">
                                        <button type="button" class="ms-2 btn btn-sm btn-light-danger"
                                            data-rtse-action="remove-element">-</button>
                                    </div>
                                    <input type="text"
                                        name="payments[{{ $key }}][attributablecosts][{{ $attrKey }}][title]"
                                        placeholder="Intitulé du frais imputable"
                                        class="form-control form-control-sm form-control-solid ms-2 mw-450px
                                        @error('payments.' . $key . '.attributablecosts.' . $attrKey . '.title') is-invalid @enderror"
                                        value="{{ old('payments.' . $key . '.attributablecosts.' . $attrKey . '.title', '') }}" />
                                </div>
                            </td>
                            <td colspan="2">
                            </td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input type="text"
                                        name="payments[{{ $key }}][attributablecosts][{{ $attrKey }}][amount]"
                                        step=".01"
                                        class="form-control form-control-sm form-control-solid text-end
                                        @error('payments.' . $key . '.attributablecosts.' . $attrKey . '.amount') is-invalid @enderror"
                                        value="{{ old('payments.' . $key . '.attributablecosts.' . $attrKey . '.amount', '') }}" />
                                    <div class="input-group-append">
                                        <span class="input-group-text">€</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    <tr>
                        <td colspan="4">
                            <button type="button" class="ms-2 btn btn-sm btn-light-success"
                                data-rtse-action="add-element">+
                                Ajouter un frais imputable</button>
                        </td>
                    </tr>
                </tbody>
                <tbody class="fw-semibold text-gray-600">
                </tbody>
                <tfooter>
                    @include('admin.crud.accounting.payment.parts.create.row-input', [
                        'label' => 'Montant Brut',
                        'field_base_name' => 'montant_brut',
                        'key' => $key,
                        'value' => old('payments.' . $key . '.montant_brut', $payment->montant_brut),
                    ])

                    <tr>
                        <td colspan="2" class="text-end">
                            <label for="payments[{{ $key }}][montant_base_csg]">Montant Base CSG-CRDS</label>
                        </td>
                        <td class="text-end">
                            <div class="input-group input-group-sm">
                                <input type="text" name="payments[{{ $key }}][taux_base_csg]"
                                    step=".01"
                                    class="form-control form-control-sm form-control-solid text-end @error('payments.' . $key . '.taux_base_csg') is-invalid @enderror"
                                    value="{{ old('payments.' . $key . '.taux_base_csg', $payment->taux_base_csg) }}">
                                <div class="input-group-append">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                        </td>
                        <td class="text-end">
                            <div class="input-group input-group-sm">
                                <input type="text" name="payments[{{ $key }}][montant_base_csg]"
                                    step=".01"
                                    class="form-control form-control-sm form-control-solid text-end @error('payments.' . $key . '.montant_base_csg') is-invalid @enderror"
                                    value="{{ old('payments.' . $key . '.montant_base_csg', $payment->montant_base_csg) }}">
                                <div class="input-group-append">
                                    <span class="input-group-text">€</span>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3" class="text-end">Cotisations
                        </td>
                        <td>
                        </td>
                    </tr>

                    @include('admin.crud.accounting.payment.parts.create.row-input-with-taux', [
                        'label' => 'Cotisation vieillesse plafonnée',
                        'field_base_name' => 'cotisation_veillesse',
                        'key' => $key,
                        'value' => old('cotisation_veillesse', $payment->cotisation_veillesse),
                        'taux_value' => old('taux_cotisation_veillesse', $payment->taux_cotisation_veillesse),
                    ])

                    @include('admin.crud.accounting.payment.parts.create.row-input-with-taux', [
                        'label' => 'CSG',
                        'field_base_name' => 'csg_totale',
                        'key' => $key,
                        'value' => old('csg_totale', $payment->csg_totale),
                        'taux_value' => old('taux_csg_totale', $payment->taux_csg_totale),
                    ])
                    @include('admin.crud.accounting.payment.parts.create.row-input-with-taux', [
                        'label' => 'dont CSG imposable',
                        'field_base_name' => 'csg_imposable',
                        'key' => $key,
                        'value' => old('csg_imposable', $payment->csg_imposable),
                        'taux_value' => old('taux_csg_imposable', $payment->taux_csg_imposable),
                    ])
                    @include('admin.crud.accounting.payment.parts.create.row-input-with-taux', [
                        'label' => 'CRDS',
                        'field_base_name' => 'crds',
                        'key' => $key,
                        'value' => old('crds', $payment->crds),
                        'taux_value' => old('taux_crds', $payment->taux_crds),
                    ])
                    @include('admin.crud.accounting.payment.parts.create.row-input-with-taux', [
                        'label' => 'Cotisation formation professionelle',
                        'field_base_name' => 'cotisation_formation',
                        'key' => $key,
                        'value' => old('cotisation_formation', $payment->cotisation_formation),
                        'taux_value' => old('taux_cotisation_formation', $payment->taux_cotisation_formation),
                    ])

                    @include('admin.crud.accounting.payment.parts.create.row-input', [
                        'label' => 'Total cotisations',
                        'field_base_name' => 'total_cotisations',
                        'key' => $key,
                        'value' => old('total_cotisations', $payment->total_cotisations),
                    ])

                    @include('admin.crud.accounting.payment.parts.create.row-input', [
                        'label' => 'Montant net',
                        'field_base_name' => 'montant_net_a_payer',
                        'key' => $key,
                        'value' => old('montant_net_a_payer', $payment->montant_net_a_payer),
                    ])

                    @include('admin.crud.accounting.payment.parts.create.row-input', [
                        'label' => 'Montant net imposable',
                        'field_base_name' => 'montant_net_imposable',
                        'key' => $key,
                        'value' => old('montant_net_imposable', $payment->montant_net_imposable),
                    ])

                    @include('admin.crud.accounting.payment.parts.create.row-input-with-taux', [
                        'label' => 'Contribution diffuseur',
                        'field_base_name' => 'contribution_diffuseur',
                        'key' => $key,
                        'value' => old('contribution_diffuseur', $payment->contribution_diffuseur),
                        'taux_value' => old('taux_contribution_diffuseur', $payment->taux_contribution_diffuseur),
                    ])

                </tfooter>
            </table>
        </div>
    </div>
</div>

@once
    <template id="attributable-cost-row">
        <tr>
            <td>
                <div class="input-group input-group-sm">
                    <div class="input-group-prepend">
                        <button type="button" class="ms-2 btn btn-sm btn-light-danger"
                            data-rtse-action="remove-element">-</button>
                    </div>
                    <input type="text" name="payments[#key#][attributablecosts][#curIndex#][title]"
                        placeholder="Intitulé du frais imputable"
                        class="form-control form-control-sm form-control-solid ms-2 mw-450px" />
                </div>
            </td>
            <td colspan="2">
            </td>
            <td>
                <div class="input-group input-group-sm">
                    <input type="text" name="payments[#key#][attributablecosts][#curIndex#][amount]" step=".01"
                        class="form-control form-control-sm form-control-solid text-end" value="">
                    <div class="input-group-append">
                        <span class="input-group-text">€</span>
                    </div>
                </div>
            </td>
        </tr>
    </template>
@endonce

@push('after_scripts')
    @loadOnce('initRepeatableTableSectionElement')
        <script>
            $(function() {
                function replacePlaceholders(node, newkey, newIndex) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        if (node.hasAttribute('name')) {
                            node.setAttribute('name', node.getAttribute('name').replace("#key#", newkey));
                            node.setAttribute('name', node.getAttribute('name').replace("#curIndex#", newIndex));
                        }
                    }
                    node.childNodes.forEach(childNode => replacePlaceholders(childNode, newkey, newIndex));
                }

                function initRepeatableTableSectionElement($tbody) {
                    const rowtemplate = document.querySelector("#attributable-cost-row");
                    var $addBtn = $tbody.find('button[data-rtse-action=add-element]');

                    $addBtn.click(function() {
                        var sectionkey = $tbody.data('section-key');
                        var newRow = rowtemplate.content.cloneNode(true);
                        var newIndex = $tbody.children('tr').length - 1;
                        replacePlaceholders(newRow, sectionkey, newIndex);
                        var lastRow = $tbody.children('tr').eq(-1);
                        lastRow.before(newRow);
                    });

                    $tbody.on('click', 'button[data-rtse-action=remove-element]', function() {
                        $(this).parents('tr').remove();
                    })
                }

                $('tbody[data-init-function=repeatableTableSectionElement]').each(function() {
                    initRepeatableTableSectionElement($(this));
                })
            });
        </script>
    @endLoadOnce
@endpush