@extends('webview.saku.main')

@push('style')
    <link rel="stylesheet" href="{{ route('saku-mobile.sho.css') }}" />
@endpush

@section('content')
    <div class="header">
        <a href="{{ route('saku-mobile.page.home') }}" class="btn-link">
            <img alt="angle-left" src="{{ asset('asset-webview/saku/icons/arrow-left.png') }}" height="24" width="24">
            Laporan Laba/Rugi
        </a>
    </div>
    <div class="body">
        <div class="filter-container">
            <div class="filter-group">
                <select id="filter-tahun" required>
                    <option value="" disabled selected>Tahun</option>
                </select>
                <img alt="icon-select" src="{{ asset('asset-webview/saku/icons/angle-down.png') }}" height="18"
                    width="17">
            </div>
            <div class="filter-group">
                <select id="filter-bulan" required>
                    <option value="" disabled selected>Bulan</option>
                </select>
                <img alt="icon-select" src="{{ asset('asset-webview/saku/icons/angle-down.png') }}" height="18"
                    width="17">
            </div>
        </div>

        <div id="report-content" class="report-list">
            <div class="loading-state">Silahkan pilih periode</div>
        </div>
    </div>
@endsection

@push('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                xhrFields: {
                    withCredentials: true // <--- HANYA TAMBAH BARIS INI
                }
            });

            const $filterTahun = $('#filter-tahun');
            const $filterBulan = $('#filter-bulan');
            const $reportContent = $('#report-content');

            function formatRupiah(angka) {
                if (angka == null || angka == 0) return '0';
                let value = parseFloat(angka);
                return new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).format(value);
            }

            function toTitleCase(str) {
                if (!str) return "";
                return str.replace(/\w\S*/g, function(txt) {
                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                });
            }

            function checkAndLoadData() {
                let tahun = $filterTahun.val();
                let bulan = $filterBulan.val();
                if (tahun && bulan) loadReport(tahun, bulan);
            }

            // Reuse Filter Routes (Filter Tahun)
            $.ajax({
                url: "{{ route('saku-mobile.data.filter-tahun') }}",
                type: 'GET',
                success: function(res) {
                    if (res.status && res.data.length > 0) {
                        $filterTahun.empty();
                        let currentYear = new Date().getFullYear().toString();
                        let selectedYear = "";
                        res.data.forEach(item => {
                            $filterTahun.append(
                                `<option value="${item.tahun}">${item.tahun}</option>`);
                            if (item.tahun == currentYear) selectedYear = item.tahun;
                        });
                        if (selectedYear === "") selectedYear = res.data[0].tahun;
                        $filterTahun.val(selectedYear);
                        checkAndLoadData();
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) window.location.href =
                        "{{ route('saku-mobile.auth.login') }}";
                }
            });

            // Reuse Filter Routes (Filter Bulan)
            $.ajax({
                url: "{{ route('saku-mobile.data.filter-bulan') }}",
                type: 'GET',
                success: function(res) {
                    if (res.status && res.data.length > 0) {
                        $filterBulan.empty();
                        let currentMonthInt = new Date().getMonth() + 1;
                        let selectedValue = "";
                        res.data.forEach(item => {
                            $filterBulan.append(
                                `<option value="${item.bulan}">${item.nama_bulan}</option>`);
                            if (parseInt(item.bulan) == currentMonthInt) selectedValue = item
                                .bulan;
                        });
                        if (selectedValue === "") selectedValue = res.data[0].bulan;
                        $filterBulan.val(selectedValue);
                        checkAndLoadData();
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) window.location.href =
                        "{{ route('saku-mobile.auth.login') }}";
                }
            });

            $filterTahun.change(function() {
                checkAndLoadData();
            });
            $filterBulan.change(function() {
                checkAndLoadData();
            });

            function loadReport(tahun, bulan) {
                $reportContent.html('<div class="loading-state">Memuat data...</div>');
                let periode = tahun + bulan;

                $.ajax({
                    url: "{{ route('saku-mobile.data.sho') }}",
                    type: 'POST',
                    data: {
                        periode: periode
                    },
                    success: function(res) {
                        if (res.status) {
                            renderReport(res.data);
                        } else {
                            $reportContent.html(
                                '<div class="loading-state">Data tidak ditemukan.</div>');
                        }
                    },
                    error: function(xhr) {
                        let msg = "Gagal mengambil data.";
                        if (xhr.status === 401) window.location.href =
                            "{{ route('saku-mobile.auth.login') }}";
                        $reportContent.html(`<div class="loading-state text-danger">${msg}</div>`);
                    }
                });
            }

            // --- UPDATE: LOGIC RENDER HIERARKI ---
            function renderReport(data) {
                let html = '';

                if (!data || data.length === 0) {
                    $reportContent.html('<div class="loading-state">Data kosong.</div>');
                    return;
                }

                data.forEach(line => {
                    let nilaiFormatted = formatRupiah(line.nilai);
                    let cleanNama = toTitleCase(line.nama);

                    // 1. HEADER (Box Cream)
                    if (line.tipe === "Header") {
                        html += `
                        <div class="section-header">
                            <span>${cleanNama}</span>
                            <span>Total</span>
                        </div>
                    `;
                    }
                    // 2. SUMMARY (Box Emas) - Misal: Total SHO
                    else if (line.tipe === "Summary") {
                        html += `
                        <div class="summary-box">
                            <span>${cleanNama}</span>
                            <span>${nilaiFormatted}</span>
                        </div>
                    `;
                    }
                    // 3. POSTING / GROUP (Teks Emas)
                    else if (line.tipe === "Posting") {
                        html += `
                        <div class="group-row">
                            <span class="group-title">${cleanNama}</span>
                            <span class="group-value">${nilaiFormatted}</span>
                        </div>
                    `;

                        // Render Detail (Jika API mengirimkan detail)
                        if (line.detail && line.detail.length > 0) {
                            line.detail.forEach(det => {
                                let detailName = toTitleCase(det.nama_akun);
                                html += `
                                <div class="detail-row">
                                    <span class="detail-name">${detailName}</span>
                                    <span class="detail-value">${formatRupiah(det.nilai)}</span>
                                </div>
                            `;
                            });
                        }
                    }
                });

                $reportContent.html(html);
            }
        });
    </script>
@endpush