@php
    $page_name = 'Cash Collection Agent Report';
    $userRole = auth()->user()->roles[0]->id;
    $ledger = auth()->user()->getLedger();
    $group_id = 0;

    if($ledger){
        $group_id = $ledger->group_id;
    }
@endphp

@include('partial.header')
@include('partial.loader')

<link rel="stylesheet" href="{{ asset('assets/mobile_common.css') }}">

<div class="container-fluid mobile-container special-mobile-container">
    <div class="main-container">

        <div class="fixed-header-container">
            <!-- Header Section with Back & Title -->
            <div class="header-bar">
                <a href="/reports" class="back-button">&larr;</a>
                <h4 class="page-title">Cash Collection Agent Report</h4>
            </div>

            <!-- Filter Section -->
            <div class="row filter-container">
           
                <div class="col-5">
                    <div class="date-wrapper" >
                        <input type="date" id="date-input" class="date-input" value="{{ date('Y-m-d') }}" />
                    </div>
                </div>
                <div class="col-5">
                    <div class="date-wrapper">
                        <input type="date" id="to-date-input" class="date-input" value="{{ date('Y-m-d') }}" />
                    </div>
                </div>
                <div class="col-2">
                    <button style="padding: 11px;width: 34px;" class="find-btn">
                        <i class="icon-search"></i>
                    </button>
                </div>
            </div>  
            
            <div id="pfl-table-wrapper">
                <table class="pfl-table">
                    <thead>
                        <tr>
                            <th>Sr.</th>
                            <th>Party Name</th>
                            <th>Closing Balance</th>
                        </tr>
                    </thead>
                    <tbody id="pfl-table-body"> 
                        <!-- Loop your data here -->
                        <!-- <tr>
                            <td>1</td>
                            <td>Morning</td>
                            <td>₹10,000</td>
                            <td>₹9,500</td>
                            <td>+₹500</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Evening</td>
                            <td>₹12,000</td>
                            <td>₹11,800</td>
                            <td>+₹200</td>
                        </tr> -->
                    </tbody>
                </table>
            </div>


        </div>
        
        
        
    </div>

</div>
@include('partial.footer')
<!-- CSS Styling -->

<style>
    #pfl-table-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        max-height: 73vh;
        -webkit-overflow-scrolling: touch;
    }

    .pfl-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 3px;
    }

    .pfl-table th, .pfl-table td {
        border: 1px solid #ccc;
        padding: 6px 8px;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
    }

    .pfl-table th {
        background-color: #00796b;
        color: white;
    }
</style>

<script>
    $(document).ready(function() {
        $(document).on('click', '.find-btn', function () {
            showLoader();

            let from_date = $('#date-input').val();
            let to_date = $('#to-date-input').val();

            let AjaxUrl = '/cash_coll_agent_report_data_mobile';

            let JsonData = {
                from_date: from_date,
                to_date: to_date,
                GroupAgentId: 0,
                Filter: 3,
            };

            $('#pfl-table-body').html('');


            AjaxCall(AjaxUrl, JsonData, function(response) {
                hideLoader();
                
                if(response.status){
                    let transactions = response.transactions;
                    let html = '';
                    var totalClosingBalance = 0;

                    transactions.forEach(function(transaction, index) {
                        totalClosingBalance += parseFloat(transaction.ClosingBalance);

                        html += '<tr>';
                        html += '<td>' + (index + 1) + '</td>';
                        html += '<td>' + transaction.LedgerName + '</td>';
                        html += '<td class="'+ (transaction.ClosingBalance < 0 ? 'text-danger' : 'text-success') +'">' + customRound(transaction.ClosingBalance) + '</td>';
                        html += '</tr>';
                    });

                    html += '<tr>';
                    html += '<th colspan="2">Total</th>';
                    html += '<th>' + customRound(totalClosingBalance) + '</th>';
                    html += '</tr>';

                    $('#pfl-table-body').html(html);
                    
                }else{
                    Notify('Error', response.message, 'error');
                }
            });

           
        });
    });
</script>