@extends('layouts.app')
@section('title')
    INVENTORY REPORT
@endsection
@section('content')
    <div class="row gx-5">
        <div class="col-lg-6 col-sm-6 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-6 col-sm-6 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">
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0">
                        <label class="form-label" for="area">Area's</label>
                        <select id="area" class="form-select" style="width: 100% !important;" multiple>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0">
                        <label class="form-label" for="rack">Rack's</label>
                        <select id="rack" class="form-select" style="width: 100% !important;" multiple>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0">
                        <label class="form-label" for="level">Level's</label>
                        <select id="level" class="form-select" style="width: 100% !important;" multiple>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row gx-3 mb-3">
        <div class="col-12 d-flex justify-content-end">
            <button type="button" id="scanBtn"
                class="btn btn-primary me-2 d-flex justify-content-between align-items-center" data-bs-toggle="modal"
                data-bs-target="#scanModal">
                <span>Scan</span>
            </button>
            <button type="button" class="btn btn-info" id="export-btn">
                <i class="bi bi-download"></i> Download
            </button>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="scanModal" tabindex="-1" aria-labelledby="scanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scanModalLabel">Scan the Product QR Code</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="success-message"></div>
                    <!-- Computer Screen with Icons -->
                    <div class="computer-screen">
                        <div class="icon-container">
                            <!-- Camera Icon -->
                            <i class="fas fa-camera"></i>
                            <span>Camera</span>
                        </div>
                    </div>
                    <div id="reader" style="width: 100%;"></div>
                    <div id="result"></div>
                    <!-- Buttons for Camera and Scanner -->

                </div>
                <div class="modal-footer">
                    <button type="button" style="z-index:99;" class="btn btn-secondary"
                        data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </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="inventoryTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Qty in Stock</th>
                                    <th>Area</th>
                                    <th>Rack</th>
                                    <th>level</th>
                                    <th>Lot No</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>
    <script src="{{ asset('assets/js/html5-qrcode.min.js') }}"></script>
    <script>
        let inventoryTable;

        function Generate() {
            inventoryTable = $('#inventoryTable').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: '{{ route('inventory_report.generate') }}',
                    data: function(d) {
                        d.part_no = $('#part_no').val();
                        d.area = $('#area').val();
                        d.rack = $('#rack').val();
                        d.level = $('#level').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'part_no',
                        name: 'part_no'
                    },
                    {
                        data: 'part_name',
                        name: 'part_name'
                    },
                    {
                        data: 'unit',
                        name: 'unit'
                    },
                    {
                        data: 'used_qty',
                        name: 'used_qty'
                    },
                    {
                        data: 'area',
                        name: 'area'
                    },
                    {
                        data: 'rack',
                        name: 'rack'
                    },
                    {
                        data: 'level',
                        name: 'level'
                    },
                    {
                        data: 'lot_no',
                        name: 'lot_no'
                    }
                ],
                paging: true,
                pagingType: 'input',
            });
        }

        $('#part_no, #area, #rack, #level').on('change', function() {
            inventoryTable.ajax.reload();
        });

        function scanGenerate(decodedText) {

            var encodedText = JSON.stringify(decodedText);

            var cleanedText = encodedText
                .replace(/^"|"$/g, '')
                .replace(/\\n/g, '\n');

            var object = parseStringToObject(cleanedText);

            var product_id = object.product_id;
            var part_no = object.part_no || '';
            var part_name = object.part_name || '';

            var newOption = new Option(part_no, product_id, true, true);
            newOption.setAttribute('data-id', part_name);
            $('#part_no').append(newOption).trigger('change');
            $('#part_name').val(part_name);
            $('#scanModal').modal('hide');

        }

        function parseStringToObject(encodedText) {
            var lines = encodedText.split('\n');
            var obj = {};

            lines.forEach(line => {
                var [key, value] = line.split(':');
                if (key && value) {
                    obj[key.trim()] = value.trim();
                }
            });

            return obj;
        }

        function onScanSuccess(decodedText, decodedResult) {

            const messageElement = document.getElementById('success-message');
            messageElement.textContent = `Scan successful: ${decodedText}`;
            messageElement.style.color = 'green';
            messageElement.style.display = 'block';

            scanGenerate(decodedText);

            html5QrcodeScanner.clear();
            setTimeout(() => {
                messageElement.style.display = 'none';
            }, 1000);
        }

        var html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", {
                fps: 10,
                qrbox: 250
            });
        html5QrcodeScanner.render(onScanSuccess);

        $(document).ready(function() {
            Generate();

            $('#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);
            });

            $('#area').select2({
                ajax: {
                    url: '{{ route('area.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.name,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#rack').select2({
                ajax: {
                    url: '{{ route('area-rack.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.name,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#level').select2({
                ajax: {
                    url: '{{ route('area_level.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.name,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });
        });

        function exportToExcel() {
            $('#export-btn').prop('disabled', true);
            $.ajax({
                url: "{{ route('inventory_report.download') }}",
                type: 'GET',
                data: {
                    part_no: $('#part_no').val(),
                    area: $('#area').val(),
                    rack: $('#rack').val(),
                    level: $('#level').val()
                },
                success: function(response) {
                    let csv = [];

                    csv.push(
                        '"Sr No","Part No","Part Name","Unit","Qty in Stock","Area","Rack","Level","Lot No"'
                    );

                    response.forEach(function(item) {
                        let row = [
                            item['Sr No'],
                            item['Part No'],
                            item['Part Name'],
                            item['Unit'],
                            item['Qty in Stock'],
                            item['Area'],
                            item['Rack'],
                            item['Level'],
                            item['Lot No']
                        ];

                        let escapedRow = row.map(function(value) {
                            if (typeof value === 'string') {
                                return '"' + value.replace(/"/g, '""') + '"';
                            }
                            return value;
                        }).join(',');

                        csv.push(escapedRow);
                    });

                    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", "inventory.csv");

                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    $('#export-btn').prop('disabled', false);
                }
            });
        }

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