@extends('layouts.horizontal', ['title' => 'Batches', 'topbarTitle' => 'Product Batches', 'nonav' => true])

@section('css')
@vite(['node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css',
'node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css',
'node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css',
'node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css',
'node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css',
'node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css',])
@endsection

@section('content')

<style>
    .page-container {
        max-width: 98% !important;
        margin: 0 auto;
    }
    tr.strike-through > td {color:red;} 
</style>
<div class="batchesPage container-fullwidth">
    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h2 class="mb-0">Product Batches</h2>
                <div class="page-title-right">
                    @if($product->product_type == "Compiled Kit")
                    <button type="button" class="btn btn-outline-success me-3" id="addBatchButton" onclick="openKitBatchEditModal()">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="addBatchSpinner"></span> 
                        <iconify-icon icon="line-md:uploading-loop" class="me-1" width="18"></iconify-icon>
                        Add Inventory</button>
                    @else
                    <button type="button" class="btn btn-outline-success me-3" id="addBatchButton" onclick="openAddBatchModal()">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="addBatchSpinner"></span> Add Batch</button>
                    @endif

                    {{ session('user_role') }}
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
     <div class="row {{ session('user_role') != 'Super User' ? 'd-none' : '' }}">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="card-title"><h3>{{ $product->product }}</h3></div>
                    <form id="filterform" method="GET" action="">
                        <div class="row">                            
                            <div class="col-md-3">                                
                                <p class="m-0 p-0"><label class="form-label" for="branch_id">Product ID:</label> {{ $product->id_business_products }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="store_id">Product:</label> {{ $product->product }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="brand_id">Brand:</label> {{ $product->business_brand_name }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="category_id">Category:</label> {{ $product->category }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="sku">SKU:</label> {{ $product->sku }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="store_id">BarCode:</label> {{ $product->barcode_product }}</p>
                                <p class="m-0 p-0">
                                <select id="store_id" name="store_id" class="form-select form-select-sm" onchange="this.form.submit()">  
                                    <option value="">-- All Stores --</option>                                  
                                    @foreach($stores as $store)
                                        <option value="{{ $store->id_business_stores }}" @if($store->id_business_stores == $store_id) selected @endif>{{ $store->business_store }}</option>
                                    @endforeach
                                </select>
                                </p>
                            </div>
                            <div class="col-md-3">
                                <p class="m-0 p-0"><label class="form-label" for="branch_id">Qty. Per Unit:</label> {{ $product->qty_per_unit. ' '.$product->measure_unit }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="store_id">Unit Type:</label> {{ $product->unit_type }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="brand_id">Retail Price:</label> {{ $product->price }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="category_id">Purchase Price:</label> {{ $product->purchase_price }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="sku">Reorder Level:</label> {{ $product->product_threshold }}</p>
                                <p class="m-0 p-0"><label class="form-label" for="store_id">Use:</label> {!! $product->professional == 'y' ? '<span class="badge bg-success" >Professional</span>' : '<span class="badge bg-info">Retail</span>' !!}</p>
                                
                            </div>    
                            <div class="col-md-6">
                                <!- - Reserved for future use - ->
                                @if($product->product_type == "Compiled Kit")
                                    <p class="m-0 p-0"><label class="form-label" for="store_id">Kit Components:</label> 
                                        <table class="table table-bordered fs-12">
                                            <thead>
                                                <tr>
                                                    <th>Component Name</th>
                                                    <th>Quantity</th>                                                    
                                                    <th>Measure Qty</th>
                                                    <td>Measure Unit</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($product->kit_components as $component)
                                                <tr>
                                                    <td>{{ $component->component_name }}</td>
                                                    <td>{{ $component->kit_qty }}</td>
                                                    <td>{{ $component->kit_measure_qty }}</td>                                                    
                                                    <td>{{ $component->measure_unit }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </p>
                                @endif
                            </div> 
                                                   
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end row-->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="productBatchesTable" class="table table-bordered dt-responsive fs-12 w-100">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Batch Number</th>
                                <th>Store</th>
                                <th>Batch Created</th>
                                <th>Expiry Date</th>
                                <th>Expires In</th>
                                <th>Added Manually</th>
                                <th>Purchased Qty</th>
                                <th>Transfer In</th>
                                <th>Transfer Out</th>
                                <th>Sold</th>
                                <th>Used</th>
                                <th>Returned</th>
                                <th>Remaining Qty</th>
                                <th>In Measure</th>
                                <th>Cost Price</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($batches as $batch)
                            <tr>
                                <td>{{ $batch->id_batch }}</td>
                                <td>{{ $batch->batch_number }}</td>
                                <td store_id="{{ $batch->store_id }}">{{ $batch->business_store }}</td>
                                <td>{{ $batch->bdate }}</td>
                                <td>{{ $batch->batch_expiry }}</td>
                                <td>
                                    @php
                                        $expiryDate = \Carbon\Carbon::parse($batch->expiry_date);
                                        $currentDate = \Carbon\Carbon::now();
                                        $daysToExpire = round($currentDate->diffInDays($expiryDate, false));
                                    @endphp
                                    @if($daysToExpire < 0)
                                        Expired {{ abs($daysToExpire) }} days ago
                                    @else
                                        {{ $daysToExpire }} days
                                    @endif
                                </td>
                                <td>{{ $batch->manualQty ?? 0 }}</td>    
                                <td>{{ $batch->purchasedQty ?? 0 }}</td>
                                <td>{{ $batch->transfer_in ?? 0 }}</td>
                                <td>{{ $batch->transfer_out ?? 0 }}</td>
                                <td>{{ $batch->sold ?? 0 }}</td>
                                <td>{{ $batch->used ?? 0 }}</td>
                                <td>{{ $batch->returned ?? 0 }}</td>
                                <td>{{ $batch->total_stock ?? 0 }}</td>
                                <td>{{ $batch->total_stock * $product->qty_per_unit }} {{ $product->measure_unit }}</td>
                                <td>{{ $batch->batch_amount ? number_format($batch->batch_amount, 2) : '0.00' }}</td>
                                <td>
                                    <button onclick="openEditBatchModal({{ json_encode($batch) }})" data-bs-tooltip  title="Edit" class="btn btn-sm btn-ghost-info rounded-circle flex-shrink-0 btn-icon view-store-stock-data">
                                        <iconify-icon icon="line-md:pencil" style= "cursor:pointer;" class="fs-18"></iconify-icon>
                                    </button>
                                    <button data-bs-tooltip title="Transfer Stock" data-bs-toggle="modal" data-bs-target="#transferStockModal" class="btn btn-sm btn-ghost-primary rounded-circle flex-shrink-0 btn-icon transfer-stock-button" data-dt-remaining="{{ $batch->total_stock ?? 0 }}" data-dt-productID="{{ $product->id_business_products }}" data-dt-productname = "{{ $product->product }}" data-dt-batchID="{{ $batch->id_batch }}" data-dt-storeFrom="{{ $batch->store_id }}">
                                        <iconify-icon icon="bitcoin-icons:transfer-outline" style= "cursor:pointer;" class="fs-20"></iconify-icon>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="6" class="text-right">Total:</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div> <!-- end row-->
</div>
@include('modals.transfer_note')

{{-- Batch Edit Modal --}}

<div class="modal fade" id="batchEditModal" tabindex="-1" aria-labelledby="batchEditModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="batchEditForm" class="needs-validation" novalidate>
                <div class="modal-header">
                    <h5 class="modal-title" id="batchEditModalLabel">Edit Batch</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    
                    <input type="hidden" id="id_batch" name="id_batch">
                    <input type="hidden" id="id_product" name="product_id" value="{{ $product->id_business_products }}">
                    <input type="hidden" id="remaining_quantity" name="remaining_quantity" value="">

                    <div class="row mb-3">
                        <div class="col-6">
                            <label for="product" class="form-label">Product</label>
                            <input type="text" class="form-control" id="product" name="product" value="{{ $product->product }}" disabled>
                        </div>
                        <div class="col-6">
                            <label for="batch_date" class="form-label">Batch Date</label>
                            <input type="date" class="form-control" id="batch_date" name="batch_date" disabled>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            <label for="batch_number" class="form-label">Batch Number</label>
                            <input type="text" class="form-control" id="batch_number" name="batch_number"  required>
                        </div>
                        <div class="col-6">
                            <label for="batch_expiry" class="form-label">Expiry Date</label>
                            <input type="date" class="form-control" id="batch_expiry" name="expiry_date" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            <label for="batch_amount" class="form-label">Cost Price</label>
                            <input onkeyup="$('#addPrice').val(this.value)" type="number" step="0.01" class="form-control" id="batch_amount" name="batch_amount" required>
                        </div>
                        <div class="col-6">
                            <label for="store_id" class="form-label">Store</label>
                            <select class="form-select" id="store_id" name="store_id" required>
                                @foreach($stores as $store)
                                    <option value="{{ $store->id_business_stores }}">{{ $store->business_store }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            @if(session('user_role') == 'Super User' || session('user_role') == 'Super Admin')
                            <label for="batch_hidden" class="form-label">Batch Hidden</label>
                            <select type="number" class="form-select" id="batch_hidden" name="batch_hidden">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                            @else
                            <input type="hidden" id="batch_hidden" name="batch_hidden" value="No">
                            <p class="text-muted">Expiry Date is Mandatory</p>
                            @endif
                        </div>                        
                    </div>
                    <hr>
                    <div class="row mb-3">
                        <div class="col-2">
                            <label for="manualQty" class="form-label">Add</label>
                            <input type="number" step="1" class="form-control form-number" id="manualQty" name="manualQty">
                        </div>
                        <div class="col-2">
                            <label for="addPrice" class="form-label">Cost</label>
                            <input type="number" class="form-control" id="addPrice" name="addPrice">
                        </div>
                        <div class="col-6">
                            <label for="notes" class="form-label">Notes</label>
                            <input type="text" class="form-control" id="notes" name="notes">
                        </div>
                        <div class="col-2 d-flex align-items-end">
                            <button type="button" onclick="addBatchStock()" class="btn btn-sm btn-outline-dark btn-icon rounded-circle flex-shrink-0">
                                <iconify-icon icon="line-md:arrow-down" class="fs-22 fw-bold"></iconify-icon>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-bordered fs-13">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Added Qty</th>
                                        <th>Cost Price</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody id="batchAddManually">
                                    <!-- rows will be appended here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" onclick="saveBatchChanges()" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- End Batch Edit Modal --}}
<div class="modal fade" id="batchKitEditModal" tabindex="-1" aria-labelledby="batchKitEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="batchKitEditForm" class="needs-validation" novalidate>
                <div class="modal-header">
                    <h5 class="modal-title" id="batchKitEditModalLabel">Edit Kit Batch</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-4">
                            <label for="kitId" class="form-label">Kit ID</label>
                            <input type="text" class="form-control" id="kitId" name="id_business_products" value="{{ $product->id_business_products }}" readonly>
                        </div>
                        <div class="col-4">
                            <label for="kitName" class="form-label">Kit Name</label>
                            <input type="text" class="form-control" id="kitName" name="product" value="{{ $product->product }}" disabled>
                        </div>
                        <div class="col-4">
                            <label for="kitBatchDate" class="form-label">Batch Date</label>
                            <input type="date" class="form-control" id="kitBatchDate" name="batch_date" value="{{ date('Y-m-d') }}" disabled>
                        </div>
                        
                    </div>
                    <div class="row mb-3">
                        <div class="col-3">
                            <label for="kitBatchNumber" class="form-label">Batch Number</label>
                            <input type="text" class="form-control" id="kitBatchNumber" name="batch_number" required>
                        </div>
                        <div class="col-3">
                            <label for="kitBatchExpiry" class="form-label">Expiry Date</label>
                            <input type="date" class="form-control" id="kitBatchExpiry" name="expiry_date" required>
                        </div>
                        <div class="col-3">
                            <label for="kitStoreId" class="form-label">Store</label>
                            <select class="form-select" id="kitStoreId" name="store_id" required>
                                @foreach($stores as $store)
                                    <option value="{{ $store->id_business_stores }}">{{ $store->business_store }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <label for="kitBatchQty" class="form-label">Batch Qty</label>
                            <input onkeyup="calculateKitComponentConsumption()" type="number" step="0.01" class="form-control" id="kitBatchQty" name="batch_qty" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12">
                            <h5>Kit Components Consumption against Batch</h5>
                            <table class="table table-bordered fs-13">
                                <thead>
                                    <tr>
                                        <th>Component Name</th>
                                        <th>Quantity per Kit</th>
                                        <th>Measure Qty per Kit</th>
                                        <th>Measure Unit</th>
                                        <th>Total Consumption</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($product->kit_components as $component)
                                    <tr>
                                        <td data-component-id="{{ $component->business_product_id }}">{{ $component->component_name }}</td>
                                        <td>{{ $component->kit_qty }}</td>
                                        <td>{{ $component->kit_measure_qty }}</td>
                                        <td>{{ $component->measure_unit }}</td>
                                        <td class="component-consumption"></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="saveKitBatchChanges()" id="saveKitBatchBtn" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- Batch Kit Edit Modal --}}

@endsection
@section('scripts')
@vite(['resources/js/modals/transfer_note.js'])
<script>
    let baseURL = "{{ config('constants.BASE_URL') }}";
    $(document).ready(function() {
        var table = $('#productBatchesTable').DataTable({
            scrollX: true,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            order: [[ 0, "desc" ]],
            responsive: false,
            stateSave: true,
            paging:true,
            layout: {
                topStart: 'buttons',
                topEnd: 'search',
                bottomStart: 'info'
            },
            buttons: [
                { extend: "copy",  className: "btn btn-sm btn-soft-primary" },
                { extend: "csv",   className: "btn btn-sm btn-soft-primary" },
                { extend: "print", className: "btn btn-sm btn-soft-primary" },
                { extend: "pdf", className: "btn btn-sm btn-soft-primary" }
            ],
            "rowCallback": function(row, data, displayNum, displayIndex, dataIndex) {
                // Apply strike-through style if batch is expired
                var expiryDate = data[5]; // Assuming expiry date is in the 5th column (index 4)
                console.log(expiryDate);
                if (expiryDate.includes("Expired")) {
                    $(row).addClass('strike-through');
                }
                
            },
            "footerCallback": function ( row, data, start, end, display ) {
                // add totals in the footer
                var api = this.api();
                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };
                // Total over all pages
                totalManual = api
                    .column( 6 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalPurchased = api
                    .column( 7 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalTransferIn = api
                    .column( 8 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalTransferOut = api
                    .column( 9 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalSold = api
                    .column( 10 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalUsed = api
                    .column( 11 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalReturned = api
                    .column( 12 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                totalRemaining = api
                    .column( 13 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                // Update footer
                $( api.column( 6 ).footer() ).html(totalManual);
                $( api.column( 7 ).footer() ).html(totalPurchased);
                $( api.column( 8 ).footer() ).html(totalTransferIn);
                $( api.column( 9 ).footer() ).html(totalTransferOut);
                $( api.column( 10 ).footer() ).html(totalSold);
                $( api.column( 11 ).footer() ).html(totalUsed);
                $( api.column( 12 ).footer() ).html(totalReturned);
                $( api.column( 13 ).footer() ).html(totalRemaining);
            }
        });

        //initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-tooltip]'));
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl)
        });

    });

    function openEditBatchModal(batchData) {
        //console.log(batchData);
        $('#id_batch').val(batchData.id_batch);
        $("#store_id").val(batchData.store_id);
        $('#batch_date').val(batchData.batch_date);
        $('#batch_number').val(batchData.batch_number);
        $('#batch_expiry').val(batchData.expiry_date);
        $('#batch_amount').val(batchData.batch_amount);
        $("#addPrice").val(batchData.batch_amount);
        $("#manualQty").val('1');
        $("#remaining_quantity").val(batchData.total_stock);
        
        $('#batch_hidden').val(batchData.batch_hidden);
        // Clear previous manually added rows
        $('#batchAddManually').empty();

        // make batch number field readonly
        $('#batch_number').prop('readonly', true);

        // Show the modal
        let batchEditModal = new bootstrap.Modal(document.getElementById('batchEditModal'));
        batchEditModal.show();
    }

    function addBatchStock(){
        let date = $('#batch_date').val();
        let qty = $('#manualQty').val();
        let price = $('#addPrice').val();
        let notes = $('#notes').val();

        if(qty && price){
            let newRow = `<tr>
                <td>${date}</td>
                <td>${qty}</td>
                <td>${price}</td>
                <td>${notes}</td>
            </tr>`;
            $('#batchAddManually').append(newRow);

            // Clear input fields
            $('#manualQty').val('');
            $('#addPrice').val('');
            $('#notes').val('');
        } else {
            alert('Please enter both quantity and cost price.');
        }
    }

    function saveBatchChanges(){
        event.preventDefault();

        var remainingQty = parseInt($('#remaining_quantity').val());
        var totalAddedQty = 0;
        $('#batchAddManually tr').each(function() {
            let adjustmentQty = parseInt($(this).find('td:eq(1)').text());
            totalAddedQty += adjustmentQty;
        });
        if(remainingQty + totalAddedQty < 0){
            toastr.error('The total added quantity cannot reduce the remaining quantity below zero.');
            return;
        }


        if (!$('#batchEditForm')[0].checkValidity()) {
            $('#batchEditForm')[0].reportValidity();
            return;
        }

        let formData = $('#batchEditForm').serialize();
        //get adjustments from the table
        let adjustments = [];
        $('#batchAddManually tr').each(function() {
            let adjustmentQty = $(this).find('td:eq(1)').text();
            let adjustmentDate = $(this).find('td:eq(0)').text();
            let adjustmentReason = $(this).find('td:eq(3)').text();
            adjustments.push({
                adjustment_qty: adjustmentQty,
                adjustment_date: adjustmentDate,
                adjustment_reason: adjustmentReason
            });
        });
        formData += '&adjustments=' + JSON.stringify(adjustments);
        document.getElementById('addBatchButton').disabled = true;
        document.getElementById('addBatchSpinner').classList.remove('d-none');

        $.ajax({
            url: '{{ route("products.save_product_batch") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(response) {
                document.getElementById('addBatchButton').disabled = false;
                document.getElementById('addBatchSpinner').classList.add('d-none');
                if(response.success){
                   toastr.success(response.message);
                   location.reload();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr, status, error) {
                document.getElementById('addBatchButton').disabled = false;
                document.getElementById('addBatchSpinner').classList.add('d-none');
                toastr.error('An error occurred while saving batch changes.');
            }
        });

    }

    openAddBatchModal = function(){
        
        // Clear previous values
        //$('#batchEditForm')[0].reset();
        $('#batch_number').prop('readonly', false);

        // Show the modal
        let batchEditModal = new bootstrap.Modal(document.getElementById('batchEditModal'));
        batchEditModal.show();
    }

    document.getElementById('batchEditModal').addEventListener('hidden.bs.modal', function (event) {
        // Clear form fields when modal is closed
        // Clear previous values
        //$('#batchEditForm')[0].reset();
        $('#id_batch').val('');        
        $('#batch_number').val('');
        $('#batch_expiry').val('');
        $('#batch_amount').val('');
        $('#store_id').val('');
        $('#batch_hidden').val('No');
        $('#manualQty').val('1');
        $('#addPrice').val('');
        $('#notes').val('');

        $('#batchAddManually').empty();
        $('#batch_date').val(new Date().toISOString().split('T')[0]); // Set the batch date to now

    });
    
    function calculateKitComponentConsumption(){
        let batchQty = parseFloat($('#kitBatchQty').val());

        if(isNaN(batchQty) || batchQty <= 0){
            parseFloat($('#kitBatchQty').val('1'));
            batchQty = 1;
        }

        $('#batchKitEditForm tbody tr').each(function() {
            let qtyPerKit = parseFloat($(this).find('td:eq(2)').text());
            let totalConsumption = batchQty * qtyPerKit;
            $(this).find('td.component-consumption').text(totalConsumption.toFixed(2));
        });
    }

    function openKitBatchEditModal(){
        // Clear previous values
        $('#batchKitEditForm')[0].reset();
        $('#kitBatchDate').val(new Date().toISOString().split('T')[0]); // Set the batch date to now

        //Get max batch number from the table and increment by 1
        let maxBatchNumber = 0;
        $('#productBatchesTable tbody tr').each(function() {
            let batchNumber = parseInt($(this).find('td:eq(1)').text());
            if(batchNumber > maxBatchNumber){
                maxBatchNumber = batchNumber;
            }
        });

        $('#kitBatchNumber').val(maxBatchNumber + 1);
        $('#kitBatchQty').val('1');
        calculateKitComponentConsumption();

        // Show the modal
        let batchKitEditModal = new bootstrap.Modal(document.getElementById('batchKitEditModal'));
        batchKitEditModal.show();
    }


    function saveKitBatchChanges(){
        event.preventDefault();

        if (!$('#batchKitEditForm')[0].checkValidity()) {
            $('#batchKitEditForm')[0].reportValidity();
            return;
        }

        let formData = $('#batchKitEditForm').serialize();

        //get kit components consumption from the table
        let components = [];
        $('#batchKitEditForm tbody tr').each(function() {
            let componentName = $(this).find('td:eq(0)').text();
            let qtyPerKit = $(this).find('td:eq(1)').text();
            let measureQtyPerKit = $(this).find('td:eq(2)').text();
            let measureUnit = $(this).find('td:eq(3)').text();
            let totalConsumption = $(this).find('td:eq(4)').text();
            components.push({
                component_id: $(this).find('td:eq(0)').data('component-id'),
                component_name: componentName,
                qty_per_kit: qtyPerKit,
                measure_qty_per_kit: measureQtyPerKit,
                measure_unit: measureUnit,
                total_consumption: totalConsumption
            });
        });

        formData += '&components=' + encodeURIComponent(JSON.stringify(components));

        document.getElementById('addBatchButton').disabled = true;
        document.getElementById('addBatchSpinner').classList.remove('d-none');

        $.ajax({
            url: '{{ route("dispatch.save_kit_batch") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(response) {
                document.getElementById('addBatchButton').disabled = false;
                document.getElementById('addBatchSpinner').classList.add('d-none');
                if(response.success){
                   toastr.success(response.message);
                 //  location.reload();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr, status, error) {
                document.getElementById('addBatchButton').disabled = false;
                document.getElementById('addBatchSpinner').classList.add('d-none');
                toastr.error('An error occurred while saving kit batch changes.');
            }
        });

    }



</script>
@endsection