@include('header')


<!--**********************************
            Content body start
        ***********************************-->
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Monthy Sales Information</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">
                    Dashboard </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Monthy Report</a></li>
        </ul>
    </div>
    <div class="container">
        <!-- row -->
        <!-- <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Invoice</h4>
                    </div>
                   
                </div>

            </div>

        </div> -->
        <div class="col-xl-12">
            <div class="card dz-card" id="accordion-three">
                <div class="card-header mb-2">
                    <h4 class="card-title">Monthy Sales</h4>
                    <div style="margin-bottom:15px;">
                        <a href="{{ route('report.monthlysales') }}" class="btn btn-primary" target="_blank">
                            <i class="fa fa-print" style="margin-right:5px;"></i> Print
                        </a>
                    </div>
                </div>



                <!-- /tab-content -->
                <div class="tab-content" id="myTabContent-2">
                    <div class="tab-pane fade show active" id="withoutSpace" role="tabpanel"
                        aria-labelledby="home-tab-2">
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table id="example3" class="display table" style="min-width: 845px">
                                    <thead>
                                        <tr>
                                            <th>SLNO</th>
                                            <th>Store</th>
                                            <th>Category</th>
                                            <th>Customer</th>
                                            <th>Total Amount</th>
                                            <th>Paid Amount</th>
                                            <th>Balance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                         @php $sno = 1; @endphp
                                        @foreach($monthlySales as $sale)
                                        <tr>
                                             <td> {{ $sno++ }}</td>
                                            <td>{{ $sale->store->store ?? 'N/A' }}</td>
                                            <td>{{ $sale->category->category ?? 'N/A' }}</td>
                                            <td>{{ $sale->customer->name ?? 'N/A' }}</td>
                                            <td>{{ number_format($sale->total_amount,2) }}</td>
                                            <td>{{ number_format($sale->advance_paid,2) }}</td>
                                            <td>{{ number_format($sale->balance,2) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>

                </div>
                <!-- /tab-content -->

            </div>
        </div>
    </div>
</div>
<!-- Invoice Payment Modal -->
<div class="modal fade" id="invoicePaymentModal" tabindex="-1" aria-labelledby="invoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="paymentUpdateForm" method="POST" action="{{ route('invoice.updatePayment') }}">
            @csrf
            <input type="hidden" name="invoice_id" id="modal_invoice_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="invoiceModalLabel">Update Invoice Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Name</label>
                            <input type="text" class="form-control" id="modal_name" readonly>
                        </div>

                        <div class="col-md-6">
                            <label>Mobile</label>
                            <input type="text" class="form-control" id="modal_mobile" readonly>
                        </div>

                        <div class="col-md-6">
                            <label>Store</label>
                            <input type="text" class="form-control" id="modal_store" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>Cateory</label>
                            <input type="text" class="form-control" id="modal_category" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>Total Amount</label>
                            <input type="text" class="form-control" id="modal_total" readonly>
                        </div>

                        <div class="col-md-6">
                            <label>Advance Paid</label>
                            <input type="text" class="form-control" id="modal_advance" readonly>
                        </div>

                        <div class="col-md-6">
                            <label>Balance</label>
                            <input type="text" class="form-control" id="modal_balance" readonly>
                        </div>

                        <div class="col-md-6">
                            <label>Amount Paying Now</label>
                            <input type="number" step="0.01" min="0" name="amount_paid_now" id="modal_paid_now"
                                class="form-control" required>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Payment</button>
                </div>
            </div>
        </form>

    </div>
</div>

@include('footer')
<script>
function openInvoiceModal(id, store, name, mobile, category, total, advance) {
    const balance = parseFloat(total) - parseFloat(advance);

    document.getElementById('modal_invoice_id').value = id;
    document.getElementById('modal_name').value = name;
    document.getElementById('modal_mobile').value = mobile;
    document.getElementById('modal_store').value = store;
    document.getElementById('modal_category').value = category;
    document.getElementById('modal_total').value = total;
    document.getElementById('modal_advance').value = advance;
    document.getElementById('modal_balance').value = balance.toFixed(2);
    document.getElementById('modal_paid_now').value = '';

    const modal = new bootstrap.Modal(document.getElementById('invoicePaymentModal'));
    modal.show();
}
</script>

</script>