@extends('admin.master')
@section('title', isset($editModeData) ? 'Edit Purchase' : 'Add Purchase')

@section('page_css')
<style>
    .serial-modal .modal-header { background: #00c292; color: #fff; }
    .serial-modal .modal-header h4 { color: #fff; font-weight: bold; }
    .serial-box {
        border: 1px solid #ddd; padding: 10px; margin-bottom: 5px; border-radius: 4px;
        display: flex; justify-content: space-between; align-items: center; background: #f9f9f9;
    }
    .serial-box.selected { background: #e0f2f1; border-color: #00c292; }
    .serial-badge { margin: 3px; display: inline-block; font-size: 13px; padding: 5px 10px; }
    .serial-badge i { cursor: pointer; margin-left: 5px; color: #ffcccc; }
    .serial-badge i:hover { color: white; }
</style>
@endsection

@section('content')

    <div class="container-fluid">
        <div class="row bg-title page-breadcrumb bg-white">
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 ">
                <ol class="breadcrumb ">
                    <li class="active breadcrumbColor"><a href="{{ url('dashboard') }}"><i class="fa fa-home"></i>
                            Dashboard</a></li>
                    <li>@yield('title')</li>
                </ol>
            </div>
            <div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
                <a href="{{route('purchase.index')}}"
                   class="btn btn-success pull-right m-l-20 hidden-xs hidden-sm waves-effect waves-light"><i
                        class="fa fa-list-ul" aria-hidden="true"></i> View All</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading"><i class="mdi mdi-clipboard-text fa-fw"></i>@yield('title')</div>
                    <div class="panel-wrapper collapse in" aria-expanded="true">
                        <div class="panel-body">
                            @if(isset($editModeData))
                                {{ Form::model($editModeData, array('route' => array('purchase.update', $editModeData->id), 'method' => 'PUT','files' => 'true','class' => 'form-horizontal','id' => 'myForm')) }}
                            @else
                                {{ Form::open(array('route' => 'purchase.store','enctype'=>'multipart/form-data','class'=>'form-horizontal','id' => 'myForm')) }}
                            @endif
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-6">
                                        @if($errors->any())
                                            <div class="alert alert-danger alert-dismissible" role="alert">
                                                <button type="button" class="close" data-dismiss="alert"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                @foreach($errors->all() as $error)
                                                    <strong>{!! $error !!}</strong><br>
                                                @endforeach
                                            </div>
                                        @endif
                                        @if(session()->has('success'))
                                            <div class="alert alert-success alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert"
                                                        aria-hidden="true">×
                                                </button>
                                                <i class="cr-icon glyphicon glyphicon-ok"></i>&nbsp;<strong>{{ session()->get('success') }}</strong>
                                            </div>
                                        @endif
                                        @if(session()->has('error'))
                                            <div class="alert alert-danger alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert"
                                                        aria-hidden="true">×
                                                </button>
                                                <i class="glyphicon glyphicon-remove"></i>&nbsp;<strong>{{ session()->get('error') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="card-body">

                                    @if(isset($editModeData))
                                        <input type="hidden" name="hdnCounter" id="hdnCounter"
                                               value="{{ $editModeData->purchaseDetails->count() }}">
                                    @else
                                        <input type="hidden" name="hdnCounter" id="hdnCounter" value="0">
                                    @endif
                                    <div class="row">
                                        <div class="col-sm-12 col-md-6 col-lg-6">
                                            <div class="form-group row">
                                                <label for="inputEmail3"
                                                       class="col-sm-3 text-right control-label col-form-label">Date<span
                                                        class="validateRq">*</span></label>
                                                <div class="col-sm-9">
                                                    {!! Form::text('purchase_date',Input::old('purchase_date'), $attributes = array('class'=>'form-control required dateField','id'=>'name', 'required'=>'required','placeholder'=>'Enter Date')) !!}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12 col-md-6 col-lg-6">
                                            <div class="form-group row pt-3">
                                                <label for="inputEmail3"
                                                       class="col-sm-3 text-right control-label col-form-label">Warehouse<span
                                                        class="validateRq">*</span></label>
                                                <div class="col-sm-9">
                                                    {{ Form::select('warehouse_id',$warehouse, auth()->user()->warehouse_id, array('class' => 'form-control select2','required')) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-sm-12 col-md-6 col-lg-6">
                                            <div class="form-group row pt-3">
                                                <label for="inputEmail3"
                                                       class="col-sm-3 text-right control-label col-form-label">Status</label>
                                                <div class="col-sm-9">
                                                    {{ Form::select('status', array('1' => 'Received'), Input::old('status'), array('class' => 'form-control status select2 required')) }}
                                                </div>
                                            </div>
                                        </div>
                                        @if(!isset($editModeData))
                                            <div class="col-sm-12 col-md-6 col-lg-6">
                                                <div class="form-group row pt-3">
                                                    <label for="inputEmail3"
                                                           class="col-sm-3 text-right control-label col-form-label">Account<span
                                                            class="validateRq">*</span></label>
                                                    <div class="col-sm-9">
                                                        {{ Form::select('account',$accounts, Input::old('account'), array('class' => 'form-control select2 accounts_id','required')) }}
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-6 col-lg-6">
                                            <div class="form-group row pt-3">
                                                <label for="inputEmail3"
                                                       class="col-sm-3 text-right control-label col-form-label">Supplier<span
                                                        class="validateRq">*</span></label>
                                                <div class="col-sm-9">
                                                    {{ Form::select('supplier_id',$supplier, Input::old('supplier_id'), array('class' => 'form-control select2','required')) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12 col-lg-12">
                                            <div class="well well-sm">
                                                <div class="form-group" style="margin-bottom:0; margin: 0">
                                                    <div class="input-group wide-tip">
                                                        <div class="input-group-addon"
                                                             style="padding-left: 10px; padding-right: 10px;">
                                                            <i class="fa fa-2x fa-barcode addIcon"></i></div>
                                                        <input type="text" name="product" class="form-control  input-lg"
                                                               id="products" style="height: 48px"
                                                               placeholder="Search by product name or code">
                                                        <div class="input-group-addon"
                                                             style="padding-left: 10px; padding-right: 10px;">
                                                            <a href="{{ route('product.create') }}" id="addManually1"
                                                               tabindex="-1"><i class="fa fa-2x fa-plus-circle addIcon"
                                                                                id="addIcon"></i></a></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="control-group table-group">
                                            <label class="table-label">Order Items</label>
                                            <div class="controls table-controls">
                                                <table id="poTable"
                                                       class="order-details table items table-striped table-bordered table-condensed table-hover sortable_table">
                                                    <thead>
                                                    <tr>
                                                        <th class="col-md-3">Product (Code - Name)</th>
                                                        <th class="col-md-2">Net Unit Cost</th>
                                                        <th class="col-md-2">Variant</th>
                                                        <th class="col-md-2 text-center">Serials</th>
                                                        <th class="col-md-1">Quantity</th>
                                                        <th>Subtotal (<span class="currency">TK</span>)</th>
                                                        <th style="width: 30px !important; text-align: center;"><i
                                                                class="fa fa-trash-o"
                                                                style="opacity:0.5; filter:alpha(opacity=50);"></i></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody class="ui-sortable custom-row">

                                                    @if(isset($editModeData))
                                                        @php $counter=0; @endphp
                                                        @foreach($editModeData->purchaseDetails as $purchaseDetail )
                                                            @php $counter++; @endphp
                                                            <tr>
                                                                <td>
                                                                    <input name="product_id[]" type="hidden" class="rid"
                                                                           value="{{ $purchaseDetail->product_id }}">{{ $purchaseDetail->product->name }}
                                                                </td>
                                                                <td>
                                                                    <input name="product_cost[]" type="text"
                                                                           class="form-control unit-price {{ $counter }}"
                                                                           value="{{ $purchaseDetail->product_cost }}"
                                                                           required>
                                                                </td>
                                                                <td>
                                                                    <input type="hidden" name="product_variant_id[]" value="{{ $purchaseDetail->product_variant_id }}">
                                                                    <span>{{ $purchaseDetail->product_variant_id ? 'Variant Selected' : 'N/A' }}</span>
                                                                </td>
                                                                
                                                                <td class="text-center">
                                                                    <button type="button" class="btn btn-info btn-xs btn-add-serial" data-row="{{ $counter }}">
                                                                        <i class="fa fa-barcode"></i> Add Serials <span class="badge badge-light serial-count-{{ $counter }}">0</span>
                                                                    </button>
                                                                    <input type="hidden" name="serial_numbers[]" class="serial-hidden-input" id="serial_input_{{ $counter }}" value="[]">
                                                                </td>

                                                                <td>
                                                                    <input name="quantity[]" type="text"
                                                                           class="form-control quantity qty-{{ $counter }} {{ $counter }}"
                                                                           value="{{ $purchaseDetail->quantity }}"
                                                                           required>
                                                                </td>
                                                                <td>
                                                                    <input name="total_item_cost[]" type="text"
                                                                           class="form-control price-total {{ $counter }}"
                                                                           required
                                                                           value="{{ $purchaseDetail->total_item_cost }}">
                                                                </td>
                                                                <td>
                                                                    <i class="fa fa-times tip podel remove"
                                                                       title="Remove" style="cursor:pointer;"></i>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif

                                                    </tbody>
                                                    <tfoot>
                                                    <tr>
                                                        <td colspan="4"></td>
                                                        <td>Total</td>
                                                        <td><span class="totals_val pull-right" id="sub_total">0</span></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4"></td>
                                                        <td>Shipping</td>
                                                        <td>
                                                            {!! Form::number('shipping_cost',Input::old('shipping_cost'), $attributes = array('class'=>'form-control text-right input-sm','id'=>'shipping_cost','placeholder'=>'Shipping Cost')) !!}
                                                        </td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4"></td>
                                                        <td>Discount</td>
                                                        <td>
                                                            {!! Form::number('discount',Input::old('discount'), $attributes = array('class'=>'form-control text-right','id'=>'Discount','placeholder'=>'Discount')) !!}
                                                        </td>
                                                        <td></td>
                                                    </tr>

                                                    <tr id="tfoot" class="tfoot active">
                                                        <th colspan="4"></th>
                                                        <th class="text-center ">Net Total<input type="hidden"
                                                                                                 name="total_quantity"
                                                                                                 id="total_qty"></th>
                                                        <th class="text-right"><input type="text" name="total_amount"
                                                                                      class="form-control text-right"
                                                                                      id="total_amount" @if(isset($editModeData))
                                                                {{ "readonly"}}
                                                                @endif></th>
                                                        <th class="text-center"></th>
                                                    </tr>

                                                    <tr>
                                                        <td colspan="4"></td>
                                                        <td>Payment</td>
                                                        <td><input type="text" name="payment_amount"
                                                                   class="form-control text-right" id="payment_amount"
                                                                   placeholder="Payment amount"
                                                                   @if(isset($editModeData))
                                                                       {{ "readonly"}}
                                                                   @endif value="@if(isset($editModeData)){{$editModeData->payment->sum('payment_amount')}}@else{{0}}@endif">
                                                        </td>
                                                        <td></td>
                                                    </tr>

                                                    <tr>
                                                        <td colspan="4"></td>
                                                        <td>Due</td>
                                                        <td><input type="text" name="total_due"
                                                                   class="form-control text-right" id="total_due"
                                                                   placeholder="Due amount" @if(isset($editModeData))
                                                                {{ "readonly"}}
                                                                @endif></td>
                                                        <td></td>
                                                    </tr>

                                                    </tfoot>
                                                    
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-sm-12 col-lg-6">
                                        <div class="form-group row">
                                            <label for="inputEmail3"
                                                   class="col-sm-3 text-right control-label col-form-label">Note</label>
                                            <div class="col-sm-9">
                                                {!! Form::textarea('note',Input::old('note'), $attributes = array('class'=>'form-control text-right', 'rows'=>'3','id'=>'note','placeholder'=>'Note')) !!}

                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div id="bottom-total" class="well well-sm"
                                         style="margin-bottom: 0px; position: fixed; bottom: 0px; width: 1198px; z-index: 2;">
                                        <table class="table table-bordered table-condensed totals"
                                               style="margin-bottom:0;">
                                            <tbody>
                                            <tr class="warning">
                                                <td>Items Quantity<span class="totals_val pull-right"
                                                                        id="titems">0</span></td>
                                                <td>Total <span class="totals_val pull-right" id="total">0</span></td>
                                                <td>Order Discount <span class="totals_val pull-right" id="tds">0</span>
                                                </td>
                                                <td>Shipping Cost <span class="totals_val pull-right"
                                                                        id="tship">00</span></td>
                                                <td>Grand Total <span class="totals_val pull-right" id="gtotal">0</span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>

                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-12">
                                                @if(isset($editModeData))
                                                    <button type="button"
                                                            class="btn btn-success center-block submitForm"><i
                                                            class="fa fa-pencil"></i> Update
                                                    </button>
                                                @else
                                                    <button type="button"
                                                            class="btn btn-success  center-block submitForm"
                                                            id="save_button"><i class="fa fa-check"></i> Save Purchase
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="serialModal" tabindex="-1" role="dialog" aria-labelledby="serialModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #00c292; color: white;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white; opacity: 1;"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="serialModalLabel"><i class="fa fa-barcode"></i> Manage Serial Numbers</h4>
                </div>
                <div class="modal-body">
                    
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">General</a></li>
                        <li role="presentation"><a href="#sequence" aria-controls="sequence" role="tab" data-toggle="tab">Sequence</a></li>
                        <li role="presentation"><a href="#notepad" aria-controls="notepad" role="tab" data-toggle="tab">Notepad</a></li>
                    </ul>

                    <div class="tab-content" style="padding-top: 20px;">
                        
                        <div role="tabpanel" class="tab-pane active" id="general">
                            <div class="form-group">
                                <label>Enter Serial Number (Press Enter or Click Add)</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="generalSerialInput" placeholder="Scan or type serial...">
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" type="button" id="btnAddGeneralSerial">Add</button>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane" id="sequence">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Prefix (Optional)</label>
                                        <input type="text" class="form-control" id="seqPrefix" placeholder="e.g. LPT-">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Start Number</label>
                                        <input type="number" class="form-control" id="seqStart" placeholder="1001">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>End Number</label>
                                        <input type="number" class="form-control" id="seqEnd" placeholder="1010">
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-info btn-block" id="btnGenerateSequence">Generate Sequence</button>
                        </div>

                        <div role="tabpanel" class="tab-pane" id="notepad">
                            <div class="form-group">
                                <label>Paste Multiple Serials (Comma separated or New line)</label>
                                <textarea class="form-control" id="notepadInput" rows="5" placeholder="IMEI01&#10;IMEI02&#10;IMEI03"></textarea>
                            </div>
                            <button type="button" class="btn btn-primary btn-block" id="btnParseNotepad">Add from Notepad</button>
                        </div>
                    </div>

                    <hr>
                    <h5><strong>Added Serials (<span id="serialModalCount" class="text-danger">0</span>)</strong> 
                        <button class="btn btn-xs btn-danger pull-right" id="btnClearSerials"><i class="fa fa-trash"></i> Clear All</button>
                    </h5>
                    
                    <div id="serialBadgeContainer" style="min-height: 100px; max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 4px; background: #f9f9f9;">
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" id="btnSaveSerials">Save Serials</button>
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('page_scripts')
    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            // Prevents double-clicking the submit button
            $('.submitForm').on('click', function (e) {
                e.preventDefault();
                $(this).prop('disabled', true);
                $(this).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
                $('form#myForm').submit();
            });

            amount_calculate();
            $('#extras-con').show(200);
            var counter = jQuery("#hdnCounter").val();
            
            var src = "{{ route('getProducts')}}";

            $("#products").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: src,
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) { response(data); }
                    });
                },
                minLength: 1,

                select: function (event, ui) {
                    add_purchase_item(ui.item);
                    amount_calculate();
                    $(this).val("");
                    return false;
                },
            });


            /* --- SMART AUTO-MERGER FUNCTION --- */
            function add_purchase_item(items) {
                var p_id = items.id;
                
                // Get the default variant if exists, else empty
                var variant_id = '';
                if (Array.isArray(items.variants) && items.variants.length > 0) {
                    variant_id = items.variants[0].product_variant_id; // Defaulting to the first variant
                }

                // Check if product already exists in the table to prevent duplicate rows
                var isExisting = false;
                $(".custom-row tr").each(function() {
                    var existing_pid = $(this).find("input[name='product_id[]']").val();
                    
                    if(existing_pid == p_id) {
                        isExisting = true;
                        var qtyInput = $(this).find(".quantity");
                        var currentQty = parseFloat(qtyInput.val());
                        qtyInput.val(currentQty + 1);
                        
                        $.toast({
                            heading: 'Success', text: 'Quantity increased for existing product.',
                            position: 'top-right', loaderBg: '#ff6849', icon: 'success', hideAfter: 1500, stack: 6
                        });
                        
                        amount_calculate();
                        return false; // break loop
                    }
                });

                if(isExisting) return; // Stop execution, row was merged

                // If it's a new product, create a new row
                counter++;
                
                var selectOptions = '';
                if (Array.isArray(items.variants) && items.variants.length > 0) {
                    items.variants.forEach(function(variant) {
                        selectOptions += '<option value="' + variant.product_variant_id + '">' + variant.variant_name + '</option>';
                    });
                } else {
                    selectOptions = '<option value="" >No variants</option>';
                }

                var html = '<tr>' +
                    '<td><input name="product_id[]" type="hidden" class="rid" value="' + p_id + '">' + items.value + '</td>' +
                    '<td><input name="product_cost[]" type="text" class="form-control unit-price ' + counter + '" value="' + items.price + '" required ></td>' +
                    '<td><select name="product_variant_id[]" class="form-control variant-select ' + counter + '">' + selectOptions + '</select></td>' +
                    '<td class="text-center">' +
                    '<button type="button" class="btn btn-info btn-xs btn-add-serial" data-row="' + counter + '"><i class="fa fa-barcode"></i> Add Serials <span class="badge badge-light serial-count-' + counter + '">0</span></button>' +
                    '<input type="hidden" name="serial_numbers[]" class="serial-hidden-input" id="serial_input_' + counter + '" value="[]">' +
                    '</td>' +
                    '<td><input name="quantity[]" type="text" class="form-control quantity qty-' + counter + ' ' + counter + '" value="1" required></td>' +
                    '<td><input name="total_item_cost[]" type="text" class="form-control price-total ' + counter + '" required readonly></td>' +
                    '<td><i class="fa fa-times tip podel remove" title="Remove" style="cursor:pointer; color:red;"></i></td>' +
                    '</tr>';

                $(".custom-row").append(html);
                amount_calculate();
            }

            /* Remove Row */
            $(".custom-row").on('click', '.remove', function () {
                $(this).parent().parent().remove();
                amount_calculate();
            });

            /* ---------------------------------------------------------------------- */
            /* SERIAL NUMBER LOGIC (General, Sequence, Notepad)                       */
            /* ---------------------------------------------------------------------- */
            
            let activeRowId = null;
            let currentSerials = [];

            $(document).on('click', '.btn-add-serial', function() {
                activeRowId = $(this).data('row');
                let existingSerials = $('#serial_input_' + activeRowId).val();
                currentSerials = existingSerials ? JSON.parse(existingSerials) : [];
                renderSerialBadges();
                $('#serialModal').modal('show');
                $('#generalSerialInput').val('');
                $('#seqPrefix').val('');
                $('#seqStart').val('');
                $('#seqEnd').val('');
                $('#notepadInput').val('');
            });

            $(document).on('click', '#btnAddGeneralSerial', function(e) {
                e.preventDefault();
                let sVal = $('#generalSerialInput').val().trim();
                if(sVal && !currentSerials.includes(sVal)) {
                    currentSerials.push(sVal);
                    $('#generalSerialInput').val('').focus();
                    renderSerialBadges();
                } else if(currentSerials.includes(sVal)) {
                    alert('This serial is already added!');
                }
            });
            
            $(document).on('keypress', '#generalSerialInput', function(e) {
                if(e.which === 13) {
                    e.preventDefault();
                    $('#btnAddGeneralSerial').click();
                }
            });

            $(document).on('click', '#btnGenerateSequence', function(e) {
                e.preventDefault();
                let prefix = $('#seqPrefix').val().trim();
                let startStr = $('#seqStart').val().trim();
                let endStr = $('#seqEnd').val().trim();

                if(startStr === '' || endStr === '') { alert('Please enter Start and End number.'); return; }

                let start = parseInt(startStr);
                let end = parseInt(endStr);

                if(isNaN(start) || isNaN(end) || start > end) { alert('Invalid sequence.'); return; }

                let padLength = startStr.length;
                for(let i = start; i <= end; i++) {
                    let numStr = i.toString().padStart(padLength, '0');
                    let sVal = prefix + numStr;
                    if(!currentSerials.includes(sVal)) { currentSerials.push(sVal); }
                }
                $('#seqStart').val(''); $('#seqEnd').val('');
                renderSerialBadges();
            });

            $(document).on('click', '#btnParseNotepad', function(e) {
                e.preventDefault();
                let text = $('#notepadInput').val();
                if(!text || text.trim() === '') { alert('Paste serials first.'); return; }

                let rawSerials = text.split(/[\n,\s]+/);
                rawSerials.forEach(function(s) {
                    let sVal = s.trim();
                    if(sVal !== '' && !currentSerials.includes(sVal)) { currentSerials.push(sVal); }
                });
                $('#notepadInput').val('');
                renderSerialBadges();
            });

            $(document).on('click', '.remove-serial', function() {
                let valToRemove = $(this).data('serial').toString();
                currentSerials = currentSerials.filter(s => s !== valToRemove);
                renderSerialBadges();
            });

            $(document).on('click', '#btnClearSerials', function(e) {
                e.preventDefault(); currentSerials = []; renderSerialBadges();
            });

            function renderSerialBadges() {
                let html = '';
                currentSerials.forEach(function(s) {
                    html += '<span class="label label-success serial-badge">' + s + ' <i class="fa fa-times remove-serial" data-serial="' + s + '"></i></span>';
                });
                $('#serialBadgeContainer').html(html);
                $('#serialModalCount').text(currentSerials.length);
            }

            $(document).on('click', '#btnSaveSerials', function(e) {
                e.preventDefault();
                let count = currentSerials.length;
                $('#serial_input_' + activeRowId).val(JSON.stringify(currentSerials));
                $('.serial-count-' + activeRowId).text(count);

                if(count > 0) { $('.qty-' + activeRowId).val(count); }
                amount_calculate();
                $('#serialModal').modal('hide');
            });

            /* ---------------------------------------------------------------------- */

        });

        /* Amount Calculation Function */
        jQuery('table.order-details').on("keyup input change", "tr", function () {
            amount_calculate();
        });

        function amount_calculate() {
            var grandTotal = 0;
            var grandTotalQuantity = 0;
            $('table.order-details').parent().find('tr').each(function () {
                var row = jQuery(this);
                var value = parseFloat(jQuery(".unit-price", row).val()) || 0;
                var value2 = parseFloat(jQuery(".quantity", row).val()) || 0;
                var total = value * value2;

                grandTotal += total;
                grandTotalQuantity += value2;

                jQuery(".price-total", row).val(total.toFixed(2));
            });

            var Discount = parseFloat(jQuery("#Discount").val()) || 0;
            var shipping_cost = parseFloat(jQuery("#shipping_cost").val()) || 0;

            jQuery("#total").text(grandTotal.toFixed(2));
            jQuery("#sub_total").text(grandTotal.toFixed(2));
            jQuery("#tds").text(Discount.toFixed(2));
            jQuery("#tship").text(shipping_cost.toFixed(2));

            var grandGrandTotal = (grandTotal + shipping_cost) - Discount;

            jQuery("#total_amount").val(grandGrandTotal.toFixed(2));
            jQuery("#gtotal").text(grandGrandTotal.toFixed(2));
            jQuery("#total_qty").val(grandTotalQuantity);
            jQuery("#titems").text(grandTotalQuantity);

            var payment_amount = parseFloat(jQuery("#payment_amount").val()) || 0;
            var total_due = grandGrandTotal - payment_amount;
            jQuery("#total_due").val(total_due.toFixed(2));
        }

        jQuery('#Discount,#shipping_cost,#vat,#tax').on("keyup", function () {
            amount_calculate();
        });

        $("#extras").change(function () {
            if (this.checked) { $('#extras-con').show(200); }
            if (!this.checked) { $('#extras-con').hide(200); }
        });

        $('.accounts_id').on("change", function () { getCurrentBalance(); });
        $('#payment_amount').on("keyup", function () { getCurrentBalance(); });

        function getCurrentBalance() {
            var accountsId = $('.accounts_id').find('option:selected').val();
            if(!accountsId) return;
            
            $.ajax({
                url: "{{ route('getAccount')}}",
                type: "get",
                data: "accountsId=" + accountsId,
                success: function (response) {
                    if (response.current_balance < $('#payment_amount').val()) {
                        $.toast({
                            heading: 'Error', text: 'Balance insufficient in your account',
                            position: 'top-right', loaderBg: '#ff6849', icon: 'error', hideAfter: 3000, stack: 6
                        });
                        $('#save_button').prop('disabled', true);
                    } else {
                        $('#save_button').prop('disabled', false);
                    }
                },
            });
        }
    </script>
@endsection