@extends('layouts/contentLayoutMaster')

@section('title', 'Add Consumable Item ')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection
@section('content')

<style>
    .perUnitPadding input
    {
        padding-left: 3px !important;
        padding-right: 3px !important;
        text-align: center;
        font-weight: bold;
    }
</style>

    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="row border-bottom py-2">
                        <div class="col-3">
                            <h4 class="card-title pt-1 my-auto ps-2">{{ $selectedStore ? $selectedStore->name : '' }}</h4>
                        </div>
                        <div class="col-6"></div>
                        {{-- <div class="col-3">
                            <a href="{{ route('price.created.export') }}" class="btn btn-primary my-auto">
                                Export Prices
                            </a>
                        </div> --}}
                    </div>
                    <div class="card-body">
                        <form method="post" id="storeStockForm" style="position: relative">
                            @csrf
                                <div class="row ">
                                    <div class="col-4 pe-0">
                                        {{-- <label class="form-label">Select Store</label>
                                        <select id="store" name="store_id" data-placeholder="Store" class="select2 form-select" required>
                                            <option value="" selected disabled>Select Store</option>
                                            @foreach ($stores as $store)
                                                <option {{ $storeId == $store->_id ? 'selected' : '' }} value="{{ $store->id }}">
                                                    {{ ucfirst($store->name) }}
                                                </option>
                                            @endforeach
                                        </select> --}}
                                        <input type="hidden" id="store" name="store_id" value="{{ $storeId }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2 pe-0">
                                        <label class="form-label" for="ref_no">Reference No</label>
                                        <input type="text" id="ref_no" class="form-control" placeholder="Ref No"
                                            name="ref_no" value="{{ old('ref_no') }}" step="any" required/>
                                        @error('ref_no')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-2 pe-0">
                                        <label class="form-label" for="ref_no">Plant Issuance / Purchase Date</label>
                                        <input type="date" id="plant_issuance_date" class="form-control" placeholder="Plant Issuance Date"
                                            name="plant_issuance_date" value="{{ old('plant_issuance_date') }}" step="any" required/>
                                        @error('plant_issuance_date')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-4 pe-0">
                                        <label class="form-label">Select Item</label>
                                        <select id="item" name="item_id" data-placeholder="Item" class="select2 form-select" 
                                            onchange="getDropdownData('packing_search',this.value);" required>

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

                                        </select>
                                    </div>
                                </div>
                                <div class="row mt-1 d-flex align-items-end">
                                    
                                    
                                    <div class="col-2 pe-0">
                                        <label class="form-label">UOM Conversion Factor</label>
                                        <select id="packing_search" name="packing" data-placeholder="Packing" class="select2 form-select" required>                                    
                                        </select>
                                    </div>
                                    <div class="col-1 pe-0">
                                            <label class="form-label" for="quantity">Quantity</label>
                                            <input type="number" min="0" id="quantity" class="form-control" placeholder="Quantity"
                                                name="quantity" value="{{ old('quantity') }}" step="any" />
                                            @error('quantity')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                    </div>
                                    <div class="col-2 pe-0">
                                        <label class="form-label" for="price" id="unitPriceLabel">(Pkr) Price Per - <span id="perUnit" style="color:#1c9edf; font-weight:bold">UOM</span></label>
                                        <input type="number" id="pricePerUom" min="0" class="form-control" placeholder="Price Per Uom" step="any"
                                            name="pricePerUom" value="{{ old('price') }}" />
                                        @error('pricePerUom')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-1 pe-0">
                                        <label class="form-label" for="price">Total Price</label>
                                        <input type="number" min="0" id="price" class="form-control" style="font-weight:bold; color:rgb(41, 197, 69)" placeholder="Price"
                                            name="price" value="{{ old('price') }}" readonly step="any" />
                                        @error('price')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-3 pe-0 m-0 text-center d-flex flex-column justify-content-center">
                                        <label class="form-label" for="price" style="font-weight:bold">(Pkr) Price Per - <span id="unitUom" style="color:#1c9edf; font-size:13px; text-transform:capitalize">UOM</span></label>

                                        
                                        <div class="row p-0 m-0 w-100 ps-0 perUnitPadding">
                                            <div class="col-4 ps-0 pe-0">
                                                <label class="form-label" for="pwa">Previous </label>
                                                    <input type="number" min="0" id="prev_price" class="form-control" style="font-weight:bold; color:rgb(41, 158, 197);border-radius:0.375rem 0px  0px 0.375rem; background-color:#e8f7ff"  placeholder="Prev"
                                                    name="prev_price" value="{{ old('prev_price') }}" readonly step="any" />
                                                    <input type="hidden" id="prev_price_hidden">
                                            </div>
                                            <div class="col-4 ps-0 pe-0">
                                                <label class="form-label" for="cwa">Current</label>
                                                <input type="number" min="0" id="tprice"  class="form-control" style="font-weight:bold; color:rgb(93, 93, 93); border-radius:0px 0px;" placeholder="Curr"
                                                name="tprice" value="{{ old('tprice') }}" readonly step="any" />
                                            </div>
                                            <div class="col-4 ps-0 pe-0">
                                                <label class="form-label" for="pvariance">Variance</label>
                                                <input type="number" min="0" id="pvariance" class="form-control" style="font-weight:bold; color:rgb(41, 161, 197); border-radius:0px 0.375rem 0.375rem 0px;" placeholder="Var"
                                                name="pvariance" value="{{ old('pvariance') }}" readonly step="any" />
                                            </div>
                                        </div>
                                    </div>
                                        <div class="col-3 pe-0 m-0 text-center d-flex flex-column justify-content-center perUnitPadding">
                                            <label class="form-label " for="price" style="font-weight:bold">Average Weighted Rate Per - <span id="avgUom" style="color:#1c9edf; font-size:13px; text-transform:capitalize">UOM</span></label>
                                            <div class="row p-0 m-0 w-100 ps-1 pe-1">
                                                <div class="col-4 ps-0 pe-0">
                                                    <label class="form-label" for="pwa">Previous </label>
                                                    <input type="number" min="0" id="pwa" class="form-control text-center" placeholder="Prev"
                                                        name="pwa" value="{{ old('pwa') }}" readonly style="border-radius:0.375rem 0px  0px 0.375rem; background-color:#e8f7ff; color:rgb(41, 158, 197)" />
                                                        <input type="hidden" min="1" id="pQuantity" class="form-control" placeholder="Previous Quantity"
                                                        name="pQuantity"  />
                                                    @error('pwa')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="col-4 ps-0 pe-0">
                                                    <label class="form-label" for="cwa">Current</label>
                                                    <input type="number" min="0" id="cwa" class="form-control text-center" placeholder="Curr"
                                                        name="cwa" value="" readonly style="border-radius:0px 0px;" />
                                                    @error('cwa')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="col-4 ps-0 pe-0">
                                                    <label class="form-label" for="cwa">Variance</label>
                                                    <input type="number" min="0" id="wvariance" class="form-control text-center" placeholder="Var"
                                                        name="wvariance" value="" readonly style="border-radius:0px 0.375rem 0.375rem 0px;" />
                                                    @error('cwa')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 d-flex justify-content-end align-items-center" style="padding-top: 22px">
                                            <a class="btn btn-sm btn-secondary" style="min-width: 68px; padding:10px; position: absolute;top: -72px;" onclick="resetForm()">Reset</a>
                                            <input type="submit" value="Submit" class="btn btn-sm btn-primary ">
                                        </div>
                                </div>
                                    
                        </form>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table class="table" id="stock_table">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>SAP Code</th>
                                    <th>Store</th>
                                    <th>Code</th>
                                    <th>Item</th>
                                    <th>Quantity (UOM)</th>
                                    <th>Weighted Avg Rate</th>
                                    {{-- <th>Action</th> --}}
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>


