{{-- Support Data --}}
@php
    $totals_section = [
        [
            'title' => __('reports')['hotel']['common']['lodging'],
            'icon' => 'fas fa-bed',
            'title_class' => 'text-primary', 'value_class' => 'text-primary',
            'id' => 'lodging_total',
            'display' => true
        ],
        [
            'title' => __('reports')['hotel']['common']['consumption'],
            'icon' => 'fas fa-utensils',
            'title_class' => 'text-success', 'value_class' => 'text-secondary',
            'id' => 'consumption_total',
            'border' => true, 'display' => true
        ],
        [
            'title' => __('reports')['hotel']['common']['extras'],
            'icon' => 'fas fa-suitcase',
            'title_class' => 'text-orange', 'value_class' => 'text-secondary',
            'id' => 'extras_total',
            'border' => $show_general_total, 'display' => true
        ],
        [
            'title' => 'Total',
            'icon' => 'fas fa-calculator',
            'title_class' => 'text-purple', 'value_class' => 'text-purple-dark',
            'id' => 'final_total', 'display' => $show_general_total
        ],
    ];

    $breakdown_sections = [
        [ 'id' => 'lodging', 'title' => __('reports')['hotel']['common']['lodging'], 'color' => 'primary', ],
        [ 'id' => 'consumption', 'title' => __('reports')['hotel']['common']['consumption'], 'color' => 'success', ],
        [ 'id' => 'extra', 'title' => __('reports')['hotel']['common']['extras'], 'color' => 'orange', ]
    ];
@endphp

{{-- Summary Table --}}
<section id="tax-summary-card" class="my-3 g-2">
    <div class="mx-auto" style="width: {{ $card_width }}% !important">
        <div class="card-sum">

            {{-- Header --}}
            <h6 class="mb-3 text-left harsi-color fw-bold text-uppercase">
                <i class="mr-2 fas fa-chart-pie"></i>
                {{ $title_card }}
            </h6>

            {{-- Incomes per Sections --}}
            <div class="shadow-sm card rounded-soft">
                <div class="d-flex align-items-center justify-content-between">
                    @foreach ($totals_section as $item)
                        @if ($item['display'])
                            <div class="py-3 text-center w-100 {{ $item['border'] ?? false ? 'border-right border-left' : '' }}">
                                <h6 class="mb-2 text-uppercase fw-bold {{ $item['title_class'] }}">
                                    <i class="mr-2 {{ $item['icon'] }}"></i>
                                    {{ $item['title'] }}
                                </h6>

                                <h6 id="{{ $item['id'] }}"
                                    class="mb-0 text-uppercase fw-bold {{ $item['value_class'] }}">
                                    0.00
                                </h6>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            {{-- Breakdown --}}
            <div class="px-3 py-2 mt-3" id="main_total_row" style="display: none">

                {{-- Header --}}
                <div>
                    {{-- Title --}}
                    <h6 class="mb-0 text-left text-dark fw-bold text-uppercase">
                        {{ __('reports')['shared']['tax_breakdown_form']['result_title'] }}
                    </h6>

                    {{-- Description --}}
                    <small class="text-secondary small fw-semi-bold">
                        {{ __('reports')['shared']['tax_breakdown_form']['result_description'] }}
                    </small>
                </div>

                {{-- Tax Breakdown --}}
                <div class="px-3 mt-2 mb-3 d-flex justify-content-center align-items-center g-1">
                    @foreach($breakdown_sections as $section)
                        <div id="{{ $section['id'] }}_column" class="w-100" style="max-width: 40%">
                            <div class="px-3 py-2 shadow-sm card special-border-top-{{ $section['color'] }} rounded-soft">

                                {{-- Title --}}
                                <div class="mb-1 d-flex justify-content-between align-items-center">
                                    <p class="mb-0 text-{{ $section['color'] }} fw-bold text-uppercase">
                                        {{ $section['title'] }}
                                    </p>
                                </div>

                                {{-- Base computed --}}
                                <div class="py-1 d-flex justify-content-between border-bottom">
                                    <small>
                                        {{ __('reports')['shared']['tax_breakdown_form']['base_computed'] }}
                                    </small>

                                    <small id="{{ $section['id'] }}_base" class="fw-semi-bold"></small>
                                </div>

                                {{-- Tax Breakdown --}}
                                <div id="{{ $section['id'] }}_breakdown"></div>

                                {{-- Total Base --}}
                                <div class="pt-2 d-flex justify-content-between">
                                    <small class="fw-semi-bold text-{{ $section['color'] }}">Total</small>
                                    <small id="{{ $section['id'] }}_tax_total"
                                        class="text-{{ $section['color'] }} fw-bold"></small>
                                </div>

                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Warning --}}
                <p class="mb-0"><small class="text-dark small">
                    <i class="mr-1 opacity-80 fas fa-circle-exclamation harsi-color"></i>
                    {{ __('reports')['shared']['tax_breakdown_form']['warning_application'] }}
                </small></p>

            </div>

        </div>
    </div>
</section>

{{-- Scripts --}}
<script>
    function renderSection(section_name, section_data) {
        const has_breakdown = section_data.breakdown.length > 0;

        $(`#${section_name}_column`).toggle(has_breakdown);
        $(`#${section_name}_base`).text( formatCurrency(section_data.subtotal, { decimals: 4 }) );
        $(`#${section_name}_tax_total`).text( formatCurrency(section_data.total, { decimals: 4 }) );

        const breakdownHtml = section_data.breakdown.map(tax => {
            const sign = tax.type === 'transfer' ? '+' : '-';

            return `
                <div class="py-1 d-flex justify-content-between border-bottom">
                    <small class="text-muted">
                        ${tax.name} (${sign}${tax.rate}%)
                    </small>

                    <small class="text-muted">
                        ${sign} ${formatCurrency(tax.amount, { decimals: 4 })}
                    </small>
                </div>
            `;
        }).join('');

        $(`#${section_name}_breakdown`).html(breakdownHtml);
    }
</script>