@extends('admin.master')
@section('title','Stock Transfer')

@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; }
</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('stock_transfer.index')}}" class="btn pull-right m-l-20 waves-effect waves-light" style="background-color: #00c292; color: white;"><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">
                            {{ Form::open(array('route' => 'stock_transfer.store','class'=>'form-horizontal','id' => 'myForm')) }}
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-8">
                                        @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="row">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label class="control-label col-md-4">From Warehouse <span class="text-danger">*</span></label>
                                            <div class="col-md-8">
                                                {{ Form::select('from_warehouse_id',$warehouse, Input::old('from_warehouse_id'), array('class' => 'form-control form_warehouse','required'=>'required')) }}
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-4">To Warehouse <span class="text-danger">*</span></label>
                                            <div class="col-md-8">
                                                {{ Form::select('to_warehouse_id',$warehouse, Input::old('to_warehouse_id'), array('class' => 'form-control to_warehouse','required'=>'required')) }}
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label col-md-4">Date <span class="text-danger">*</span></label>
                                            <div class="col-md-8">
                                                {!! Form::date('date', \Carbon\Carbon::now()->format('Y-m-d'), $attributes = array('class'=>'form-control required ','required'=>'required')) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body" style="margin-top: 20px;">
                                    <input type="hidden" name="hdnCounter" id="hdnCounter" value="0">
                                    <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; background-color: #00c292; color:white;">
                                                            <i class="fa fa-barcode addIcon"></i> Search Product
                                                        </div>
                                                        <input type="text" name="product" class="form-control input-lg" id="products" style="height: 48px" placeholder="Type product name or code to search...">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12">
                                        <div class="control-group table-group">
                                            <label class="table-label" style="font-weight: bold; font-size: 16px; margin-bottom: 10px; border-bottom: 2px solid #00c292; padding-bottom: 5px;">Transfer Items</label>
                                            <div class="controls table-controls">
                                                <table id="poTable" class="table table-bordered table-striped table-hover">
                                                    <thead style="background-color: #f4f8fb;">
                                                        <tr>
                                                            <th style="width: 35%;">Product (Code - Name)</th>
                                                            <th style="width: 25%; text-align: center;">Available Stock</th>
                                                            <th style="width: 20%;">Transfer Qty</th>
                                                            <th style="width: 15%; text-align: center;">Serial Options</th>
                                                            <th style="width: 5%; text-align: center;"><i class="fa fa-trash-o text-danger"></i></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="custom-row">
                                                        </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <hr>
                            <div class="form-actions" style="margin-top: 20px;">
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn btn-lg submitForm" style="background-color: #00c292; color: white; padding: 10px 40px; font-weight: bold;">
                                            <i class="fa fa-exchange"></i> Complete Transfer
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="serialModalContainer"></div>

@endsection

@section('page_scripts')
    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript">
        var rowCounter = 0;
        
        var sourceUrl = "{{ route('get.transfer.products') }}";
        var serialUrl = "{{ route('get.transfer.serials') }}"; 

        $(document).ready(function () {
            
            $('#myForm').on('submit', function() {
                $('.submitForm').prop('disabled', true);
                $('.submitForm').html('<i class="fa fa-spinner fa-spin"></i> Processing...');
            });

            $(".to_warehouse, .form_warehouse").on('change', function(){
                var to_wh = $('.to_warehouse').val();
                var from_wh = $('.form_warehouse').val();

                if(to_wh && from_wh && (to_wh == from_wh)) {
                    $.toast({
                        heading: 'Warning !', text: 'From Warehouse and To Warehouse cannot be the same.',
                        position: 'top-right', loaderBg: '#ff6849', icon: 'error', hideAfter: 3000, stack: 6
                    });
                    $(this).val('');
                }
                
                if($(this).hasClass('form_warehouse')) {
                    $(".custom-row").empty();
                    $("#serialModalContainer").empty();
                }
            });

            $("#products").autocomplete({
                source: function(request, response) {
                    var warehouse_id = $(".form_warehouse").val();
                    if(!warehouse_id) {
                        alert("Please select 'From Warehouse' first!");
                        return;
                    }
                    $.ajax({
                        url: sourceUrl, dataType: "json",
                        data: { term: request.term, warehouse_id: warehouse_id },
                        success: function(data) { response(data); }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
                    add_transfer_item(ui.item);
                    $(this).val("");
                    return false;
                }
            });

            $(".custom-row").on('click', '.remove', function(){
                var rowId = $(this).data('rowid');
                $("#row_" + rowId).remove();
                $("#modal_" + rowId).remove(); 
            });

            $(document).on('input', '.transfer_qty', function () {
                var maxQty = parseFloat($(this).attr('max'));
                var val = parseFloat($(this).val());
                if(val > maxQty) {
                    alert('Cannot transfer more than available stock ('+maxQty+')');
                    $(this).val(maxQty);
                }
                if(val < 0) $(this).val(1);
            });
        });

        /* --- SMART AUTO-MERGER ADDED HERE --- */
        function add_transfer_item(item) {
            if(item.product_stock_quantity <= 0) {
                $.toast({
                    heading: 'Error', text: 'Stock not available in this warehouse.',
                    position: 'top-right', icon: 'error', hideAfter: 3000
                });
                return;
            }

            var p_id = item.id;
            var w_id = $(".form_warehouse").val();
            // THE FIX: Ensure variant_id is handled correctly right from the start
            var variant_id = (item.product_variant_id && item.product_variant_id != 'null' && item.product_variant_id != 0) ? item.product_variant_id : '';
            
            // Check if product already exists in the table
            var isExisting = false;
            $(".custom-row tr").each(function() {
                var existing_pid = $(this).find("input[name='product_id[]']").val();
                var existing_vid = $(this).find("input[name='product_variant_id[]']").val();
                
                if(existing_pid == p_id && existing_vid == variant_id) {
                    isExisting = true;
                    var qtyInput = $(this).find(".transfer_qty");
                    var currentQty = parseInt(qtyInput.val());
                    var maxQty = parseInt(qtyInput.attr('max'));
                    
                    if(currentQty < maxQty) {
                        qtyInput.val(currentQty + 1);
                        $.toast({
                            heading: 'Success', text: 'Quantity increased for existing item.',
                            position: 'top-right', loaderBg: '#ff6849', icon: 'success', hideAfter: 1500, stack: 6
                        });
                    } else {
                        alert('Cannot transfer more than available stock ('+maxQty+')');
                    }
                    return false; // break the loop
                }
            });

            if(isExisting) return; // Stop execution if item was merged

            rowCounter++;
            var html = '';

            html += '<tr id="row_'+rowCounter+'">';
            html += '<td>';
            html += '<input type="hidden" name="product_id[]" value="'+p_id+'">';
            html += '<input type="hidden" name="product_variant_id[]" value="'+variant_id+'">';
            html += '<strong>'+item.value+'</strong>';
            html += '<input type="hidden" id="selected_serials_'+rowCounter+'" name="serial_numbers[]" value="[]">';
            html += '</td>';
            html += '<td class="text-center"><span class="label label-info" style="font-size: 13px;">'+item.product_stock_quantity+'</span></td>';
            html += '<td>';
            html += '<input type="number" name="transfer_quantity[]" id="qty_'+rowCounter+'" class="form-control transfer_qty" value="1" min="1" max="'+item.product_stock_quantity+'" required>';
            html += '</td>';
            html += '<td class="text-center">';
            // THE FIX: Enclosing the variant_id properly inside JS quotes to prevent errors
            html += '<button type="button" class="btn btn-sm" style="background-color: #00c292; color:white; border:none;" onclick="fetchSerialsAndOpenModal('+p_id+', '+w_id+', '+rowCounter+', \''+variant_id+'\')"><i class="fa fa-barcode"></i> Add Serials</button>';
            html += '<br><small id="serial_count_text_'+rowCounter+'" class="text-success" style="font-weight:bold; display:none;">0 Selected</small>';
            html += '</td>';
            html += '<td class="text-center">';
            html += '<i class="fa fa-times text-danger remove" data-rowid="'+rowCounter+'" style="cursor:pointer; font-size: 18px;" title="Remove"></i>';
            html += '</td>';
            html += '</tr>';

            $(".custom-row").append(html);
            createSerialModal(rowCounter, item.value);
        }

        // THE BULLETPROOF FIX: Safely parsing variantId before sending AJAX
        function fetchSerialsAndOpenModal(productId, warehouseId, rId, variantId) {
            var qtyInput = $("#qty_" + rId).val();
            if(!qtyInput || qtyInput < 1) {
                alert("Please enter a valid transfer quantity first.");
                return;
            }

            $("#modal_" + rId).modal('show'); 
            $("#modal_body_" + rId).html('<p class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading serials...</p>');

            // Force strict empty string if the value is somewhat empty or 'null' word
            var safeVariantId = (variantId === 'null' || variantId === undefined || variantId === null || variantId == 0) ? '' : variantId;

            $.ajax({
                url: serialUrl,
                type: 'GET',
                data: { product_id: productId, warehouse_id: warehouseId, product_variant_id: safeVariantId },
                success: function(response) {
                    var modalBody = $("#modal_body_" + rId);
                    modalBody.empty();

                    if(response && response.length > 0) {
                        $.each(response, function(index, serial) {
                            var checked = "";
                            var bgClass = "";
                            var s_num = serial.serial_number;
                            
                            var currentSelected = JSON.parse($("#selected_serials_" + rId).val() || "[]");
                            if($.inArray(s_num, currentSelected) !== -1) {
                                checked = "checked";
                                bgClass = "selected";
                            }

                            var boxHtml = '<label class="serial-box '+bgClass+'" style="cursor:pointer; width: 100%;">';
                            boxHtml += '<span><i class="fa fa-barcode text-muted"></i> <strong>' + s_num + '</strong></span>';
                            boxHtml += '<input type="checkbox" class="s_check_'+rId+'" value="'+s_num+'" '+checked+' onchange="updateSerialSelection('+rId+', this)">';
                            boxHtml += '</label>';
                            
                            modalBody.append(boxHtml);
                        });
                    } else {
                        modalBody.append('<div class="alert alert-warning">No available serials found for this specific product in the selected warehouse.</div>');
                    }
                },
                error: function() {
                    $("#modal_body_" + rId).html('<div class="alert alert-danger">Failed to load serials.</div>');
                }
            });
        }

        function createSerialModal(rId, pName) {
            var mHtml = '';
            mHtml += '<div id="modal_'+rId+'" class="modal fade serial-modal" tabindex="-1" role="dialog" aria-hidden="true">';
            mHtml += '<div class="modal-dialog"><div class="modal-content">';
            mHtml += '<div class="modal-header">';
            mHtml += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
            mHtml += '<h4 class="modal-title">Select Serials: '+pName+'</h4>';
            mHtml += '</div>';
            mHtml += '<div class="modal-body" id="modal_body_'+rId+'" style="max-height: 400px; overflow-y: auto;">';
            mHtml += '</div>';
            mHtml += '<div class="modal-footer">';
            mHtml += '<span class="pull-left">Target Qty: <strong id="target_qty_'+rId+'">0</strong> | Selected: <strong id="sel_qty_'+rId+'" class="text-danger">0</strong></span>';
            mHtml += '<button type="button" class="btn" style="background-color: #00c292; color:white; border:none;" data-dismiss="modal">Done</button>';
            mHtml += '</div></div></div></div>';

            $("#serialModalContainer").append(mHtml);

            $("#modal_"+rId).on('show.bs.modal', function () {
                var target = $("#qty_" + rId).val();
                $("#target_qty_" + rId).text(target);
                
                var currentSelected = JSON.parse($("#selected_serials_" + rId).val() || "[]");
                $("#sel_qty_" + rId).text(currentSelected.length);
                if(currentSelected.length == target) {
                    $("#sel_qty_" + rId).removeClass('text-danger').addClass('text-success');
                } else {
                    $("#sel_qty_" + rId).removeClass('text-success').addClass('text-danger');
                }
            });
        }

        function updateSerialSelection(rId, checkbox) {
            var targetQty = parseInt($("#qty_" + rId).val());
            var selectedBoxes = $(".s_check_" + rId + ":checked");
            var selectedCount = selectedBoxes.length;

            if(selectedCount > targetQty) {
                alert("You cannot select more serials than the Transfer Quantity (" + targetQty + ").");
                $(checkbox).prop('checked', false);
                return;
            }

            if($(checkbox).is(':checked')) {
                $(checkbox).parent().addClass('selected');
            } else {
                $(checkbox).parent().removeClass('selected');
            }

            var selectedArray = [];
            selectedBoxes.each(function() {
                selectedArray.push($(this).val());
            });
            $("#selected_serials_" + rId).val(JSON.stringify(selectedArray));

            $("#sel_qty_" + rId).text(selectedCount);
            if(selectedCount == targetQty) {
                $("#sel_qty_" + rId).removeClass('text-danger').addClass('text-success');
            } else {
                $("#sel_qty_" + rId).removeClass('text-success').addClass('text-danger');
            }

            if(selectedCount > 0) {
                $("#serial_count_text_" + rId).text(selectedCount + " Selected").show();
            } else {
                $("#serial_count_text_" + rId).hide();
            }
        }
    </script>
@endsection