@extends('admin.layouts.master')
@section('title', 'Inventory Alteration')
@section('content')
       

<style>
#product-info {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 6px;
    margin-top: 10px;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-info-table {
    width: 100%;
}

.product-row input.form-control {
    border: 1px solid #699834;
    border-radius: 4px;
    height: 30px;
}
</style>

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">
            <div class="row">

                <div class="col-md-12">
                    @include('admin.includes.msg')
                    <div class="card card-table">
                        <div class="card-body">
                            <div class="card-header">
                                <h4 class="card-title">Inventory Alteration</h4>
                            </div>


                            <div class="before_mystocktable ">
                                    <div class="row">
                                        <div class="col-md-6">

                                            <div class="table-responsive">
                                                {{--<div class="product_search">
                                                    <input type="text" id="gsearch" placeholder="Search Product">
                                                </div>--}}
                                                <table class="mystocktable">
                                                    <thead>
                                                    <tr>
                                                        <th>Name of Item</th>
                                                        <th class="price_section">Price</th>
                                                        <th class="btn-section">Quantity</th>
                                                       
                                                    </tr>
                                                    </thead>
                                                </table>
                                                                                                <table id="mytable" class="mystocktable">
                                                    <tr class="tblerow">
                                                        <td colspan="3">
                                                            <select class="form-control filter-search" style="width: 100%;">
                                                                <option value="">Choose product</option>                                                        
                                                                @foreach($product as $p)
                                                                <option value="{{$p->id}}">{{$p->productName}}</option>                                                        
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                    </tr>

                                                    <tr class="tblerow">
                                                        <td colspan="3">
                                                            <div id="product-info" class="product-info-table"></div>
                                                        </td>
                                                    </tr>
                                                </table>

                                            </div>
                                        </div>
                                        @foreach($product as $p)
                                            <div id="product-data-{{$p->id}}" class="product-data" style="display:none;">
                                                <div class="product-row" style="display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 10px 0;">
                                                    <div style="flex:2;">
                                                        <strong>{{$p->productName}}</strong>
                                                        <br>(base unit : {{$p->total_base_units}})
                                                    </div>
                                                    <div style="flex:1;">
                                                        <span style="color:red; text-decoration: line-through; margin-right:5px;">₹{{ number_format($p->compareAtPrice,2) }}</span>
                                                        <span style="font-weight:bold;">₹{{ number_format($p->price,2) }}</span>
                                                    </div>
                                                    <div style="flex:2; display:flex;justify-content: center;">
                                                        <input type="number" placeholder="quantity" class="form-control qty_{{$p->id}}" style="width:100px; margin-right:5px;">
                                                        <button class="btn btn-success btn-sm" onclick="convertstock({{$current_user->id}},{{$p->id}},{{$p->stock}})">
                                                            {{$p->stock}} ADD
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                        <div class="col-md-6 cart">
                                            
                                        <form action="#" method="post">
                                            @csrf
                                            <input type="hidden" name="user_id" value="{{$current_user->id}}">
                                            <table class="mystocktable">
                                                <thead>
                                                <tr>
                                                    <th>Name of Item</th>
                                                    <th>Price</th>
                                                    <th>Quantity</th>
                                        <!--            <th>Total</th>
                                                    <th>Action</th>-->
                                                </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="display:none">
                                                        <td colspan="5">                
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </form>



                                        </div>

                                    </div>

                            </div>
                            
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- /Main Wrapper -->
    </div>
    <script>
        @if(isset($current_user->id))

        function convertstock(user_id, product_id, stock) {
            //alert(user_id+"===="+product_id+"===="+stock);
            var qty=$(".qty_"+product_id).val();
            if (qty <= 0 || qty > stock) {
                return false;
            }
            $.get("/fetchvarient/" + user_id + "/" + product_id+ "/"+qty, function (res) {
                $(".cart").html(res);
            }) 
        }
        @endif
    </script>

    <SCRIPT language=Javascript>
        <!--
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
                && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }

        //-->
    </SCRIPT>
    <script>
        $(document).ready(function () {
            $("#gsearch").on("keyup blur", function () {
                var value = $(this).val().toLowerCase();
                $("#mytable tbody > .tblerow").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>

    {{--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>--}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.filter-search').select2({
                    placeholder: "Choose product", // optional: makes placeholder appear in Select2 input
                    allowClear: true
            }).val('').trigger('change');

            $('.filter-search').on('select2:select', function (e) {
                const selectedProductId = e.params.data.id;
                const infoContainer = document.getElementById('product-info');

                infoContainer.style.opacity = 0;

                setTimeout(() => {
                    infoContainer.style.display = 'none';
                    infoContainer.innerHTML = '';

                    if (selectedProductId) {
                        const dataDiv = document.getElementById('product-data-' + selectedProductId);
                        if (dataDiv) {
                            infoContainer.innerHTML = dataDiv.innerHTML;
                        } else {
                            infoContainer.innerHTML = '<em>Product details not found.</em>';
                        }

                        infoContainer.style.display = 'block';
                        setTimeout(() => {
                            infoContainer.style.opacity = 1;
                        }, 10);
                    }
                }, 200);
            });
        });

    </script>

@endsection