@endsection

@section('vendor-script')

    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2({
                allowClear: true,
                // dropdownPosition: 'TOP'
            });
        });





        var table;
        $(document).ready(function() {
            $(".select2").select2({});
            table = $('#stock_table').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                ajax: {
                    // headers: {
                    //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    // },
                    url: "{{ route('inventory.get.store.stock') }}",
                    data: function(d) {
                        // '_token': '{{ csrf_token() }}',
                        d.page = (d.start / d.length) + 1; // DataTables calculates the page number based on start
                        d.length = d.length; // Page length (number of rows per page)
                        d.search = d.search.value;
                        d.id = $('#store').val();
                        // d.type = $('#type option:selected').val();
                        // d.area_office = $('#area_office option:selected').val();
                        // d.plant = $('#plant option:selected').val();
                        // d.serial_number = $('#serial_number').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'sap_code',
                        name: 'sap_code'
                    },
                    {
                        data: 'store',
                        name: 'store'
                    },
                    {
                        data: 'code',
                        name: 'code'
                    },
                    {
                        data: 'item',
                        name: 'item'
                    },
                    {
                        data: 'quantity',
                        name: 'quantity',
                        className: 'text-center text-primary'
                    },
                    {
                        data: 'wRate',
                        name: 'wRate',
                        className: 'text-center text-success'
                    },
                    // {
                    //     data: 'action',
                    //     name: 'action'
                    // },

                ],
                dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                    '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                    '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f>>>' +
                    '><"text-nowrap" t>' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                language: {
                    paginate: {
                        // remove previous & next text from pagination
                        previous: '&nbsp;',
                        next: '&nbsp;'
                    }
                }
            });
            $(".search-input").on('change', function() {
                table.ajax.reload();
            });
            $('#serial_number').on('input', function() {
                table.ajax.reload();
            });
        });





    function getDropdownData(input_id, id) {

        $('#price, #quantity, #cwa, #packing_search, #pricePerUom, #tprice').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);
                    $('#perUnit').text($('#' + input_id).find('option:first').text());
                    $('#avgUom').text($('#' + input_id).find('option:first').text());
                    $('#unitUom').text($('#' + input_id).find('option:first').text());
                    getProductAvgRate();
                }
            },
            error: function(jqXhr, textStatus, errorMessage) {
                alert('Error Occurred')
            }
        });
    }

    function getProductAvgRate() {

        var store_id = $('#store').val();
        var item_id = $('#item').val();
 
        $.ajax('{{ route('inventory.get.items.avgRate') }}', {
            type: 'get',
            data: {
                item_id: item_id,
                store_id: store_id
            },
            success: function(data) {
                if (data.success == true) {
                    $('#pwa').val(data.data['pRate']);
                    $('#pQuantity').val(data.data['pQuantity']);
                    $('#prev_price').val(data.data['unitPrice']);
                    $('#prev_price_hidden').val(data.data['unitPrice']);
                }
            },
            error: function(jqXhr, textStatus, errorMessage) {
                alert('Error Occurred')
            }
        });
    }


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

        $('#price, #quantity, #pricePerUom, #tprice').val('');
        $('#cwa').val('');

        // var prev_price =  $('#prev_price_hidden').val();
        // var uomFactor = $(this).find(':selected').val();

        var text = $(this).find(':selected').text(); 

        $('#perUnit').text($(this).find(':selected').text());

        // console.log($(this).text());

    })


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

        var totalPrice = parseFloat($('#pricePerUom').val()) * parseFloat($('#quantity').val());
        $('#price').val(totalPrice);

        if($('#price').val() !== '' && $('#quantity').val() !== '') {


            var packingSize = $('#packing_search').val();
            var cPrice = parseFloat($('#price').val());
            var cQuantity = parseFloat($('#quantity').val());
            var pRate = $('#pwa').val() ? parseFloat($('#pwa').val()) : 0;
            var pQuantity = $('#pQuantity').val() ? parseFloat($('#pQuantity').val()) : 0;
            var cwa = parseFloat($('#cwa').val()); // Ensure `cwa` is properly referenced

            
            
            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;
            }
            
            var pprice = $('#prev_price').val() ? parseFloat($('#prev_price').val()) : 0;
            $('#tprice').val(calculateUnitPrice());
            var cUnitPrice = parseFloat($('#tprice').val());
            var pvariance = cUnitPrice - pprice;
            $('#pvariance').val(pvariance.toFixed(2));

            // Apply color based on the value
            if (pvariance < 0) {
                $('#pvariance').css('color', 'rgb(41, 197, 69)');
            } else if (pvariance > 0) {
                $('#pvariance').css('color', 'red');
            } else {
                $('#pvariance').css('color', 'rgb(93, 93, 93)'); // neutral or zero case
            }

            if((pRate == '' || pRate == null || pRate == undefined) && (pQuantity == '' || pQuantity == null || pQuantity == undefined)){
                
                var newRate = cPrice/uomQuantity; 
                console.log(cPrice+' / '+uomQuantity);
                $('#cwa').val(newRate.toFixed(2));            
    
            } else {

                var pricePerUom = cPrice / uomQuantity;
                console.log(pQuantity +' / '+ pRate +' / '+ uomQuantity +' / '+ pricePerUom);

                var num1 = (pQuantity * pRate) + (uomQuantity * pricePerUom);
                var num2 = pQuantity + uomQuantity;
                var newRate = num1 / num2;
                $('#cwa').val(newRate.toFixed(2)); // Optional: Round to 2 decimal places
            }

            var wvariance = $('#cwa').val() - pRate;
            $('#wvariance').val(wvariance.toFixed(2));

            // Apply color based on the value
            if (wvariance < 0) {
                $('#wvariance').css('color', 'rgb(41, 197, 69)');
            } else if (wvariance > 0) {
                $('#wvariance').css('color', 'red');
            } else {
                $('#wvariance').css('color', 'rgb(93, 93, 93)'); // neutral or zero case
            }
        }
        else
        {
            $('#tprice').val('');
        }
    });


    $('#storeStockForm').on('submit', function (e) {
            e.preventDefault(); // Prevent the default form submission

            let formData = $(this).serialize(); // Serialize form data
            $quantity = $('#quantity').val();
            $pricePerUom = $('#pricePerUom').val();

            if($quantity == '0' || $quantity == 0 || $quantity == '' || $quantity == null || $quantity == undefined || $pricePerUom == '0' ||  $pricePerUom == 0 ||  $pricePerUom == '' ||  $pricePerUom == null ||  $pricePerUom == undefined)
            {
             alert('Validation Error Occured !'); 
             return;  
            }
            
            if($quantity < 0 || $pricePerUom < 0)
            {
             alert('Negative values are not allowed !'); 
             return;  
            }
            
            var diffResult = calculatePercentageDiff();
            var difference = diffResult.percent;
            var direction = diffResult.direction;
            var ref_no = $('#ref_no').val(); 

            let titleIcon,titleText, color;


            if (direction === 'up') {
                titleText = 'Rate Increased';
                titleIcon = '<i class="fa-solid fa-caret-up mt-2" style="color:red; font-size: 100px; margin-bottom:-20px"></i>';
                color = 'red';
            } else if (direction === 'down') {
                titleText = 'Rate Decreased';
                titleIcon = '<i class="fa-solid fa-caret-down mt-2" style="color:green; font-size: 100px; margin-bottom:-8px "></i>';
                color = 'green';
            } else {
                titleText = 'Rate Unchanged';
                titleIcon = '<i class="fa-solid fa-minus mt-2" style="color:gray; font-size: 100px; margin-bottom:-20px"></i>';
                color = 'gray';
            }

            let text = `
                <p class="mt-3">The rate difference between new and old rate for this item is 
                <strong style="font-size:18px;">${difference}%</strong>.</p>
                <br>
                <p>Do you want to proceed?</p>
            `;
    
            let fullTitle = `
                <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 0; margin: 0; line-height: 1;">
                        ${titleIcon}
                        <span style="font-size: 20px; font-weight: bold; color: ${color}; text-transform:uppercase">${titleText}</span>
                </div>
            `;
           

            


            Swal.fire({
                // title: fullTitle,
                html: fullTitle + text ,
                // icon: icon,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        url: "{{ route('inventory.store-stock.store') }}", // Your Laravel route
                        method: "POST",
                        data: formData,
                        success: function(response) {
                            if (response.success == true) {
                                showAlert('success', response.message);
                                $('#price, #quantity, #cwa, #pwa, #pricePerUom,#prev_price, #prev_price_hidden, #tprice, #pvariance, #wvariance').val('');
                                $('#packing_search, #item').val('').trigger('change');
                                $('#perUnit').text('UOM');
                                $('#avgUom').text('UOM');
                                $('#unitUom').text('UOM');
                                table.ajax.reload();

                            } else {
                                showAlert('error', response.message);
                            }

                        },
                        error: function(xhr) {
                            if (xhr.status === 422) {
                                let message = xhr.responseJSON?.message || 'Validation failed';
                                showAlert('error', message);
                            } else {
                                showAlert('error', 'An unexpected error occurred');
                            }
                        }
                    });
                }
            })
        });


        function resetForm()
        {
            $('#price, #quantity, #cwa, #pwa, #pricePerUom, #ref_no, #prev_price, #prev_price_hidden, #tprice, #plant_issuance_date').val('');
            $('#packing_search, #item').val('').trigger('change');
            table.ajax.reload();
        }
    
        function calculatePercentageDiff() {

            var packingValue = $('#packing_search').val();
            var cQuantity = parseFloat($('#quantity').val());
            var cPrice = parseFloat($('#price').val());
            var nPrice = 0;    
            
            if(packingValue == 'uom')
            {
                nPrice = cPrice / cQuantity ;
                nPrice = parseFloat(nPrice);
            }
            else
            {
                nPrice = cPrice / (cQuantity * parseFloat(packingValue));
            }

            
            var cwa = nPrice;
            // var cwa = parseFloat($('#cwa').val());
            //var pwa = $('#pwa').val() ? parseFloat($('#pwa').val()) : 0;
            var pwa = $('#prev_price').val() ? parseFloat($('#prev_price').val()) : 0;


            // Calculate absolute difference
            var absoluteDifference = Math.abs(cwa - pwa);

            // Calculate average of the two values
            // var average = (cwa + pwa) / 2;

            if(pwa == 0)
            {
                var percentageDifference = 0;
            }
            else
            {
                // Calculate percentage difference
                // var percentageDifference = (absoluteDifference / average) * 100;
                var percentageDifference = (absoluteDifference / pwa) * 100;
            }

            var direction = cwa > pwa ? 'up' : (cwa < pwa ? 'down' : 'equal');

            // Output the result
            // return percentageDifference.toFixed(2);
            return {
                percent: percentageDifference.toFixed(2),
                direction: direction
            };
        }

         function calculateUnitPrice() {

            var packingValue = $('#packing_search').val();
            var cQuantity = parseFloat($('#quantity').val());
            var cPrice = parseFloat($('#price').val());
            var nPrice = 0;    
            
            if(packingValue == 'uom')
            {
                nPrice = cPrice / cQuantity ;
                nPrice = parseFloat(nPrice);
            }
            else
            {
                nPrice = cPrice / (cQuantity * parseFloat(packingValue));
            }

            // Output the result
            return nPrice.toFixed(2);
        }

    </script>
@endsection