@extends('layouts/contentLayoutMaster')
@section('title', 'Create Transfer Note')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/style.css') }}">

@endsection

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                {{-- <h4 class="card-title my-2">Add Dispatch Point</h4> --}}
                <div class="card">
                    <div class="card-header f-flex flex-column align-items-start">
                        <h4 class="text-primary"> <b>
                            From : {{$store->plant ? $store->plant->name : ($store->ao ? $store->ao->ao_name : 'N/A')}}
                        </b>
                        </h4>
                        <h5>
                            <b>
                                Store : {{$store->name ? $store->name : 'None'}}
                            </b>
                        </h5>
                    </div>
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        @if ($errorMessage = Session::get('errorMessage'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $errorMessage }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <form class="form">
                            @csrf
                            <div class="row">
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <input type="hidden" id="store_id" name="store_id" value="{{ $store->_id }}">
                                        <input type="hidden" id="ao_id" name="ao_id" value="{{ $store->ao ? $store->ao->_id : '' }}">
                                        <input type="hidden" id="from_plant_id" name="from_plant_id" value="{{ $store->plant ? $store->plant->_id : '' }}">
                                        <label class="form-label" for="column-ao-1">Serial No *</label>
                                        <input type="text" disabled id="column-ao-1" class="form-control" name="code"
                                            value="{{ old('code', $code) }}" maxlength="7" />
                                        @error('code')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-3 col-6 ">
                                    <label class="form-label">Select Type</label>
                                    <div class="mb-1">
                                        <select name="parent" id="parent" class="form-control" onchange="getSelectedParent()">
                                            <option value="" selected="" disabled="">Select Type</option>
                                            @if(auth()->user()->roles->first()->access_level == 6 && $store->plant)
                                            {
                                                <option value="plant to ao">Plant To Area Office</option>
                                            }
                                            @else
                                            {
                                                <option value="ao to ao">Area Office To Area Office</option>
                                                <option value="ao to plant">Area Office To Plant</option>
                                            }
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                @include('content._partials._sections.transfers_filter')
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3">Note <small>(Optional)</small></label>
                                        <input type="text" id="note" class="form-control" placeholder="Write Any Note"
                                            name="note" value="{{ old('note') }}" />
                                        @error('note')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row ">
                                <div class="col-12 mt-2 mb-1">
                                    <h5>
                                        Add Items
                                    </h5>
                                </div>
                                {{-- <div class="col-2 pe-0">
                                    <label class="form-label" for="quantity">From Store</label>
                                    <input type="text"  id="storeName" class="form-control" placeholder="Store Name"
                                        name="storeName" value="{{ $store->name }}" readonly/>
                                    @error('storeName')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div> --}}
                                <div class="col-3 pe-0">
                                    <label class="form-label">Select Item</label>
                                    <select id="item" name="item_id" data-placeholder="Item" class="select2 form-select" 
                                        onchange="getItemDropdownData('packing_search',this.value)" required>

                                        <option value="" selected disabled>Select Item</option>
                                        
                                        @foreach ($items as $item)
                                            <option {{ old('item_id') == $item->item_id ? 'selected' : '' }} value="{{ $item->item_id }}" data-uom_quantity="{{ $item->uom_quantity }}" data-war="{{$item->weighted_average_rate}}">
                                                {{ $item->item->code .' '. ucfirst($item->item->name) }}
                                            </option>
                                        @endforeach

                                    </select>
                                </div>
                                
                                <div class="col-2 pe-0">
                                    <label class="form-label">UOM Conversion Factor</label>
                                    <select id="packing_search" name="packing" data-placeholder="Conversion Factor" class="select2 form-select" required>                                    
                                    </select>
                                </div>

                                <div class="col-2 pe-0 d-flex">
                                    <div class="text-center">
                                    <label class="form-label" for="quantity">Quantity</label>
                                    <input type="number" min="1" id="quantity" class="form-control text-center" placeholder="Quantity" style="border-radius:0.375rem 0px  0px 0.375rem"
                                        name="quantity" value="{{ old('quantity') }}" />
                                    </div>
                                    <div class="text-center">
                                        <label class="form-label" for="quantity">Per Uom</label>
                                        <input type="number" min="1" id="quantityPerUom" class="form-control text-center" placeholder="Per Uom" style="border-radius:0px 0.375rem 0.375rem 0px; background-color:#e3f9ff"
                                            name="quantityPerUom" value="{{ old('quantityPerUom') }}" readonly/>
                                    </div>
                                    @error('quantity')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                {{-- <div class="col-1 pe-0">
                                    <label class="form-label" for="quantity">Qty (Per Uom)</label>
                                    <input type="number" min="1" id="quantityPerUom" class="form-control" placeholder="Quantity (Per Uom)"
                                        name="quantityPerUom" value="{{ old('quantityPerUom') }}" readonly/>
                                    @error('quantityPerUom')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div> --}}
                                <div class="col-2 pe-0">
                                    <label class="form-label" for="quantity">Available Qty (Per Uom)</label>
                                    <input type="number" min="1" id="aquantityPerUom" class="form-control" placeholder="Available Qty (Per Uom)"
                                        name="aquantityPerUom" value="{{ old('aquantityPerUom') }}" readonly style="background-color:#d9ffd9" />
                                    @error('aquantityPerUom')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-2 pe-0">
                                    <label class="form-label" for="quantity">Weighted Avg Rate (Per Uom)</label>
                                    <input type="number"  id="war" class="form-control" placeholder="Weighted Avg Rate"
                                        name="war" value="{{ old('war') }}" readonly style="background-color:#d9ffd9" />
                                    @error('war')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-1 pe-0 d-flex align-items-end">
                                    <a id="addItem" class="btn btn-primary">Add</a>
                                </div>

                                <div class="row p-0 m-0 mt-2">
                                    <div class="col-12 p-0 m-0">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="text-center" style="width:40%">Item</th>
                                                    <th class="text-center">UOM FACTOR</th>
                                                    <th class="text-center">Quantity</th>
                                                    <th class="text-center">QTY PER uom</th>
                                                    <th class="text-center">Weighted Avg</th>
                                                    <th class="text-center">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody id="itemsTable">
                                                <!-- Dynamic rows will be appended here -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary me-1 submitButton" id="submitButton" style="display: none;">Submit</button>
                                    {{-- <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                    <a class="btn btn-outline-secondary cancel-btn"
                                        href="{{ route('inventory.items-transfer.index') }}">Cancel</a> --}}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('vendor-script')
    <!-- vendor files -->
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.time.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/legacy.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
@endsection
@section('page-script')
    <script src="{{ asset('js/scripts/forms/pickers/form-pickers.js') }}"></script>
    <script src="{{ asset('js/scripts/forms/form-select2.js') }}"></script>
        {{-- <script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script> --}}
        <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js"></script>
    <script>
        const addedItems = []; 

        $('.plant,.department,.section,.zone,.ao,.cp').hide(); 
        $('#item,#packing_search,#quantity').prop('disabled', true);

        function getSelectedParent()
        {
            var parentValue = $('#parent').val();

            if (parentValue !== "") {

                // addedItems.length = 0;

                // Remove all rows from the table (except the header row)
                // $('#itemsTable').find('tr:gt(0)').remove();
                
                $('.plant,.department,.section,.zone,.ao,.cp').show();
                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search').val('');
                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search').trigger('change'); 

                if(parentValue == "ao to plant")
                {   
                    $('.department,.section,.zone,.ao,.cp').hide();
                    $('#department_search,#section_search,#zone_search,#area_office_search').prop('disabled', true);
                }
                else if(parentValue == "ao to ao" || parentValue == "plant to ao")
                {
                    $('#department_search,#section_search,#zone_search,#area_office_search').prop('disabled', false);   
                }
                else
                {
                    $('#department_search,#section_search,#zone_search,#area_office_search').prop('disabled', false);
                }
                $('#item,#packing_search,#quantity').prop('disabled', false);

            }
        }

        $(document).ready(function() {
            @if ($errors->any())
                showAlert('error', '{{ $errors->first() }}');
            @endif

           
            
            $('#addItem').click(function () {
                const itemSelect = $('#item');
                const packingSelect = $('#packing_search');
                const quantityInput = $('#quantity');
                var quantityUom = $('#quantityPerUom').val() ? parseFloat($('#quantityPerUom').val()) : 0;
                var aQuantityUom = $('#aquantityPerUom').val() ? parseFloat($('#aquantityPerUom').val()) : 0;
                var war = $('#war').val() ? parseFloat($('#war').val()) : 0;

                if(quantityUom > aQuantityUom)
                {
                    alert('Not enough item quantity in store !')
                    return;   
                }

                const itemId = itemSelect.val();
                const itemName = itemSelect.find('option:selected').text();
                const packingValue = packingSelect.val();
                const packingName = packingSelect.find('option:selected').text();
                const quantity = quantityInput.val();

                console.log(itemId+'/'+packingValue+'/'+quantity);

                // Validation
                if (!itemId || !packingValue || !quantity || quantity <= 0) {
                    alert('Please select a valid item, packing, and quantity.');
                    return;
                }

                // Check for duplicate item with the same packing
                const exists = addedItems.some(item => item.itemId === itemId);
                if (exists) {
                    alert('This item is already added in the transfer note.');
                    return;
                }

                // Add the item to the addedItems array
                addedItems.push({ itemId, itemName, packingValue, packingName, quantity, quantityUom, war });

                // Append a new row to the table
                const newRow = `
                    <tr class='text-center'>
                        <td>${itemName}</td>
                        <td>${packingName}</td>
                        <td>${quantity}</td>
                        <td>${quantityUom}</td>
                        <td>${war}</td>
                        <td><a class="btn btn-danger btn-sm removeItem">Remove</a></td>
                    </tr>
                `;
                $('#itemsTable').append(newRow);

                // Show the submit button if at least one item is added
                if (addedItems.length > 0) {
                    $('#submitButton').show();
                }

                $('#quantity, #packing_search, #quantityPerUom, #aquantityPerUom, #war').val('');
                $('#item, #packing_search').trigger('change');

                // Clear input fields
            });

            // Remove item from the table
            $('#itemsTable').on('click', '.removeItem', function () {
                const row = $(this).closest('tr');
                const itemName = row.find('td:eq(0)').text();
                const packingName = row.find('td:eq(1)').text();

                // Remove the item from the addedItems array
                addedItems.splice(
                    addedItems.findIndex(item => 
                        item.itemName === itemName && item.packingName === packingName
                    ),
                    1
                );

                // Remove the row from the table
                row.remove();

                // Hide the submit button if no items are left
                if (addedItems.length === 0) {
                    $('#submitButton').hide();
                }
            });

            // Submit the transfer note
             $('#submitButton').click(function (e) {

                e.preventDefault();

                // Disable the button immediately
                const submitButton = $(this);
                submitButton.prop('disabled', true);

                // Add a loading indicator if desired (optional)
                submitButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');

                let from_store_id = $('#store_id').val();
                let from_ao_id = $('#ao_id').val();
                let from_plant_id = $('#from_plant_id').val();

                let to_store_id = null;
                let to_ao_id = $('#area_office_search').val();
                let to_plant_id = $('#plant_search').val();

                let note =  $('#note').val();

                let type =  $('#parent').val();

                if (addedItems.length === 0) {
                    alert('Please add at least one item before submitting.');
                    submitButton.prop('disabled', false);
                    submitButton.text('Submit'); // Reset button text if you added loading indicator
                    return;
                }


                if(type == 'ao to plant')
                {
                    if(to_plant_id == '' || to_plant_id == null)
                    {
                        alert('Plant is required !');
                        submitButton.prop('disabled', false);
                        submitButton.text('Submit'); // Reset button text if you added loading indicator
                        return;
                    }
                }
                else
                {
                    if(to_plant_id == '' || to_plant_id == null || to_ao_id == '' || to_ao_id == null)
                    {
                        alert('Plant or Area Office is required !');
                        submitButton.prop('disabled', false);
                        submitButton.text('Submit'); // Reset button text if you added loading indicator
                        return;
                    }
                }


                const transferNoteData = {
                    from_store_id: from_store_id,
                    from_ao_id: from_ao_id,
                    from_plant_id: from_plant_id,
                    to_store_id: to_store_id,
                    to_ao_id: to_ao_id,
                    to_plant_id: to_plant_id,
                    type:type,
                    note: note,
                    items: addedItems,
                };

                $.ajax({
                    url: '{{ route("inventory.items-transfer.store") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    data: transferNoteData,
                    success: function (response) {
                        if (response.success == true) {
                                showAlert('success', response.message);
                                // alert('Transfer Note created successfully!');
                                location.reload();
                            } else {
                                showAlert('error', response.message);
                                submitButton.prop('disabled', false);
                                submitButton.text('Submit'); // Reset button text
                            }
                    },
                    error: function(xhr, status, error) {
                        // Handle any AJAX errors here
                        showAlert('error', 'An error occurred: ' + error);
                        submitButton.prop('disabled', false);
                        submitButton.text('Submit'); // Reset button text
                    }
                });
            });

        });

        function getItemDropdownData(input_id, id) {

            $('#quantity, #packing_search, #quantityPerUom').val('');

            $.ajax('{{ route('inventory.get.items.packing') }}', {
                type: 'get',
                data: {
                    id: id,
                    type: input_id
                },
                success: function(data) {
                    if (data.success == true) {
                        $('#' + input_id).html(data.data);

                        var selectedItem = $('#item option:selected');
                        // Fetch the uom_quantity from the selected option
                        var uomQuantity = selectedItem.data('uom_quantity');
                        var war = selectedItem.data('war');

                        // Save flag for validation check
                        $('#quantity').data('allow-decimal', data.allowDecimal);
                        
                        // Set the quantity field with the uom_quantity
                        if (uomQuantity !== undefined) {
                            $('#aquantityPerUom').val(uomQuantity);
                        }
                        if(war != undefined)
                        {
                            $('#war').val(war);
                        }
                    }
                },
                error: function(jqXhr, textStatus, errorMessage) {
                    alert('Error Occurred')
                }
            });
        }

        $(document).on('input', '#quantity', function () {
            let allowDecimal = $(this).data('allow-decimal');
            let val = $(this).val();

            if (allowDecimal != 1 && val.includes(".")) {
                alert("Decimals are not allowed for this item.");
                $(this).val(0); // reset immediately
                $('#quantityPerUom').val(0); // reset per UOM as well
            }
        });


        
    $('#packing_search').on('change', function () {

        $('#price, #quantity, #quantityPerUom').val('');

    });

    $('#quantity').on('input', function () {

        calculateCurrentPerUom();
    });

    function calculateCurrentPerUom()
    {
         if($('#quantity').val() !== '') {

            var packingSize = $('#packing_search').val();
            var cQuantity = $('#quantity').val() ? parseFloat($('#quantity').val()) : 0;
            var aQuantityUom = $('#aquantityPerUom').val() ? parseFloat($('#aquantityPerUom').val()) : 0;

            let uomQuantity = 0;


            // If packing is other than a single UOM
            if (packingSize && packingSize !== 'uom') {
                packingSize = parseInt(packingSize, 10);
                uomQuantity = packingSize ? cQuantity * packingSize : cQuantity;
            } else {
                uomQuantity = cQuantity;
            }

            $('#quantityPerUom').val(uomQuantity);
            
        }
        else
        {
            $('#quantityPerUom').val('');
        }
    }


    </script>
@endsection