{{-- Partial: Laba / Rugi Tab (Template-Driven) --}}
<div class="row px-4 py-3">
    <div class="col-lg-12">
        {{-- Filter Section --}}
        <div class="d-flex align-items-center gap-2 mb-4" style="flex-wrap: nowrap;">
            <select id="lr-template-filter" class="form-control" style="flex: 1; min-width: 0;">
                <option value="">-- Pilih Template --</option>
                @foreach ($lr_templates ?? [] as $tpl)
                    <option value="{{ $tpl->id_template_laporan }}"
                        {{ ($selected_template ?? '') == $tpl->id_template_laporan ? 'selected' : '' }}>
                        {{ $tpl->nama }}
                    </option>
                @endforeach
            </select>

            <span class="text-sm font-weight-bold text-secondary" style="white-space: nowrap;">Dari:</span>
            <input type="month" id="lr-start-period" class="form-control" value="{{ $lr_start_period ?? '' }}"
                style="flex: 1; min-width: 0;" required placeholder="Periode Awal" title="Periode Awal">

            <span class="text-sm font-weight-bold text-secondary" style="white-space: nowrap;">Sampai:</span>
            <input type="month" id="lr-end-period" class="form-control" value="{{ $lr_end_period ?? '' }}"
                style="flex: 1; min-width: 0;" placeholder="Periode Akhir" title="Periode Akhir">
            <select id="lr-kurs-filter" class="form-control" style="flex: 1; min-width: 0;">
                <option value="">-- Pilih Kurs --</option>
                @foreach ($kurs_options ?? [] as $k)
                    <option value="{{ $k->kode }}" {{ ($selected_kurs ?? '') == $k->kode ? 'selected' : '' }}>
                        {{ $k->kode }} - {{ $k->nama }}
                    </option>
                @endforeach
            </select>
            <button class="btn btn-primary mb-0" id="btn-execute-lr" style="white-space: nowrap;">
                <i class="fas fa-play me-1"></i>Execute
            </button>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
            <div>
                <h4 class="mb-0 text-dark font-weight-bold">Laporan Laba Rugi</h4>
                @if (!empty($selected_kurs) && $selected_kurs !== 'IDR')
                    <p class="text-xs mb-0 text-secondary mt-1">
                        Kurs Konversi: <span class="font-weight-bold text-dark">1 {{ $selected_kurs }} =
                            {{ number_format($kurs_rate ?? 1, 2, ',', '.') }} IDR</span>
                    </p>
                @endif
            </div>
            <div class="text-end">
                <h6 class="mb-0 text-dark font-weight-bold">
                    {{ session('nama_perusahaan', 'PT MULTI SPUNINDO JAYA Tbk') }}</h6>
                <p class="text-xs mb-0 text-secondary">Untuk Periode Yang Berakhir Pada <br /> <span
                        class="font-weight-bold">{{ $curr_periode_name ?? '...' }}</span>
                    @if (!empty($prev_periode_name) && $prev_periode_name !== '-')
                        dan
                        <span class="font-weight-bold">{{ $prev_periode_name }}</span>
                    @endif
                </p>
            </div>
        </div>

        <style>
            /* Month input placeholder styling when empty */
            input[type="month"] {
                position: relative;
            }

            input[type="month"]::before {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                content: attr(placeholder);
                color: #adb5bd;
                background-color: #ffffff;
                padding-right: 15px;
                pointer-events: none;
                z-index: 5;
            }

            input[type="month"]:focus::before,
            input[type="month"].has-value::before {
                display: none !important;
            }

            #table_laba_rugi_mockup tbody tr {
                background-color: #ffffff;
            }

            #table_laba_rugi_mockup tbody tr:hover {
                background-color: #f8f9fa !important;
            }

            .neraca-toggle-row:hover {
                background-color: #f2f4f4 !important;
                cursor: pointer;
            }

            /* Sticky columns for horizontal scrolling */
            #table_laba_rugi_mockup th:first-child {
                position: sticky;
                left: 0;
                background-color: #b0e9eb;
                /* matching header background */
                z-index: 12;
                width: 90px;
                min-width: 90px;
                max-width: 90px;
            }

            #table_laba_rugi_mockup td:first-child {
                position: sticky;
                left: 0;
                z-index: 2;
                background-color: #ffffff;
                width: 90px;
                min-width: 90px;
                max-width: 90px;
            }

            #table_laba_rugi_mockup th:nth-child(2) {
                position: sticky;
                left: 90px;
                background-color: #b0e9eb;
                /* matching header background */
                z-index: 12;
                border-right: 2px solid #a7d6d6ff !important;
            }

            #table_laba_rugi_mockup td:nth-child(2) {
                position: sticky;
                left: 90px;
                z-index: 2;
                background-color: #ffffff;
                border-right: 2px solid #a7d6d6ff !important;
            }

            #table_laba_rugi_mockup th:last-child {
                position: sticky;
                right: 0;
                background-color: #9ee1e3;
                /* matching header background */
                z-index: 12;
                border-left: 2px solid #a7d6d6ff !important;
            }

            #table_laba_rugi_mockup td:last-child {
                position: sticky;
                right: 0;
                z-index: 2;
                background-color: #ffffff;
                border-left: 2px solid #a7d6d6ff !important;
            }

            /* Hover background for sticky cells to keep background consistent */
            #table_laba_rugi_mockup tbody tr:hover td:first-child,
            #table_laba_rugi_mockup tbody tr:hover td:nth-child(2),
            #table_laba_rugi_mockup tbody tr:hover td:last-child {
                background-color: #f8f9fa;
            }

            #table_laba_rugi_mockup tbody tr.neraca-toggle-row:hover td:first-child,
            #table_laba_rugi_mockup tbody tr.neraca-toggle-row:hover td:nth-child(2),
            #table_laba_rugi_mockup tbody tr.neraca-toggle-row:hover td:last-child {
                background-color: #f2f4f4;
            }
        </style>

        <div
            style="overflow-x: auto; width: 100%; border: 1px solid #a7d6d6ff; border-radius: 8px; max-height: 600px; overflow-y: auto;">
            <table class="table table-borderless table-hover align-items-center mb-0" id="table_laba_rugi_mockup"
                style="border-collapse: collapse; font-size: 13px; min-width: 800px; width: 100%;">
                <thead style="position: sticky; top: 0; z-index: 10;">
                    <tr style="background-color: #b0e9eb;">
                        @if (!empty($is_yearly))
                            <th class="text-uppercase text-dark font-weight-bolder"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; width: 90px; min-width: 90px; max-width: 90px; text-align: left !important;">
                                No. COA</th>
                            <th class="text-uppercase text-dark font-weight-bolder"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; min-width: 250px; text-align: left !important;">
                                Keterangan / Description</th>
                            @foreach ($months as $m)
                                <th class="text-uppercase text-dark font-weight-bolder text-end"
                                    style="border: 1px solid #a7d6d6ff; padding: 10px; min-width: 100px;">
                                    {{ \Carbon\Carbon::createFromFormat('Y-m-d', $m . '-01')->translatedFormat('M y') }}
                                </th>
                            @endforeach
                            <th class="text-uppercase text-dark font-weight-bolder text-end"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; min-width: 120px; background-color: #9ee1e3;">
                                Total {{ $selected_periode }}</th>
                        @else
                            <th class="text-uppercase text-dark font-weight-bolder"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; width: 90px; min-width: 90px; max-width: 90px; text-align: left !important;">
                                No. COA</th>
                            <th class="text-uppercase text-dark font-weight-bolder"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; width: calc(60% - 90px); text-align: left !important;">
                                Keterangan / Description</th>
                            <th class="text-uppercase text-dark font-weight-bolder text-end"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; width: 20%;">
                                {{ $curr_periode_name ?? 'Bulan Berjalan' }}</th>
                            <th class="text-uppercase text-dark font-weight-bolder text-end"
                                style="border: 1px solid #a7d6d6ff; padding: 10px; width: 20%;">
                                {{ $prev_periode_name ?? 'Bulan Sebelumnya' }}</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @if (!empty($lr_fields) && count($lr_fields) > 0)
                        @foreach ($lr_fields as $field)
                            @php
                                // Determine styling based on field characteristics
                                $isSubtotal = $field->tipe === 'Total' && !$loop->last;
                                $isFinal = $loop->last;
                                $hasDetails = $field->has_details ?? false;
                                $textColor = 'text-dark';

                                if ($isFinal) {
                                    $has_negative = false;
                                    if (!empty($is_yearly)) {
                                        $has_negative = array_sum($field->totals_monthly) < 0;
                                    } else {
                                        $has_negative = $field->total_curr < 0;
                                    }

                                    if ($has_negative) {
                                        $bgColor = '#fceaea'; // light red background for loss (rugi)
                                    } else {
                                        $bgColor = '#eafceaff'; // vibrant green background for profit (laba)
                                    }
                                    $fontWeight = 'font-weight-bolder';
                                    $fontSize = 'text-sm';
                                } elseif ($isSubtotal) {
                                    $bgColor = '#eafceaff'; // Vibrant green for subtotals
                                    $fontWeight = 'font-weight-bold';
                                    $fontSize = 'text-sm';
                                } elseif ($hasDetails) {
                                    $bgColor = '#eff3f8ff'; // Light gray for group headers
                                    $fontWeight = 'font-weight-bold';
                                    $fontSize = 'text-sm';
                                } else {
                                    $bgColor = '#ffffff';
                                    $fontWeight = 'normal';
                                    $fontSize = 'text-sm';
                                }

                                $fieldIsBeban = false;
                                if ($hasDetails) {
                                    $firstItem = null;
                                    if (!empty($is_yearly)) {
                                        if (!empty($field->items_monthly)) {
                                            $firstItem = $field->items_monthly[0];
                                        }
                                    } else {
                                        if (!empty($field->items_curr)) {
                                            $firstItem = $field->items_curr[0];
                                        } elseif (!empty($field->items_prev)) {
                                            $firstItem = $field->items_prev[0];
                                        }
                                    }
                                    if ($firstItem) {
                                        $firstChar = substr((string) $firstItem->id_coa, 0, 1);
                                        $fieldIsBeban = in_array($firstChar, ['5', '6', '8']);
                                    }
                                }

                                if (!empty($is_yearly)) {
                                    $display_totals = [];
                                    $total_year = 0.0;
                                    foreach ($months as $m) {
                                        $val = $field->totals_monthly[$m] ?? 0.0;
                                        $display_val = $fieldIsBeban ? -$val : $val;
                                        $display_totals[$m] = $display_val;
                                        $total_year += $display_val;
                                    }

                                    $cell_month_colors = [];
                                    $cell_total_year_color = $textColor;
                                    foreach ($months as $m) {
                                        $cell_month_colors[$m] = $textColor;
                                        if ($isSubtotal || $isFinal) {
                                            if (($field->totals_monthly[$m] ?? 0.0) < 0) {
                                                $cell_month_colors[$m] = 'text-danger';
                                            }
                                        }
                                    }
                                    if ($isSubtotal || $isFinal) {
                                        $actual_total_year = array_sum($field->totals_monthly);
                                        if ($actual_total_year < 0) {
                                            $cell_total_year_color = 'text-danger';
                                        }
                                    }
                                } else {
                                    $total_curr_display = $fieldIsBeban ? -$field->total_curr : $field->total_curr;
                                    $total_prev_display = $fieldIsBeban ? -$field->total_prev : $field->total_prev;

                                    $cell_curr_color = $textColor;
                                    $cell_prev_color = $textColor;
                                    if ($isSubtotal || $isFinal) {
                                        if ($field->total_curr < 0) {
                                            $cell_curr_color = 'text-danger';
                                        }
                                        if ($field->total_prev < 0) {
                                            $cell_prev_color = 'text-danger';
                                        }
                                    }
                                }
                            @endphp

                            {{-- Main row (Group Header) --}}
                            <tr data-id="lr-field-{{ $field->id_field }}">
                                <td style="border: 1px solid #a7d6d6ff; padding: 10px; background-color: {{ $bgColor }};"
                                    class="{{ $fontSize }} {{ $textColor }} {{ $fontWeight }}"></td>
                                <td style="border: 1px solid #a7d6d6ff; padding: 10px; background-color: {{ $bgColor }}; {{ $hasDetails ? 'cursor:pointer; user-select:none;' : '' }}"
                                    class="{{ $fontSize }} {{ $textColor }} {{ $fontWeight }} text-uppercase {{ $isSubtotal || $isFinal ? 'ps-4 py-3' : 'ps-3' }} neraca-toggle-row"
                                    data-coa-id="lr-field-{{ $field->id_field }}">
                                    @if ($hasDetails)
                                        <i class="fas fa-chevron-down me-2 neraca-toggle"
                                            data-coa-id="lr-field-{{ $field->id_field }}"
                                            style="font-size:0.75rem; color:#028284;"></i>
                                    @endif
                                    {{ $field->nama }}
                                </td>
                                @if (!empty($is_yearly))
                                    @foreach ($months as $m)
                                        @php
                                            $val = $display_totals[$m] ?? 0.0;
                                        @endphp
                                        <td style="border: 1px solid #a7d6d6ff; padding: 10px; background-color: {{ $bgColor }};"
                                            class="text-end {{ $fontSize }} {{ $cell_month_colors[$m] }} {{ $fontWeight }} {{ $isFinal ? 'py-3' : '' }}">
                                            @if ($val < 0)
                                                ({{ number_format(abs($val), 2, ',', '.') }})
                                            @else
                                                {{ number_format($val, 2, ',', '.') }}
                                            @endif
                                        </td>
                                    @endforeach
                                    <td style="border: 1px solid #a7d6d6ff; padding: 10px; background-color: {{ $isFinal ? $bgColor : '#dbeef0' }};"
                                        class="text-end {{ $fontSize }} {{ $cell_total_year_color }} {{ $fontWeight }} {{ $isFinal ? 'py-3' : '' }}">
                                        @if ($total_year < 0)
                                            ({{ number_format(abs($total_year), 2, ',', '.') }})
                                        @else
                                            {{ number_format($total_year, 2, ',', '.') }}
                                        @endif
                                    </td>
                                @else
                                    <td style="border: 1px solid #a7d6d6ff; padding: 10px; background-color: {{ $bgColor }};"
                                        class="text-end {{ $fontSize }} {{ $cell_curr_color }} {{ $fontWeight }} {{ $isFinal ? 'py-3' : '' }}">
                                        @if ($total_curr_display < 0)
                                            ({{ number_format(abs($total_curr_display), 2, ',', '.') }})
                                        @else
                                            {{ number_format($total_curr_display, 2, ',', '.') }}
                                        @endif
                                    </td>
                                    <td style="border: 1px solid #a7d6d6ff; padding: 10px; background-color: {{ $bgColor }};"
                                        class="text-end {{ $fontSize }} {{ $cell_prev_color }} {{ $fontWeight }} {{ $isFinal ? 'py-3' : '' }}">
                                        @if ($total_prev_display < 0)
                                            ({{ number_format(abs($total_prev_display), 2, ',', '.') }})
                                        @else
                                            {{ number_format($total_prev_display, 2, ',', '.') }}
                                        @endif
                                    </td>
                                @endif
                            </tr>

                            {{-- Detail items (expandable children) --}}
                            @if ($hasDetails)
                                @if (!empty($is_yearly))
                                    @if (!empty($field->items_monthly))
                                        @include('report.rptlpr.partials.laba_rugi_rows_yearly', [
                                            'items' => $field->items_monthly,
                                            'depth' => 0,
                                            'parent_id' => 'lr-field-' . $field->id_field,
                                            'months' => $months,
                                        ])
                                    @endif
                                @else
                                    @if (!empty($field->items_curr))
                                        @include('report.rptlpr.partials.laba_rugi_rows', [
                                            'items' => $field->items_curr,
                                            'items_prev' => $field->items_prev ?? [],
                                            'depth' => 0,
                                            'parent_id' => 'lr-field-' . $field->id_field,
                                        ])
                                    @endif
                                @endif
                            @endif

                            @if ($isSubtotal)
                                <tr>
                                    <td colspan="{{ !empty($is_yearly) ? count($months) + 3 : 4 }}"
                                        style="height: 6px; border: 1px solid #a7d6d6ff;"></td>
                                </tr>
                            @endif
                        @endforeach
                    @elseif($lr_start_period && ($selected_template ?? ''))
                        <tr>
                            <td colspan="{{ !empty($is_yearly) ? count($months) + 3 : 4 }}"
                                style="border: 1px solid #a7d6d6ff; padding: 12px; text-align: center;">
                                <em>Tidak ada data template untuk ditampilkan</em>
                            </td>
                        </tr>
                    @else
                        <tr>
                            <td colspan="{{ !empty($is_yearly) ? count($months) + 3 : 4 }}"
                                style="border: 1px solid #a7d6d6ff; padding: 12px; text-align: center;">
                                <em>Silakan pilih template, periode dan kurs, lalu klik Execute untuk melihat data Laba
                                    Rugi</em>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    flatpickr("#lr-start-period", {
        plugins: [
            new monthSelectPlugin({
                shorthand: false,
                dateFormat: "Y-m",
                altFormat: "F Y",
                theme: "light"
            })
        ],
        allowInput: true,
        disableMobile: true
    });

    flatpickr("#lr-end-period", {
        plugins: [
            new monthSelectPlugin({
                shorthand: false,
                dateFormat: "Y-m",
                altFormat: "F Y",
                theme: "light"
            })
        ],
        allowInput: true,
        disableMobile: true
    });

    document.addEventListener('DOMContentLoaded', function() {
        $('#lr-template-filter').select2({
            width: '100%'
        });
        $('#lr-template-filter').next('.select2-container').css({
            flex: '1',
            minWidth: '0'
        });
        $('#lr-kurs-filter').select2({
            width: '100%'
        });
        $('#lr-kurs-filter').next('.select2-container').css({
            flex: '1',
            minWidth: '0'
        });

        // Toggle placeholder visibility based on value presence
        function toggleMonthPlaceholder(input) {
            if (input.value) {
                input.classList.add('has-value');
            } else {
                input.classList.remove('has-value');
            }
        }
        document.querySelectorAll('input[type="month"]').forEach(function(input) {
            toggleMonthPlaceholder(input);
            input.addEventListener('change', function() {
                toggleMonthPlaceholder(input);
            });
            input.addEventListener('input', function() {
                toggleMonthPlaceholder(input);
            });
        });

        // Validate date ranges on change
        $('#lr-start-period, #lr-end-period').on('change', function() {
            var start = $('#lr-start-period').val();
            var end = $('#lr-end-period').val();

            if (this.id === 'lr-end-period' && start && end && end < start) {
                Swal.fire({
                    title: 'Peringatan',
                    text: 'Periode akhir tidak boleh lebih kecil dari periode awal.',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                }).then(() => {
                    $('#lr-end-period').val(start);
                });
            } else if (this.id === 'lr-start-period' && start && end && end < start) {
                Swal.fire({
                    title: 'Peringatan',
                    text: 'Periode awal tidak boleh lebih besar dari periode akhir.',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                }).then(() => {
                    $('#lr-start-period').val(end);
                });
            }
        });

        $('#btn-execute-lr').on('click', function() {
            var template = $('#lr-template-filter').val();
            var start = $('#lr-start-period').val();
            var end = $('#lr-end-period').val() || start;
            var kurs = $('#lr-kurs-filter').val();

            if (!template) {
                Swal.fire({
                    title: 'Peringatan',
                    text: 'Silakan pilih template terlebih dahulu',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            if (!start) {
                Swal.fire({
                    title: 'Peringatan',
                    text: 'Silakan pilih periode awal terlebih dahulu',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            if (start && end && end < start) {
                Swal.fire({
                    title: 'Peringatan',
                    text: 'Periode akhir tidak boleh lebih kecil dari periode awal.',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            localStorage.setItem('lrFilterTemplate', template);
            localStorage.setItem('lrFilterStartPeriod', start);
            localStorage.setItem('lrFilterEndPeriod', end);
            localStorage.setItem('lrFilterKurs', kurs);
            localStorage.setItem('activeTab', 'laba-rugi-tab');

            var url = window.location.pathname + '?template=' + template + '&lr_start_period=' + start +
                '&lr_end_period=' + end;
            if (kurs) url += '&kurs=' + kurs;
            url += '&tab=laba_rugi';
            window.location.href = url;
        });

        $(document).on('click', '.neraca-toggle, .neraca-toggle-row', function(e) {
            e.stopPropagation();
            var coaId = $(this).data('coaId');
            var icon = $('i.neraca-toggle[data-coa-id="' + coaId + '"]');
            var childRows = $('tr[data-parent="' + coaId + '"]');

            if (childRows.is(':visible')) {
                collapseLROchildren(coaId);
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
            } else {
                childRows.show();
                icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
            }
        });

        function collapseLROchildren(parentId) {
            $('tr[data-parent="' + parentId + '"]').each(function() {
                var childId = $(this).data('id');
                $(this).hide();
                $('i.neraca-toggle[data-coa-id="' + childId + '"]').removeClass('fa-chevron-down')
                    .addClass('fa-chevron-right');
                collapseLROchildren(childId);
            });
        }
    });
</script>