@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')


@section('content')
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary" wire:init="loadPosts">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Generate Barcode List</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.products.create') }}">
                            <button class="btn btn-sm btn-block btn-flat btn-light rounded-0 shadow "><i
                                    class="fa fa-plus"></i></button>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form class="" id="filter" method="post" action="{{ route('admin.products.generate') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-1">
                                <x-admin-input type="date" name="fromDate" id="from-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-1">
                                <x-admin-input type="date" name="toDate" id="to-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-2">
                                <x-admin-input type="select" name="type" id="type-select">
                                    <option value="1">Purchase Bill</option>
                                    <option value="2">Opening Stock</option>
                                    <option value="3">Available Stock</option>
                                </x-admin-input>
                            </div>

                            {{-- Hidden by default --}}
                            <div class="col-md-2 bill-fields" style="display: none;">
                                <x-admin-input type="text" name="bill_number" id="bill_number"
                                    placeholder="Bill No."></x-admin-input>
                            </div>
                            <div class="col-md-2 bill-fields" style="display: none;">
                                <x-admin-input type="text" name="product_name" id="product_name"
                                    placeholder="Product Name"></x-admin-input>
                            </div>
                            <div class="col-md-2 bill-fields" style="display: none;">
                                <x-admin-input type="text" name="barcode" id="barcode"
                                    placeholder="Barcode"></x-admin-input>
                            </div>


                            <div class="col-md-2">
                                <button class="btn btn-success">OK</button>
                                <button type="button" onclick="document.getElementById('print-form').submit()"
                                    class="btn btn-primary">Print</button>
                                <button type="button" onclick="document.getElementById('s-print-form').submit()"
                                    class="btn btn-primary">S Print</button>
                            </div>
                        </div>
                    </form>
                    <form id="print-form" class="d-none" method="post" action="{{ route('admin.products.print') }}">
                        @csrf
                        <textarea class="d-none" name="print_data" id="print-data">[]</textarea>
                    </form>
                    <form id="s-print-form" class="d-none" method="post" action="{{ route('admin.products.sprint') }}">
                        @csrf
                        <textarea class="d-none" name="print_data" id="s-print-data">[]</textarea>
                    </form>
                    <div class="table-responsive mt-1">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Product Name</th>
                                    <th>Barcode</th>
                                    <th>Qty</th>
                                    <th>Print Qty</th>
                                    <th>Print Alt Qty</th>
                                    <th>Sale Price</th>
                                    <th>Mrp</th>
                                    <th>Cost</th>
                                    <th>N Cost</th>
                                </tr>
                            </thead>
                            <tbody id="table-list">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        (function($) {
            let myList = [];
            let originalList = []; // To store the original unfiltered list

            $(function() {
                const billFields = $('.bill-fields');

                // 🔁 Toggle visibility on load
                toggleBillFields();

                // 🔁 Toggle visibility on change
                $('#type-select').on('change', function() {
                    toggleBillFields();
                });

                function toggleBillFields(force = false) {
                    const selectedType = $('#type-select').val();
                    if (selectedType === "1") {
                        billFields.show();
                    } else if (selectedType === "2") {
                        billFields.show();
                    } else if (selectedType === "3") {
                        billFields.show();
                    } else {
                        if (force) {
                            $('.bill-fields input').val(''); // Clear input fields
                        }
                        billFields.hide();
                    }
                }

                // ✅ AJAX form submit
                $('#filter').on('submit', function(e) {
                    e.preventDefault();

                    // 👇 Ensure fields are toggled based on current type

                    let url = $(this).attr('action');
                    const formdata = new FormData(this);

                    $.ajax({
                        url: url,
                        type: 'post',
                        contentType: false,
                        processData: false,
                        data: formdata,
                    }).then(function(res) {
                        return JSON.parse(res);
                    }).done(function(json) {
                        myList = [];
                        originalList = []; // Reset original list

                        let Trow = '';
                        json.forEach(function(row, index) {
                            const item = {
                                checkbox: false,
                                product_id: row.product_id || '',
                                barcode: row.barcode || '',
                                product_name: row.product_name || '',
                                mrp: row.mrp || 0,
                                sale_price: row.sale_price || 0,
                                qty: row.qty || 0,
                                printqty: row.qty || 0,
                                printaltqty: row.alternate_qty || 0,
                                date: row.date || '',
                                bill_no: row.bill_no ||
                                    '', // Ensure bill_no is always a string
                                cost_alfa: row.cost_alfa || 0,
                                gross_amount: row.gross_amount || 0,
                                modal_bill: row.modal_bill || '',
                                modal_date: row.modal_date || '',
                                mechanic_pricing_desc: row.mechanic_pricing_desc ||
                                    '',
                                b2b_pricing_desc: row.b2b_pricing_desc || '',
                                size: row.size || ''
                            };

                            myList.push(item);
                            originalList.push(item); // Store in original list

                            Trow += `<tr>
                        <td>
                            <input data-index="${index}" type="checkbox" class="my-checkbox" id="my-class-${index}" value="${row.product_id || ''}">
                        </td>
                        <td>${row.product_name || ''}</td>
                        <td>${row.barcode || ''}</td>
                        <td>${row.qty || 0}</td>
                        <td>
                            <input data-index="${index}" type="number" value="${Number(row.qty || 0).toFixed(0)}" id="print-qty-${index}" class="form-control-sm print-qty">
                        </td>
                        <td>
                            <input data-index="${index}" type="number" value="${Number(row.alternate_qty || 0).toFixed(0)}" id="print-alt-qty-${index}" class="form-control-sm print-alt-qty">
                        </td>
                        <td>${row.sale_price || 0}</td>
                        <td>
                            <input data-index="${index}" type="number" value="${Number(row.mrp || 0).toFixed(2)}" id="mrp-${index}" class="form-control-sm print-mrp">
                        </td>
                        <td>${row.cost_alfa || 0}</td>
                        <td>${row.gross_amount || 0}</td>
                    </tr>`;
                        });

                        $('#table-list').html(Trow);
                        $('#print-data').html(JSON.stringify(myList));
                        $('#s-print-data').html(JSON.stringify(myList));

                        // Bind event handlers for checkboxes and inputs
                        bindEventHandlers();
                    });
                });

                // Dynamic filtering for bill number and product name
                $('#bill_number, #product_name , #barcode').on('keyup', function() {
                    const billNumber = ($('#bill_number').val() || '').toLowerCase().trim();
                    const productName = ($('#product_name').val() || '').toLowerCase().trim();
                    const barcode = ($('#barcode').val() || '').toLowerCase().trim();

                    myList = originalList.filter(item => {
                        const billNo = (item.bill_no || '').toString().toLowerCase();
                        const modalBill = (item.modal_bill || '').toString().toLowerCase();
                        const prodName = (item.product_name || '').toLowerCase();
                        const itemBarcode = (item.barcode || '').toLowerCase();

                        // ✅ Match either bill_no or modal_bill
                        const matchesBillOrModal = billNumber ?
                            billNo.includes(billNumber) || modalBill.includes(billNumber) :
                            true;

                        const matchesProduct = productName ?
                            prodName.includes(productName) :
                            true;

                        const matchesBarcode = barcode ?
                            itemBarcode.includes(barcode) :
                            true;

                        return matchesBillOrModal && matchesProduct && matchesBarcode;
                    });

                    renderTable();
                });


                function renderTable() {
                    let Trow = '';
                    myList.forEach(function(row, index) {
                        Trow += `<tr>
                    <td>
                        <input data-index="${index}" type="checkbox" class="my-checkbox" id="my-class-${index}" value="${row.product_id || ''}" ${row.checkbox ? 'checked' : ''}>
                    </td>
                    <td>${row.product_name || ''}</td>
                    <td>${row.barcode || ''}</td>
                    <td>${row.qty || 0}</td>
                    <td>
                        <input data-index="${index}" type="number" value="${Number(row.printqty || 0).toFixed(0)}" id="print-qty-${index}" class="form-control-sm print-qty">
                    </td>
                    <td>
                        <input data-index="${index}" type="number" value="${Number(row.printaltqty || 0).toFixed(0)}" id="print-alt-qty-${index}" class="form-control-sm print-alt-qty">
                    </td>
                    <td>${row.sale_price || 0}</td>
                    <td>
                        <input data-index="${index}" type="number" value="${Number(row.mrp || 0).toFixed(2)}" id="mrp-${index}" class="form-control-sm print-mrp">
                    </td>
                    <td>${row.cost_alfa || 0}</td>
                    <td>${row.gross_amount || 0}</td>
                </tr>`;
                    });

                    $('#table-list').html(Trow);
                    $('#print-data').html(JSON.stringify(myList.filter(item => item.checkbox)));
                    $('#s-print-data').html(JSON.stringify(myList.filter(item => item.checkbox)));

                    // Re-bind event handlers after re-rendering
                    bindEventHandlers();
                }

                function bindEventHandlers() {
                    // Checkbox change handler
                    $('.my-checkbox').on('change', function() {
                        let index = $(this).attr('data-index');
                        let isChecked = $(this).is(':checked');

                        myList[index].checkbox = isChecked;

                        if (isChecked) {
                            let printQtyVal = $('.print-qty[data-index="' + index + '"]').val();
                            let printAltQtyVal = $('.print-alt-qty[data-index="' + index + '"]').val();
                            myList[index].printqty = printQtyVal;
                            myList[index].printaltqty = printAltQtyVal;
                        } else {
                            myList[index].printqty = '';
                            myList[index].printaltqty = '';
                        }

                        let selectedList = myList.filter(item => item.checkbox);
                        $('#print-data').html(JSON.stringify(selectedList));
                        $('#s-print-data').html(JSON.stringify(selectedList));
                    });

                    // MRP change handler
                    $('.print-mrp').on('keyup change', function() {
                        let index = $(this).attr('data-index');
                        let value = $(this).val();
                        myList[index].mrp = value;

                        let selectedList = myList.filter(item => item.checkbox);
                        $('#print-data').html(JSON.stringify(selectedList));
                        $('#s-print-data').html(JSON.stringify(selectedList));
                    });

                    // Print Qty change handler
                    $('.print-qty').on('keyup', function() {
                        let index = $(this).attr('data-index');
                        let value = $(this).val();
                        myList[index].printqty = value;

                        let selectedList = myList.filter(item => item.checkbox);
                        $('#print-data').html(JSON.stringify(selectedList));
                    });

                    // Print Alt Qty change handler
                    $('.print-alt-qty').on('keyup', function() {
                        let index = $(this).attr('data-index');
                        let value = $(this).val();
                        myList[index].printaltqty = value;

                        let selectedList = myList.filter(item => item.checkbox);
                        $('#s-print-data').html(JSON.stringify(selectedList));
                    });
                }
            });
        })(jQuery);
    </script>
@endsection