@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Out Stock Report')
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Invoice Report</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Invoice Report</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="date">Date From</label>
                                            <input type="date" class="form-control" id="date">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="date">Date To</label>
                                            <input type="date" class="form-control" id="date_2">
                                        </div>
                                        <input style="float: right" type="button" class="btn btn-danger" value="Search"
                                            onclick="getReport()">
                                        <input style="float: right; margin-right: 10px;" type="button" class="btn btn-success" value="Download Excel" onclick="exportReport()">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Invoice</h3>
                            </div>
                            <div class="card-body">
                                <table id="expenses" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Total Amount</th>
                                            <th>Bill Discount</th>
                                            <th>Net Amount</th>
                                            <th>Cash Paid</th>
                                            <th>Card Paid</th>
                                            <th>Online Paid</th>
                                            <th>Online Reference</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal -->
    <!-- Modal for item details -->
    <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="itemModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>Item Details</th>
                            <th>Rate</th>
                            <th>Qty</th>
                            <th>Total</th>
                            <th>Discount</th>
                            <th>Net Amount</th>
                        </tr>
                        </thead>
                        <tbody id="itemDetailsBody">
                        <!-- Dynamic content will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>




@endsection

@section('script')
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>


    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../plugins/jszip/jszip.min.js"></script>
    <script src="../plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.min.js"></script>

    <!-- AdminLTE for demo purposes -->
    <script src="../dist/js/demo.js"></script>
    <script src="../JS/validate.js"></script>
    <script src="../JS/invoice.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
    <script>
        
        $(function() {
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })

            const getTodayDate = () => {
                const currentDatetime = new Date();
                const offset = currentDatetime.getTimezoneOffset();
                const offsetMilliseconds = offset * 60 * 1000;
                const localDatetime = new Date(currentDatetime.getTime() - offsetMilliseconds);
                const formattedDate = localDatetime.toISOString().slice(0, 10);

                return formattedDate;
            }

            $('#date').val(getTodayDate());
            $('#date_2').val(getTodayDate());

            getReport();
        })

        function getReport() {
            let datefrom = $('#date').val();
            let dateto = $('#date_2').val();

            $.ajax({
                type: "POST",
                url: "/reports/invoice",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    datefrom: datefrom,
                    dateto: dateto
                },
                success: function(data) {
                    let tbody = $('#expenses tbody');
                    tbody.empty(); // Clear the table body

                    if (data.length > 0) {
                        data.forEach((item, index) => {
                            tbody.append(`
                <tr>
                    <td>${index + 1}</td>
                    <td>${item.Date_Time}</td>
                    <td>${item.Total_Amount}</td>
<td>${item.Bill_Discount}</td>
<td>${item.Net_Amount}</td>
<td>${item.Card_Paid}</td>
<td>${item.Cash_Paid}</td>
<td>${item.Online_Paid}</td>
<td>${item.Online_Reference ? item.Online_Reference : '-'}</td>
                    <td>
                        <button class="btn btn-info" onclick="showModal(${item.idInvoice})">View Items</button>
                    </td>
                </tr>
            `);
                        });
                    } else {
                        tbody.append('<tr><td colspan="4">No records found.</td></tr>');
                    }
                }

            });
        }

        function showModal(outstockId) {
            $.ajax({
                type: "GET",
                url: `/reports/invoice/${outstockId}/items`, // Adjust the URL according to your routing
                success: function(data) {
                    let tbody = $('#itemDetailsBody');
                    tbody.empty(); // Clear the previous items

                    data.forEach(item => {
                        tbody.append(`
                    <tr>
                        <td>${item.item_name}</td>
                        <td>${item.item_rate}</td>
                        <td>${item.Qty}</td>
                        <td>${parseFloat(item.Amount).toFixed(2)}</td>
                        <td>${item.Discount}</td>
                        <td>${parseFloat(item.Total_Amount).toFixed(2)}</td>
                    </tr>
                `);
                    });

                    $('#itemModal').modal('show'); // Show the modal
                }
            });
        }

        function exportReport() {
            const tbody = $('#expenses tbody');
            const data = [];

            // Get table data and prepare it for export
            tbody.find('tr').each(function () {
                const row = $(this);
                const rowData = {
                    Date: row.find('td').eq(1).text().trim(), // Date is in the second column
                    TotalAmount: parseFloat(row.find('td').eq(2).text().trim() || 0), // Total Amount
                    BillDiscount: parseFloat(row.find('td').eq(3).text().trim() || 0), // Bill Discount
                    NetAmount: parseFloat(row.find('td').eq(4).text().trim() || 0), // Net Amount
                    CashPaid: parseFloat(row.find('td').eq(5).text().trim() || 0), // Cash Paid
                    CardPaid: parseFloat(row.find('td').eq(6).text().trim() || 0), // Card Paid
                    OnlinePaid: parseFloat(row.find('td').eq(7).text().trim() || 0), // Online Paid
                    OnlineReference: row.find('td').eq(8).text().trim() || '-', // Online Reference
                };
                data.push(rowData);
            });

            // Calculate total amounts for each column
            const totals = {
                Date: 'Total',
                TotalAmount: data.reduce((sum, item) => sum + (item.TotalAmount || 0), 0).toFixed(2),
                BillDiscount: data.reduce((sum, item) => sum + (item.BillDiscount || 0), 0).toFixed(2),
                NetAmount: data.reduce((sum, item) => sum + (item.NetAmount || 0), 0).toFixed(2),
                CashPaid: data.reduce((sum, item) => sum + (item.CashPaid || 0), 0).toFixed(2),
                CardPaid: data.reduce((sum, item) => sum + (item.CardPaid || 0), 0).toFixed(2),
                OnlinePaid: data.reduce((sum, item) => sum + (item.OnlinePaid || 0), 0).toFixed(2),
                OnlineReference: '-', // Total row doesn't need a reference
            };

            data.push(totals); // Add totals row to the data array

            // Prepare the worksheet
            const worksheet = XLSX.utils.json_to_sheet(data);

            // Create a workbook and add the worksheet
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, "Out Stock Report");

            // Generate Excel file and trigger download
            XLSX.writeFile(workbook, "InvoiceReport.xlsx");
        }


    </script>
@endsection