@extends('layouts.app')
@section('title')
    STOCK CARD REPORT
@endsection
@section('content')
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />
    <div class="row gx-5">
        <div class="col-lg-4 col-md-4 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0">
                        <label class="form-label" for="abc12">Date Range</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-calendar4"></i>
                            </span>
                            <input type="text" id="abc12" class="form-control datepicker-range-iso-week-numbers">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0 pb-2">
                        <div class="form-group">
                            <label class="form-label" for="part_no">Part No</label>
                            <select class="form-select" id="part_no" style="width: 100% !important;">
                                <option value="" selected disabled>Select Part No</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0">
                        <label class="form-label" for="part_name">Part Name</label>
                        <input type="text" readonly class="form-control" id="part_name" placeholder="Part Name">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row gx-3 mb-3">
        <div class="col-12 d-flex justify-content-end">
            <button type="button" class="btn btn-info me-2" id="generate">
                <i class="bi bi-search"></i> Search
            </button>
            <button type="button" class="btn btn-info" id="export-btn">
                <i class="bi bi-download"></i> Download
            </button>
        </div>
    </div>
    <div class="row gx-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="myTable1">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Date</th>
                                    <th>Screen Name</th>
                                    <th>Ref No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Quantity</th>
                                    <th>Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Datatables -->
    <script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/input.js') }}"></script>
    <!-- Date Range JS -->
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        let inventoryTable = $('#myTable1').DataTable({
            columnDefs: [{
                    width: '10%',
                    targets: 0
                },
                {
                    width: '10%',
                    targets: -1
                }
            ],
            paging: true,
            pagingType: 'input'
        });


        $(document).ready(function() {
            $('#part_no').select2({
                placeholder: 'Select Part No',
                ajax: {
                    url: '{{ route('product.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.part_no,
                                    id: item.id,
                                    data: {
                                        id: item.part_name
                                    }
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#part_no').on('select2:select', function(e) {
                var selectedData = e.params.data;
                var part_name = selectedData.data.id;
                $('#part_name').val(part_name);
            });

            $(".datepicker-range-iso-week-numbers").daterangepicker({
                drops: "up",
                opens: "left",
                showWeekNumbers: true,
                showISOWeekNumbers: true,
                startDate: moment().startOf("hour"),
                endDate: moment().startOf("hour").add(32, "hour"),
                locale: {
                    format: "YYYY-MM-DD",
                },
            });
        });

        function getDateRange() {
            var datepicker = $(".datepicker-range-iso-week-numbers").data('daterangepicker');
            return {
                start_date: datepicker.startDate.format('YYYY-MM-DD'),
                end_date: datepicker.endDate.format('YYYY-MM-DD')
            };
        }

        $('#generate').on('click', function() {
            let product = $('#part_no').val();
            if (product != null) {
                let dates = getDateRange();
                let start_date = dates.start_date;
                let end_date = dates.end_date;
                $.ajax({
                    url: '{{ route('stock_card_report.generate') }}',
                    type: 'GET',
                    data: {
                        product: product,
                        start_date: start_date,
                        end_date: end_date
                    },
                    success: function(response) {
                        inventoryTable.clear().draw(false);
                        let index = 1;
                        let balance = response.balance ?? 0;

                        response.all_data.forEach(element => {
                            var qty = element.qty ? element.qty : 0;
                            if (element.sign == 'Add') {
                                symbol = "+";
                                balance += parseFloat(qty);
                            } else if (element.sign == 'Subtract' && element.screen_name !=
                                'Stock Adjustment') {
                                symbol = "-";
                                balance -= parseFloat(qty);
                            } else {
                                symbol = "";
                                balance += parseFloat(qty);
                            }
                            inventoryTable.row.add([
                                index,
                                element.date,
                                element.screen_name,
                                element.ref_no ?? '-',
                                element.part_no,
                                element.part_name,
                                element.unit,
                                `${symbol}${element.qty == null ? 0 : element.qty}`,
                                balance
                            ])
                            index++;
                        });
                        inventoryTable.draw(false);
                    }
                });
            } else {
                alert('Part No Can`t be Empty!');
        }
    });

    function exportToExcel() {
        inventoryTable.destroy();
        const table = document.getElementById("myTable1");
        const rows = table.querySelectorAll("tr");
        let csv = [];
        for (let i = 0; i < rows.length; i++) {
            const cells = rows[i].querySelectorAll("td, th");
            let row = [];
            for (let j = 0; j < cells.length; j++) {
                row.push('"' + cells[j].innerText.replace(/"/g, '""') + '"');
            }
            csv.push(row.join(","));
        }
        const csvContent = "data:text/csv;charset=utf-8," + csv.join("\n");
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "stock-card-report.csv");
        document.body.appendChild(link);
        link.click();
        inventoryTable = $('#myTable1').DataTable();
    }

    document.getElementById("export-btn").addEventListener("click", exportToExcel);
    </script>
@endsection