@extends('layouts.master')

@section('title', 'Laporan Laba Operasional Shopee')

@section('css')
    <style>
        .btn-square { width: 100px; }
        .table th, .table td { vertical-align: middle; padding: 12px; }
        .table thead { background-color: #f2f2f2; }
        .table-responsive { margin-top: 20px; }
        .table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .table td, .table th { word-wrap: break-word; overflow: hidden; max-width: 150px; }
        .table td { padding: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
        .table th { background-color: #f8f8f8; font-weight: bold; border-bottom: 2px solid #ddd; }
        #shopeeInvoiceReportTtable_wrapper { margin-top: 20px; }
        .text-end { text-align: right; }
    </style>
@endsection

@section('content')
    <x-page-title title="Laporan Laba Operasional Shopee" pagetitle="Laporan Laba Operasional Shopee " />
    <hr>

    <div class="card">
        <div class="card-body">
            <h6 class="mb-4 text-uppercase">Laporan Laba Operasional Shopee </h6>

            <div class="row mb-4">
                <div class="row">
                    <div class="col-md-4">
                        <label for="date_from">From Date</label>
                        <input type="date" name="date_from" id="date_from" class="form-control date-picker"
                            value="{{ request()->date_from }}">
                    </div>
                    <div class="col-md-4">
                        <label for="date_to">To Date</label>
                        <input type="date" name="date_to" id="date_to" class="form-control date-picker"
                            value="{{ request()->date_to }}">
                    </div>
                </div>
                <div class="col-md-2 pt-4">
                    <button type="button" class="btn btn-primary" id="btn-search">Search</button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="shopeeInvoiceReportTtable" class="table table-hover mt-3">
                    <thead>
                        <tr>
                            <th>No Dokumen</th>
                            <th>Order SN</th>
                            <th>Barang</th>
                            <th class="text-end">Total HPP</th>
                            <th class="text-end">Total Sales</th>
                            <th class="text-end">Laba Kotor</th>
                            <th class="text-end">Total Biaya</th>
                            <th class="text-end">Laba Bersih</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        </tbody>
                </table>
            </div>
            <p class="text-center mt-4" id="noDataMessage">Please select a date range and click "Search" to view the report.</p>
        </div>
    </div>

    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Detail Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead id="modalTableHeader"></thead>
                            <tbody id="modalTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
    $(document).ready(function() {
        let table = $('#shopeeInvoiceReportTtable').DataTable({
            lengthChange: false,
            buttons: [ 'copy', 'excel', 'pdf', 'print']
        });

        table.buttons().container()
				.appendTo( '#shopeeInvoiceReportTtable_wrapper .col-md-6:eq(0)' );

        function safeBtoa(str) {
            return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
        }

        // Function to safely decode Base64 to UTF-8
        function safeAtob(str) {
            return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));
        }

        $('#btn-search').on('click', function() {
            const date_from = $('#date_from').val();
            const date_to = $('#date_to').val();
            Swal.fire({
                title: 'Loading...',
                text: 'Harap Tunggu.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            $.ajax({
                url: '{{ route("shopee_si.report.fetch") }}',
                type: 'GET',
                data: { date_from: date_from, date_to: date_to },
                beforeSend: function() {
                    $('#table-body').empty();
                    $('#noDataMessage').hide();
                },
                success: function(response) {
                    Swal.close();
                    table.clear();
                    if (response.data && response.data.length > 0) {
                        response.data.forEach((row, index) => {
                            // Create the visible cells
                            const docNumber = row.document_number;
                            const orderSn = row.order_sn;

                            // Create buttons with icons
                            const detailBtn = `<button class="btn btn-sm btn-info view-details" data-index="${index}"><i class="material-icons-outlined">visibility</i></button>`;
                            const hpp = Number(row.total_hpp).toLocaleString();
                            const sales = Number(row.total_sales).toLocaleString();
                            const labaKotor = Number(row.laba_kotor).toLocaleString();
                            const biaya = `
                                ${Number(row.total_biaya).toLocaleString()}
                                <button class="btn btn-sm btn-secondary view-biaya" data-index="${index}"><i class="material-icons-outlined">visibility</i></button>
                            `;
                            const labaBersih = `<strong>${Number(row.laba_bersih).toLocaleString()}</strong>`;

                            // 2. Add data to DataTable internal engine
                            const node = table.row.add([
                                docNumber,
                                orderSn,
                                detailBtn,
                                hpp,
                                sales,
                                labaKotor,
                                biaya,
                                labaBersih
                            ]).node();

                            // 3. Store the raw objects in the row node for the modals to use
                            $(node).find('.view-details').data('raw-data', row.details);
                            $(node).find('.view-biaya').data('raw-data', row.biaya_details);
                        });

                        // 4. Redraw the table with new pagination
                        table.draw();
                        $('#noDataMessage').hide();
                    } else {
                        $('#noDataMessage').show();
                        $('#shopeeInvoiceReportTtable').parent().hide();
                    }
                },
                error: function(error) {
                    Swal.close();
                    console.error("Error:", error);
                    alert('Terjadi kesalahan saat mengambil data. Silakan coba lagi.');
                }
            });
        });

        // Modal for Items Detail
        $(document).on('click', '.view-details', function() {
            const details = $(this).data('raw-data'); // Get object directly
            $('#modalTitle').text('Detail Produk');
            $('#modalTableHeader').html(`
                <tr>
                    <th>Item</th><th>Model</th><th class="text-center">Qty</th>
                    <th class="text-end">COGS</th><th class="text-end">Price</th><th class="text-end">Nominal</th>
                </tr>`);

            let rows = details.map(item => `
                <tr>
                    <td>${item.shopee_item_name}</td><td>${item.model_name || '-'}</td>
                    <td class="text-center">${item.qty}</td>
                    <td class="text-end">${Number(item.cogs).toLocaleString()}</td>
                    <td class="text-end">${Number(item.price_after_disc).toLocaleString()}</td>
                    <td class="text-end">${Number(item.nominal).toLocaleString()}</td>
                </tr>`).join('');

            $('#modalTableBody').html(rows);
            $('#detailModal').modal('show');
        });

        // Updated Biaya Detail Handler
        $(document).on('click', '.view-biaya', function() {
            const biaya = $(this).data('raw-data'); // Get object directly
            $('#modalTitle').text('Rincian Biaya Operasional');
            $('#modalTableHeader').html(`<tr><th>Nama Akun</th><th class="text-end">Nominal</th></tr>`);

            let rows = biaya.length ? biaya.map(item => `
                <tr><td>${item.account_name}</td><td class="text-end">${Number(item.nominal).toLocaleString()}</td></tr>
            `).join('') : '<tr><td colspan="2" class="text-center">No data</td></tr>';

            $('#modalTableBody').html(rows);
            $('#detailModal').modal('show');
        });
    });
</script>
@endsection