@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Customer Details Report')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@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">Customer Details 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">Customer Details 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 class="form-group">
                                            <label for="date">Customer</label>
                                            <select class="form-control select2" id="customer">
                                                <option value="all">All</option>
                                                @foreach($customer as $item)
                                                    <option value="{{$item->idCustomer}}">{{$item->Full_Name}}-{{$item->Contact_No}}</option>
                                                @endforeach
                                            </select>
                                        </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()">
                                    </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">Customer Details Report</h3>
                            </div>
                            <div class="card-body">
                                <table id="invoices" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Customer Name</th>
                                            <th>Date</th>
                                            <th>Total Amount</th>
                                            <th>Bill Discount</th>
                                            <th>Net Amount</th>
                                            <th>Total Cash</th>
                                            <th>Total Card</th>
                                            <th>Total Online</th>
                                            <th>Total Paid</th>
                                            <th>Credit</th>
                                            <th>Employee</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="10" class="text-center">No Customer Details</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </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>
        $(function() {
            // Initialize Select2 for the customer dropdown
            $('#customer').select2({
                theme: 'bootstrap4',
                placeholder: 'Select a customer',
                allowClear: true
            });

            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();
            let customer = $('#customer').val();

            console.log(customer);

            $.ajax({
                type: "POST",
                url: "/reports/daily",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    datefrom: datefrom,
                    dateto: dateto,
                    customer: customer
                },
                success: function(data) {
                    console.log(data);
                    let totalInvoiceAmount = 0;
                    let totalBillDiscount = 0;
                    let totalNetAmount = 0;
                    let totalCashAmount = 0;
                    let totalCardAmount = 0;
                    let totalOnlineAmount = 0;
                    let totalPaidAmount = 0;
                    let totalBalance = 0;

                    $('#invoices tbody').empty();
                    data.invoices.forEach((invoice, index) => {
                        let row = $('<tr data-id="' + invoice.idInvoice + '">');
                        row.append($('<td>').text(index + 1));
                        row.append($('<td>').text(invoice.Full_Name));
                        row.append($('<td>').text(invoice.Date_Time));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                                .Total_Amount)
                            .toFixed(2)));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                                .Bill_Discount)
                            .toFixed(2)));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                            .Net_Amount).toFixed(
                            2)));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                            .Cash_Paid).toFixed(
                            2)));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                            .Card_Paid).toFixed(
                            2)));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                                .Online_Paid)
                            .toFixed(2)));
                        row.append($('<td class="text-right">').text(parseFloat(invoice
                            .Total_Paid).toFixed(
                            2)));
                        row.append($('<td class="text-right">').text(parseFloat(-invoice
                            .Balance).toFixed(
                            2)));
                        row.append($('<td>').text(invoice.Name));

                        totalInvoiceAmount += parseFloat(invoice.Total_Amount) || 0;
                        totalBillDiscount += parseFloat(invoice.Bill_Discount) || 0;
                        totalNetAmount += parseFloat(invoice.Net_Amount) || 0;
                        totalCashAmount += parseFloat(invoice.totalCashAmount) || 0;
                        totalCardAmount += parseFloat(invoice.totalCardAmount) || 0;
                        totalOnlineAmount += parseFloat(invoice
                            .totalOnlineAmount) || 0;
                        totalPaidAmount += parseFloat(invoice.Total_Paid) || 0;
                        totalBalance += parseFloat(-invoice.Balance) || 0;

                        $('#invoices tbody').append(row);
                    });

                    let invoiceTotalsRow
                    if (data.invoices.length !== 0) {
                        invoiceTotalsRow = $('<tr>');
                        invoiceTotalsRow.append($('<td>').text(''));
                        invoiceTotalsRow.append($('<td>').text(''));
                        invoiceTotalsRow.append($('<td>').text(''));
                        invoiceTotalsRow.append($('<td class="text-right">').text(
                            totalInvoiceAmount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(
                            totalBillDiscount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(totalNetAmount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(
                            totalCashAmount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(
                            totalCardAmount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(
                            totalOnlineAmount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(
                            totalPaidAmount
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td class="text-right">').text(totalBalance
                            .toFixed(2)));
                        invoiceTotalsRow.append($('<td>'));
                    } else {
                        invoiceTotalsRow = $('<tr>');
                        invoiceTotalsRow.append($('<td colspan="10">').text('No Records'));
                    }

                    $('#invoices tbody').append(invoiceTotalsRow);

                    let totalExpenseAmount = 0;

                    $('#expenses tbody').empty();
                    data.expenses.forEach((expense, index) => {
                        let row = $('<tr data-id="' + expense.idExpenses + '">');
                        row.append($('<td>').text(index + 1));
                        row.append($('<td>').text(parseFloat(expense.Amount).toFixed(
                            2)));
                        row.append($('<td>').text(expense.Reason));
                        row.append($('<td>').text(expense.Name));

                        totalExpenseAmount += parseFloat(expense.Amount) || 0;

                        $('#expenses tbody').append(row);
                    });

                    let expenseTotalsRow
                    if (data.expenses.length !== 0) {
                        expenseTotalsRow = $('<tr>');
                        expenseTotalsRow.append($('<td colspan="1"></td>'));
                        expenseTotalsRow.append($('<td>').text(totalExpenseAmount.toFixed(2)));
                        expenseTotalsRow.append($('<td colspan="2">'));
                    } else {
                        expenseTotalsRow = $('<tr>');
                        expenseTotalsRow.append($('<td colspan="10">').text('No Records'));
                    }

                    $('#expenses tbody').append(expenseTotalsRow);
                }
            });
        }
    </script>
@endsection