@extends('layouts.admin')
@section('title', 'Ledger | Mintavia Admin')


@section('content')
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Ledger List</h3>

                </div>
                <div class="card-body">
                    <form class="" id="filter" method="post" action="{{ route('admin.reports.ledgers') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-3">
                                <x-admin-input class="select2" type="select" name="account_id" id="account-id">
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->name }}</option>
                                    @endforeach
                                </x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <x-admin-input type="date" name="fromDate" id="from-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <x-admin-input type="date" name="toDate" id="to-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-success">OK</button>
                                <button type="button" onclick="document.getElementById('print-form').submit()"
                                    class="btn btn-primary">Print
                                </button>
                            </div>
                        </div>
                    </form>
                    <form id="print-form" class="d-none" method="post" action="{{ route('admin.products.print') }}">
                        @csrf
                        <textarea class="d-none" name="print_data" id="print-data">[]</textarea>
                    </form>
                    <div style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-sm table-striped table-bordered"
                            style="border-collapse: collapse; width: 100%;">
                            <thead style="position: sticky; top: 0; z-index: 1; background-color: white;">
                                <tr>
                                    <th style="white-space: nowrap;">Date</th>
                                    <th style="white-space: nowrap;">Transaction Type</th>
                                    <th style="white-space: nowrap;">Name</th>
                                    <th style="white-space: nowrap;">Narration</th>
                                    <th style="white-space: nowrap;">Dr. Amt</th>
                                    <th style="white-space: nowrap;">Cr. Amt</th>
                                    <th style="white-space: nowrap;">Balance</th>
                                </tr>
                            </thead>
                            <tbody id="table-list">
                                <!-- rows will come dynamically -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row ">
        <div class="col-3 ml-auto">
            <div class="card">
                <div class="card-body">
                    Month-List
                    <hr>
                    <div class="w-100 text-right" id="monthay" style="font-size: 14px; text-align: left;">
                        <!-- Monthly data will be populated here -->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3 ml-auto">
            <div class="card">
                <div class="card-body">
                    Total Dr. Amt.
                    <hr>
                    <div class="w-100 text-right" id="dr">0</div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card">
                <div class="card-body">
                    Total Cr. Amt.
                    <hr>
                    <div class="w-100 text-right" id="cr">0</div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card">
                <div class="card-body">
                    Balance Amt.
                    <hr>
                    <div class="w-100 text-right" id="balance">0</div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        (function($) {
            let trcount = $('table thead tr th').length;

            $(function() {
                $('#filter').on('submit', function(e) {
                    e.preventDefault();
                    let url = $(this).attr('action');
                    const formdata = new FormData(this);

                    const $submitBtn = $('#filter button[type="submit"]');
                    $submitBtn.prop('disabled', true).text('Loading...');

                    $.ajax({
                        url: url,
                        type: 'post',
                        contentType: false,
                        processData: false,
                        data: formdata,
                    }).done(function(json) {
                        console.log("Response JSON:", json);

                        let tr = '';
                        let $dr = 0;
                        let $cr = 0;

                        trcount = $('table thead tr th').length;

                        if (json.list && json.list.length > 0) {
                            json.list.forEach(function(row) {
                                row.dr = Number(row.dr || 0);
                                row.cr = Number(row.cr || 0);

                                if (row.dr) $dr += row.dr;
                                if (row.cr) $cr += row.cr;

                                tr += '<tr>';
                                tr += `
                            <td>${row.date}</td>
                            <td>${row.transaction_type}</td>
                            <td>${row.account_name}</td>
                            <td>${row.narration}</td>
                            <td class="text-right">${row.dr ? row.dr.toFixed(2) : ''}</td>
                            <td class="text-right">${row.cr ? row.cr.toFixed(2) : ''}</td>
                        `;

                                const balance = Number(row.balance || 0);
                                if (balance > 0) {
                                    tr +=
                                        `<td class="text-right">${Math.abs(balance).toFixed(2)} Dr.</td>`;
                                } else if (balance < 0) {
                                    tr +=
                                        `<td class="text-right">${Math.abs(balance).toFixed(2)} Cr.</td>`;
                                } else {
                                    tr += `<td class="text-right">0.00</td>`;
                                }

                                tr += '</tr>';
                            });

                            $('#table-list').html(tr);
                        } else {
                            tr =
                                `<tr><td colspan="${trcount}" class="text-center">No Data</td></tr>`;
                            $('#table-list').html(tr);
                        }

                        // ==== Monthly Summary Table ====
                        if (json.monthly_summary && Object.keys(json.monthly_summary).length >
                            0) {
                            let monthlyHtml = `
                        <table style="width: 100%; border-collapse: collapse;" border="1">
                            <thead>
                                <tr>
                                    <th style="padding: 4px;">Month</th>
                                    <th style="padding: 4px;">Dr (₹)</th>
                                    <th style="padding: 4px;">Cr (₹)</th>
                                </tr>
                            </thead>
                            <tbody>
                    `;

                            Object.keys(json.monthly_summary).forEach(function(monthKey) {
                                const dateObj = new Date(monthKey + "-01");
                                const monthName = dateObj.toLocaleString('default', {
                                    month: 'short',
                                    year: 'numeric'
                                });

                                let dr = json.monthly_summary[monthKey].dr || 0;
                                let cr = json.monthly_summary[monthKey].cr || 0;

                                monthlyHtml += `
                            <tr>
                                <td style="padding: 4px; font-weight: bold;">${monthName}</td>
                                <td style="padding: 4px; text-align: right; font-weight: bold;">${dr.toFixed(2)}</td>
                                <td style="padding: 4px; text-align: right; font-weight: bold;">${cr.toFixed(2)}</td>
                            </tr>

                        `;
                            });

                            monthlyHtml += `
                            </tbody>
                        </table>
                    `;

                            $('#monthay').html(monthlyHtml);
                        } else {
                            $('#monthay').html('No monthly data');
                        }

                        // Totals
                        $('#dr').html($dr.toFixed(2));
                        $('#cr').html($cr.toFixed(2));

                        if (json.balance > 0) {
                            $('#balance').html(Math.abs(json.balance).toFixed(2) + ' Dr.');
                        } else if (json.balance < 0) {
                            $('#balance').html(Math.abs(json.balance).toFixed(2) + ' Cr.');
                        } else {
                            $('#balance').html('0.00');
                        }

                        $submitBtn.prop('disabled', false).text('Filter');
                    }).fail(function(err) {
                        console.error("AJAX Error:", err);
                        $submitBtn.prop('disabled', false).text('Filter');
                    });
                });

                // Initialize select2
                $('.select2').select2({
                    width: '100%'
                });

                // Default row
                let tr = `<tr><td colspan="${trcount}" class="text-center">No Data</td></tr>`;
                $('#table-list').html(tr);
            });
        })(jQuery);
    </script>

@endsection